From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
The other day I visited Lorenzo Dal Dasso’s fantastic website and had a lot of fun with the cool cursor effect! Of course I had to try it out and see what crazy stuff I could do with this and after having a peek under the hood, I saw that the wonderful duo @ETStudio5 who made the site used SVG filters and a CSS blend mode. Off we go, let’s have some fun with variations!
Edit: Thomas Aufresne pointed out that the effect was first made by the Lama Lama team on their website! Check it out, it’s an amazing design. Thanks, Thomas, for letting me know!
Lucas Bebber experimented a lot with this kind of gooey effect using SVG filters and you can read about it in the article Creative Gooey Effects.
SVG Filter
The idea is simple: create lots of boxes on the page and when we hover with the cursor, show them. Also apply a nice SVG gooey filter to them. The CSS blend mode adds some extra jazz!
<div class="cursor">
<div class="cursor__inner">
<!-- cursor__inner-box elements come here -->
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="3.2" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -7" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>
</svg>
</div> We dynamically add tiny boxes within a grid layout, depending on how much space is available.
Changing the filter and blend mode creates lovely variations that you can adjust to fit your design.
There’s a little easter egg when you click 🙂
Check out the example demos to see some possibilities!
Here’s number one:
And another one with a different look and feel:
And another one with a circle effect:
And another one with a strong shadow:
I really hope you enjoyed this effect!
P.S. Firefox doesn’t play along nicely, so we just show the box fallback without the filter, not bad either 🙂
If you like these kind of experiments, follow us on Twitter and Instagram. Thanks for checking by!
Help spreading the word:
