DEV Community

Cover image for Creating a modern animated cursor for your website
Sridhar Murali
Sridhar Murali

Posted on

Creating a modern animated cursor for your website

In this article, we'll learn how to create a simple yet engaging effect where a circle follows the mouse cursor on a web page. This effect can be used to add interactivity and visual appeal to your website. We'll achieve this using HTML, CSS, and JavaScript.

Step 1: Setting Up the basic HTML Structure

<title>Random HTML Content</title>
  <div id="circleId" class="circle"></div>
  <h1>Random HTML Content</h1>
  <div class="random">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum magna id quam mollis, eu porttitor dolor hendrerit. Curabitur vestibulum, neque id molestie blandit, nisl orci hendrerit ligula, et tristique risus odio nec metus. Nulla facilisi.</p>
    <p>Phasellus eget mi vel mauris luctus lacinia. Donec eget interdum eros. Fusce in est enim. Vivamus et enim vehicula, ultricies felis sit amet, bibendum nunc. Donec eget tristique mi.</p>
    <p>Suspendisse potenti. Nulla facilisi. Vivamus eu justo vel odio faucibus facilisis. Morbi tempus arcu sit amet libero rutrum dictum. Nam id justo sed felis auctor lacinia. Sed nec mauris nec tellus scelerisque interdum.</p>
    <p>Nunc dignissim lorem ac libero rutrum, a fermentum arcu convallis. Nullam sed justo in ligula iaculis ultrices. Suspendisse luctus justo eget arcu dapibus, et blandit libero ultricies. In vulputate leo vel elit ultricies ultricies.</p>

Enter fullscreen mode Exit fullscreen mode

Step 2: Styling the Circle with CSS
Now, let's style our circle to make it visually appealing.

.circle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
  pointer-events: none;
Enter fullscreen mode Exit fullscreen mode


  1. We position the circle in the center of the viewport using absolute positioning and transform: translate(-50%, -50%)
  2. The circle has a width and height of 50 pixels and a border-radius of 50% to make it round.
  3. We set pointer-events: none; to ensure that the circle does not interfere with mouse interactions with other elements.

Step 3: Adding JavaScript Functionality
Next, let's add JavaScript code to make the circle follow the mouse cursor.

const circle = document.getElementById('circle');
document.addEventListener('mousemove', (e) => { = `${e.clientX}px`; = `${e.clientY}px`;
Enter fullscreen mode Exit fullscreen mode

We select the circle element using its ID circle.
We add a mousemove event listener to the document.
Inside the event listener, we update the left and top CSS properties of the circle element to match the current mouse cursor position.

Another tip:
To hide your cursor completely add this line to the circle class.

cursor: none;
Enter fullscreen mode Exit fullscreen mode

Congratulations! You've successfully created an animated circle that follows the mouse cursor. You can further customize the appearance and behaviour of the circle to fit your project's requirements. Experiment with different sizes, colors, and animation effects to make it unique!

Here's a codepen link to see it in action:

Top comments (0)