[custom cursor] use image for cursor #cursor

customcursor.css

body:not(.is-touch) * {
  cursor: url(https://uploads-ssl.webflow.com/5c290f904fdbba7493c2f04c/5c4ddff0a29a8f44aeefbb66_reddot.png) 3 3, auto;
  cursor: -webkit-image-set(url(https://uploads-ssl.webflow.com/5c290f904fdbba7493c2f04c/5c4ddff0a29a8f44aeefbb66_reddot.png) 1x, url(https://uploads-ssl.webflow.com/5c290f904fdbba7493c2f04c/5c4de00da29a8f4533efbb6f_reddotx2.png) 2x) 3 3, auto;
}

body:not(.is-touch) .cursor-mask,
body:not(.is-touch) .cursor-mask__inner {
  z-index: 1100;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

body:not(.is-touch) .cursor-mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  margin: 0;
  pointer-events: none;
}

body:not(.is-touch)  .cursor-mask__inner {
  background: red;
  background: hsla(0, 0%, 100%, .1);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
  border-radius: 50%;
  opacity: 1;
  height: 50px;
  width: 50px;
  margin-top: -25px;
  margin-left: -25px;
  -webkit-transform: translateZ(0) scale(1);
  transform: translateZ(0) scale(1);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: opacity .5s ease-out .5s, -webkit-transform .5s cubic-bezier(.07, .08, .16, .99);
  transition: opacity .5s ease-out .5s, -webkit-transform .5s cubic-bezier(.07, .08, .16, .99);
  transition: transform .5s cubic-bezier(.07, .08, .16, .99), opacity .5s ease-out .5s;
  transition: transform .5s cubic-bezier(.07, .08, .16, .99), opacity .5s ease-out .5s, -webkit-transform .5s cubic-bezier(.07, .08, .16, .99);
}

body:not(.is-touch) .cursor-mask__inner.hover {
  -webkit-transform: translateZ(0) scale(2.5);
  transform: translateZ(0) scale(2.5);
}

customcursor.html

<div id="circle" class="cursor-mask"><div id="circleInner" class="cursor-mask__inner"></div></div>

customcursor.js

  jQuery(document).ready(function($) {
    // set the variables
    var timer;
    var mouseX = 0,
      mouseY = 0;
    var xp = 0,
      yp = 0;
    var circle = $("#circle");
    var circleInner = $("#circleInner");

    function mouseStopped() {
      // if mouse stop moving remove class moving 
      // it will hide the circle with opacity transition                           
      circle.removeClass('moving');
    }
    $(document).mousemove(function(e) {
      // if mouse start moving add class moving
      // it will show the circle with opacity transition 
      circle.addClass('moving');
      // get the mouse position minus 25px to center the circle
      // mouseX = e.pageX - 25;
      // mouseY = e.pageY - 25;
      mouseX = e.pageX;
      mouseY = e.pageY;
      // if mouse stop moving clear timer and call mouseStopped function
      clearTimeout(timer);
      timer = setTimeout(mouseStopped, 3000);
    });
    $('a').hover(function() {
      $(circleInner).addClass('hover');
    }, function() {
      $(circleInner).removeClass('hover');
    });
    // set the momentum with setInterval function
    var loop = setInterval(function() {
      // change 12 to alter damping higher is slower
      xp += ((mouseX - xp) / 6);
      yp += ((mouseY - yp) / 6);
      circle.css({
        left: xp + 'px',
        top: yp + 'px'
      }); // 
    }, 30);
  });