The following code works for me:
Add the following to Design > Custom CSS.
* {
cursor: none;
}
.cursor {
--size: 30px;
height: var( --size );
width: var( --size );
border-radius: 50%;
pointer-events: none;
position: fixed;
transform: translate( -50%, -50% );
z-index: 99999999999;
}
.cursor.cursor-dot {
background: #ffffff; /* This defines the color of the cursor */
mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */
transition: width 0.3s, height 0.3s, background-color 0.3s;
transition-timing-function: ease-out;
}
.cursor-dot.active {
--size: 50px;
background-color: #ffffff;
}
Add the following to Settings > Advanced > Code Injection > HEADER.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Add the following to Settings > Advanced > Code Injection > FOOTER.