Use emojis as cursors

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

Comments

[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!

[Kyle Kelly]

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!

[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?

[Kyle Kelly]

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.

[GV]

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

[Kyle Kelly]

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.

[Markus]

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

[Kyle Kelly]

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.

[Mathieu PATUREL]

Neat trick!

[phild]

This is amazing ! I love it ! Many thanks !