zudo-panel-designer docs
GitHub repository

Type to search...

to open search from anywhere

Built-in Catalog

packages/patterns/src/patterns/ ships 62 built-in patterns (12 hand-written originals + 50 ported from the pgen static-pattern catalog), registered in PATTERN_GENERATORS — see Generator contract → The registry for how the array is assembled from patterns/index.ts and its group shards. Every pattern follows the generator contract: deterministic, mm-space, and clamped through resolveParam against the ranges listed here. Each parameter's unit — millimetres, or a unitless ratio/count — is named in its label and shown in the table below (a label ending in (mm) is a millimetre value; anything else, like centerY's (0-1) or a plain Ray count, is unitless).

pgen port provenance

50 of the 62 patterns were ported from pgen's static generators rather than hand-written for zpd. packages/patterns/pgen-port-ledger.json is the append-only record of that work: one row per attempted pattern (ported, original, or rejected) naming its pgen source id, the family it was grouped under, and a one-line note on what was dropped or translated during the port (pgen's generators lean on gradients, multi-color fills, and per-pixel randomness that this package's generator contract — single flat color, no randomness — deliberately excludes). See .claude/skills/port-pgen-patterns/SKILL.md for the repeatable porting workflow future rounds follow.

Parameter reference

This table is generated from the live registry by .claude/skills/port-pgen-patterns/scripts/gen-doc-table.mjs — re-run it after any port round and paste its output here (and into the docs-ja mirror) rather than hand-editing rows, so the catalog can never silently drift from what's actually registered:

