Generate SVG wave

Generate a smooth SVG wave path with controllable amplitude and wavelength.

freeworks offlinenothing uploaded
ToolSVG Wave Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

A wave is sampled as alternating peaks and troughs, converted into smooth path segments, and optionally closed against a baseline for a filled shape. Amplitude, wavelength, phase, and viewBox width determine the geometry. Adjusting phase shifts the pattern without changing amplitude or wavelength.

  • Parameterized waves provide predictable repetition and vector scaling.

Worked example

Three-layer blue wave section background
Generate a layered blue wave pattern
Input
											Width: 1200
Height: 150
Waves: 3
Color: #3498DB
Amplitude: 30
Frequency: 2
Flip: false
Output

When to use this

Hero boundaries, waveform accents, and soft repeating backgrounds generate waves.

Edge cases

  • A wavelength that does not fit the viewport leaves a partial cycle.
  • A large amplitude can move the path outside the viewBox.
  • A filled wave needs baseline closure to avoid an open shape.

References