I was recently a guest editor for an issue of Bizarro Devs. It’s a great newsletter! Go sign up! I put in a bunch of links around blobs. Like those weird squishy random shapes that are so “in” right now. Here are those links as well. I’m always a fan of publishing stuff I write ;)
Blobs! Blobs are in! Blobs are — ahem — a bit bizarre. I’ll bask in a design like this annual report cover by Matt Pamer all day. I enjoy watching a design trend like this manifest itself in design tooling and become applied in lots of creative and crafty different ways.
We could start with <svg>
and draw our own blob using the Pen tool that is pretty much stock in every vector design application. I’m a cheater though, and would probably wind up checking The Noun Project for some blob examples and steal the SVG from there. But sadly, there isn’t much there, at least as far as blobs go.
Thank god for… (wait for it)… THE BLOBMAKER:
Once we have a blob, it’s just begging to be moved around. Monica Dinculescu shows how to do just that with pure CSS and liberal use of various CSS transforms in a keyframe animation:
See the Pen
CSS only morphing blob by Monica Dinculescu (@notwaldorf)
on CodePen.
Or we can use a JavaScript library like KUTE.js to get all morph-y, like Heartbeat has done here:
See the Pen
Morphing shapes with KUTE.js by Heartbeat.UA (@hbagency)
on CodePen.
A library like Greensock could help moving and morphing the blobs around. Greensock even has a plugin that is probably the most powerful morphing tool out there. This Pen uses Greensock, but adds some native SVG filters so that the blobs squish into each other satisfyingly. We could call it the gooey effect:
See the Pen
SVG blob mask by ATCOM (@Atcom)
on CodePen.
We’ve only looked at SVG so far, but don’t rule out <canvas>
! Liam Egan has make this canvas-based blob downright jiggly:
See the Pen
Blob by Liam Egan (@shubniggurath)
on CodePen.
Why not add a little physics to the party, like gravity, and let them blobs get squishy that way! Hakim El Hattab got it done here:
See the Pen
Blob by Hakim El Hattab (@hakimel)
on CodePen.
And blobs don’t have to be alone! Blobs that are squished together are like fluid. You might get a kick out of Peeke Kuepers article Simulating blobs of fluid.

If a quite simple blobish form is ok, you can always go for simple border-radius. Sure not as flexible as SVG, but also fun to play with.
https://9elements.github.io/fancy-border-radius/
Would be nice if implementers would respect users settings like reduced motion to turn off these awesome animations :)
if (window.matchMedia(‘(prefers-reduced-motion)’).matches) {
// turn off
}
“We could call it the gooey effect” – that’s defo a lava lamp effect!!!
“Gooey effect”
They are called “metaballs”, where the surface of each object is adapted in proximity to it’s siblings. Also called an “isosurface”
If you want to see the most mental application of it in action check out:
https://particle-love.com/
HyperMix in particular
Was this inspired by the latest Codepen challenge concerning Blobs? I’m curious because it seems perfect timing, and one of the examples is actually a challenge submission.