SVG Wave Generator
Smooth waves for section breaks and headers. Shuffle until the curve is right, stack up to three layers, and take the SVG.
Local onlyEverything on this page — the preview, the randomness, and every file you download — is generated by JavaScript in this tab. Nothing you type, pick, or upload is transmitted, and the page keeps working offline.
A wave divider is the friendliest way to break a page into sections without a hard horizontal line — the curve carries the eye from one background color into the next. This generator draws one from seeded control points smoothed into cubic curves: complexity sets how many bends the wave has, height sets how far it swings, and layers stacks up to three offset copies at falling opacity for the depth effect most landing pages use.
The export is a clean, tiny SVG — a single path per layer, no libraries, no clutter — that scales to any width without losing sharpness. Drop it at the bottom of a section as an <img>, inline it and set the fill to currentColor, or flip it to cap the top of the next section. Every shuffle is a genuinely different wave, so keep pressing until the curve fits your layout.
Questions this tool gets asked
How do I use an SVG wave as a section divider?
Place the SVG at the bottom edge of a section, sized to 100% width, with its fill matching the next section's background color. The wave then reads as the next section's top edge. For the mirrored top edge of a section, generate the same wave and flip it vertically.
Why use SVG instead of a PNG wave?
An SVG wave is a few hundred bytes, stays razor sharp at every screen width, and its fill color can be changed in one attribute — so one file serves every theme. A PNG has one baked color, blurs when stretched, and weighs far more. The PNG export here exists for tools that can't take SVG.
Can I match the wave color to my site exactly?
Yes — set a solid fill with your exact hex, or open the downloaded SVG and edit the fill attribute any time. If you inline the SVG in HTML, set fill="currentColor" and the wave inherits your CSS text color.
What do the layers do?
Layers stack offset copies of the wave behind the main one at 50% and 25% opacity. Against a contrasting background this creates the layered-depth shoreline look; with a single layer you get one clean curve.
Is the wave random or repeatable?
Each shuffle uses a new random seed, and the sliders reshape the current seed's wave live. If you like a wave, download it before shuffling — the exact curve is in the file you save.
Does anything I generate leave my browser?
No. The path math, preview, and exports all run in this tab. The page works offline once loaded, and nothing is uploaded.