SVG reference glossary — visual vocabulary for hand-crafted SVG diagrams

reference.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -35 820 755" font-family="Segoe UI, system-ui, sans-serif">
  <style>
    .header { fill: #4A7A80; }
    .title { fill: #fff; font-size: 13px; font-weight: 600; }
    .body { fill: #fff; stroke: none; }
    .desc { fill: #7AACB1; font-size: 11px; font-style: italic; }
    .arrow { stroke: #888; stroke-width: 1; fill: none; marker-end: url(#arrowhead); }
    .connector { stroke: #888; stroke-width: 1; fill: none; }
    .label { fill: #aaa; font-size: 8px; }
    .example-box { fill: #f5f8f8; stroke: #d5e0e1; stroke-width: 0.5; rx: 4; }
    .example-file { fill: #9ab8bc; font-size: 10px; }
    .ann { stroke: #ddd; stroke-width: 0.75; stroke-dasharray: 3,2; }
    .term { fill: #D4836A; font-size: 10px; font-weight: 600; }
    .explain { fill: #aaa; font-size: 9px; font-style: italic; }
    .section { fill: #bbb; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; }
    .dim { stroke: #D4836A; stroke-width: 0.75; fill: none; marker-end: url(#dim-end); marker-start: url(#dim-start); }
    .dim-tick { stroke: #D4836A; stroke-width: 0.75; }
  </style>

  <defs>
    <marker id="arrowhead" markerWidth="8" markerHeight="6.5" refX="8" refY="3.25" orient="auto">
      <path d="M0,0 L8,3.25 L0,6.5" fill="#888"/>
    </marker>
    <marker id="dim-end" markerWidth="6" markerHeight="6" refX="6" refY="3" orient="auto">
      <path d="M0,0 L6,3 L0,6" fill="#D4836A"/>
    </marker>
    <marker id="dim-start" markerWidth="6" markerHeight="6" refX="0" refY="3" orient="auto">
      <path d="M6,0 L0,3 L6,6" fill="#D4836A"/>
    </marker>
  </defs>

  <!-- viewBox boundary -->
  <rect x="2" y="-33" width="816" height="751" rx="6" fill="#fafafa" stroke="#ccc" stroke-width="1.5" stroke-dasharray="6,3"/>
  <text x="14" y="712" class="term" style="font-size:12px">viewBox</text>
  <text x="84" y="712" class="explain">the canvas — all elements are positioned within this space</text>

  <!-- Explainer bar (actual position — top of diagram, full width) -->
  <rect x="250" y="-28" width="100" height="22" fill="#fff" stroke="#eee" stroke-width="0.5"/>
  <text x="260" y="-14" style="font-size:9px; fill:#D4836A; font-weight:600">Title</text>
  <rect x="350" y="-28" width="220" height="22" fill="#f0f0f0"/>
  <text x="360" y="-14" style="font-size:8px; fill:#999">description</text>

  <line x1="250" y1="-17" x2="200" y2="-17" class="ann"/>
  <text x="195" y="-20" text-anchor="end" class="term">explainer bar</text>
  <text x="195" y="-8" text-anchor="end" class="explain">persistent context strip</text>

  <!-- ═══════════════════════════════════════ -->
  <!-- SECTION 1: Card (centered at x=250-570) -->
  <!-- ═══════════════════════════════════════ -->
  <text x="395" y="28" text-anchor="middle" class="section">CARD</text>

  <!-- The card -->
  <rect x="250" y="42" width="320" height="30" rx="8" ry="8" class="header"/>
  <text x="410" y="62" text-anchor="middle" class="title">Card Title</text>

  <path d="M250,67 L250,157 Q250,167 260,167 L560,167 Q570,167 570,157 L570,67 Z" class="body"/>
  <text x="410" y="92" text-anchor="middle" class="desc">description text goes here</text>

  <rect x="258" y="108" width="304" height="30" class="example-box"/>
  <text x="410" y="128" text-anchor="middle" class="example-file" xml:space="preserve">● example one        ● example two        ● example three</text>

  <rect x="250" y="42" width="320" height="125" rx="8" fill="none" stroke="#4A7A80" stroke-width="1"/>

  <!-- LEFT annotations (top to bottom, matching element order) -->

  <!-- fill (header area, y≈55) -->
  <line x1="250" y1="55" x2="200" y2="42" class="ann"/>
  <text x="195" y="39" text-anchor="end" class="term">fill</text>
  <text x="195" y="51" text-anchor="end" class="explain">the color inside a shape</text>

  <!-- path (body, y≈120) -->
  <line x1="250" y1="120" x2="200" y2="82" class="ann"/>
  <text x="195" y="79" text-anchor="end" class="term">path</text>
  <text x="195" y="91" text-anchor="end" class="explain">the body — a custom shape</text>
  <text x="195" y="103" text-anchor="end" class="explain">with rounded bottom corners</text>

  <!-- subordinate box (example box, y≈125) -->
  <line x1="258" y1="125" x2="200" y2="125" class="ann"/>
  <text x="195" y="122" text-anchor="end" class="term">subordinate box</text>
  <text x="195" y="134" text-anchor="end" class="explain">inset rect for examples</text>

  <!-- RIGHT annotations (top to bottom, matching element order) -->

  <!-- rx (corner, y≈45) -->
  <line x1="567" y1="45" x2="620" y2="35" class="ann"/>
  <text x="625" y="32" class="term">rx</text>
  <text x="625" y="44" class="explain">corner rounding</text>

  <!-- rect (header, y≈55) -->
  <line x1="570" y1="57" x2="620" y2="57" class="ann"/>
  <text x="625" y="57" class="term">rect</text>
  <text x="625" y="69" class="explain">the header — a filled rectangle</text>

  <!-- desc (text, y≈92) -->
  <line x1="510" y1="92" x2="620" y2="85" class="ann"/>
  <text x="625" y="85" class="term">desc</text>
  <text x="625" y="97" class="explain">description — italic, matches header color</text>

  <!-- stroke (outline, y≈100) -->
  <line x1="570" y1="110" x2="620" y2="110" class="ann"/>
  <text x="625" y="110" class="term">stroke</text>
  <text x="625" y="122" class="explain">the border line around a shape</text>

  <!-- example (text, y≈128) -->
  <line x1="562" y1="128" x2="620" y2="135" class="ann"/>
  <text x="625" y="135" class="term">example</text>
  <text x="625" y="147" class="explain">secondary content — smaller, non-italic</text>

  <!-- ═══════════════════════════════════════════ -->
  <!-- SECTION 2: Spacing (uses main card above)   -->
  <!-- ═══════════════════════════════════════════ -->
  <text x="395" y="198" text-anchor="middle" class="section">SPACING</text>

  <!-- Card A -->
  <rect x="260" y="215" width="110" height="20" rx="5" fill="#7AACB1"/>
  <text x="315" y="229" text-anchor="middle" class="title" style="font-size:10px">Card A</text>
  <path d="M260,231 L260,263 Q260,275 270,275 L360,275 Q370,275 370,263 L370,231 Z" class="body"/>
  <text x="315" y="257" text-anchor="middle" class="desc" style="font-size:9px">description</text>
  <rect x="260" y="215" width="110" height="60" rx="5" fill="none" stroke="#7AACB1" stroke-width="1"/>

  <!-- Card B -->
  <rect x="395" y="215" width="110" height="20" rx="5" fill="#7AACB1"/>
  <text x="450" y="229" text-anchor="middle" class="title" style="font-size:10px">Card B</text>
  <path d="M395,231 L395,263 Q395,275 405,275 L495,275 Q505,275 505,263 L505,231 Z" class="body"/>
  <text x="450" y="257" text-anchor="middle" class="desc" style="font-size:9px">description</text>
  <rect x="395" y="215" width="110" height="60" rx="5" fill="none" stroke="#7AACB1" stroke-width="1"/>

  <!-- Dimension: gap (horizontal, between A and B) -->
  <line x1="370" y1="240" x2="370" y2="284" class="dim-tick"/>
  <line x1="395" y1="240" x2="395" y2="284" class="dim-tick"/>
  <path d="M370,281 L395,281" class="dim"/>
  <text x="382" y="292" text-anchor="middle" class="term" style="font-size:8px">gap</text>

  <!-- Dimension: row gap (vertical, between main card and Cards A/B) -->
  <line x1="235" y1="167" x2="250" y2="167" class="dim-tick"/>
  <line x1="235" y1="215" x2="250" y2="215" class="dim-tick"/>
  <path d="M242,167 L242,215" class="dim"/>

  <!-- Dimension: padding (inside card A, body top to text baseline) -->
  <line x1="272" y1="231" x2="258" y2="231" class="dim-tick"/>
  <line x1="272" y1="251" x2="258" y2="251" class="dim-tick"/>
  <path d="M260,231 L260,251" class="dim"/>

  <!-- Dimension: width (under card B) -->
  <line x1="395" y1="275" x2="395" y2="286" class="dim-tick"/>
  <line x1="505" y1="275" x2="505" y2="286" class="dim-tick"/>
  <path d="M395,283 L505,283" class="dim"/>
  <text x="450" y="293" text-anchor="middle" class="term" style="font-size:8px">width</text>

  <!-- Dimension: height (right of card B) -->
  <line x1="505" y1="215" x2="518" y2="215" class="dim-tick"/>
  <line x1="505" y1="275" x2="518" y2="275" class="dim-tick"/>
  <path d="M515,215 L515,275" class="dim"/>

  <!-- LEFT annotations -->

  <!-- row gap (between main card and this row) -->
  <line x1="242" y1="191" x2="200" y2="191" class="ann"/>
  <text x="195" y="188" text-anchor="end" class="term">row gap</text>
  <text x="195" y="200" text-anchor="end" class="explain">vertical space between rows</text>

  <!-- x, y (card corner, y=215) -->
  <line x1="260" y1="218" x2="200" y2="225" class="ann"/>
  <text x="195" y="222" text-anchor="end" class="term">x, y</text>
  <text x="195" y="234" text-anchor="end" class="explain">position — measured from the</text>
  <text x="195" y="246" text-anchor="end" class="explain">top-left corner of the viewBox</text>

  <!-- padding (inside card, y≈241) -->
  <line x1="260" y1="241" x2="200" y2="265" class="ann"/>
  <text x="195" y="262" text-anchor="end" class="term">padding</text>
  <text x="195" y="274" text-anchor="end" class="explain">space between text and card</text>
  <text x="195" y="286" text-anchor="end" class="explain">edges — text should never touch</text>

  <!-- RIGHT annotations -->

  <!-- inset (subordinate box offset, y≈240) -->
  <line x1="505" y1="232" x2="560" y2="222" class="ann"/>
  <text x="565" y="222" class="term">inset</text>
  <text x="565" y="234" class="explain">how far a subordinate box sits</text>
  <text x="565" y="246" class="explain">inside the card body</text>

  <!-- width / height (dimensions, y≈245-283) -->
  <line x1="515" y1="245" x2="560" y2="260" class="ann"/>
  <text x="565" y="260" class="term">width / height</text>
  <text x="565" y="272" class="explain">card dimensions — match width</text>
  <text x="565" y="284" class="explain">for cards in the same row</text>

  <!-- gap (between cards, y≈281) -->
  <line x1="395" y1="281" x2="560" y2="298" class="ann"/>
  <text x="565" y="298" class="term">gap</text>
  <text x="565" y="310" class="explain">space between cards in the same row</text>

  <!-- ═══════════════════════════════════════ -->
  <!-- SECTION 3: Arrows (centered at x=400)  -->
  <!-- ═══════════════════════════════════════ -->
  <text x="395" y="340" text-anchor="middle" class="section">ARROWS</text>

  <!-- Source -->
  <rect x="340" y="357" width="110" height="22" rx="6" fill="#7AACB1"/>
  <text x="395" y="372" text-anchor="middle" class="title" style="font-size:11px">source</text>

  <!-- Connector: vertical trunk from source, then horizontal right -->
  <path d="M395,379 L395,435 L530,435" class="connector"/>

  <!-- Label on vertical trunk -->
  <rect x="373" y="400" width="44" height="10" fill="#fff"/>
  <text x="395" y="407" text-anchor="middle" class="label">govern</text>

  <!-- Stub 1: down to Target A -->
  <path d="M395,435 L395,458" class="arrow"/>

  <!-- Stub 2: down to Target B -->
  <path d="M530,435 L530,458" class="arrow"/>

  <!-- Target A -->
  <rect x="340" y="458" width="110" height="22" rx="6" fill="#7AACB1"/>
  <text x="395" y="473" text-anchor="middle" class="title" style="font-size:11px">target A</text>

  <!-- Target B -->
  <rect x="475" y="458" width="110" height="22" rx="6" fill="#7AACB1"/>
  <text x="530" y="473" text-anchor="middle" class="title" style="font-size:11px">target B</text>

  <!-- LEFT annotations -->

  <!-- label -->
  <line x1="373" y1="405" x2="200" y2="396" class="ann"/>
  <text x="195" y="393" text-anchor="end" class="term">label</text>
  <text x="195" y="405" text-anchor="end" class="explain">navigation text on a white rect</text>
  <text x="195" y="417" text-anchor="end" class="explain">that breaks the line</text>

  <!-- stem -->
  <line x1="390" y1="443" x2="200" y2="438" class="ann"/>
  <text x="195" y="435" text-anchor="end" class="term">stem</text>
  <text x="195" y="447" text-anchor="end" class="explain">the visible line, excluding</text>
  <text x="195" y="459" text-anchor="end" class="explain">the arrowhead</text>

  <!-- marker -->
  <line x1="395" y1="455" x2="200" y2="475" class="ann"/>
  <text x="195" y="475" text-anchor="end" class="term">marker</text>
  <text x="195" y="487" text-anchor="end" class="explain">the arrowhead — a reusable</text>
  <text x="195" y="499" text-anchor="end" class="explain">shape at the line end</text>

  <!-- RIGHT annotations -->

  <!-- path -->
  <line x1="400" y1="415" x2="600" y2="385" class="ann"/>
  <text x="605" y="382" class="term">path</text>
  <text x="605" y="394" class="explain">the line connecting two cards</text>
  <text x="605" y="406" class="explain">— right angles only</text>

  <!-- connector -->
  <line x1="530" y1="435" x2="600" y2="425" class="ann"/>
  <text x="605" y="422" class="term">connector</text>
  <text x="605" y="434" class="explain">the trunk — a line with</text>
  <text x="605" y="446" class="explain">no arrowhead</text>

  <!-- stub -->
  <line x1="535" y1="447" x2="600" y2="460" class="ann"/>
  <text x="605" y="457" class="term">stub</text>
  <text x="605" y="469" class="explain">short branch that carries</text>
  <text x="605" y="481" class="explain">the arrowhead</text>

  <!-- ═══════════════════════════════════════════ -->
  <!-- SECTION 4: Animation                        -->
  <!-- ═══════════════════════════════════════════ -->
  <text x="395" y="537" text-anchor="middle" class="section">ANIMATION</text>

  <!-- Callout -->
  <rect x="355" y="582" width="110" height="24" rx="4" fill="#D4836A"/>
  <text x="365" y="597" style="font-size:8px; fill:#fff">step explanation</text>

  <!-- Mini card -->
  <rect x="345" y="620" width="130" height="18" rx="5" fill="#7AACB1"/>
  <text x="410" y="633" text-anchor="middle" style="fill:#fff; font-size:9px; font-weight:600">Phase</text>
  <path d="M345,634 L345,656 Q345,666 355,666 L465,666 Q475,666 475,656 L475,634 Z" class="body"/>
  <text x="410" y="653" text-anchor="middle" class="desc" style="font-size:8px">content</text>
  <rect x="345" y="620" width="130" height="46" rx="5" fill="none" stroke="#7AACB1" stroke-width="1"/>

  <!-- Dot on top edge of card -->
  <circle cx="410" cy="620" r="6" fill="#D4836A"/>
  <text x="410" y="620" text-anchor="middle" dominant-baseline="central" style="font-size:8px; fill:#fff; font-weight:600">3</text>

  <!-- Gate (checkmark) to the right of card -->
  <path d="M498,646 L502,650 L508,640" fill="none" stroke="#D4836A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <!-- Pulse rings around gate -->
  <circle cx="503" cy="645" r="9" fill="none" stroke="#D4836A" stroke-width="0.4" opacity="0.6"/>
  <circle cx="503" cy="645" r="13" fill="none" stroke="#D4836A" stroke-width="0.3" opacity="0.3"/>


  <!-- Fade illustration (3 rects at increasing opacity) -->
  <rect x="570" y="584" width="14" height="14" rx="2" fill="#D4836A" opacity="0.15"/>
  <rect x="590" y="584" width="14" height="14" rx="2" fill="#D4836A" opacity="0.5"/>
  <rect x="610" y="584" width="14" height="14" rx="2" fill="#D4836A" opacity="1"/>
  <text x="583" y="579" style="font-size:6px; fill:#aaa">→</text>
  <text x="603" y="579" style="font-size:6px; fill:#aaa">→</text>

  <!-- LEFT annotations -->

  <!-- callout -->
  <line x1="355" y1="594" x2="200" y2="600" class="ann"/>
  <text x="195" y="597" text-anchor="end" class="term">callout</text>
  <text x="195" y="609" text-anchor="end" class="explain">tooltip near the dot — appears</text>
  <text x="195" y="621" text-anchor="end" class="explain">only during dwells</text>

  <!-- dot / dwell -->
  <line x1="404" y1="616" x2="200" y2="642" class="ann"/>
  <text x="195" y="639" text-anchor="end" class="term">dot / dwell</text>
  <text x="195" y="651" text-anchor="end" class="explain">the moving indicator — center</text>
  <text x="195" y="663" text-anchor="end" class="explain">sits on top edge when paused</text>


  <!-- RIGHT annotations -->

  <!-- fade -->
  <line x1="628" y1="591" x2="660" y2="587" class="ann"/>
  <text x="665" y="584" class="term">fade</text>
  <text x="665" y="596" class="explain">smooth opacity transition</text>
  <text x="665" y="608" class="explain">— never snap into place</text>

  <!-- gate -->
  <line x1="514" y1="645" x2="660" y2="632" class="ann"/>
  <text x="665" y="629" class="term">gate</text>
  <text x="665" y="641" class="explain">pass/fail indicator at a</text>
  <text x="665" y="653" class="explain">boundary (e.g., checkmark)</text>

  <!-- pulse -->
  <line x1="516" y1="649" x2="660" y2="670" class="ann"/>
  <text x="665" y="670" class="term">pulse</text>
  <text x="665" y="682" class="explain">oscillating emphasis —</text>
  <text x="665" y="694" class="explain">stroke-width or radius grows</text>
  <text x="665" y="706" class="explain">and shrinks to draw attention</text>

</svg>