Something very peculiar about the things this article dwells on and the things it chooses to skim. There's a lot of detail about the process of moving assets from Illustrator into an SVG file, but the clever bits seem to be almost glossed over. It literally says, for example,
"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?
Here's further reading on the effect. I didn't include it because this combination of effects (goo) has been around for a while now and it's boring regurgitating the same explanation over and over. http://tympanus.net/codrops/2015/03/10/creative-gooey-effect...
Everything looked sort of obvious except the fluidity of the goo inside. The trick used to achieve the latter is quite neat!
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.
The clipping path was to ensure that the goo stayed inside the lava lamp -- the well-defined edges were the result of the color matrix.
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)
Yes, and to be perfectly clear, the color matrix is all identity except for the alpha row [0 0 0 21 -9]. This is stretching the alpha range so that many of the semi-transparent areas outside of the original blob that were generated by the gaussian blur are now completely opaque. (It's similar to a thresholding operation, but there are some middle values that survive.)
Probably, sans some randomness. (I'd hope that any animation standard has the ability to move things up and down over time, which is the only part of this performed by the JavaScript)
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)
Really nice. I would add an animating affine transform for the goo blobs so when they approach the top they get narrower and longer. This way the individual blobs would constantly change shape too making it a little bit more "gooey".
There are lots of things I would add to this (and your suggestion is one of them) but I wanted it to run on mobile too - therefore I had to 'feature-cut' where I thought it would have the least visual impact.
Still only seeing a blank screen. I have checked with both ABP enabled and disabled. It must be one of my extensions. I will test later and inform you.
Thanks all for testing this on the all the different platforms. Slightly annoyed to hear FireFox is playing up given I've tested it there and it worked for (both Mac and Win 10).
"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?