My face with a Photoshop cutout filter applied to it


Welcome. Click on an image below to read about the given project.

Back to homepage

Gooey Loaders 2

12. May 2015

See the Pen SVG Gooey Loaders - Batch 2 by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

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.

Back to homepage