DEV Community

Cover image for Blobby image animation in CSS 🦠
Bryce Dorn
Bryce Dorn

Posted on

2 1

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 pseudo-element) then resized and positioned accordingly.

Then, by adding overflow: hidden; to the parent element, the image is cropped to the border-radius value of the pseudo-element and enables it to take a shape!

Since each image is technically in the same position but with a different parent the values for dimensions and positioning must be identical. This was slightly tricky as the height & width vary slightly with the different rotations (thanks to geometry), 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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more