Did you know you can use an emoji as the cursor?
Place the cursor in the CodePen window below to try it out:
See the Pen Untitled by Carol-Theodor Pelu (@Tynael) on CodePen.
🎥 If you want a video explanation of the code:
How does it work?
I’m making use of the cursor property on the body element and I’m embedding an SVG image with a text element positioned at coordinate y='50'.
The emoji needs to be added as the content of the <text></text> element.
Please note that the emoji is not exactly at the cursor position, and therefore you may have difficulty using it in a real scenario to select or click on elements.
But surely, it’s a funny thing, and who knows, maybe you’ll even find a use for it.
Leave a comment below and let me know in what scenario you would use an emoji as a cursor.
Happy coding 🥳
Let me know what you think about this article in the comments section below.
If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.