Pure CSS & SVG text cursor

Hello friends 👋,

I just made this little tutorial on how to have a custom cursor with text on hover using only CSS and SVG with zero javascript.

You can customize to your liking.

Check it out:

Youtube: https://www.youtube.com/watch?v=7FYyJxLQgvI
Codepen: https://codepen.io/astrit/pen/QWbZgpR

CSS

.card {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40'><rect rx='20' width='100%' height='100%' fill='teal' /><text x='50%' y='50%' font-family='sans-serif' font-weight='bold' font-size='14' dominant-baseline='middle' text-anchor='middle' fill='white'>Hello Card</text></svg>") 16 0, auto;
  transform: scale(4);
}