A journey into the world of animated SVGs

I was recently reading the Vue documentation and came across a mention of Pinia , a library for state management. And when I clicked on the link, this library won me over thanks to its creative logo. It would seem like this is just a documentation site, where all you need to post is code descriptions and examples. So, it was a surprise to me when Pinia started following my cursor. I even forgot my original goal and simply started searching for all her reactions. Such attention to detail certainly deserves praise. This cheerful character blinks, opens its mouth when hovering and follows the cursor with its eyes - in other words, it is interactive and seems to be alive. And I wondered - how is it implemented under the hood? And how would I implement the same thing? Pinia Alchemy The logo is designed as a separate Vue component , inside which all the magic happens. The component uses the full power of the Vue ecosystem, as can be seen from the imports import { computed , nextTick , onMoun