SVG wave generator
Choose how many layers, how tall and how bumpy the wave is, pick a color and press Randomize until you like the shape. Copy the SVG code or download it as a file.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Set the number of layers. More layers give more depth; each one is fainter the farther back it is.
- Set the height of the SVG, then amplitude and frequency for how bumpy it is.
- Pick a color and the opacity of the front layer.
- Press Randomize until the shape suits you. Tick Flip to hang the waves from the top edge.
- Press Copy, or Download SVG to save
wave.svg.
What the output means
The code is a single <svg> with a viewBox of 0 0 1440 by your height and one <path> per layer. Each path starts at the left edge, runs through its points with C curve commands, then goes down to the bottom corners and closes. The front layer uses the opacity you set; the layers behind it use a share of that value.
Example
The defaults are 3 layers, 200 px high, amplitude 40 percent, 4 bumps, blue #3366cc at 90 percent opacity.
Tips
- Use the flipped version at the bottom of a hero section and the normal one at the top of the next, with matching colors.
- Keep amplitude moderate on small heights, because the points are clamped to the SVG’s own height.
- If you embed the SVG inline, set
display: block on it to avoid a thin gap below.
Frequently asked questions
How are the waves drawn?
The tool places points at random heights across a 1440 unit wide canvas, then joins them with cubic Bézier curves so there are no corners. Each layer uses its own set of points and sits lower than the one behind it.
Will the same settings always give the same wave?
Yes. The shape comes from a seed number, and the same seed with the same settings always draws the same wave. Randomize picks a new seed with a cryptographically random number.
How do I use the SVG as a section divider?
Paste the code between two sections, or save the file and use it as an img or a CSS background. The viewBox is 1440 units wide and preserveAspectRatio is none, so the wave stretches to the width of its container.
What do frequency and amplitude change?
Frequency is the number of bumps across the width. Amplitude is how far each point may stray from its baseline, as a percentage of the height, so higher values give taller, steeper waves.