How do I reshape the wave or blob?

Pick the Wave or Blob tab, then drag the round handles that sit on the curve. Use the sliders for amplitude, complexity and size, pick one of the 10 quick presets, or hit Randomize for a fresh shape. The colored preview updates live as you drag.

Does the animation loop seamlessly?

Yes. Waves are drawn as a duplicated path that translates by exactly one tile using SMIL, so the loop has no visible seam. Blobs morph between two organic outlines with the same path structure, which SMIL interpolates smoothly. Turn it off any time for a static export.

How do I use the divider between two sections?

Copy the HTML divider output. It is two stacked sections with the wave SVG placed at the boundary so the colors meet exactly at the curve. Paste it between your content blocks; the next section's background is already set to match the wave color, so there is no gap.

Free SVG Wave, Blob & Divider Maker

🌊 Drag to Sculpt · Animate · Export

SVG Wave, Blob & Divider Maker

Drag the handles to shape waves and blobs, switch on a seamless loop, then export the SVG, a CSS background, a ready‑to‑paste HTML divider, or the raw path data.

Quick presets

Amplitude

Complexity

Divider height

Flip vertically

Points

Irregularity

Size

Appearance

Shape fill

Color 1

Color 2

Background / other side

Add outline stroke

Animation

Animate (seamless loop)

Speed

Live canvas — drag the white handles

SVG markup

How the Drag Editor Works

The white dots on the curve are real control points. Drag one and the shape re‑smooths through it using a Catmull‑Rom spline, so the line always passes exactly under your cursor. The handles are drawn as HTML elements positioned by percentage over a stretched SVG, which is why they stay perfectly round whether the canvas is 300 or 1300 pixels wide, and why dragging works just as well with a finger on a phone as with a mouse.

Seamless Animation, Done Properly

Most wave tools either do not animate or fake it with a CSS background that cannot loop. Here, an animated wave is drawn as two identical tiles side by side and shifted by exactly one tile width with a SMIL transform, so the loop joins with no seam. An animated blob morphs between two organic outlines that share the same path structure, which SMIL interpolates frame by frame. Because the motion is SMIL (not CSS), it is unaffected by any stylesheet and survives inside the exported .svg file too. The CSS‑background export is honestly labelled static, since browsers do not animate an SVG used as a background-image.

Four Ways to Export

SVG — a standalone, scalable file (animated if the toggle is on) you can drop into any project or open directly in a browser.
CSS background — a data: URI snippet that paints the static shape behind a section, pinned to the bottom for waves or centred for blobs.
Divider HTML — two stacked sections with the wave placed at the boundary so the colours meet exactly at the curve; paste it between content blocks and it just works.
Path d — the raw vector data, for designers who want to drop the curve into Figma, Illustrator or a Cricut project.

Why It Stays Private and Fast

Everything — the spline math, the tracer‑free path generation, the SMIL keyframes and the file export — runs in your browser with no library and no server call. Nothing you draw ever leaves your device, the page loads instantly, and the tool keeps working offline.