node .claude/skills/port-pgen-patterns/scripts/gen-doc-table.mjs
Pattern (name)GroupParameters (key — label, min–max, step, default)
Dot Grid (dot-grid)originalpitch — Pitch (mm), 2–15, step 0.5, default 5; radius — Dot radius (mm), 0.2–4, step 0.1, default 1
Diagonal Stripes (diag-stripes)originalpitch — Pitch (mm), 2–20, step 0.5, default 6; lineWidth — Stripe width (mm), 0.3–10, step 0.1, default 2
Grid Lines (grid-lines)originalpitch — Pitch (mm), 2–15, step 0.5, default 5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Concentric Circles (concentric-circles)originalpitch — Ring pitch (mm), 1–15, step 0.5, default 4; lineWidth — Line width (mm), 0.1–4, step 0.05, default 0.6; centerY — Center Y (0-1), 0–1, step 0.05, default 0.5
Hex Lattice (hex-lattice)originalcell — Cell size (mm), 2–20, step 0.5, default 6; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Checker (checker)originalcell — Cell size (mm), 1–20, step 0.5, default 5
Wave Lines (wave-lines)originalpitch — Row pitch (mm), 2–15, step 0.5, default 5; amplitude — Amplitude (mm), 0.5–8, step 0.25, default 1.5; wavelength — Wavelength (mm), 3–30, step 1, default 12; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6
Crosshatch (crosshatch)originalpitch — Pitch (mm), 2–20, step 0.5, default 7; lineWidth — Line width (mm), 0.1–4, step 0.05, default 0.5
Radial Burst (radial-burst)originalcount — Ray count, 8–96, step 2, default 36; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5; centerY — Center Y (0-1), 0–1, step 0.05, default 0.5; innerRadius — Inner radius (mm), 0–30, step 0.5, default 4
Brick (brick)originalbrickW — Brick width (mm), 3–30, step 0.5, default 12; brickH — Brick height (mm), 2–15, step 0.5, default 5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Diamond Lattice (diamond-lattice)originalsize — Diamond size (mm), 3–30, step 0.5, default 8; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Scallops (scallops)originalwidth — Scallop width (mm), 3–30, step 0.5, default 10; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Igeta (igeta)japanesecell — Cell size (mm), 3–20, step 0.5, default 7; barWidth — Bar width (mm), 0.1–3, step 0.05, default 1.8
Asanoha (asanoha)japaneseradius — Star radius (mm), 4–14, step 0.5, default 5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Kagome (kagome)japaneseside — Triangle side (mm), 4–20, step 0.5, default 6; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Seigaiha (seigaiha)japaneseradius — Fan radius (mm), 4–18, step 0.5, default 7; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5; rings — Arc rings, 2–7, step 1, default 4
Shippo (shippo)japaneseradius — Circle radius (mm), 4–16, step 0.5, default 6; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5; innerRatio — Inner circle, 0–1, step 0.05, default 0.5
Uroko Scales (uroko-scales)japanesewidth — Scale width (mm), 4–20, step 0.5, default 7; aspect — Scale aspect, 0.6–1.6, step 0.05, default 1
Yagasuri (yagasuri)japanesecolumnWidth — Column width (mm), 4–20, step 0.5, default 6; barbHeight — Barb height (mm), 4–24, step 0.5, default 6
Sayagata (sayagata)japanesecell — Cell size (mm), 4–20, step 0.5, default 7; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6
Raimon (raimon)japanesecell — Cell size (mm), 5–24, step 0.5, default 9; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.7; turns — Spiral turns, 2–5, step 1, default 3
Wachigai (wachigai)japaneseradius — Ring radius (mm), 4–16, step 0.5, default 6; overlap — Overlap, 0.2–0.7, step 0.02, default 0.45; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6
Yoshiwara Tsunagi (yoshiwara-tsunagi)japanesecell — Cell size (mm), 4–20, step 0.5, default 7; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.7
Rub el Hizb (rub-el-hizb)ornamentcell — Cell size (mm), 7–24, step 0.5, default 8; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Star and Cross Field (star-and-cross-field)ornamentcell — Cell size (mm), 8–20, step 0.5, default 8; starRatio — Star size, 0.45–0.85, step 0.02, default 0.62
Interlaced Bands (interlaced-bands)ornamentcell — Cell size (mm), 5–20, step 0.5, default 6; bandWidth — Band width (mm), 0.5–5, step 0.1, default 2
Mughal Jali (mughal-jali)ornamentcell — Cell size (mm), 8–24, step 0.5, default 10; web — Web width (mm), 0.5–4, step 0.1, default 1.6
Ten-Point Rosette (ten-point-rosette)ornamentcell — Cell size (mm), 8–24, step 0.5, default 9; pointDepth — Point depth, 0.3–0.75, step 0.01, default 0.5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Kolam Sikku (kolam-sikku)ornamentcell — Cell size (mm), 5–20, step 0.5, default 8; lineWidth — Line width (mm), 0.1–3, step 0.05, default 1.2; dotRadius — Dot radius (mm), 0–3, step 0.1, default 0.7
Aztec Step Fret (aztec-step-fret)ornamentstepUnit — Step unit (mm), 1.3–4, step 0.1, default 1.5; steps — Spiral steps, 2–5, step 1, default 3; armThickness — Arm thickness (mm), 0.3–2.5, step 0.05, default 1
Meander (meander)ornamentcell — Key size (mm), 7–24, step 0.5, default 10; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.8
Endless Knot (endless-knot)ornamenttile — Knot size (mm), 15–40, step 0.5, default 16; strandWidth — Strand width (mm), 0.3–5, step 0.1, default 2; gridN — Weave grid, 2–4, step 1, default 4
Bishamon Koushi (bishamon-koushi)ornamentradius — Hex radius (mm), 4–15, step 0.5, default 5; innerScale — Inner scale, 0.3–0.85, step 0.05, default 0.62
Smith Truchet (smith-truchet)curvestile — Tile size (mm), 2–15, step 0.5, default 5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Hilbert Curve (hilbert-curve)curvescell — Cell size (mm), 18–40, step 0.5, default 26; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5; order — Order, 2–4, step 1, default 3
Dragon Curve (dragon-curve)curvescell — Cell size (mm), 22–45, step 0.5, default 30; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4; iterations — Iterations, 6–8, step 1, default 7
Vicsek Fractal (vicsek-fractal)curvescell — Cell size (mm), 18–40, step 0.5, default 24; depth — Depth, 2–3, step 1, default 3
Astroid Star Grid (astroid-grid)curvescell — Cell size (mm), 10–25, step 0.5, default 13; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.3; lineCount — Chord count, 8–28, step 1, default 18
Maurer Rose (maurer-rose)curvescell — Cell size (mm), 32–64, step 0.5, default 44; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.3; petals — Petal param (n), 2–9, step 1, default 6; degreeStep — Degree step (d), 11–99, step 2, default 29
Guilloche (guilloche)curvescell — Cell size (mm), 24–50, step 0.5, default 32; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.3; lobes — Lobes, 2–9, step 1, default 5; penDistance — Pen distance, 0.2–1.2, step 0.05, default 0.8
Truchet Quarter Arc (truchet-quarter-arc)curvestile — Tile size (mm), 5–20, step 0.5, default 8; gap — Tile gap (mm), 0–4, step 0.1, default 0
Classical Labyrinth (labyrinth-classical)curvesunit — Unit size (mm), 10–45, step 0.5, default 18; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6; circuits — Circuits, 3–12, step 1, default 7
Steiner Chain Ring (steiner-chain)curvescell — Cell size (mm), 10–45, step 0.5, default 16; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.4; chainCount — Chain count, 3–12, step 1, default 6
Vesica Lens Circle Mesh (vesica-lens-circle-mesh)ringsCircuitspitch — Pitch (mm), 3–20, step 0.5, default 7; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.45
Rings Interlock (rings-interlock)ringsCircuitsradius — Ring radius (mm), 2–12, step 0.5, default 4; bandWidth — Band width (mm), 0.1–3, step 0.05, default 1.4
Circle Quarters (circle-quarters)ringsCircuitscell — Cell size (mm), 4–20, step 0.5, default 8; radiusRatio — Disc size, 0.5–1, step 0.02, default 1
Quatrefoil (quatrefoil)ringsCircuitscell — Cell size (mm), 5–24, step 0.5, default 8; lobeRadius — Lobe radius (mm), 0.5–4, step 0.05, default 1.8
Hex Circuit (hex-circuit)ringsCircuitshexRadius — Hex radius (mm), 3–16, step 0.5, default 5; traceWidth — Trace width (mm), 0.1–3, step 0.05, default 0.6; traceCoverage — Trace coverage, 0.3–1, step 0.05, default 0.7
Via Grid Array (via-grid-array)ringsCircuitscell — Cell size (mm), 3–16, step 0.5, default 5; ringRadius — Ring radius (mm), 0.3–4, step 0.05, default 1.8; holeRatio — Hole ratio, 0.1–0.7, step 0.02, default 0.45
Circuit Board Tiles (circuit-board-tiles)ringsCircuitscell — Cell size (mm), 4–18, step 0.5, default 6; traceWidth — Trace width (mm), 0.1–3, step 0.05, default 0.8; padChance — Pad chance, 0–1, step 0.05, default 0.4
Snowflakes Geometric (snowflakes-geometric)ringsCircuitscell — Cell size (mm), 8–24, step 0.5, default 9; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.4; flakeSize — Flake size, 0.2–0.6, step 0.01, default 0.4
Eight Point Compass Star Grid (eight-point-compass-star-grid)ringsCircuitscell — Cell size (mm), 5–20, step 0.5, default 7; innerRatio — Short ray ratio, 0.2–0.6, step 0.01, default 0.4
Herringbone (herringbone)tilingsbrickLength — Brick length (mm), 4–30, step 0.5, default 7; brickWidth — Brick width (mm), 2–12, step 0.5, default 2.5; gap — Gap (mm), 0–2, step 0.1, default 0.5
Houndstooth Tooth Grid (houndstooth-tooth-grid)tilingscell — Cell size (mm), 4–20, step 0.5, default 6; notch — Notch length, 0.25–0.6, step 0.05, default 0.4
Greek Cross Lattice (greek-cross-lattice)tilingscell — Cell size (mm), 4–20, step 0.5, default 6; armLength — Arm length, 0.3–0.48, step 0.01, default 0.42
Deco Chevron Gold (deco-chevron-gold)tilingspitch — Row pitch (mm), 2–20, step 0.5, default 7; amplitude — Chevron height (mm), 1–16, step 0.5, default 6; thickness — Band thickness, 0.3–0.9, step 0.05, default 0.6
Valknut Grid (valknut-grid)tilingstile — Tile size (mm), 7–20, step 0.5, default 10; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.8; spread — Triangle spread, 0.1–0.35, step 0.01, default 0.2
Isometric Cube Grid (isometric-cube-grid)tilingscell — Cell size (mm), 3–20, step 0.5, default 6; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6
Ogee (ogee)tilingstileWidth — Tile width (mm), 6–20, step 0.5, default 8; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6; domeHeight — Dome height, 0.8–2, step 0.05, default 1.25
Ammann Bar Grid (ammann-bars)tilingsspacing — Bar spacing (mm), 2–12, step 0.5, default 3.5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Cairo Pentagonal (cairo-pentagonal)tilingscell — Cell size (mm), 7–30, step 0.5, default 10; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Masu Tsunagi (masu-tsunagi)tilingscell — Cell size (mm), 5–30, step 0.5, default 8; nestCount — Nested squares, 2–6, step 1, default 3; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5

