SVG Wave Generator - Free, Responsive SVG Waves & Section Dividers

Size & Layout

Width (px)

Height (px)

Baseline (% from top)

65%

Separator position

Wave Physics

Amplitude (px)

60 px crest height

Wavelength (px)

300 px per cycle

Phase (°)

Offset: 0°

Smoothness (px step)

Lower = smoother. Now: 4 px

Layers

3 overlapping swells

Layer spread (px)

Vertical offset per layer: 20 px

Randomness

Crest variation (%)

Modulates amplitude along x (now: 35%)

Noise octaves

3 layers of detail

Noise scale

Higher = more frequent variation (1.2)

Seed

Same seed? same shape

Styling

Base color

Fill opacity

1.00

Show stroke

Outline the wave path

Stroke color

Stroke width (px)

Utilities

The exported SVG is a clean snippet with just the <svg> and <path> layers, drop it straight into your site.

What this SVG wave generator does

Quickly create SVG waves for hero sections, section dividers (aka website separators), and page backgrounds. No libraries required, just copy or download the SVG.

Responsive, preserveAspectRatio="none" friendly

Multiple layers with tinting and optional stroke

Noise-based crest variation for organic shapes

Top or bottom separators, adjustable baseline

FAQ

Can I use these SVG waves commercially?

Yes. The output SVG is yours to use in personal and commercial projects. No attribution required.

How do I add a wave as a section divider?

Place the exported <svg> at the end of a section and set width="100%" and preserveAspectRatio="none" so it stretches responsively.

How do I change the color later?

Edit the fill on each <path> or apply a gradient fill. You can also enable stroke for an outlined look.