SVG Wave Generator
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 150" width="100%" height="150" preserveAspectRatio="none"> <path d="M 0 75.0 C 180.0 15.0, 180.0 45.0, 360.0 45.0 C 540.0 135.0, 540.0 105.0, 720.0 105.0 C 900.0 15.0, 900.0 45.0, 1080.0 45.0 C 1260.0 135.0, 1260.0 105.0, 1440.0 105.0 L 1440 150 L 0 150 Z" fill="#0c6249" /> </svg>
The SVG wave generator produces a wave-shaped divider for the boundary between two page sections. The wave is built from cubic Bezier curves, one per half-period, which keeps the path short enough to paste into a component by hand rather than being thousands of line segments.
How it works
- Amplitude is the vertical distance from the centre line to a peak, in pixels.
- Frequency is how many complete waves fit across the width.
- Phase shifts the wave sideways, so two stacked waves are not identical.
- Fill direction decides whether the shape fills below the curve, for a section footer, or above it, for a header.
The SVG uses preserveAspectRatio="none" and a width of 100 percent, so it stretches to the container rather than scaling proportionally. That is correct for a divider, you want the height fixed and the wave to span whatever width is available.
Examples
A gentle section divider
Amplitude
30px
Waves
2
Height
150px
Result
An SVG with a path of four Bezier segments, filled below the curve
Two waves across the width means four half-periods, so the path has four curve commands plus the closing lines.
Two stacked waves
Phase
0 for the first, 3 for the second
Result
Two waves whose peaks do not line up
Shifting the phase of the second wave by roughly half a period makes the pair read as layered rather than as one thick line.
Frequently asked questions
Why does the wave stretch instead of scaling proportionally?
Because preserveAspectRatio is set to none, which is what you want for a divider. The height stays as specified and the wave spans the full container width at any screen size. Proportional scaling would make the divider taller on wide screens.
Should I use this as an image or inline in the markup?
Inline, in almost every case. Inlining lets the fill colour come from a CSS variable so the wave follows a theme, and it avoids an extra request. Use a file only if the same wave repeats on many pages and you want it cached.
Why Bezier curves rather than a polyline?
Because a smooth wave drawn as line segments needs hundreds of points to avoid looking faceted, which produces a path too long to read or edit. One cubic Bezier per half-period is smooth at any size and short enough to paste into a component.
How do I make the wave match my section colour?
Set the fill on the path to the colour of the section the wave belongs to. The wave is the bottom edge of one section, not a separate band between two. Replacing the fill value with a CSS variable makes it follow your theme automatically.