Dropping a wave between sections
Place the SVG at the bottom of a section with the wave color matching the next section's background — the eye reads it as the next section flowing up. For a wave along a section's top edge, use the flip option. The SVG uses preserveAspectRatio="none", so it stretches to any width without gaps at the seams.
Why layered waves look better
Three staggered layers at decreasing opacity fake atmospheric depth — the same trick as mountains in game backgrounds. The layers here are lighter tints of your chosen color, computed in HSL, so the set always stays in one family instead of drifting into mud.
Frequently asked questions
Does anything get uploaded?
No. The wave is built in the page, so the markup you copy is the markup you saw.
How do I stop the wave stretching oddly?
preserveAspectRatio="none" lets it stretch to any width, which is usually what a section divider wants. Leave it default and the wave keeps its shape and crops instead.
Why is there a gap under my wave?
The SVG is an inline element and sits on the text baseline. display:block on the element removes the gap.
Can I layer several waves?
Yes — two or three at different opacities and slight offsets is what produces depth. One wave alone tends to look flat.
Something wrong with this tool, or an idea for it? Tell us