SVG wave generator

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none">
  <path d="M0 320L0 87.39C80 87.39 160 132.81 240 132.81C320 132.81 400 113.25 480 113.25C560 113.25 640 137.75 720 137.75C800 137.75 880 162.77 960 162.77C1040 162.77 1120 84.89 1200 84.89C1280 84.89 1360 86.88 1440 86.88L1440 320Z" fill="#6366f1"/>
</svg>

How the wave is made

• Points across the width. The canvas is split into equal gaps, one more point than gaps, from the left edge to the right edge. More points give more, narrower waves.
• Each point gets a random height. Fill level sets where the middle of the wave sits, measured from the filled edge; Wave height sets how far above and below that the points may land, as a share of the canvas height. The band is cut off at the canvas edges, so the wave never leaves the image. At 0% wave height you get a flat line.
• Smooth, peaks or steps. Smooth joins the points with one cubic Bézier curve (C) per gap whose handles are flat, a third of the way across — so every point is a rounded crest, trough or shoulder and the curve never rises above or dips below its two points. Peaks joins them with straight lines, Steps with flat treads and upright risers.
• Layers. Each layer behind the front one sits 12% of the height higher and is fainter: with n layers, layer k from the back is drawn at k/n opacity, so the front one is solid and a single wave is one solid colour.
• The seed makes it repeatable. Same seed and settings, same SVG, byte for byte. New random wave picks a new seed.

Using the wave

SVG — paste it at the bottom (or top) of a section. It carries preserveAspectRatio="none", so with width: 100% and a fixed height it stretches to any screen width without changing height. CSS background — the same SVG inlined as a data URI on a block .wave element, stretched to the element's full width at the height you set; put an empty <div class="wave"></div> between two sections and give the next section the same colour as the wave. Use Top edge for a wave that hangs down from the section above. For a shape that is round on every side, try the blob generator; to cut an element itself to a shape, the clip-path generator.

How we test it

114 different waves are drawn in Chrome 156. Each SVG, exactly as you copy it, must parse, every layer must span the full width and stay inside the canvas, and smooth waves must have flat handles a third of the way across. At 32,062 sample points Chrome's own idea of what is inside each layer must match the wave's height worked out separately from its points. Then the SVG and the CSS background — at its own width and squeezed to 60% and stretched to 150% — are photographed: 128,012 pixels must be the colour you get by stacking the layers at their opacities. Deliberately broken versions — an unencoded #, no preserveAspectRatio, curves that overshoot their points, layer opacities reversed, top and bottom swapped, a height band that leaves the canvas, an unseeded random number — must each be caught.

Questions

Can I use the waves in commercial work?

Yes. The shapes are generated in your browser from numbers you choose; there is nothing to credit and no licence attached.

How do I make the wave span the full width of the page?

Paste the SVG and give it display: block; width: 100%; height: 120px (or whatever height you want). Because of preserveAspectRatio="none" it stretches sideways and keeps the height. The CSS background version already does this on a block element.

Why is there a thin line between the wave and the next section?

Sub-pixel rounding can leave a hairline gap where the wave meets the section. Pull the wave 1px into it with margin-bottom: -1px (or margin-top: -1px for a top wave), and make sure the two colours match exactly.

Can I animate the wave?

Two waves with the same number of points, layers and curve type have the same path structure, so you can morph between them by animating each path's d. A simpler trick is to make the SVG twice as wide as the screen and slide it sideways with a CSS transform animation.