I've built a simple tool that generates the CSS required to use emojis as cursors.
Doesn't this exist already?
Sort of. Other solutions currently out there are either using:
- Pre-generated image files, or
- 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:
Top comments (10)
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!
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:
Use this:
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':
Hope that helps!
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?
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.
oh right I see, I'm using Semplice, a template for wordpress.
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.
If there was a way to concatenate
attr(data-title)into the<text>element, this would make for a superb tooltip system ๐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.
Neat trick!
This is amazing ! I love it ! Many thanks !