SVG Wave Generator
Generate smooth, peaked or stepped SVG waves with layers, amplitude and seeds. Download the .svg or copy it as a CSS background data URI for section dividers.
Wave settings
The same settings and seed always produce the same shape.
Preview
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z"/></svg>
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,179.3C60,182.3 240,196.2 360,197.6C480,199.1 600,202.7 720,188C840,173.3 960,115.7 1080,109.5C1200,103.3 1380,143.8 1440,150.7L1440,320L0,320Z'/%3E%3C/svg%3E");Related Tools
View AllWhat is SVG Wave Generator?
Creates wave shapes as SVG for section dividers and backgrounds. Choose smooth curves, sharp peaks or steps, stack up to five layers, flip the wave to the top, and export as an .svg file or a ready-to-paste CSS background-image data URI.
How to use SVG Wave Generator
- Pick a Color and Wave style (Smooth, Peaks, Steps) and the Position (Bottom or Top).
- Adjust Complexity, Amplitude, Layers, Opacity, Width and Height.
- Click Randomize or type a Seed to get a different but reproducible wave.
- Download .svg or copy the SVG code.
- Or copy the CSS background (data URI) to use the wave without a separate file.
Example
Complexity 2, amplitude 0, 1440×320, color #0099ff
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="#0099ff" fill-opacity="1" d="M0,160C120,160 480,160 720,160C960,160 1320,160 1440,160L1440,320L0,320Z"/></svg>
Amplitude 0 gives a flat line, which shows the exact Bézier construction.
When to use SVG Wave Generator
Use it for wavy section dividers, footers and hero backgrounds. preserveAspectRatio="none" makes the wave stretch to any width, which suits full-width dividers; for illustrations that must keep proportions, edit the SVG in a vector editor.
How SVG Wave Generator works
The width is split into equal segments; each point's height is the baseline plus a seeded pseudo-random offset (mulberry32) scaled by the amplitude. Smooth waves pass a Catmull-Rom spline through the points, converted to cubic Bézier C commands; peaks use straight lines and steps use horizontal/vertical lines. The path is closed to the bottom (or top) edge. Multiple layers use different baselines and seeds, with opacity increasing towards the front. The data URI keeps the SVG readable and percent-encodes only unsafe characters.
Common Use Cases
- Wavy dividers between landing page sections
- Layered footer backgrounds
- Hero section bottoms
- Background images via CSS data URIs
- Reproducible decorative shapes in design systems
FAQs
Will I get the same wave again?
Yes. The same settings and Seed always generate identical SVG markup.
Inline SVG or data URI?
Inline SVG can be styled and animated with CSS; a data URI in background-image keeps your HTML clean but cannot be restyled after encoding.
How do I place a wave at the top of a section?
Set Position to Top; the path is closed to the top edge so it fills upwards.