Easy Animated Waves & Blobs For Your Designs

Here are two sites to create easy waves or blobs for either a background, an animated loading page, or animated interaction.

GetWaves

GetWaves

You can create waves of varying sizes, peaks, and choose between three different types of waves to be generated. You can also change the color of these waves to any color you want and the opacity. After that, you can either download the SVG file and import it to your design tool or download the GetWaves plugin on Figma for easier access.

When you create your wave, there are many means to animate it. The one I’ll show below is via the Figma Smart Animate tool. Here’s an example:

GetWaves Animation via Figma Smart Animate

So what you would want to do is to create a wave either with the Figma plugin or on the GetWaves website. Once you have the wave created, put it into your design but expand it out so the wave overflows off the screen. Put one end on your initial screen for wherever you want it to start. Then make a copy of the vector and put that on the next screen. Move that copied vector to where you want the wave to end but keep it in the same spot as the initial vector on the first screen. You should have something similar to what is shown below:

Wave A (Initial Wave) and Wave B (Ending Wave)

The wave at the bottom is the full-wave and I just made it so that the beginning of the wave is on the first screen and almost at the end of the wave is on the second screen but they are both parts of the same vector.

Once you have that done, you will want to select the first screen and hit prototype on Figma and add an interaction type. I did “On Tap -> Navigate to: Wave B” and set the Animation type to Smart Animate. You can adjust the timing it takes to animate this. When you are finished, you can test the animation sequence out and it should look like what I had above.

BlobMaker

BlobMaker

Here is another fun vector to play around with. It can be tedious to create a blob on design tools with a mouse. This tool will make your life 100x simpler by creating one for you. You can adjust how many sides the blob has as well as if you want it more rounded or mutated. You can use the dice tool to randomly generate a blob and then download the SVG file after you found your perfect blob to add to your design. Nothing beats the simplicity in that!

Hope you enjoyed this short read and have fun playing around with these, I know I will!