Wave Generator

How to use it

1. Set the layers count. One layer is a single clean swell; three or four give the stacked look used for page dividers.
2. Drag amplitude for how tall each crest is, and wavelength for how wide a full wave cycle is. Small wavelength values give choppy water, large values give long rolling swells.
3. Set the height of the graphic and the opacity shared by all layers.
4. Assign a color to each layer from left to right in the color row. Unused layers simply keep their color stored for later.
5. Copy the SVG and place it at the bottom of the section above, or the top of the section below, with position: absolute and bottom: 0.

Common use cases

• Footer and section dividers - the stretched wave sits between two blocks of different background colors.
• Hero backdrops - a wide, low-amplitude wave under a headline reads as horizon or water.
• Onboarding illustrations - two or three layers add motion to an otherwise static empty state.
• Email and landing page mockups - inline SVG needs no image request and scales cleanly.

Why it stays private

The paths are computed from the slider values in the page and the preview is the exact markup you copy. Nothing is uploaded and no image is rendered on a server.

FAQ

Q: Why does the preview stretch when I widen the window? A: The viewBox is fixed at 1440 units wide while preserveAspectRatio="none" tells the browser to stretch the graphic to the container. That is what makes a divider span any screen without repeating.

Q: How do I flip the wave or point it upward? A: Wrap the SVG in a container with transform: rotate(180deg), or place the file at the top of a section instead of the bottom. The path itself always fills downward from the crest.

Q: Can I use more than four layers? A: The tool supports four, which covers nearly all divider designs. For more layers, copy a <path> line and change its fill color; the phase spacing stays consistent.

Q: Do the colors blend between layers? A: No. Each layer is an opaque-ish path with the opacity you set, drawn from the back layer forward, so overlapping areas mix visually through transparency rather than a gradient.