SVG Wave Generator

Create Smooth SVG Waves for Section Dividers

Waves are one of the cleanest ways to separate two sections on a page — they add motion, personality, and depth without needing an image. This SVG Wave Generator creates a plain <path> element wrapped in an <svg> element, sized to stretch across any container with width: 100%.

Controls

• Segments — how many humps the wave has. One segment gives a single gentle curve, ten segments give a busy up-and-down pattern.
• Amplitude — the vertical swing of each hump. Low amplitude gives a subtle ripple; high amplitude gives a dramatic wave.
• Seed — deterministic integer that controls the random variation between humps. Hit re-roll to cycle through new shapes.
• Flip — toggles between a bottom divider (wave at the top, fill below) and a top divider (wave at the bottom, fill above).
• Fill — solid color or a two-stop linear gradient at any angle.

Using the Output

Because the SVG uses preserveAspectRatio="none", you can stretch it to any width by wrapping it in a container with a CSS width — the wave will scale with the page while keeping its height. Drop the generated SVG directly into your HTML, React component, or template system.

<div style="width:100%"><!-- generated svg --></div>

Common Uses

• Dividers between the hero section and the next block
• Playful page footers
• Animated background curves (the path can be animated with CSS or SMIL)
• Decorative shapes behind pricing cards, testimonials, or feature sections
• Loading placeholders and section transitions

The path is deterministic — the same seed always produces the same wave — so once you find a shape you like, it stays stable. Save the SVG to a file if you need to edit it in a vector editor or tweak the colors by hand.