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!
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.
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 ????