Custom circle cursor with hover state where the circle is filled CSS HTML JAVASCRIPT

I’m looking to recreate the cursor like they have on this website:

https://andwalsh.com/

They have a cursor which is a circle outline and then when it’s hovering over links the circle is solid.

I’d like to recreate this cursor on my own website using HTML/CSS/Javascript and for it to only show up on desktop (not touchscreens).

>Solution :

They are using cursor css property

body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23000000" width="20px" height="20px" viewBox="0 0 10.04 10.04"><circle cx="5.02" cy="5.02" r="4.52"/></svg>') 10 10, auto;
  height: 100vh;
}

a {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23000000" fill="%23000000" width="20px" height="20px" viewBox="0 0 10.04 10.04"><circle cx="5.02" cy="5.02" r="4.52"/></svg>') 10 10, auto;
}
<a href="#">some link</a>

Leave a Reply