
How to Make an SVG Lava Lamp - chrisgannon
http://codepen.io/chrisgannon/blog/how-to-make-an-svg-lava-lamp
======
jameshart
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_?

~~~
chrisgannon
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...](http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/)

~~~
jameshart
Well, it was new to me :) Maybe add the link to further reading into the
article, then?

~~~
chrisgannon
Yes it was my bad - I've added it now. Thanks for pointing that out.

------
nine_k
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.

~~~
yoklov
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)

~~~
XaspR8d
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.)

------
ipsin
I love SVG as a format, but don't have a lot of experience with SVG animation.

Could the animating javascript loop be redone using SVG animations?

~~~
yoklov
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)

~~~
1wheel
Chrome is depreciating SMIL
[https://groups.google.com/a/chromium.org/forum/#!topic/blink...](https://groups.google.com/a/chromium.org/forum/#!topic/blink-
dev/5o0yiO440LM)

~~~
leni536
OTOH CSS animations still remain so it can still work for embedded .svg files.
source: your link

------
leni536
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".

~~~
chrisgannon
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.

------
mattsouth
This is really nicely done. I love the lava lamp animation bit in addition
it's accompanied by a good write up. Well done sir!

~~~
chrisgannon
Thanks!

------
discreditable
Does not work in Firefox. :(

~~~
davidcollantes
It works fine under Chrome, and Safari (both in OS X).

~~~
discreditable
Aye, works in IE11 too. Just not Firefox.

~~~
chrisgannon
What exactly isn't working about it in FF? Blobs not moving? No blobs at all?
No graphics showing at all?

~~~
muddi900
I am seeing blank space. FF41 on Windows 10.

~~~
chrisgannon
Are you looking at this
[http://codepen.io/chrisgannon/pen/QjKXXe](http://codepen.io/chrisgannon/pen/QjKXXe)
?

~~~
muddi900
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.

------
chrisgannon
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).

------
erikb
The whole lamp is nowhere to be seen in the whole article or have I missed
something?

~~~
Already__Taken
Yes it's in the break above the paragraph above "Stop Jabbering". It's an
embedded codepen.

------
adam12
Gotta love that Gaussian blur filter.

