SVG Wave Generator
Create smooth SVG wave shapes for section dividers and hero backgrounds, with control over amplitude, frequency and layering.
The height control delivers 28.9% of what it says
This generator draws one cubic Bézier per period, pushing the two control points to ±40 above and below the midline at the default setting. A Bézier does not pass through its control points, so the height you ask for is not the height you get. With the control points at ±A the curve is
y(t) = 3A·t(1−t)(1−2t)
which peaks where 6t² − 6t + 1 = 0, at t = ½ − √3⁄6 ≈ 0.2113.
Substituting back gives a peak of exactly A·√3⁄6 ≈ 0.2887·A.
Set the slider to 40 and the wave rises 11.55 pixels —
shallower by a factor of 2√3 ≈ 3.464, exactly, at every setting.
That is not a rounding artefact, it is what the construction does. If you want a wave that genuinely peaks at p pixels, ask for 2√3·p — so 10px needs 35, 20px needs 69, 30px needs 104.
The seams are fine; the middle is not
The obvious worry with a repeating wave is a visible kink where one period meets the next. That
worry is misplaced here. The slope entering a period and the slope leaving it are both
4A/s — 0.3333 at these settings, identical on both
sides — so the joins are smooth. What does not match is the curvature, which flips from
-720 to 720: continuous in direction but not in bend, and not by
enough to see.
The real error is in the middle. Measured against a true sine of the same period and the same actual peak, the drawn curve is off by 2.95 pixels — 25.6% of its own height — and the worst point is 39px into a 480px period, nowhere near a join. It leaves the midline at the slope of a sine that would peak at 25.5px and then only reaches 11.5, about 45% of it. It starts like a tall wave and lands like a short one, which is why generated dividers tend to look pinched at the crossings and flat across the top.
Four segments per period would fix it
Approximating one period of a sine with n cubics, each matched to the sine's tangent at its ends:
| Cubics per period | Worst error | At this wave's size |
|---|---|---|
| 1 | 42.5% of amplitude | 4.91 px |
| 2 | 21.5% of amplitude | 2.48 px |
| 4 | 1.1% of amplitude | 0.12 px |
| 8 | 0.0906% of amplitude | 0.01 px |
| 16 | 0.0061% of amplitude | < 0.01 px |
The fall between two segments and four is a factor of about twenty, and after that the returns taper — the error drops roughly as the fourth power of the segment count, so each doubling buys sixteen times less deviation until it stops mattering. Four cubics per period is already accurate to a tenth of a pixel at the size this tool draws. The entire difference between a shape that reads as a sine and one that does not costs three extra segments in the path data.
How to use
- Set the amplitude and frequency for the effect you want.
- Adjust the curve until it suits the section beneath it.
- Layer two or three waves at different opacities for depth.
- Let the SVG overflow slightly to avoid hairline gaps.
- Copy the markup into your page.
Frequently asked questions
What are wave dividers actually for?
Softening the transition between two page sections of different background colour, in place of a hard horizontal line. It is purely decorative, and it works because a curved boundary reads as less abrupt and more considered than a straight edge.
How do I layer waves convincingly?
By stacking two or three at different amplitudes and opacities, each slightly offset from the last. The variation between them is what reads as depth — identical stacked waves simply look like a rendering mistake rather than a deliberate effect.
Why does my wave leave a gap at the edge?
Because the SVG viewBox does not quite match its container, usually from sub-pixel rounding at particular viewport widths. Setting the SVG marginally wider than needed and letting it overflow, or choosing a preserveAspectRatio value that stretches it, removes the hairline.
Should the wave be content or background?
Background, conceptually — it carries no meaning and should be marked hidden from assistive technology. Placing it as a background image, or as an aria-hidden SVG, keeps it out of the accessibility tree where it belongs.
Do these affect performance?
Barely at all. An SVG path is a few hundred bytes and renders essentially free, which makes it far cheaper than a raster image of the same shape and lets it scale to any width without a second file or a media query.
Are wave dividers overused?
They had a strong run and are now firmly associated with a particular era of landing page design. That association is worth weighing against the softening they provide, and using one where a plain edge would do is the common overreach.
Can I flip the wave to face the other way?
Yes, with a CSS transform that scales it by minus one on either axis. Flipping vertically turns a wave that rises into one that falls, which is what you want at the bottom of a section rather than the top.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.