SVGFlow
Open editor

SVG wave generator

Generate layered SVG waves for section dividers and hero footers. Set the peaks, the height and the number of layers, shuffle the curve until it sits right, and copy markup that scales to any container width.

Preview1440 × 320 · seed 7
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" width="1440" height="320" preserveAspectRatio="none">
  <path d="M 0 184 C 60 162.7 240 72.1 360 56.1 C 480 40.2 600 89.6 720 88.3 C 840 87.1 960 42.2 1080 48.8 C 1200 55.4 1380 114.7 1440 127.9 L 1440 320 L 0 320 Z" fill="#2f6df6" fill-opacity="0.3"/>
  <path d="M 0 134.8 C 60 136.8 240 138.8 360 146.6 C 480 154.4 600 184.3 720 181.6 C 840 178.9 960 144.5 1080 130.3 C 1200 116.1 1380 102.1 1440 96.4 L 1440 320 L 0 320 Z" fill="#2f6df6" fill-opacity="0.7"/>
  <path d="M 0 175.8 C 60 173.2 240 171.5 360 160.2 C 480 148.8 600 93.7 720 107.8 C 840 121.8 960 224 1080 244.5 C 1200 265 1380 233.1 1440 230.8 L 1440 320 L 0 320 Z" fill="#2f6df6"/>
</svg>
Peaks — 4
Height — 55
Layers
Color

Embedding it in CSS instead of markup? Run the result through SVG to Data URI.

How it works

Anchor points are spread across the width, jittered vertically by a seeded random amount, smoothed into a spline and closed down to the bottom edge (or the top, when flipped). Layers repeat the construction with related seeds at rising opacity, so the stack reads as one body of water. The file carries preserveAspectRatio="none", so it stretches to any container without caring about its 1440×320 design size.

When to use it

The junction between two page sections that a straight line would make boring — hero bottoms, footer tops, banner edges. Set width: 100% and a fixed height on the svg (or an img referencing it) and let it stretch.

Common problems

  • A hairline seam shows against the next section. The wave's fill must equal the adjacent section's background exactly — copy the hex, don't eyeball it. Sub-pixel rounding can still leave a line at some zooms; overlapping the sections by 1px hides it.
  • Stretched full-bleed, the curves flatten. preserveAspectRatio="none" trades proportion for fit. Raise the peaks count so there is more curve to stretch.
  • The top edge needs the wave. That is what Flip is for — it closes the fill upward instead of redrawing your section order.

Notes

  • The file carries preserveAspectRatio="none", so with width: 100% and a fixed height it stretches to any section without distorting strokes — there are none, only fills.
  • Layers are the same wave family at rising opacity, so they always read as one body of water rather than three unrelated lines.
  • Flip fills upward for the top edge of a section; pair a flipped and an unflipped copy to book-end a band.

Related tools