SVG Wave Generator
Create smooth wave dividers for your sections. Tune the amplitude, number of waves, phase and color, then copy production-ready SVG.
Curved section dividers, the easy way
A wave divider turns the hard edge between two sections into a flowing curve — a small touch that makes landing pages feel more polished. This generator builds the SVG path for you from a few sliders, so you never have to hand-write bezier coordinates.
How to use it
- Shape the wave. Drag amplitude and wave count until the curve feels right.
- Shift it. Use phase to move the crests, and Flip to put the wave at the top of a section.
- Match your palette. Set the fill color to the section it sits against.
- Copy the SVG. Paste it between your sections — it stretches to any width.
Frequently asked questions
What is an SVG wave divider?
It's a wavy SVG shape used to separate two sections of a page with a curved edge instead of a flat line. You drop the SVG between sections and it fills with a color to create the divider.
How do I use the SVG on my site?
Copy the generated SVG and paste it into your HTML where you want the divider, or set it as a background. The SVG uses preserveAspectRatio='none' so it stretches to any width.
What do the controls do?
Amplitude sets how tall the wave peaks are, waves sets how many crests span the width, and phase shifts the curve sideways. Flip mirrors the wave so it works at the top or bottom of a section.
Can I get a different wave each time?
Yes — hit Randomize for a fresh combination of amplitude, wave count and phase, then fine-tune with the sliders.
Is anything sent to a server?
No. The path math and SVG are generated entirely in your browser. Nothing is uploaded.