svg-graphics-experiments

A React + TypeScript + Vite playground for procedural and assisted SVG workflows. It's a single-page app with a left-hand tool list and a split working area — pick a tool, tweak parameters, and generate or transform SVG output.

https://svg-graphics-experiments.vercel.app/

Quick start

npm install
npm run dev      # start the Vite dev server (typically http://localhost:5173/)

Other scripts:

npm run build         # tsc type-check + Vite production build
npm run lint          # ESLint (zero warnings allowed)
npm run version:date  # bump version to current date (YYYY.M.D)

There are no tests.

How it works

Each tool renders in a split layout:

• Viewer — the SVG canvas / output area.
• Controls — parameters, toggles, and actions.

Tools follow a Provider → Controls + Viewer pattern, with all tool state held in a React context. Navigation is hash-based (#tool-id) — there is no router. Many tools share infrastructure for:

• Undo/redo — snapshot-based history with Ctrl+Z / Ctrl+Y.
• Parameter persistence — parameters auto-save to localStorage and restore on reload.
• Cross-tool handoff — send a tool's SVG output to another tool as its input via the handoff menu.

Tools

Tools are organized into groups in the left panel:

• Distribute & Fill — Object Along Path, Object Fill Pack, Primitive Points
• Typography — Text Noise Fill, Font Mixer
• Image-based — ASCII Art, Luminance Grid, Channel Split, Pixel SVG Canvas, Artbrush SVG Canvas, Grid Cell Wrapper, NES Glitch, Pixel Stretch
• Fields & Generative — Blob Field, Flow Field, Domain Warp, Topographic Map, Superformula, Symbol Generator
• Agents — Flow Agents, Path Agents
• Distortion — Lattice Deform, Point Distortion, Displacement Map, Distortion Grid
• Grids & Cells — Grid Editor, Nested Grid, Polar Grid Cells, Voronoi Diagram, Grid Cubes 3D, Silhouette Extractor, Volume Builder 3D
• Connections — Arc Connections, Rect Node Connections, Trait Connections
• Diagrams — 2D SVG Diagram
• Utilities — SVG to Raster

Some tools are gated as drafts: they're available in npm run dev but hidden from the live production build.

Project structure

• src/App.tsx — wires each tool's Provider + Controls + Viewer based on the active panel.
• src/components/tools/ — per-tool code (contexts, viewers, controls, panels, styles).
• src/components/reusable/ — shared UI and cross-tool components, including PanelSelector (the tool list and PanelType source of truth).
• src/utils/ — geometry/math, SVG parsing/rendering helpers, presets, persistence, and handoff utilities.
• src/hooks/ — shared hooks (undo/redo, media query, handoff receivers, etc.).

Key libraries

• clipper-lib — polygon boolean ops and offsetting
• d3-delaunay — Voronoi / Delaunay geometry
• opentype.js — font parsing and glyph path extraction
• three — 3D rendering (Grid Cubes 3D, Volume Builder 3D)

Adding a tool

1. Add the typed panel id to PanelType in src/components/reusable/PanelSelector.tsx.
2. Add its config entry (label/icon/group) to PANEL_GROUPS.
3. Create the three tool files (*Context.tsx, *Controls.tsx, *Viewer.tsx) in src/components/tools/.
4. Wire the branch in src/App.tsx.

User-facing feature changes go in src/changelogContent.ts in the same commit. See AGENTS.md and CLAUDE.md for fuller working notes.