PatrickNDevelopment

Work / Case study · Published · 2026-10-19

SceneForge

A deterministic procedural SVG studio for hand-drawn looking diagrams.

SceneForge editor with a hand-drawn scene, object list and inspector
SceneForge editor with a hand-drawn scene, object list and inspector. Screenshot of the implemented application with its synthetic sample data.

The problem

Explainer videos need simple diagrams (stick figures, arrows, regions) that look hand-drawn, can be edited, and come out identical every time they are exported, so a revision does not change the drawing everywhere else.

What it does

  • Eight templates (for example siege, trade route, alliance formation, timeline) with your own faction names and colours.
  • Canvas editor with drag, an inspector with labelled inputs, and keyboard control (arrow keys move objects and labels, Delete, undo and redo).
  • Movement and draw-on animation with a time slider; playback respects reduced-motion settings.
  • Undo and redo (200 steps), strict scene JSON import, static or animated SVG export, presets.
  • Visual QA: off-canvas objects, safe-area violations, label overlap and colour contrast.

Engineering choices

  • One model and one renderer: the canvas and the export come from the same SVG node tree.
  • Determinism by construction: seeded random streams keyed by seed, style version, object id and stroke, so editing one object never changes another.
  • Every edit is a pure, clamped function from scene to scene; history is a list of immutable scenes.
  • Golden SVG tests pin the exact output.

Significant challenge: Identical output, every time

Hand-drawn jitter normally means randomness. Here every stroke comes from a seeded generator keyed by a stable object id, and golden tests compare exported SVG byte for byte. The independent review found six defects, including dashed arrows drawn solid and an infinite loop when duplicating objects with long ids; each was fixed with a regression test.

Tested results

  • 40 Vitest tests including golden SVG tests.
  • 15 Playwright tests against the production build.
  • Independent acceptance review on 2026-10-18: 6 defects fixed with regression tests; full verification re-run with exit code 0.
  • Published 2026-10-19: CI green on the first run on Linux, GitHub Pages deployed, live check passed.

Last recorded verification 2026-10-19; latest recorded commit bddfb65. The full commands and outcomes are in the repository's docs/test-report.md.

SceneForge template and preset gallery
SceneForge template and preset gallery
SceneForge editor on a phone
SceneForge editor on a phone

Stack

  • TypeScript
  • React
  • Vite
  • zod
  • SVG
  • Vitest
  • Playwright

Candid limitations

  • Illustrations, not maps; label sizes in visual QA are estimates because fonts differ by machine.
  • Arrows and regions move as a whole (no point editing).

How it was made

Directed and reviewed by the owner; specification, code, tests and documentation written with Claude Code (AI). A separate Claude Code session that did not write the code then re-ran every check and fixed what it found; that is an AI review, not a human code audit. See the repository's AI_ASSISTANCE.md.