Animated Cursor

* {
  cursor: none;
}
#mouse-pointer {
  position: fixed;
  left: -50px;
  top: -50px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid #bbbbbb;
  z-index: 99;
  pointer-events: none;
}

#center-point {
  display: block;
  width: 6px;
  height: 6px;
  background-color: rgb(101, 101, 101);
  border-radius: 6px;
  position: fixed;
  top: calc(50% - 3px);
  left: calc(50% - 3px);
  transition: transform 100ms linear;
  z-index: 99;
}

const pointer = document.createElement("DIV");
pointer.id = "mouse-pointer";
const centerPointer = document.createElement("DIV");
centerPointer.id = "center-point";
document.body.appendChild(pointer);
document.body.appendChild(centerPointer);

document.onmousemove = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.left = event.clientX - 2 + "px";
    centerPointer.style.top = event.clientY - 2 + "px";
  });
  setTimeout(() => {
    requestAnimationFrame(() => {
      pointer.style.left = event.clientX - 25 + "px";
      pointer.style.top = event.clientY - 25 + "px";
    });
  }, 100);
};

document.onmousedown = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.transform = "scale(1.3)";
  });
};

document.onmouseup = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.transform = "scale(1)";
  });
};