SVG Wave Generator

Wavy dividers soften the hard line between two page sections. This generator draws one to four layered waves as a single SVG: you choose the height, how large the waves are, how many bumps they have and the colors, and a seed number makes every result reproducible. You get a downloadable SVG file, markup to paste into HTML, and a CSS rule that uses the same SVG as a background image, so no extra file is needed.

How to use this tool

1. Set the number of layers, the height and the wave size.
2. Choose how many points each wave has (fewer = long gentle waves).
3. Pick one color or one per layer, and whether the wave fills below or above.
4. Change the seed until you like the shape, then copy the markup or CSS or download the SVG.

Formula

yᵢ = base + (2r − 1) × amplitude · segment i: C (Pᵢ + (Pᵢ₊₁ − Pᵢ₋₁)/6) (Pᵢ₊₁ − (Pᵢ₊₂ − Pᵢ)/6) Pᵢ₊₁

r is a seeded random number (mulberry32) between 0 and 1, so the same seed always draws the same wave. The points are joined with a Catmull-Rom spline converted to cubic Bézier curves, which passes through every point without corners.

Example

With seed 1, wave size 100% and 3 points on a 1440 × 320 canvas, the random numbers 0.627, 0.003 and 0.527 place the points at heights 180.3, 80.4 and 164.4, giving the path M0,180.3 C120,163.7 480,83.1 720,80.4 …. With wave size 0 the same settings draw a flat line at y = 160.