SVG Generator: Blobs, Waves, Patterns and Gradients

Pick one of 6 modes (blob, waves, pattern, badge…), adjust colors and seed, then export the result as an SVG file.

Generate an SVG blob, wave or pattern: method and exports

The generator computes vector paths from a random seed: the same seed and settings always produce exactly the same file. Six modes are available (blob, waves, repeating pattern, mesh gradient, topographic lines, badge), exportable as SVG, a React component, a CSS background, a data URI or a PNG up to 4 times the size. The default blob weighs under 1 KB.

How a blob is built

The tool spreads N points on a circle (N = complexity, 3 to 16) whose radius is 35% of the shorter side. Each radius is shifted at random within ± (randomness ÷ 10) × 22.5% of the radius, never below 20 px. The points are then joined by a Catmull-Rom curve converted to cubic Bézier segments, with tension set by the roundness slider. Randomness comes from a deterministic pseudo-random generator (Mulberry32) seeded with the seed value.

Example

Default settings: 600 × 600 px canvas, 8 points, randomness 6, seed 42. The base radius is 210 px, each point moves by at most 28.35 px, and the path has 8 Bézier segments. The SVG file is 952 bytes with its three-colour linear gradient; as a base64 data URI it grows to about 1,300 characters, a third more. Seed 43 gives another shape; seed 42 always returns the same one.

Options and limits

  • Effects: grain (fractal noise filter), drop shadow, rotation, mirroring, 12 palettes and 10 presets.
  • Animation adds CSS rules inside the file: it works in browsers but not in most layout software, nor in the PNG export, which freezes a single frame.
  • Grain and the mesh gradient blur rely on SVG filters, which are costly to render on large areas or on mobile.
  • The React component is converted from the SVG text: review it before adding it to a typed project.

Everything runs in your browser; no image is sent to a server.

Frequently Asked Questions

How do I get exactly the same SVG shape again?

Note the seed shown (42 by default) and your settings: the tool's pseudo-random generator always produces the same path for the same seed. Changing only the seed, for example to 43, gives a new shape with the same parameters. The shuffle button picks a seed between 0 and 99,999.

Should I export as SVG or PNG?

SVG stays sharp at any size and often weighs under 1 KB for a simple blob (952 bytes with the default settings). PNG suits tools that do not accept vectors; the tool exports it at 1x, 2x or 4x the canvas size, i.e. 2,400 × 2,400 px at 4x for a 600 px canvas. Animation is lost in PNG.

How do I use the blob as a CSS page background?

Pick the CSS format: the tool minifies the SVG, encodes it as a data URI and gives a background-image rule with background-size: cover and centring. Paste it into your section's stylesheet. The base64 data URI format is about a third heavier than the original SVG.

Does the animation work everywhere?

The animation is written in CSS (keyframes) inside the SVG file. It plays when the SVG is shown in a browser, but Figma, Illustrator or PowerPoint usually ignore it, and the PNG export keeps a single still frame. Speed ranges from 2 to 16 seconds per cycle.

Is this tool really free?

Yes, all tools on Kristools are 100% free and accessible without registration.

Is my data protected?

Yes. All processing is performed directly and securely inside your browser. No personal data is sent to our servers.