SVG wave generator
Generate a smooth SVG wave curve to separate two page sections with a softer look than a plain straight line, with fully adjustable amplitude, frequency and color.
How it works
The wave is built from successive cubic Bézier curves, with each "bump" alternating above and below a baseline for a smooth outline with no sharp corners. The number of bumps (frequency) and their height (amplitude) can be adjusted independently, along with the fill color.
How do I use this wave as a divider between two sections?
Copy the SVG code and place it with absolute positioning at the bottom (or at the top, with the "flip" option) of a colored section, at 100% width: the wave will cover the transition between that section and the next, whose background color should match the SVG fill color for a seamless join.
Does the width I set have to match my page width exactly?
No: thanks to the preserveAspectRatio="none" attribute and a percentage width in CSS, the SVG stretches to fill the full available width of its container, even if its original width doesn't exactly match that of your page.
100% local generation: the curve is calculated entirely in your browser, with no data sent to a server.