SVG output and building blocks

SVG strings

The core renders without React, for Node servers, static sites and build scripts:

import { writeFileSync } from "node:fs";
import { scene, toSvg } from "blobscape";

const svg = toSvg(scene({ seed: "/about", height: 3200, fill: "#fde4ec" }));
writeFileSync("about-background.svg", svg);

The output is one <svg> with one <path> per blob, coordinates rounded to two decimals, so the same input always gives the same bytes.

`toSvg` option	Default	Meaning
`containerWidth`	canvas width	Width to draw into. Fixed mode centers and crops the canvas; fluid mode scales x positions.
`idPrefix`	`"blobscape"`	Prefix for gradient ids.
`precision`	`2`	Decimal places.

Email: many email clients, Gmail among them, don't display SVG. For email, convert the SVG to PNG first.

Render data

render(scene) returns the same output as plain data (paths and gradient definitions), for drawing with another framework or onto a canvas. <Blobscape> is built on it.

Building blocks

Each stage of the pipeline is exported for advanced use. They take plain data and return plain data.

Export	What it does
`createRandom(seed)`	Seeded random generator with independent named sub-streams: `random.fork("band", 3).value("x")`.
`generateShape(options, seed)`	One shape in a unit box, with its bounding radius.
`place(options)`	The positioner: placements for a height, without rendering.
`numberSampler`, `fillSampler`, `choiceSampler`	The distribution system: per-blob values by index.
`parsePath(d)`, `userShape(shape)`	Parse SVG path data into blobscape's shape format.
`toPathData(shape, transform)`	Shape to SVG path data, with rotation, scale and position applied to the coordinates.
`toContainerX(x, width, containerWidth, mode)`	Maps canvas x to container x for fixed and fluid modes.