recipe-svg-topology / Motion grammar

Living topology diagram

Original FORM//GRAPH synthesis · design proposal

A semantic diagram whose paths breathe, reroute and annotate system state without giving up selectable labels, keyboard navigation or print quality.

SVGDOMCSS

Where it belongs

Best for architectures, knowledge maps and product explanations where exact relationships matter.

Generate layout data, render labeled SVG groups, and reserve animation for changed paths or active causal chains.

Production sequence

  1. Model nodes and typed edges as data, including a human-readable description per connection.
  2. Lay out with simple lanes or a precomputed graph; never hide hierarchy behind random force motion.
  3. Render each node as a focusable SVG group linked to its detail panel.
  4. Animate stroke-dash and path morph only when state or selection changes.
  5. Offer a table view and disable path motion under reduced-motion preference.

Handoff contract

Deliverables
Inline SVG + JSON model + table fallback
Proposed runtime budget
≤ 80 KB

This is a production brief, not a downloadable implementation. Budgets are proposed targets; validate them on the intended devices before release.