How to batch svg blob generation for design system integration
- Step 1Define your blob configuration — Set your design system's blob parameters in a config file: complexity (e.g., 6), randomnessRange ([0.3, 0.6] — blobs will have randomness between these values), and a colour palette. These parameters define the 'blob family' for your system.
- Step 2Generate via API with seed sequences — POST to the /blob/batch endpoint with count: 20 and your configuration. Specify seeds as a sequential array (1–20) for reproducible outputs. The API returns 20 unique blob SVGs all sharing the same complexity and style parameters.
- Step 3Integrate into the design system — Store the generated SVGs in your design system's asset library. Create a BlobBackground and BlobAvatar component that accepts a blob index prop and renders the appropriate SVG. Commit the generated blobs to version control.
Frequently asked questions
How do I ensure blobs look consistent as a design language?+
Fix the complexity parameter (e.g., complexity: 7 for all blobs in the system). Vary only the randomness within a narrow range (0.3–0.5) and the seed. This produces blobs that are clearly siblings — varied but recognizably from the same design language.
Can I version-control the blob seeds for reproducibility?+
Yes. Store the seeds alongside your design tokens. When you regenerate blobs (e.g., after a colour scheme change), use the same seeds to produce identical shapes in the new colours. Seeds are integers — simple to store in JSON or a spreadsheet.
How do I use blob shapes as card backgrounds in a React component library?+
Create a BlobCard component that imports a pre-generated blob SVG as a background via an img tag or inline SVG, positioned absolutely behind the card content. Accept a variant prop (1–20) that maps to the appropriate blob file. This gives designers 20 distinct card background options from the curated blob library.
Can I generate animated blob variants for a loading skeleton?+
Yes. Generate pairs of blobs with identical complexity but different seeds. In the skeleton component, morph between the two blobs using a CSS d property animation for a subtle organic breathing effect. This is more visually interesting than the standard linear gradient shimmer skeleton.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.