SVG Wave & Blob Generator
Create a wave for section dividers or an organic blob for background decoration as SVG. Tweak the number of waves, amplitude, randomness and color, then copy the <svg> code or a CSS background image. Keep the seed to bring back the exact same shape later. For gradient backgrounds, try the CSS Gradient Generator, and to slim down SVG files see the SVG Optimizer.
🔒 Runs in your browser · Your data is never sent to a server
Preview
How to use
- Choose a wave or a blob in "Shape".
- Adjust the waves, amplitude, randomness and color. Press "Randomize" until you like the result.
- Press "Copy SVG" or copy the CSS, or save the file with "Download SVG".
Notes
- Waves use a 1440px-wide viewBox with preserveAspectRatio set to none, so they are meant to be stretched to the full width. The aspect ratio therefore follows the size you display it at.
- The same seed and settings always give the same shape. At 0% randomness you get a regular wave or circle regardless of the seed.
- Waves range from 1 to 8, blob points from 3 to 16 and height from 100 to 600px. Out-of-range values are rounded automatically.
- The CSS background embeds the SVG as a data URI. To change the color, generate it again with this tool.
Glossary
Blob
A rounded, corner-free organic shape, like a distorted circle. Used for background decoration and avatar frames.
Seed
The starting number of a random sequence. The same seed always produces the same sequence, so a random shape can be reproduced.
viewBox
The SVG attribute that defines the coordinate area. That area is scaled to fit whatever size the SVG is displayed at.
Bézier curve
A smooth curve defined by control points. In an SVG path, the C command draws a cubic Bézier curve.
FAQ
How do I make a wave span the full page width?
The generated SVG includes preserveAspectRatio="none", so an <svg> element with width: 100%, or CSS with background-size: 100% 100%, stretches it to the full width. Set the height with CSS height.
Can I reproduce a shape I liked later?
Yes. With the same seed number and the same settings, the same shape is always generated. Note down the seed when you find one you like.
Should I fill the top or the bottom side?
For a wave at the bottom edge of a section, choose "Bottom" (the area under the wave is filled, so the background above shows through). For a wave at the top edge, choose "Top", so it blends into the next section’s color.
How do I change a blob’s color afterwards?
Edit the fill attribute of the path element in the SVG code. If you use the CSS background (data URI), it is easiest to change the color and generate it again here.
Share this page