SVG wave generator
A wave is already made. Press “Another one” for a different one, change its edge, its crests and its layers, and download a small SVG that stretches to any width.
Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.
1,440 × 320 pixels, 3 crests, 2 layers; it stretches to fit the box you put it in.
Fine-tune: size, depth, colour, seed
- File
- wave-smooth-1.svg, 625 bytes
- Seed
- 1: the same settings and seed always give this same file
How to make an SVG wave
- Look at the wave the page opens with. If you like it, download it.
- Press “Another one” to roll a new wave from the same settings. “Back to the last one” returns to the one before.
- Pick the edge (smooth, peaks or steps), the number of crests and the number of layers.
- Choose whether the solid part lies below the wave or above it, and set the colour under Fine-tune.
- Download the SVG, or copy its code to paste straight into a page.
What the file is
The SVG is 1,440 × 320 pixels unless you change it, and holds one <path> for each layer. A path starts at the left edge, runs along the wavy line to the right edge, then goes down and back along the bottom to close, so the wave is a solid filled shape with one wavy side.
With the smooth edge, each stretch between a crest and a trough is a single cubic Bézier curve whose ends are level, which is what makes the wave roll with no kinks. Three crests means seven turning points and six curves. Peaks joins the same points with straight lines; steps draws a flat tread at each one.
The file carries preserveAspectRatio="none". That tells a browser to stretch the picture to fill whatever box it is given, without keeping its proportions, which is what a divider needs: it should always span the full width of the page however wide the window is.
Using a wave between two sections
A wave divider is a strip in the colour of one section, laid along the edge of its neighbour. Put it at the bottom of the upper section in the colour of the lower one, with “Below the wave”, and the lower section appears to rise into the upper in waves. “Above it” turns the picture over for the opposite edge.
As an image, give it the full width and a fixed height: <img src="wave.svg" style="display:block;width:100%;height:120px" alt="">. As a CSS background, use background-size: 100% 100%. The empty alt is right for a decoration, which a screen reader should skip.
With two or three layers, the ones behind are drawn fainter in the same colour: at half strength for two layers, and at two thirds and one third for three. They show the colour underneath through them, so the effect depends on what the wave is laid over.
Seeds, and what is not random
The heights of the crests and troughs come from a seed, a whole number shown beside the result. The same settings with the same seed always give exactly the same file, so a wave you liked can be made again, or matched at another size. The seed changes only when you press “Another one” or type a new one.
What is not random: the crests are evenly spaced, and the wavy edge stays inside the top 60% of the picture (the “depth”, which you can change). Set “Unevenness” to nothing under Fine-tune and every crest is the same height: a regular wave that the seed no longer affects.
This page makes still pictures. It does not write animated waves, gradients or more than three layers.
Questions
How do I change the colour of the wave?
Open Fine-tune and pick it, or edit the file afterwards: the colour is the fill attribute of each path. To let the page’s own text colour drive it, replace the colour with currentColor and put the SVG code in the page itself, not in an image tag.
Why does my wave look squashed or stretched?
It is meant to stretch. The file fills whatever box you give it, so its look is set by the width and height of that box. Change the height of the image or the element until the waves have the slope you want.
How big is the file?
Small. A smooth wave of three crests in two layers is a little over 600 bytes. Each extra crest adds about 60 bytes for every layer.
Can I use the waves in a commercial project?
Yes. A wave made here is yours to use anywhere, with no credit needed.