Preview:
//HTML
 <div class="cursors">
    <div></div>
 </div>

//CSS style the element
/* Style the cursor */
.cursors div {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background: url('imgs/home/bub.svg') no-repeat center/ cover;
  border-radius: 50%;
  z-index: 10000;
  /* Prevent from getting in the way when links are clicked */
  pointer-events: none;
  /* Move the ball to the center of the cursor */
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.3s;
}

//Javascript

// CURSOR
const cursor = document.querySelector('.cursors');
const circle = cursor.querySelector('div');
const elementsWitoutCursor = document.querySelectorAll('.hide-cursor');

//Animate cursor
let aimX = 0;
let aimY = 0;

let currentX = 0;
let currentY = 0;
let speed = 0.2;
const animate = () => {
  currentX += (aimX - currentX) * speed;
  currentY += (aimY - currentY) * speed;
  circle.style.left = currentX + 'px';
  circle.style.top = currentY + 'px';

  requestAnimationFrame(animate);
};

animate();

document.addEventListener('mousemove', (event) => {
  aimX = event.pageX;
  aimY = event.pageY;
});

//hide the cursor when hovering over elements with a specific class
elementsWitoutCursor.forEach((element) => {
  element.addEventListener('mouseover', () => {
    circle.classList.add('invisible');
  });
  element.addEventListener('mouseout', () => {
    circle.classList.remove('invisible');
  });
});
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