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.
A few minutes later, here’s the end result. Enjoy!