CSS for following mouse cursor

Hi, 

I wonder how to make a mouse cursor like this?

http://www.gabbyguenther.com/

I want to change my mouse cursor, but not image url. I am still new to coding and squarespace. 

I would appreciate if anyone can help!!

They used this code (Add to Home > Settings > Advanced > Code injection > Header)

<style>
  @media (hover: none) {.cursor {display:none !important;}}
* {
    cursor: none;
  --cursorcolors: #d9a74a;
}
.cursor {
    --size: 8px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cursor.cursor-ring {
    background-color: transparent;
    border: 2px solid var(--cursorcolors);
    --size: 36px;
    transition: top .2s, left .2s,
                width .2s, height .2s,
                background-color .2s, border-color 0.2s;
    transition-timing-function: ease-out;
}
.cursor.cursor-bull {
    background: var(--cursorcolors);
    transition: width .2s, height .2s;
}
.cursor-ring.active {
    --size: 42px;
    border-color: var(--cursorcolors);
    background-color: var(--cursorcolors);
}
.cursor-bull.active {
      --size: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(window).mousemove(function(e) {     
        $(".cursor").css({
            left: e.pageX,
            top: e.pageY
        })    
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseenter", function() {   
    $('.cursor').addClass("active")   
    })  
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseleave", function() {    
    $('.cursor').removeClass("active")    
    })
    });
  </script>

On 9/21/2020 at 9:50 AM, tuanphan said:

They used this code (Add to Home > Settings > Advanced > Code injection > Header)

<style>
  @media (hover: none) {.cursor {display:none !important;}}
* {
    cursor: none;
  --cursorcolors: #d9a74a;
}
.cursor {
    --size: 8px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 99999999999;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cursor.cursor-ring {
    background-color: transparent;
    border: 2px solid var(--cursorcolors);
    --size: 36px;
    transition: top .2s, left .2s,
                width .2s, height .2s,
                background-color .2s, border-color 0.2s;
    transition-timing-function: ease-out;
}
.cursor.cursor-bull {
    background: var(--cursorcolors);
    transition: width .2s, height .2s;
}
.cursor-ring.active {
    --size: 42px;
    border-color: var(--cursorcolors);
    background-color: var(--cursorcolors);
}
.cursor-bull.active {
      --size: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(window).mousemove(function(e) {     
        $(".cursor").css({
            left: e.pageX,
            top: e.pageY
        })    
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseenter", function() {   
    $('.cursor').addClass("active")   
    })  
    });
    $(window).mousemove(function(e) {
      $("a")
    .on("mouseleave", function() {    
    $('.cursor').removeClass("active")    
    })
    });
  </script>

 

@tuanphan Is there a way to lock this effect to the cursor on scroll? I have it coded in correctly, but the effect gets left behind when I scroll. How do I fix this? www.pollenmedialab.com

Thank you!