How to Make an SVG Lava Lamp
codepen.io
codepen.io
"The infamous 'goo' effect is a Gaussian blur filter whose alpha contrast is boosted right up using a ColorMatrix filter (I'm not going to go into too much detail with the goo effect as it's somewhat outside the scope of this, plus it's a bit boring)."
Wait... no, I'm interested in how the gaussian blur and the colormatrix work together! How did you figure out the parameters? What other effects could this accomplish?
But apparently that bit - the bit that makes this look like a lava lamp not just a picture - is boring?
As far as I understand, it uses a combination of Gaussian blur, which gives the soft, fluid texture, and a clipping path which gives well-defined edges. Once two drops of goo touch, they start to visibly 'meld' due to the blur.
You can see this easily by deleting those two parts of the pen (This is one of the great things about codepen, if it weren't for this, I would have phrased this much less confidently)
Could the animating javascript loop be redone using SVG animations?
My understanding is that SVG animation (SMIL) support isn't great, and it doesn't look to be getting any better.
I remember reading somewhere that even the browsers that do support it don't like it, for whatever reason (but I could be wrong about this, I'm having trouble finding where I read that again, and only vaguely remember it in the first place)