loading...
Cover image for Making a CSS blob

Making a CSS blob

equinusocio profile image Mattia Astorino ・1 min read

Some days ago i was trying to make an animated blob using just the CSS as a personal experiment and research. The big issue with the blob was the curvy-shape that was should randomly morph with a slow animation.

The only way i found to make this kind of transformation is using the multi-step border-radius values that allow you have more controls over the edge of the element.


Image from Medium

First I needed to read more informations about the multi step border-radius, and this css-tricks article was perfect. So i started writing code to prepare all the things but i noticed immediately that handling the multi values border radius was not so easy as I expected. After a bit of googling I came on this article and their awesome tool. This helped me to learn more about this approach and generating the values of the border-radius property.

By adding a bit of movement and colours I got what i wanted. Here you can check the final result.

Follow me to get more about CSS tricks!

https://equinsuocha.io

Discussion

markdown guide
 

This is line watching a digital lava lamp!
Nice work :)

 

Nice! A lot of people downplay CSS. But it takes a LOT of time and effort to get really good at it! Thanks for sharing this!

 

Wow that's great! I recently worked with border-radius with 8 digit slash and created a shot on Dribbble.
dribbble.com/shots/13623961-Blobs-...

 

I'm so glad my tool helped you to build what you wanted to. And your animation looks stunning. I may use something like this in my next project :-)

 

Your tool is pretty awesome. Really helped me to visualize the shapes.