Section dividers that span exactly

Section dividers that span exactly

Every layer runs from the left edge to the right edge, so the shape fills its container at any width without a seam or a sliver of background.

Why SVG rather than an image

A wave divider is a handful of curves, and expressing it as vector geometry rather than pixels wins on every axis that matters here. It stays crisp at any width and on any display density. It costs a few hundred bytes rather than tens of kilobytes. And because the fill is just a CSS colour, it can follow a theme — the same divider works on a light and a dark background without a second file.

A raster export cannot do the last of those at all, which is the usual reason a site ends up with four versions of the same decorative shape and a bug where one of them has the wrong background baked into it.

It is decoration, so mark it as decoration

A divider carries no information. Someone listening to the page rather than looking at it gains nothing from being told there is a wave here, and loses a little for the interruption, so the graphic should be hidden from assistive technology rather than given a description.

The corollary is that nothing meaningful should ever live in it. If a shape is separating two sections, the sections still need their own headings; if the wave is carrying a colour change that signals something, the signal has to exist in the text too. Decorative is a promise about the content as well as an attribute — it is only honest if the page still makes sense with the shape removed.