tool · one of 51 Pro SVG and markup
Waves
How do I get a wavy edge between two sections of a page?
A wavy edge between two sections is an SVG path, and generating one usually means a website, a random result you cannot get back, and a file with a fixed colour. This draws layered waves, peaks or steps from a seed - so a shape somebody liked can be had again - and previews it under a block the colour of the section above, because a divider is judged at the seam and not on its own.
Reach it Press ⌘ + K on any tab and type waves. Ctrl + K on Windows and Linux
in the panel · this one is Pro
What this actually is
layered svg section dividers - waves, peaks or steps - seeded and tunedBetween a hero and the section under it, at the foot of a pricing band, or at the top of a footer. Flip puts the same shape on the upper edge, so one divider can close a section and the next can open one.
Asked about this tool
3 of themWhy is it seeded?
So a shape you liked is not lost to the next shuffle. The same seed and settings draw the same divider every time, on any machine.
Will it stretch with the page?
Yes. The SVG is drawn to scale across the width it is given, so one divider fits a phone and a wide screen without a second file.
What do the layers do?
Each extra layer is the same shape offset and faded behind the first, which is what gives a divider depth instead of a single hard edge.
how to use waves
- Open Waves and pick Waves, Peaks or Steps.
- Set the layers, the crests and the height, and choose the colour.
- Press Shuffle for a new seed, and Flip to put it on the top edge.
- Take it as an SVG file or as paste-ready HTML.
96 of these · no host permissions · three free audits