What is an SVG wave divider used for?

A wave divider is a curved SVG shape placed between two page sections — most often at the top or bottom of a hero banner or footer. Because it is vector, it scales to any width without blurring and stays a tiny file. Designers use them to soften the hard horizontal line where two background colours meet, giving a page a modern, fluid look.

How do amplitude and wavelength change the wave?

Amplitude is the peak height of the wave in pixels — bigger amplitude means taller crests and deeper troughs. Wavelength is the horizontal distance of one full crest-to-crest cycle, so a short wavelength packs more ripples across the canvas while a long one gives a single lazy swell. Phase shifts the wave left or right, which is how stacked layers are offset so they do not line up.

Why stack multiple layers?

Layering two or three semi-transparent waves of different amplitude, wavelength and colour creates depth and a sense of motion even when static. The back layer is usually the most opaque, with lighter layers in front. This is the same technique behind the popular gradient hero waves you see on SaaS landing pages.

Is the animation real or just a preview?

It is real. When you enable Animate, the exported SVG embeds a SMIL animateTransform element that scrolls the wave horizontally and loops seamlessly — no JavaScript or CSS required. The wave is drawn twice side by side and translated by one canvas width so the loop has no visible seam. Static SVGs omit the animation entirely.

Will the exported SVG work in my website or email?

The download is a standard, self-contained SVG file you can use as an inline element, a CSS background, or an img source on any website. Animated (SMIL) waves play in all current browsers but not inside most email clients, so choose a static export for email. The markup uses preserveAspectRatio="none" so it stretches cleanly to any container width.

Is anything uploaded to a server?

No. Every wave is computed and rendered in your browser using plain SVG path maths, and your settings are saved only in this browser via local storage. Nothing is sent anywhere, so you can use it offline and on private work without any privacy concern.

SVG Wave Generator — Gera Tools

The SVG Wave Generator builds smooth, layered wave dividers — the curved shapes designers drop between page sections, at the bottom of a hero banner, or above a footer. You control every detail: the canvas size, which edge the waves cling to, the amplitude and wavelength of each layer, its colour, opacity and phase, and whether the whole thing gently animates. When it looks right, download a clean, self-contained .svg file or copy the markup straight into your page. Everything runs in your browser, so there is no upload, no sign-up and no watermark.

How it works

Each layer is a sine-based curve sampled across the canvas and closed down to the chosen edge so it can be filled with a solid colour. The generator offers three wave shapes: a smooth sine, a double-harmonic blend that adds a second faster ripple for a more organic crest, and rounded crests that flatten the peaks slightly for a softer feel.

Stacking layers is where it gets interesting. Give the back layer the largest amplitude and full opacity, then add lighter, shorter-wavelength layers in front with different colours and phase offsets. Because the layers do not line up, the overlap reads as depth. You can add up to eight layers and reorder them so any one sits in front or behind. Enable Animate and each layer with a non-zero speed scrolls horizontally using an embedded SMIL animateTransform — the path is drawn twice and translated by one full canvas width, so the loop repeats with no visible seam and needs no JavaScript at all.

The export is a real vector file with preserveAspectRatio="none", meaning it stretches to fill any container width without distorting the height — exactly how a full-bleed section divider should behave. Your last design is remembered in this browser, and you can export the configuration as JSON to share or version it.

Example

Say you want a calm three-layer footer wave on a dark hero. Set the canvas to 1200 × 220, anchor to the bottom edge, and pick a dark navy background. Make layer one a deep indigo at full opacity with an amplitude of 30 and a long 520px wavelength. Add layer two in violet at 55% opacity, amplitude 20, wavelength 360, phase shifted 60°. Add a third pink layer at 40%, amplitude 12, short 260px wavelength. The three offsets interleave into a layered swell. Tick Animate, give the front layers a speed of 8–12 seconds, and the waves drift slowly. Hit Download SVG and paste it above your footer markup.

Layers	Look	Typical use
1	Clean single curve	Minimal section break
2	Subtle depth	Hero banner bottom
3+	Rich, fluid motion	Landing-page footer

Every shape is generated locally — nothing about your design ever leaves this page.