Preview:
#cursor {

  position: fixed;

  z-index: 9;

  left: 0;

  top: 0;

  pointer-events: none;

/*   will-change: transform; */

/*   mix-blend-mode: difference; */
9
}

​

@media (hover: hover) and (pointer: fine) {

  .cursor__circle {

    width: 64px;

    height: 64px;

    margin-top: -50%;

    margin-left: -50%;

    border-radius: 50%;

    border: solid 1px rgba(227, 222, 3, 0.64);
19
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),

      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter