DEV Community

Wei Gao
Wei Gao

Posted on • Originally published at aworkinprogress.dev

Animated CSS Blob

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

Here is this blob:

animated css 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:

the wavy edge of the blobs


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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

There are a few more CSS properties such as each of the blobs' color and animation-delay, you can inspect them in my site here.

Top comments (2)

Collapse
 
jenlooper profile image
Jen Looper

the content we all didn't know we needed! Thanks!

Collapse
 
parsakafi profile image
Parsa Kafi

I liked it, Thanks for sharing :)