How to create a circle that follows a cursor using JavaScript and CSS?

In some dark theme mode a large cursor really helps identifying different elements on a page.

You can also differentiate the element with a different color when the cursor is on a specific element, which you can do that with a normal cursor too. The end goal is to widen the cursor area.

Let’s dive into it.

HTML

A simple div element is sufficient.

<div class='cursor' id="cursor"></div>

CSS

Pay attention to mix-blend-mode property. The value is set to difference which is helpful for dark and light both mode.

.cursor {
  position: fixed;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  mix-blend-mode: difference;
  background-color: white;
  z-index: 10000;
  border: 2px solid white;
  height: 30px;
  width: 30px;
  transition: all 300ms ease-out;
}

JavaScript

Now, lets add an event listener on body itself that will keep track of the cursor position and based on that, it’ll adjust the circle’s position.

var cursor = document.getElementById("cursor");
document.body.addEventListener("mousemove", function(e) {
  cursor.style.left = e.clientX + "px",
    cursor.style.top = e.clientY + "px";
});

Demo

Share this post