SVG Wave & Blob Generator

What is the SVG Wave and Blob Generator?

This tool generates SVG waves and organic blob shapes for use as section dividers, backgrounds, and decorative elements, giving you the markup to paste directly into your page.

SVG is a vector format, so shapes are described mathematically rather than as pixels. They stay perfectly sharp at any size and on any display density, and the file size stays small because a complex-looking curve is only a short path description.

Waves are commonly used as dividers between page sections, softening the hard horizontal line where two background colours meet. Blobs are irregular rounded shapes used as backgrounds behind content or as decorative accents.

Because SVG is markup rather than an image file, the output can be embedded inline and styled with CSS, colours changed with custom properties, shapes animated, or fills adjusted for a dark theme without generating a second asset.

How to use the SVG Wave and Blob Generator

Choose a shape type. Wave for section dividers, blob for organic background shapes.
Adjust the parameters. Vary amplitude, complexity, and randomness until the shape suits your layout.
Set colours. Pick a fill, or a gradient where the shape supports it.
Copy the SVG. Paste the markup inline into your page, or save it as an .svg file.

Worked examples

A wave section divider

A path with a smooth curve, sized to the viewport width and placed at the boundary between two sections.

Input

Type:      wave
Amplitude: medium
Width:     1440

Output

<svg viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg">
  <path fill="#2563EB" d="M0,64 C240,112 480,16 720,48
    C960,80 1200,32 1440,64 L1440,120 L0,120 Z" />
</svg>

Place it at the bottom of a section, with the fill matching the next section's background.

Why inline SVG is useful

Inline markup can be styled by the surrounding CSS, which an img tag cannot.

Input

<svg class="divider" viewBox="0 0 1440 120">
  <path d="..." />
</svg>

Output

.divider path {
  fill: var(--section-bg);
}

@media (prefers-color-scheme: dark) {
  .divider path { fill: var(--section-bg-dark); }
}

One asset adapts to both themes.

Common use cases

Section dividers. Softening the transition between page sections with contrasting backgrounds.
Hero backgrounds. Adding visual interest behind headline content without a background image.
Decorative accents. Blobs behind cards, avatars, or icons to add depth.
Loading and empty states. Simple shapes give otherwise blank states some visual structure.

Features and limitations

Generates both wave and blob shapes with adjustable parameters.
Outputs clean, standalone SVG markup ready to paste.
Shapes scale to any size without loss of quality.
Inline output can be styled and animated with CSS.
Decorative SVG should carry aria-hidden="true" so screen readers skip it, since it conveys no information.

Frequently asked questions

Should I use SVG inline or as an image file?

Inline when you want to style or animate it with CSS, which is usually the case for a divider that must match a section background. An external file is better when the same shape repeats across many pages and can be cached.

Will these shapes scale on any screen?

Yes. SVG is resolution-independent, so shapes stay sharp on high-density displays and at any size. Setting a viewBox and letting width scale to 100% is the usual approach.

How do I make a wave sit flush against a section?

Match the wave's fill to the adjacent section's background colour and position it at the boundary with no gap. A one-pixel overlap avoids hairline seams caused by sub-pixel rounding.

Do these affect accessibility?

Decorative shapes should be hidden from assistive technology with aria-hidden="true", so screen readers do not announce them. They convey no information, so there is nothing to describe.

Can I animate the shapes?

Yes. Inline SVG paths can be animated with CSS or JavaScript. Respect prefers-reduced-motion, since continuous background animation can be uncomfortable for some users.

Is the markup generated locally?

Yes. Shapes are generated in your browser with no network request.

All processing happens locally in your browser, your data never leaves your device.

Customization Controls