DEV Community

Cover image for Create a Modern Circular Cursor for Your Website.
Matthew Marquise
Matthew Marquise

Posted on • Updated on

Create a Modern Circular Cursor for Your Website.

Have you ever seen those modern websites with custom cursors? Most are circular and really add a unique touch to the sites.

Here are a couple examples of sites that use a circular cursor:

Each of those sites have there own unique version of a circular cursor, and there are countless other websites out there with similar, circular cursors.

When I first began to see this trend, I certainly wanted to give it a shot but wasn't sure how hard or easy it would be. Believe it or not, it's very simple. So this tutorial I not only want to show you how to make a few types of circular cursors, I also want to explain how it works. Let's begin.

Table of Contents:

Basic Circular Cursor:

Step 1:

Start by creating a basic html webpage to test with.
Create an index.html file a fill it with the below code.

<!-- index.html -->

<head>
  <title>Circular Cursor Tutorial</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">

  <link rel="stylesheet" href="main.css">

  <script src="main.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
  <h1>
    Hello!
  </h1>
  <p>This is a simple, circular cursor that is easy to implement and will truly make your website stand out.</p>
</body>
Enter fullscreen mode Exit fullscreen mode

In the head section you'll notice I've included basic meta tags, as well as an included script for jQuery UI that's being sourced from Google Hosted Libraries. I also linked a CSS and JS file we'll create next.

Step 2:

Now that we have a general base to build on, let's begin adding the code to make it function properly.

Create a CSS file titled main.css and for the entire html file set the property of the cursor to none.

/* main.css */

html {
  cursor: none;
}
Enter fullscreen mode Exit fullscreen mode

You should now see that your cursor vanishes. Now that we've hidden the default cursor, we need to begin adding our custom cursor.

#circularcursor {
  background-color: transparent;
  border:1px solid black;    
  height:20px;
  width:20px;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  position: absolute;
  z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

This CSS creates the circle we want. You should notice that your new circular cursor is stuck in the top left corner of the webpage. In order to attach it to the now invisible default cursor we need a little javascript.

Once you've added the CSS, create a javascript file titled main.js. Add the following code:

// main.js

document.body.onmousemove = function(e) {
  document.documentElement.style.setProperty (
    '--x', (
      e.clientX+window.scrollX
    )
    + 'px'
  );
  document.documentElement.style.setProperty (
    '--y', (
      e.clientY+window.scrollY
    ) 
    + 'px'
  );
}
Enter fullscreen mode Exit fullscreen mode

In simple terms, this javascript function is just mapping the mouse. If you leave this javascript out, the webpage will have no way of mapping the cursor therefore your cursor will stay in the corner.

You should now have this:

Now that you understand the basics of how to create a custom cursor, let's create a more complex one.

Circular, Inverted Cursor:

Creating a circular, inverted cursor is also very easy.

Step 1:

Start with a basic html file:

<head>
  <title>Inverted Circular Cursor</title>

</head>
<body align="center">
  <div id="invertedcursor"></div>

  <h1>This Cursor is Inverted!</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat elementum risus vitae volutpat. Donec luctus tellus ut ligula tempus semper. Pellentesque ac semper mauris, quis varius purus. Quisque sit amet imperdiet lorem, eget vulputate ante. Suspendisse potenti. Fusce a magna ultrices, aliquet ligula a, pellentesque est. Phasellus non luctus magna.
  </p> 
</body>
Enter fullscreen mode Exit fullscreen mode

Step 2:

Create a CSS file titled main.css. Add a body selector and make sure to set the cursor to none. Follow it with an id titled invertedcursor.

/* main.css */

body {
  height: 100%;
  min-height: 100%;
  cursor: none;
  color: #000;
  background-color: #fff;
}

#invertedcursor {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  top: var(--y, 0);
  left: var(--x, 0);
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: difference;
  transition: transform .2s;
}
Enter fullscreen mode Exit fullscreen mode

The CSS code within, simply determines what the background and text colors also mixing the coloration with the mix-blend-mode. For more info about mix-blend-mode visit: W3Schools.com - CSS mix-blend-mode Property.

Step 3:

Lastly, let's add the necessary JS in a file titled main.js.

// main.js
document.body.onmousemove = function(e) {
  document.documentElement.style.setProperty (
    '--x', (
      e.clientX+window.scrollX
    )
    + 'px'
  );
  document.documentElement.style.setProperty (
    '--y', (
      e.clientY+window.scrollY
    ) 
    + 'px'
  );
}
Enter fullscreen mode Exit fullscreen mode

This JS code simply maps where the cursor is based on a X and Y axis.

You should now have this:

So those are two great examples of custom circular cursors you can easily implement in your website! Feel free to ask any questions or suggest better ways to achieve this in the comments!

Thanks for reading!

Top comments (5)

Collapse
 
sidcraftscode profile image
sid

Great work! One side note is that users on mobile don't want to see a cursor. I am currently reading this article on my phone and it feels a bit weird to have a cursor. But anyways - great work!

Collapse
 
cchana profile image
Charanjit Chana

To be honest I’ve never really been a fan of these but really interesting to see how it’s implemented. I expected a lot more code than that!

Collapse
 
mattmarquise profile image
Matthew Marquise

That's fair. But yes, I was thinking the same. Certainly not anywhere near as hard as I thought. And thanks for reading Charanjit!

Collapse
 
iiwi_silva_e33c34ff3743 profile image
`I`iwi Silva

:|

Collapse
 
sabareesh profile image
Sabareesh T

Really good work ! But I have a question though what is this really useful for , Is it useful or just a fancy cursor ( Just wanna know the reason for this new trend not hating )