Custom cursor is pixelated / won't upload

Hello! I'm trying to upload a custom cursor to my site. I'm exporting the image from Figma. When I upload one that's 30x30 (exported normally), it's super pixelated. When I upload one that's 30x30 (exported with 4x), it just doesn't work. I'm guessing it's because the image might be too big? The image is a simple circle, so I'm not sure why it's coming out pixelated. Any help would be appreciated, thank you!

Here's the code I'm using:

body {

margin: 0;

height: 100vh;

cursor: url(https://static1.squarespace.com/static/64bdf71a6c7d8b6e3c802b1b/t/658f6c9171c3500ca0998875/1703898257479/Ellipse+3413.png), auto;

}

You try using svg file

It won't let me upload an svg 😞 How do I get the link?

Thank you for your help, tuanphan!! Really appreciate it 🙂 However, I'm running into another error 😞

I want to make my SVG cursor a small circle, but no matter what size I make it, it always defaults back to 30x30px.

Here's what it looks like when I export it as 10x10, and here's what it loos like when I export it as 30x30. It's the same! I tried putting a transparent circle behind and making the actual orange circle smaller, but it still doesn't work. Any help would be very appreciated, thank you!

Jk it worked - thank you so much!

@tuanphan This doesn't seem to work for me. I'm trying to add the svg file to the hover effect. Here's the code that I'm using. Any advice?

body {
margin: 0;
height: 100vh;
}
 a:hover{
cursor: url(https://mouse-giraffe-2zm7.squarespace.com/s/custom-cursor.svg), auto;
}

On 2/5/2024 at 9:27 PM, pdaultdesign said:

@tuanphan This doesn't seem to work for me. I'm trying to add the svg file to the hover effect. Here's the code that I'm using. Any advice?

body {
margin: 0;
height: 100vh;
}
 a:hover{
cursor: url(https://mouse-giraffe-2zm7.squarespace.com/s/custom-cursor.svg), auto;
}

What is your site url? I can test this code easier

Thanks @tuanphan, the site URL is https://mouse-giraffe-2zm7.squarespace.com

Password is grapevine

@tuanphan Any idea how to solve this one?

Hi there, does anyone know what CSS I would use to add a .svg file as a custom cursor?

I've tried this code but it doesn't work:
body {
margin: 0;
height: 100vh;
cursor: url(https://mouse-giraffe-2zm7.squarespace.com/s/custom-cursor.svg), auto;
}

I've uploaded the file to Squarespace with the file name being 'custom-cursor.svg'

Any help is greatly appreciated!

Site URL is https://mouse-giraffe-2zm7.squarespace.com
Password: grapevine

Delete your cursor {} rule for the body and use the following instead 

html {
    cursor: url(https://mouse-giraffe-2zm7.squarespace.com/s/custom-cursor.svg), pointer;
}

@colin.irwin I'm afraid that didn't work. Nothing happens. Any other ideas?

Nevermind @colin.irwinI got it. I never tried a PNG larger than 30px because I read that it wouldn't work, but it does.

Here's the code I used:

 a:hover{

cursor: url(https://static1.squarespace.com/static/6593030a39067977655d1eca/t/65cbbba78e440d1ff8b1f66c/1707850663451/custom-cursor-70.png), auto;

}

Anyone who's looking to do it can just put this code in Custom CSS section and replace the URL with a file that they upload.

Got it! PNG file larger than 30px does in fact work.