5 ms·
How to Make an SVG Lava Lamp
- deleted 11y ago[deleted]
- discreditable 11y agoDoes not work in Firefox. :(
- davidcollantes 11y agoIt works fine under Chrome, and Safari (both in OS X).
- discreditable 11y agoAye, works in IE11 too. Just not Firefox.
- chrisgannon 11y agoWhat exactly isn't working about it in FF? Blobs not moving? No blobs at all? No graphics showing at all?
- muddi900 11y agoI am seeing blank space. FF41 on Windows 10.
- chrisgannon 11y agoAre you looking at this http://codepen.io/chrisgannon/pen/QjKXXe http://codepen.io/chrisgannon/pen/QjKXXe ?
- muddi900 11y agoStill 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.
- metasean 11y agoWorks for me - FF 41.0 on OS X.
- melicerte 11y agoWorks for me FF 41.0 Ubuntu
- dalacv 11y agoWorks for me on Firefox v39 Windows 8.1
- cube00 11y agoFF 40 on Linux working.
- chrisgannon 11y agoWhen I built this I tested in both FireFox on Mac and Win 10 it works fine. Which platform and version is it not working on?
- discreditable 11y agoIt does work! This was just HTTPS Everywhere subtly breaking the page for me.
- ipsin 11y agoI 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 11y agoProbably, 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)
- chrisgannon 11y agoDead right - JS is needed for the randomness. Plus the fluidity achieved by the GSAP engine is staggeringly good.
- 1wheel 11y agoChrome is depreciating SMIL https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM https://groups.google.com/a/chromium.org/forum/#!topic/blink...
- leni536 11y agoOTOH CSS animations still remain so it can still work for embedded .svg files. source: your link
- mattsouth 11y agoThis 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 11y agoThanks!
- erikb 11y agoThe whole lamp is nowhere to be seen in the whole article or have I missed something?
- Already__Taken 11y agoYes it's in the break above the paragraph above "Stop Jabbering". It's an embedded codepen.
- nine_k 11y agoEverything 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 11y agoThe 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 11y agoYes, 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.)
- chrisgannon 11y agoThanks 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).
- adam12 11y agoGotta love that Gaussian blur filter.
- leni536 11y agoReally 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 11y agoThere 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.
- jameshart 11y agoSomething 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 11y agoHere'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-effects/ http://tympanus.net/codrops/2015/03/10/creative-gooey-effect...
- jameshart 11y agoWell, it was new to me :) Maybe add the link to further reading into the article, then?
- chrisgannon 11y agoYes it was my bad - I've added it now. Thanks for pointing that out.
- kevinchen 11y agoSkimmed through the article and I think it's similar to this - see the section "Making Things Stick" https://css-tricks.com/gooey-effect/ https://css-tricks.com/gooey-effect/