How to batch svg pattern generation with api for design systems
- Step 1Define the pattern library spec — Create a patterns-spec.json listing each pattern: { name, motif (SVG path or file), tileSize, rotation, spacing }. Define a colourSchemes array with light and dark variants for each brand colour.
- Step 2Generate via API — POST the spec to the /pattern/batch endpoint. The API generates each pattern in each colour variant and returns them as data URIs and standalone SVG files. 10 patterns × 4 colour variants = 40 files generated in one request.
- Step 3Output CSS custom properties — The batch script writes a patterns.css file with CSS custom properties: --pattern-dots-blue: url('data:...'); --pattern-grid-green: url('data:...'). Apply patterns in components via: background-image: var(--pattern-dots-blue).
Frequently asked questions
How do I keep pattern scales consistent across different screen DPIs?+
Define tile sizes in dp (density-independent pixels) by dividing pixel values by the target DPR. A 20px tile on a 2× DPR screen appears as 10 physical units. The Pattern Tiler API accepts a dpr parameter and scales the pattern accordingly, ensuring consistent visual density across devices.
Can I use a Figma icon as a pattern motif?+
Yes. Export the icon from Figma as SVG, then upload it to the Pattern Tiler as the motif file. The tool strips all presentation attributes and uses only the path geometry, applying the fill colour from your pattern configuration. This ensures the icon motif respects your design system's colour tokens.
How do I document patterns in a Storybook design system?+
The batch generation script can output a Storybook story file: patterns.stories.tsx. Each pattern becomes a story with the CSS applied to a preview div. Storybook's controls addon exposes the colour, tileSize, and rotation parameters for interactive exploration by designers.
What is a reasonable maximum number of patterns for a design system?+
8–12 distinct pattern types is sufficient for most design systems (dots, grid, stripes, diagonal, cross-hatch, waves, icons, halftone). More than 12 creates choice paralysis for designers. Each pattern should have clear usage guidelines — e.g., dot grid for empty states, diagonal stripe for sale badges — rather than being used interchangeably.
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.