SVG Wave Generator
Create layered SVG wave dividers for section backgrounds. Tune amplitude, wavelength, and color, then copy the SVG.
Pure browser JavaScript — generates SVG waves locally.
How to use this tool
- Drag the amplitude and wavelength sliders.
- Pick a color and optionally flip the wave.
- Copy the SVG or download it for use as a section divider.
Create layered SVG wave dividers for section backgrounds. Tune amplitude, wavelength, and color, then copy the SVG.
How it works
The SVG Wave Generator creates layered wave shapes used as section dividers in web pages. A wave at the bottom of one section creates a smooth visual transition into the next section's background color.
Use the amplitude slider to control how tall the wave peaks are. A low amplitude gives a gentle, subtle ripple while a high amplitude creates dramatic rolling waves. The wavelength slider controls how many wave cycles appear across the width. Layering multiple waves at different opacities creates a more complex, depth-filled look.
Set the fill color to match the background of the section that the wave is flowing into, and place the SVG at the bottom of the preceding section. The generated SVG uses a preserveAspectRatio attribute set to none so it stretches to any container width without leaving gaps at the edges.
Copy the SVG markup and paste it directly into your HTML, or download the .svg file to use in a design tool.
Worked example
Add a wave divider between two sections
- Set the fill color to match your second section's background (e.g. #f5f5f5).
- Adjust amplitude to about 40px and set 1-2 wave cycles.
- Copy the SVG markup.
- Paste it at the end of your first section's HTML, just before the closing section tag.
- Set the SVG's display to block and width to 100% in your CSS.
A smooth wave transition between sections that matches the target background color, with no visible seam.
Common mistakes to avoid
- Setting the fill color to the current section's background instead of the next section's background, causing the wave to be invisible.
- Using a fixed pixel width on the SVG element, which causes gaps or overflow on screens wider or narrower than that fixed width.
- Adding too many wave layers with full opacity, which can obscure content; use partial transparency (e.g. opacity: 0.5) on secondary layers.
Key terms
- Amplitude
- The height of the wave from its center line to its peak or trough; a larger amplitude means taller, more dramatic waves.
- Wavelength
- The horizontal distance of one complete wave cycle; shorter wavelengths produce more waves across the same width.
- preserveAspectRatio
- An SVG attribute controlling how the graphic scales; setting it to none allows the wave to stretch to fill its container without distortion gaps.
Frequently asked questions
- How do I use a wave divider?
- Drop the SVG at the top or bottom of a section. Set width:100% and it scales fluidly via preserveAspectRatio="none".