DEV Community

loading...

Use emojis as cursors

kyleakelly profile image Kyle Kelly Originally published at kylekelly.com Updated on ・1 min read

I've built a simple tool that generates the CSS required to use emojis as cursors.

https://www.emojicursor.app/

Doesn't this exist already?

Sort of. Other solutions currently out there are either using:

  1. Pre-generated image files, or
  2. Using JavaScript with canvas to generate the images on the fly

There are pros and cons to both.

Pre-generated image files are the most consistent and have the largest cross browser support, but they require more preparation a head of time to create the image files and the emoji style used may not be consistent with the users system and familiarity.

Using JavaScript and canvas is a way to use the installed system emojis, but does require JavaScript to run before the cursors are available.

What's the new technique?

The key difference with this technique is using SVG, and treating the emojis as text. By using inline SVG in the cursor url property we can use the system emoji style, and not have an external image or JavaScript dependancies. Additionally it is trivial to wrap this in less or sass to generate different emoji cursors, or adjust the parameters.

The largest downside to this technique is lack of browser support. No IE or Edge.

Git repo

The code is MIT licensed and available here:

https://github.com/kylekelly/emoji-cursor

Discussion (10)

pic
Editor guide
Collapse
s_bulia profile image
GV

Hi! Thanks so much for this, it works very well!
I just have one question - it would be so great if you could help!

is there a way to change the pointer cursor, rather than the cursor?
I'd like to have a regular cursor when browsing and then when hovering get an emoji?

Thank you!

Collapse
kyleakelly profile image
Kyle Kelly Author

Hi GV,

I'm glad it's working well for you!

That definitely can be done. What you'll want to do is wrap the cursor css in with a hover.

For example, instead of placing the cursor code in the body like this:

body {
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😀</text></svg>") 16 0,auto; 
}

Use this:

a:hover {
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😀</text></svg>") 16 0,auto; 
}

You could also make it more specific, like if you only wanted it to work on hovered links in one particular div with a class called 'emoji':

.emoji a:hover {
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😀</text></svg>") 16 0,auto; 
}

Hope that helps!

Collapse
s_bulia profile image
GV

Thank you so much!!! it works in the preview, although when I try to publish it tells me that "Markup is not allowed in CSS." - I wonder if I'm putting this code in the right section, at the moment I'm inserting it in the Css?

Thread Thread
kyleakelly profile image
Kyle Kelly Author

Is this with WordPress or Squarespace, or something different? Each have their unique quirks, and it's also possible it's not doable with the system you're using.

Thread Thread
s_bulia profile image
GV

oh right I see, I'm using Semplice, a template for wordpress.

Thread Thread
kyleakelly profile image
Kyle Kelly Author

I haven't used that particular theme, but if you go to Appearance -> Customize, once that loads at the bottom of the left bar there should be an 'Additional CSS' option. Place the cursor css in there, and that should work.

Collapse
markbloomfield profile image
Markus

If there was a way to concatenate attr(data-title) into the <text> element, this would make for a superb tooltip system 👍

Collapse
kyleakelly profile image
Kyle Kelly Author

Agreed, that could be a fun idea. Unfortunately right now allowed cursor image sizes are capped at 128*128px.

In my testing I could only fit a few characters, but I'd love to see someone take this and see if it's really possible.

Collapse
math2001 profile image
Collapse
phild profile image
phild

This is amazing ! I love it ! Many thanks !