tool · one of 51 24-hour trial, then Pro
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 · 24-hour trial, then Pro
What this actually is
Between 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
Why 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.
101 of these · no host permissions · 24 hours of all of them