Use custom Emoji as a cursor using CSS 😜.

So lately I have been impressively busy to get my head around and write a complete article 😂 but I found a funny solution while wasting the time I don't have on twitter and I wanted to share it with you.

Using plain CSS you can set the cursor using the property cursor https://developer.mozilla.org/es/docs/Web/CSS/cursor, normally you'll set values like pointer for links and clickable components, progress to indicate a loading state.

This was a pretty trendy long time ago in those awesome '90s websites, but if you want to give it a funny stroke to your site you can use cursor: url();. For this, we will use SVG as with data URIs just. like this:

<img src="'data:image/svg+xml;utf8,<svg ... > ... </svg>'" />

If we add the emoji (of course I will use the unicorn one 🦄 for the example) inside of the svg tag, it will render it as the cursor pointer. So you will end with something pretty similar:

.unicorn-cursor {
  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;
}

Here is the result so you guys can check it out and play

That's all folks

Comments

[Adriel Werlich]

nice... I also like to dance when the stuff works... hahaha... my question is: how far can we push web technologies? I´m mean, it offers the most of computational resources available in modern data processing? Or still there are some other plataform that exceeds it? In other words, is the web plataform/stack the topmost category of available resources, or still there is some other (unknow to me) plataform that exceeds it? I question this, because, we see many web developers, front-end and back-end engineers coming up with such nicetees of creativity like this one, so chiling... anyways, just sharing some random thoughts... perhaps someone can take it for some production...

[Huybn]

Seems like the svg can be simplify to

url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size: 24px'><text y='20'>🦄</text></svg>"), auto

[Sébastien Chopin]

Nice tip Alvaro!

[Alvaro Saburido]

Thank you Sébastien 😁