SVG wave pattern generator
Build a layered SVG wave pattern with customizable color, amplitude and number of layers, for a section background or banner. 100% local processing in your browser — nothing is sent to a server.
How it works
The pattern is built by stacking several semi-transparent sine curves, from the highest (thinner and more opaque) to the lowest (wider and softer), to create a sense of depth similar to a classic "waves" banner used at the bottom of a homepage section. Each layer has a slightly different phase shift so the curves never line up perfectly.
Does the downloaded file keep perfect quality at any size?
Yes, it is a true vector SVG: you can embed it as is in a web page (it adapts to the width of its container through its viewBox) or enlarge it in design software with no loss of sharpness, unlike a bitmap image.
How do I use it as a section background on my website?
Copy the SVG code and paste it directly into your HTML, or download the file and reference it as a CSS background image. For a banner effect at the bottom of a section, position it with position: absolute; bottom: 0 and width: 100%.
The pattern is generated entirely in JavaScript in your browser, with no network calls.