Here’s a little trick I found online – conveniently enough in a css-tricks.com article – to easily translate the current mouse position into CSS variable values. The neat part is that the JS is very light and completely agnostic, it just hooks into the mousemove event and blurbs values into some CSS variables, that’s it. However, by doing so, it unlocks a vast array of interactive styling effects.
So one can use this technique to do all kind of crazy things, but I thought I’d start small, just to see how it works. Not too small though. One other thing I wanted to play with for some time was a clipping mask via clip-path. There are quite a few ways in which you can cut out different shapes in web pages as if they were made of paper, but that’s a story for another article.
For this example I went for the most complex shape, an SVG path. Luckily there’s a very good article on how it all works.
Next steps were to pick a free SVG path (well, that’s an .ai file but it’s easy to convert to svg), run it through SvgOmg and then tweak it in my favorite SVG path tool.
A few minutes later, here’s the end result. Enjoy!
