A blob animation can make your website more lively

This is my first post ever :) Let's get started!!

This is what the result looks like:

In this example, i will use Vite to create a new React app.

npm create vite@latest

I will complete it by adding some information for my project (name and framework)

Next, i am gonna create a new component called Blob.jsx and import it into App.jsx

Now, let's intergrate react-spring

React-spring

Actually i just approached to react-spring a few weeks ago, and suprisingly i found it super powerful.

React-spring gives a lot of opportunities to create wonderful animations which are super "realistic" and "physical"

And the usage is also pretty easy, just install by:

npm install react-spring

Blob generator

From now, we just setup our app, next step, we need to create two random shapes of blob (.svg format) to toggle between their paths to create the desired animation.

I will use Haikei for creating them
and download the svg format.

Next, i copy these two svg blobs into my Blob.jsx component and delete <rect x={0} y={0} width={900} height={600} fill="#FF0066" /> (it is just the background)

<div>
                <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                    <g transform="translate(407.8302694033731 297.56887719695067)">
                        <path d="M158.7 -157.7C208 -109.4 252 -54.7 244.8 -7.2C237.6 40.3 179.3 80.6 129.9 130.6C80.6 180.6 40.3 240.3 -4.1 244.4C-48.6 248.6 -97.1 197.1 -126.4 147.1C-155.8 97.1 -165.9 48.6 -159.3 6.6C-152.7 -35.4 -129.4 -70.7 -100 -119C-70.7 -167.4 -35.4 -228.7 9.7 -238.4C54.7 -248 109.4 -206 158.7 -157.7" fill="#BB004B" />
                    </g>
                </svg>

                <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                    <g transform="translate(477.0920346881802 291.5807221558637)">
                        <path d="M139.6 -142.1C164.6 -114.6 157.3 -57.3 164 6.7C170.7 70.7 191.4 141.4 166.4 167.9C141.4 194.4 70.7 176.7 3.4 173.3C-63.9 169.9 -127.8 180.8 -171.6 154.3C-215.4 127.8 -239.2 63.9 -231 8.2C-222.7 -47.4 -182.4 -94.8 -138.6 -122.3C-94.8 -149.8 -47.4 -157.4 4.9 -162.3C57.3 -167.3 114.6 -169.6 139.6 -142.1" fill="#BB004B" />
                    </g>
                </svg>
</div>

After this, i will extract the "d" attribute of each SVG path and save it as blob1 and blob2.

   const blob1 = "M158.7 -157.7C208 -109.4 252 -54.7 244.8 -7.2C237.6 40.3 179.3 80.6 129.9 130.6C80.6 180.6 40.3 240.3 -4.1 244.4C-48.6 248.6 -97.1 197.1 -126.4 147.1C-155.8 97.1 -165.9 48.6 -159.3 6.6C-152.7 -35.4 -129.4 -70.7 -100 -119C-70.7 -167.4 -35.4 -228.7 9.7 -238.4C54.7 -248 109.4 -206 158.7 -157.7"

    const blob2 = "M139.6 -142.1C164.6 -114.6 157.3 -57.3 164 6.7C170.7 70.7 191.4 141.4 166.4 167.9C141.4 194.4 70.7 176.7 3.4 173.3C-63.9 169.9 -127.8 180.8 -171.6 154.3C-215.4 127.8 -239.2 63.9 -231 8.2C-222.7 -47.4 -182.4 -94.8 -138.6 -122.3C-94.8 -149.8 -47.4 -157.4 4.9 -162.3C57.3 -167.3 114.6 -169.6 139.6 -142.1"

Also i just keep one SVG tag and use blob1 for the path

 <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                <g transform="translate(407.8302694033731 297.56887719695067)">
                    <path d={blob1} fill="#BB004B" />
                </g>
</svg>

From now, we can add spring animation for the blob, make it transform from blob1 to blob2 shape

    const blobAnimation = useSpring({
        from: { x: blob1 },
        to: { x: blob2 },
    })

Don't forget to import useSpring and animated to your component. And replace the blob1 from "d" attribute by blobAnimation.x

import { useSpring, animated } from 'react-spring'

...

<animated.path d={blobAnimation.x} fill="#BB004B" />

Now, we are almost done, but the animation is too fast, we just need to add duration for it by adding config option and make it loop infinitely and also reversely.

Here is the useSpring code looks like:

    const blobAnimation = useSpring({
        from: { x: blob1 },
        to: { x: blob2 },
        config: {
            duration: 3000
        },
        loop: { reverse: true }
    })

And yes, we make it!

Hope you can find it useful and apply it to your own project! :D