Blob & Wave SVG Generator

Continue in the tool

More pages for this tool

svg section divider

SVG section divider with peaks, using stacked layers

Not every section divider needs a smooth curve, the "peaks" shape connects points with straight segments and creates an angular cut, closer to a stylized mountain range than an ocean wave. This page opens the generator with the "layered peaks" preset already loaded.

Smooth waves and peaks share the same engine, different shapes

Under the hood, "wave" and "peaks" share the exact same layer structure (amplitude, frequency, phase, opacity, color, position), only the path between points changes: the wave uses the smooth Catmull-Rom curve, the peaks use SVG's `L` (straight line) command, connecting each point to the next with no rounding at all. That means you can mix both inside the same composition, a low-opacity peaks layer in the back with a smooth wave layered on top, for instance, since each layer keeps its own shape independently.
The number of peaks is controlled by the same "frequency" property used for waves, a frequency value of 3 produces 3 full peaks across the width, which makes it easy to try different densities without switching tools.

Common uses for a peaks divider

Separator between a pricing section and the footer

Input: preset: picos em camadas, posição: rodapé
Expected output: 2 camadas de picos sobrepostas

A lighter, lower-opacity back layer creates a sense of depth without competing with the section's content.

Theme with an angular/geometric identity

Input: formato: picos, frequência: 4
Expected output: 4 picos completos na largura

Pairs better with sites that already use straight geometric shapes elsewhere, unlike the smooth wave.

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

Can I switch from peaks to a smooth wave without losing the layer's other settings?

Yes, the "layer shape" field is independent from amplitude, frequency, phase, opacity, baseline and color, so switching from peaks to a wave (or back) keeps everything else you tuned on that layer.

Can I use a peaks divider as a clip mask instead of a solid fill?

The exported `d` is a valid closed path, so it works both filled (the default) and referenced inside a `<clipPath>` or as a CSS `clip-path` value (with the SVG as the resource), though that second approach requires pasting the `d` manually into a `clip-path: path(...)`.

Next steps

Smooth waves and peaks share the same engine, different shapes

Under the hood, "wave" and "peaks" share the exact same layer structure (amplitude, frequency, phase, opacity, color, position), only the path between points changes: the wave uses the smooth Catmull-Rom curve, the peaks use SVG's `L` (straight line) command, connecting each point to the next with no rounding at all. That means you can mix both inside the same composition, a low-opacity peaks layer in the back with a smooth wave layered on top, for instance, since each layer keeps its own shape independently.

The number of peaks is controlled by the same "frequency" property used for waves, a frequency value of 3 produces 3 full peaks across the width, which makes it easy to try different densities without switching tools.

Common uses for a peaks divider

Separator between a pricing section and the footer

Input: preset: picos em camadas, posição: rodapé
Expected output: 2 camadas de picos sobrepostas

A lighter, lower-opacity back layer creates a sense of depth without competing with the section's content.

Theme with an angular/geometric identity

Input: formato: picos, frequência: 4
Expected output: 4 picos completos na largura

Pairs better with sites that already use straight geometric shapes elsewhere, unlike the smooth wave.

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

Can I switch from peaks to a smooth wave without losing the layer's other settings?

Yes, the "layer shape" field is independent from amplitude, frequency, phase, opacity, baseline and color, so switching from peaks to a wave (or back) keeps everything else you tuned on that layer.