Blobby image animation in CSS 🦠

Was bored on a Friday and whipped up a fun little animated image using CSS:

It overlays multiple elements with the same background image rotated at different intervals. To align the images to the same plane and stitch them together each element is first rotated back (using the :before ), so the image needs to be stretched a bit.

You can see how this is handled here:

For the animation, it uses a simple keyframes rule to smoothly transition border-radius values. Each div has an animation-delay value to offset and create a directional effect.

Hope this was a good showcase of how easy it is to easily create complex animations using basic CSS/HTML!