Note

resolveParam clamps every value into its declared [min, max] before a generator uses it, so a stale or hand-edited params value (e.g. from an imported order JSON) can never send a draw loop negative or non-finite. See Generator contract → Param clamping.

Pattern notes (the 12 originals)

Prose notes below cover only the 12 hand-written originals. For the 50 ported patterns, the design intent and what was dropped/translated from the pgen source live as a header comment in each pattern's own module (packages/patterns/src/patterns/<name>.ts) and in its pgen-port-ledger.json row — see pgen port provenance above.

Dot Grid

A grid of filled circles, radius mm each, spaced pitch mm apart on both axes and centered on the panel.

Diagonal Stripes

Parallel 45°-diagonal strokes spanning the full panel diagonal (width + height), so the field is always fully covered regardless of aspect ratio, spaced pitch mm apart.

Grid Lines

A plain rectilinear grid: vertical strokes every pitch mm, then horizontal strokes every pitch mm, both centered on the panel.

Concentric Circles

Rings expanding outward from a center point at (width/2, height × centerY), spaced pitch mm apart, out to the corner farthest from that center — so the rings always fully cover the panel even when centerY is off-center.

Hex Lattice

A honeycomb of pointy-top hexagon outlines, cell mm across, laid out on an offset-row lattice (w = √3 × r flat-to-flat column spacing, 1.5 × r row spacing, alternating rows offset by half of w).

