Shape Blobbing in CSS

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.