Seeded SVG patterns that feel hand-made.

ShapeSoup turns a simple config and seed into deterministic SVG patterns you can copy, download, share, or drop straight into your app.

Open Playground

SVGDeterministicCopy-readyTypescript

same seed = same soup (try changing the seed above)

seed: aurora-77

Pattern Soup

Every seed cooks a different SVG. Click shuffle to remix them all.

Forest

Blob Scene

Open

seed: forest-12

Sunset

Layered Waves

Open

seed: sunset-88

Poster

Bauhaus Pattern

Open

seed: bauhaus-01

Dream

Mesh Gradient

Open

seed: dream-33

Map

Topographic Lines

Open

seed: map-77

Halftone

Dot Matrix

Open

seed: halftone-44

Generator Families

10 deterministic generators. Pick one, type a seed, and cook.

Blob Scene

Try it

Organic solid blob compositions with layered contour bands.

Layered Waves

Try it

Soft flowing wave backgrounds with smooth curves.

Low Poly Grid

Try it

Triangulated geometric color fields with jitter.

Layered Peaks

Try it

Mountain-like layered peak silhouettes.

Blurry Gradient

Try it

Soft blurred blob gradients for dreamy backgrounds.

Topographic Lines

Try it

Contour-map style organic line patterns.

Dot Matrix

Try it

Seeded halftone-style dot fields with distance radii.

Mesh Gradient

Try it

Soft modern gradient blobs with blur filters.

Noise Grid

Try it

Geometric texture with mixed shapes and jitter.

Bauhaus Pattern

Try it

Playful geometric poster layouts with bold shapes.

How It Works

Three simple steps to your first SVG.

Choose a generator

Pick from 10+ pattern families — waves, blobs, grids, gradients, and more.

Type any seed

A word, a number, anything. Same seed + same config = identical SVG forever.

Copy, download, or share

Export as SVG, PNG, JSX, CSS, or React. Share a link that restores the exact pattern.

Use it in your app.

Drop the npm package into any project. No strings attached.

npm install

import { generateBlobScene } from "@shapesoup/core";

const result = generateBlobScene({
  width: 1200,
  height: 800,
  seed: "my-product-launch",
});

console.log(result.svg);
// deterministic SVG, every time

same config + same seed = same SVG

Every call is deterministic. Cache, test, and version-control your patterns with confidence.

Pure TypeScript — zero browser dependencies in core

Deterministic output — same config + seed = identical SVG

ESM + CJS + TypeScript declarations included

Works with React, Next.js, plain HTML, and design tools

Features

Everything you need to cook SVGs.

Deterministic Seeds

Same config + same seed = identical SVG, every single time.

Scalable SVG

Crisp at any resolution. No rasterization, no pixelation.

Copy SVG / JSX / CSS

One-click copy in multiple formats for any workflow.

Download SVG / PNG

Export at 1x, 2x, or 4x resolution. Batch export available.

Shareable URLs

Every pattern has a unique link. Share it, bookmark it, reopen it.

Palette Presets

Randomize colors or pick from curated palettes instantly.

Pure TypeScript Core

Zero browser dependencies. Works in Node, Deno, and the browser.

Who is it for?

Anyone who needs beautiful, repeatable SVG backgrounds.

Landing page backgroundsSocial media graphicsOpen Graph imagesApp hero sectionsProduct cardsPlaceholder artCreative coding experimentsDesign system textures

Ready to cook your first SVG?

Pick a generator, type a weird seed, and export something beautiful.

Open Playground

No sign-up. No credit card. Just seeds and SVGs.