Shape Blobbing in CSS
Published by
We just covered shape morphing in SVG, where shapes change from one to another. Let's look at shapes that blob into each other! You know, that gooey squishy blobby effect like droplets of mercury on a surface.
I'm not sure who first discovered this was possible on the web, but the first place I ever saw it was a demo by Lucas Bebber:
See the Pen Gooey Pagination by Lucas Bebber (@lbebber) on CodePen.
And then again by Felix Hornoiu (low framerate GIF for web practicality):
The trick is fairly simple, use filter to BOTH add blur and contrast to an element
The blur obvious makes the element blurry, the contrast fights against the blur, preferring stark changes in color. If you contrast enough, you're left with a (fairly) sharp looking shape again.
The fancy parts comes from the fact that when two blurred (yet forced to look non-blurry) elements come near each other, their would-be blurs create enough would-be color contrast that the shapes actually appear to connect.
I find it easier to get working if you blur the shapes but add contrast to the whole area. Like:
.stage {
/* must be explicit, for contrast to work */
background: white;
/* weirdness happens when edges hit, also consider hiding overflow */
padding: 30px;
-webkit-filter: contrast(20);
filter: contrast(20);
}
.dot {
border-radius: 50%;
width: 50px;
height: 50px;
/* needs to be very contrasty color. E.g. light gray on white won't work */
background: black;
-webkit-filter: blur(15px);
filter: blur(15px);
}And then the fun happens when you add animation to blob those suckers all around. Here's a demo where you can play with the values, including brightness which affects the blur:
See the Pen Blobbing Playground by Chris Coyier (@chriscoyier) on CodePen.
Browser Support
Not just WebKit/Blink anymore! Firefox 35 will be supporting filters without any flag or anything. Aurora, their beta-beta, is in v35 right now and I popped it open in that and it works great.
So... current Chrome / Safari / Opera / Firefox / iOS / Android. Not bad. Just no IE.
Predictions of Exclaimed Things
It's not practical!!! Go to bed.
It makes my fan spin like crazy!!! Yeah my demo with tons of elements interacting makes my CPU pretty busy as well. The more chill demos with just two circles bumping into each other are fine though. Use decision making skills.
There are better ways to do this!!! Awesome.
This demo makes me so happy I giggled like a schoolgirl!!!!!
Thought I would throw a positive exclamation in there.
Well put Chris. :) Feel like a lot of people need to realize how much of web development is this step, you don’t get very far without flexing those decision making muscles.
Whoah… Try highlighting the blur.
CSS lavalamp
Speaking of lava lamps… http://codepen.io/alexzaworski/pen/qDokc
Haha trippy!
The demo is pretty cool to play around with.
You can get nice color effects with experimenting on different background-colors on the blur, wrap-background and elements.
Like this: http://codepen.io/anon/pen/JxnoF
seems filters are in development for IE too https://status.modern.ie/filters?term=filter
Guess will take a bit longer than Firefox final (12 weeks?) as IE seems just started but maybe early next year?
Neat! You could also use a background image instead of a color for some interesting effects.
Here’s an example using the chrome logo: http://codepen.io/chuckneely/pen/eHyhx
That is really clever, now just need to find a real world use!
So easy and so smart. I like it…..a lot !!!
Love this one.
It’s just a lil’ boggling that I was looking at this technique in After Effects a few weeks ago — and here it is with CSS. Excellllllent.
It must not be THAT resource intensive, because I only get a small drop in framerate on my G3 Vigor phone. (Which has a processor I’d rate as “good enough for a phone.)