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:
https://github.com/kylekelly/emoji-cursor