docs(assets): add LeetCode dependency spine HTML and SVG

This commit is contained in:
Prad Nukala
2026-08-19 11:23:03 -04:00
parent 65f695202e
commit 1a034c5aba
2 changed files with 549 additions and 0 deletions
+244
View File
@@ -0,0 +1,244 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1472 648" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="dependency-spine-title dependency-spine-desc">
<title id="dependency-spine-title">LeetCode topic dependency spine</title>
<desc id="dependency-spine-desc">Dependency graph of 24 LeetCode study topics across five phases, showing which topics build on which, with Tree DFS and 1-D dynamic programming as the two central hubs.</desc>
<defs>
<style>@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Inter:wght@400;500;600&amp;family=IBM+Plex+Mono:wght@400;500;600&amp;display=swap');</style>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#6f6f6f"/></marker>
<marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#2389e2"/></marker>
<marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#1a6bb8"/></marker>
</defs>
<rect width="100%" height="100%" fill="#fafafa"/>
<!-- ============ zones (painted first) ============ -->
<rect x="40" y="40" width="368" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
<rect x="56" y="44" width="168" height="12" rx="2" fill="#fafafa"/>
<text x="60" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE I — LINEAR STRUCTURES</text>
<rect x="456" y="40" width="368" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
<rect x="472" y="44" width="152" height="12" rx="2" fill="#fafafa"/>
<text x="476" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE III — HIERARCHICAL</text>
<rect x="456" y="384" width="368" height="168" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
<rect x="472" y="388" width="144" height="12" rx="2" fill="#fafafa"/>
<text x="476" y="397" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASE II — NODAL &amp; GRID</text>
<rect x="872" y="40" width="560" height="312" rx="8" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
<rect x="888" y="44" width="264" height="12" rx="2" fill="#fafafa"/>
<text x="892" y="53" fill="rgba(10,10,10,0.40)" font-size="7" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">PHASES IVV — RELATIONAL &amp; DECISION-SPACE</text>
<!-- ============ arrows (before boxes) ============ -->
<!-- same-row horizontals -->
<line x1="200" y1="168" x2="248" y2="168" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 3 → 4 -->
<line x1="200" y1="240" x2="248" y2="240" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 6 → 7 -->
<line x1="200" y1="312" x2="248" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 1 → 2 -->
<line x1="616" y1="440" x2="664" y2="440" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 8 → 9 -->
<line x1="1032" y1="96" x2="1080" y2="96" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 16 → 18 -->
<line x1="1224" y1="240" x2="1272" y2="240" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 22 -->
<line x1="1224" y1="312" x2="1272" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 23 → 24 -->
<line x1="616" y1="84" x2="888" y2="84" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 11 → 16 -->
<line x1="616" y1="312" x2="888" y2="312" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 12 → 17 -->
<!-- same-column verticals -->
<line x1="544" y1="120" x2="544" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 11 → 13 -->
<line x1="960" y1="120" x2="960" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 16 → 19 -->
<line x1="1152" y1="120" x2="1152" y2="144" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 18 → 20 -->
<line x1="1152" y1="192" x2="1152" y2="216" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 20 → 21 -->
<line x1="1152" y1="264" x2="1152" y2="288" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 21 → 23 -->
<!-- rounded right-angle elbows -->
<path d="M200,96 H416 Q424,96 424,104 V160 Q424,168 432,168 H472" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 5 → 13 -->
<path d="M616,96 H640 Q648,96 648,104 V160 Q648,168 656,168 H664" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 11 → 14 -->
<path d="M616,108 H624 Q632,108 632,116 V232 Q632,240 640,240 H664" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 11 → 15 -->
<path d="M392,184 H432 Q440,184 440,192 V504 Q440,512 448,512 H472" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 4 → 10 -->
<path d="M128,336 V560 Q128,568 136,568 H728 Q736,568 736,560 V464" fill="none" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/> <!-- 1 → 9 -->
<!-- ============ nodes ============ -->
<!-- 05 Binary Search — entry -->
<rect x="56" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="56" y="72" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
<rect x="64" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="76" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">05</text>
<text x="128" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search</text>
<!-- 03 Two Pointers — entry -->
<rect x="56" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="56" y="144" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
<rect x="64" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="76" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">03</text>
<text x="128" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Two Pointers</text>
<!-- 04 Sliding Window -->
<rect x="248" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="248" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="256" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="268" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">04</text>
<text x="320" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Sliding Window</text>
<!-- 06 Stack — entry -->
<rect x="56" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="56" y="216" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
<rect x="64" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="76" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">06</text>
<text x="128" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Stack</text>
<!-- 07 Monotonic Stack -->
<rect x="248" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="248" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="256" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="268" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">07</text>
<text x="320" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Monotonic Stack</text>
<!-- 01 Hash-Based Lookup — entry -->
<rect x="56" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="56" y="288" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
<rect x="64" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="76" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">01</text>
<text x="128" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hash Lookup</text>
<!-- 02 Prefix Sum -->
<rect x="248" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="248" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="256" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="268" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">02</text>
<text x="320" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Prefix Sum</text>
<!-- 11 Tree DFS — FOCAL -->
<rect x="472" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="472" y="72" width="144" height="48" rx="6" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
<rect x="480" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(35,137,226,0.50)" stroke-width="0.8"/>
<text x="492" y="87" fill="#2389e2" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">11</text>
<text x="544" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree DFS</text>
<!-- 13 Binary Search Tree -->
<rect x="472" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="472" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="480" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="492" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">13</text>
<text x="544" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Binary Search Tree</text>
<!-- 14 Heap -->
<rect x="664" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="664" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="672" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="684" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">14</text>
<text x="736" y="170" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Heap</text>
<text x="736" y="184" fill="#6f6f6f" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">priority queue</text>
<!-- 15 Trie -->
<rect x="664" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="664" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="672" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="684" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">15</text>
<text x="736" y="248" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Trie</text>
<!-- 12 Tree BFS — entry -->
<rect x="472" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="472" y="288" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
<rect x="480" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="492" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">12</text>
<text x="544" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Tree BFS</text>
<!-- 08 Linked List — entry -->
<rect x="472" y="416" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="472" y="416" width="144" height="48" rx="6" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
<rect x="480" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="492" y="431" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">08</text>
<text x="544" y="448" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Linked List</text>
<!-- 09 Hybrid Structures -->
<rect x="664" y="416" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="664" y="416" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="672" y="422" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="684" y="431" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">09</text>
<text x="736" y="448" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Hybrid Structures</text>
<!-- 10 Matrix Index Math -->
<rect x="472" y="488" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="472" y="488" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="480" y="494" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="492" y="503" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">10</text>
<text x="544" y="520" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Matrix Index Math</text>
<!-- 16 Graph DFS -->
<rect x="888" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="888" y="72" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="896" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="908" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">16</text>
<text x="960" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph DFS</text>
<!-- 18 Topological Sort -->
<rect x="1080" y="72" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="1080" y="72" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="1088" y="78" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="1100" y="87" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">18</text>
<text x="1152" y="104" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Topological Sort</text>
<!-- 19 Union-Find -->
<rect x="888" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="888" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="896" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="908" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">19</text>
<text x="960" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Union-Find</text>
<!-- 20 Backtracking -->
<rect x="1080" y="144" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="1080" y="144" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="1088" y="150" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="1100" y="159" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">20</text>
<text x="1152" y="176" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Backtracking</text>
<!-- 21 1-D DP — FOCAL -->
<rect x="1080" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="1080" y="216" width="144" height="48" rx="6" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
<rect x="1088" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(35,137,226,0.50)" stroke-width="0.8"/>
<text x="1100" y="231" fill="#2389e2" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">21</text>
<text x="1152" y="242" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">1-D DP</text>
<text x="1152" y="256" fill="#6f6f6f" font-size="9" font-family="'IBM Plex Mono', monospace" text-anchor="middle">dynamic programming</text>
<!-- 22 Multi-D / Grid DP -->
<rect x="1272" y="216" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="1272" y="216" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="1280" y="222" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="1292" y="231" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">22</text>
<text x="1344" y="242" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Multi-D / Grid DP</text>
<!-- 17 Graph BFS -->
<rect x="888" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="888" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="896" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="908" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">17</text>
<text x="960" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Graph BFS</text>
<!-- 23 Greedy -->
<rect x="1080" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="1080" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="1088" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="1100" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">23</text>
<text x="1152" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Greedy</text>
<!-- 24 Intervals -->
<rect x="1272" y="288" width="144" height="48" rx="6" fill="#fafafa"/>
<rect x="1272" y="288" width="144" height="48" rx="6" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<rect x="1280" y="294" width="24" height="12" rx="2" fill="transparent" stroke="rgba(10,10,10,0.30)" stroke-width="0.8"/>
<text x="1292" y="303" fill="#6f6f6f" font-size="7" font-family="'IBM Plex Mono', monospace" text-anchor="middle" letter-spacing="0.08em">24</text>
<text x="1344" y="320" fill="#0a0a0a" font-size="12" font-weight="600" font-family="'Inter', sans-serif" text-anchor="middle">Intervals</text>
<!-- ============ legend ============ -->
<line x1="40" y1="600" x2="1432" y2="600" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
<text x="40" y="620" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.14em">LEGEND</text>
<rect x="160" y="608" width="20" height="12" rx="2" fill="rgba(111,111,111,0.10)" stroke="#8f8f8f" stroke-width="1"/>
<text x="188" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">ENTRY — NO PREREQS</text>
<rect x="360" y="608" width="20" height="12" rx="2" fill="#ffffff" stroke="#0a0a0a" stroke-width="1"/>
<text x="388" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">TOPIC</text>
<rect x="480" y="608" width="20" height="12" rx="2" fill="rgba(35,137,226,0.08)" stroke="#2389e2" stroke-width="1.2"/>
<text x="508" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">FOCAL HUB</text>
<line x1="624" y1="614" x2="656" y2="614" stroke="#6f6f6f" stroke-width="1" marker-end="url(#arrow)"/>
<text x="668" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">BUILDS ON</text>
<rect x="792" y="608" width="20" height="12" rx="2" fill="rgba(10,10,10,0.02)" stroke="rgba(10,10,10,0.10)" stroke-width="0.8"/>
<text x="820" y="618" fill="#6f6f6f" font-size="8" font-family="'IBM Plex Mono', monospace" letter-spacing="0.06em">PHASE ZONE</text>
</svg>

After

Width:  |  Height:  |  Size: 23 KiB