SVG wave generator

Design a layered SVG wave divider and copy or download the markup.

Builds a layered sine-wave divider as inline SVG markup. Back layers fade automatically. The SVG scales with viewBox + preserveAspectRatio=none — paste it into a section edge.

Everything runs in this browser.

How to use

  1. Set canvas size, amplitude, crests, and layers.
  2. Pick a color, position, and opacity.
  3. Preview, then copy or download the SVG.

What it supports

Canvas 100–4096 × 50–2048 px, 1–12 crests, 1–5 layers, amplitude up to 50% of height, #rrggbb fill. Output is a self-contained <svg> with viewBox and preserveAspectRatio="none" so it stretches across a section edge. Gradients and animation are not emitted.

Related tools

Related guides