SVG Wave Generator
Generate a smooth SVG wave shape for section dividers and backgrounds, and copy the code.
Waves between sections
A wave-shaped divider between page sections is a popular way to soften the hard horizontal line where one coloured band meets the next. This generates a smooth SVG wave and copies the code, so you can add that flowing separator without drawing curves by hand.
Adjust the wave and copy the SVG.
Why SVG, and using it well
A wave as SVG rather than an image is sharp at any size, tiny in file size, and easy to recolour to match your sections, which is exactly what a divider needs. Waves work best used with restraint — one or two gentle ones to add flow and break up a long page, not a wavy edge on everything, which quickly looks busy. They pair naturally with the coloured section bands common in modern landing pages, softening the transition between them. Generating the wave lets you tune its height and curviness to sit right against your layout, since a wave that is too tall or too jagged fights the content rather than complementing it.
Frequently asked questions
Why use an SVG wave rather than an image?
It stays sharp at any size, is tiny in file size, and is easy to recolour to match your sections — ideal for a divider.
How should I use wave dividers?
With restraint — a gentle one or two to soften transitions between coloured sections, not on everything, which quickly looks busy.
Is anything uploaded?
No. The wave is generated in your browser.