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
Top comments (4)
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...
Seems like the svg can be simplify to
Nice tip Alvaro!
Thank you Sébastien 😁