SVG Wave Generator

Design SVG wave section-dividers for landing pages and copy the vector markup.

A wave divider is a path with a few cubic curves and a fill, which is why it stays crisp at any width where an image would not. The reason to generate rather than hand-write it is that the control points have to stay smooth across the join, and eyeballing that in raw path data is unpleasant.

The practical detail is the edges. A divider needs to overshoot its container horizontally and sit flush against the section below, or a hairline gap appears at certain zoom levels from subpixel rounding. Setting `preserveAspectRatio` to none is usually right here too — you want the wave to stretch to the viewport rather than keep its proportions.