Animated CSS Blob

#css

I'm a pure blob over the holidays these days, so I decided to make something blobby on my website.

Here is this blob:

There are quite a few ways you can create blobs on the web. But following the blobby attitude I've chosen the simplest technology – CSS border radius – one that I can wrap my brain around with, to be the main recipe for this blob. Overall, it'll still be a few simple techniques put together that I'll briefly list out in this post.

CSS border radius

The key to the irregular shape is to make use of the power of border radius. Not only can you specify each corner, but also you can supply pairs of values such that each corner can take different border radii so that it looks skewed towards one direction or the other.

Here's a video showing its mechanism from Robin Rendle's post:

The video is taken from fancy-border-radius that you can use to play around with the shape defined by those border radii.

Generally speaking, the smaller the percentage value, the sharper it will look at the point the blob touches its bounding box. I want my blob to look fairly rounded so I've taken fairly large values in those radii. And to get the curves to have a smooth join, it's worth to make the percentage values complement to each other in pairs – and fewer random numbers needed to generate as well.

Animation

I've used simple keyframes for the animation. My blob is quite slow, it's 7s animation on alternate direction & infinite loop. I've also made them spin a little bit by adding a transform: rotate() to the animation frames.

Also, to add some randomness I've generated the animation when component mounts.

Blending

As you can see, the blobs created by CSS border radius will be all convex, the shape a bit simple. To add some flavor to it, I've recalled my mix-blend-mode magic (you can read about it in my other post about CSS mix-blend-mode). Namely, I've created three blobs with slightly different shades of grey and some offset in their animation-delay, and made them mix-blend-mode: luminosity with one another.

When you enlarge them they look pretty sick, I think:

Putting them altogether, here's one of the generated animation CSS:

.blob {
  animation-name: blobby;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: alternate;
  mix-blend-mode: luminosity;
}
@keyframes blobby {
  0% {
    border-radius: 50%;
  }
  20% {
    border-radius: 41% 59% 41% 59% / 53% 51% 49% 47%;
    transform: rotate(36deg);
  }
  40% {
    transform: rotate(72deg);
    border-radius: 43% 57% 41% 59% / 53% 52% 48% 47%;
  }
  80% {
    border-radius: 48% 52% 41% 59% / 48% 58% 42% 52%;
    transform: rotate(108deg);
  }
  100% {
    transform: rotate(144deg);
    border-radius: 54% 46% 60% 40% / 43% 55% 45% 57%;
  }
}