Making Background Blob Animation in Just 1.5KB: Step-by-Step Guide

Today we'll show you how to create this background animation

It gives the illusion of blobs morphing randomly. But in fact, we're just rotating four static SVG shapes with CSS.

Step 1: Create shapes

First, we draw shapes. I'm using Illustrator but any vector editor with SVG export support works.

Start by creating a square canvas. I have it 100 x 100px, but since we're making an SVG image, it scales for any screen size without losing quality. Therefore, pixel size doesn't matter.

Additionally, add circles to the central points. They won't stay in the final image; they're just an easy way to get the coordinates of origin points for shapes rotation.

for nice random palettes btw.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

    <path fill="#9b5de5" class="out-top" d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>

    <path fill="#f15bb5" class="in-top" d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>

    <path fill="#00bbf9" class="out-bottom" d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>

    <path fill="#00f5d4" class="in-bottom" d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>

</svg>

I keep the <svg> background transparent so it's possible to set the page background to yellow. Alternatively, we can set background-color for svg or include yellow back to the image. We're really flexible with how to handle the colors.

body {

    background-color: #fee440;

}

Instead, we want to crop the image so the blobs are only partly visible. It can be done easily with preserveAspectRatio="xMidYMid slice" attribute.

or check out the video version of this tutorial!