Blob & Wave SVG Generator

Continue in the tool

More pages for this tool

svg wave for website

SVG wave for a website, ready for a section top or bottom

An SVG wave between two sections breaks up the monotony of stacked rectangular blocks, a common device in modern landing pages. This page opens the generator in wave mode, with the "simple wave" preset loaded.

How a wave layer becomes a fillable SVG

Each wave layer is a smooth curve (the same Catmull-Rom family used by the blob, but as an open path, not closed into a loop) that ends flush against the opposite edge of the rectangle, forming a closed, fillable area, not a loose line. Amplitude, frequency (how many periods fit across the width), phase (horizontal offset in degrees) and opacity are all independent per layer, so you can stack 2 to 4 layers with translucent colors and build depth, the way Haikei and get-waves.io section dividers do.
An amplitude of zero does not become an almost-straight curve due to floating point rounding, it is handled as a special case and turned into an exact straight line (with no curve command left in the `d`), useful for temporarily turning off a layer without removing it from the composition.

Common uses for a section wave

Transition between a hero and the next section

Input: preset: onda simples, posição: rodapé
Expected output: onda de 1440×180

A single layer with moderate amplitude already covers most cases, without overdoing the visual movement.

Double layers with depth

Input: preset: onda dupla
Expected output: 2 camadas com fases diferentes

A lighter, more translucent back layer and a more opaque front layer create the illusion of two overlapping ocean waves.

Full tool FAQ

Why use a seed instead of just "generate random"?

Because a random blob without a seed is impossible to get back: if you liked the shape and reloaded the page, it is gone. With a seed, the same string always reconstructs the exact same blob, so you can write down the seed, paste it into a link, or commit it in code, and the visual result never changes.

Does the blob close cleanly or does it leave a seam at the closing point?

What's the difference between irregularity and smoothness?

Do the exported SVGs work in any browser and design tool?

Why does the exported SVG have so few decimal places compared to other generators' 15-digit coordinates?

How does the morph animation between two shapes work?

Can I use the SVG as a CSS section background-image?

What's the difference between the "sine" wave and the "peaks" wave?

Frequently asked questions

Does the wave work for both the top and the bottom of a section?

Yes, the position option decides which side the filled area rests against: with "top" the curve forms the upper edge and the fill goes down, with "bottom" it is the opposite, the same layer settings work in either case.

Does the wave stretch without distorting if the site section is wider than 1440px?

The exported SVG uses `preserveAspectRatio="none"`, meaning it is meant to stretch horizontally to the container's real width via CSS (`width: 100%`), keeping the fixed height set in the generator, exactly like production-ready section dividers.

Next steps

How a wave layer becomes a fillable SVG

Each wave layer is a smooth curve (the same Catmull-Rom family used by the blob, but as an open path, not closed into a loop) that ends flush against the opposite edge of the rectangle, forming a closed, fillable area, not a loose line. Amplitude, frequency (how many periods fit across the width), phase (horizontal offset in degrees) and opacity are all independent per layer, so you can stack 2 to 4 layers with translucent colors and build depth, the way Haikei and get-waves.io section dividers do.

An amplitude of zero does not become an almost-straight curve due to floating point rounding, it is handled as a special case and turned into an exact straight line (with no curve command left in the `d`), useful for temporarily turning off a layer without removing it from the composition.

Common uses for a section wave

Transition between a hero and the next section

Input: preset: onda simples, posição: rodapé
Expected output: onda de 1440×180

A single layer with moderate amplitude already covers most cases, without overdoing the visual movement.

Double layers with depth

Input: preset: onda dupla
Expected output: 2 camadas com fases diferentes

A lighter, more translucent back layer and a more opaque front layer create the illusion of two overlapping ocean waves.

Full tool FAQ

Why use a seed instead of just "generate random"?

Does the blob close cleanly or does it leave a seam at the closing point?

What's the difference between irregularity and smoothness?

Do the exported SVGs work in any browser and design tool?

Why does the exported SVG have so few decimal places compared to other generators' 15-digit coordinates?

How does the morph animation between two shapes work?

Can I use the SVG as a CSS section background-image?

What's the difference between the "sine" wave and the "peaks" wave?

Frequently asked questions