12. May 2015
The second batch of gooey loaders where I experimented with the goo effect on elements with different colours.
I basically took what I learned from the first attempt, and tried to expand upon it. I figured out that the rules are slightly different when working with multiple colours instead of just one. The feMerge / feComposite filter shouldn't be used - if you use it, you get rather spooky results. The colours cannot blend together properly on different objects if you do, and that was what I needed to make happen in this case.
Apart from that, I figured out that another way of animating an object in a circle with CSS is to tweak it's transform-origin (and I don't know why I didn't think of that before). And then I basically just used one of my old tricks - making it alternate. That's something I often do to an animation if I'm not completely sure what to do with it - make it alternate and see what I get...
The first loader was inspired by something Lucas Bebber made for Codrops - though very very loosely inspired. The second loader was inspired by another demo I found on CodePen (and I believe I did credit it in the code).
Coding animations is one of my favourite pastimes - and combining it with SVG filters just makes it all the more awesome.