Checker

A checkerboard of filled cell mm squares — the classic two-color grid pattern, drawn as filled squares only (the "off" squares are the panel's base color showing through).

Wave Lines

Horizontal sine-wave rows, pitch mm apart, each with amplitude mm of vertical swing and a wavelength mm period. The sine phase is anchored to the panel's horizontal center so the waves stay visually centered at any panel width.

Crosshatch

Two diagonal-stripe passes at right angles to each other (45° and 135°), both spaced pitch mm apart — Diagonal Stripes doubled and mirrored.

Radial Burst

count straight rays from a center point at (width/2, height × centerY), starting innerRadius mm out from the center (leaving a clear inner circle) and extending to the panel's far corner.

Brick

A running-bond brick course pattern: horizontal courses brickH mm tall, vertical joints every brickW mm, with alternating rows offset by half a brick width — the same offset convention real brickwork uses.

Diamond Lattice

An argyle-style field of diamond outlines (size mm point-to-point), laid out on two interleaved sublattices stepped by size/2 so adjacent diamonds share edges and tessellate seamlessly, instead of leaving gaps at the corners.

Scallops

Overlapping lower-semicircle arcs (width mm each), nested row to row like fish scales — each row offset horizontally by half a scallop width, and rows stacked one radius (half a scallop width) apart vertically.

Thumbnails

packages/patterns/src/thumbnail.ts renders the picker card preview shown in the pattern picker dialog. renderPatternThumb(canvas, gen, sizePx):

  1. Sizes the canvas's backing store for the current devicePixelRatio while keeping its CSS box pinned to sizePx.

  2. Scales the context so a fixed 30mm window (THUMB_SPAN_MM) fills the backing store exactly — every pattern's thumbnail frames the same physical span, so patterns with very different pitch/cell sizes stay visually comparable at a glance.

  3. Fills the background black (#151515, mirroring the panel's soldermask base) and calls the generator's draw() with a fixed foreground (#d4af37, gold — mirroring exposed copper) and its own defaultParams().

The two thumbnail colors are literal constants local to thumbnail.ts, not imported from @zpd/core's PALETTE — a deliberate duplication so the @zpd/patterns package stays self-contained and dependency-free from @zpd/core.