m3taversal
f63eb8000a
Mechanical space→hyphen conversion in frontmatter references (related_claims, challenges, supports, etc.) to match actual filenames. Fixes 26.9% broken link rate found by wiki-link audit. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
113 lines
No EOL
6.9 KiB
XML
113 lines
No EOL
6.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" width="1200" height="675">
|
|
<defs>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');
|
|
text { font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace; }
|
|
</style>
|
|
<marker id="arrowGhost" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#30363D"/>
|
|
</marker>
|
|
<marker id="arrowPurple" markerWidth="14" markerHeight="10" refX="13" refY="5" orient="auto">
|
|
<polygon points="0 0, 14 5, 0 10" fill="#6E46E5"/>
|
|
</marker>
|
|
<!-- Subtle purple glow for the coordination zone -->
|
|
<radialGradient id="purpleGlow" cx="50%" cy="50%" r="60%">
|
|
<stop offset="0%" stop-color="#6E46E5" stop-opacity="0.08"/>
|
|
<stop offset="100%" stop-color="#6E46E5" stop-opacity="0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="1200" height="675" fill="#0D1117"/>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- FADED MOLOCH CYCLE (compact, bottom-left) -->
|
|
<!-- ~30% of canvas -->
|
|
<!-- ========================================== -->
|
|
|
|
<!-- Faded cycle label -->
|
|
<text x="200" y="420" fill="#30363D" font-size="11" font-weight="400" letter-spacing="0.08em" text-anchor="middle">THE TRAP</text>
|
|
|
|
<!-- Faded Box 1: Individual Choice (top of mini-cycle) -->
|
|
<rect x="110" y="440" width="180" height="60" rx="4" fill="#161B22" stroke="#21262D" stroke-width="1"/>
|
|
<text x="200" y="468" fill="#484F58" font-size="11" font-weight="400" letter-spacing="0.03em" text-anchor="middle">RATIONAL CHOICE</text>
|
|
<text x="200" y="484" fill="#30363D" font-size="9" font-weight="400" text-anchor="middle">makes sense individually</text>
|
|
|
|
<!-- Faded Box 2: Bad Outcome (bottom-right of mini-cycle) -->
|
|
<rect x="310" y="530" width="180" height="60" rx="4" fill="#161B22" stroke="#21262D" stroke-width="1"/>
|
|
<text x="400" y="558" fill="#484F58" font-size="11" font-weight="400" letter-spacing="0.03em" text-anchor="middle">BAD OUTCOME</text>
|
|
<text x="400" y="574" fill="#30363D" font-size="9" font-weight="400" text-anchor="middle">worse for everyone</text>
|
|
|
|
<!-- Faded Box 3: Competitive Pressure (bottom-left of mini-cycle) -->
|
|
<rect x="110" y="530" width="180" height="60" rx="4" fill="#161B22" stroke="#21262D" stroke-width="1"/>
|
|
<text x="200" y="558" fill="#484F58" font-size="11" font-weight="400" letter-spacing="0.03em" text-anchor="middle">PRESSURE</text>
|
|
<text x="200" y="574" fill="#30363D" font-size="9" font-weight="400" text-anchor="middle">can't stop or you lose</text>
|
|
|
|
<!-- Faded cycle arrows -->
|
|
<path d="M 290,480 C 320,500 330,520 315,530" fill="none" stroke="#30363D" stroke-width="1" stroke-dasharray="3,3" marker-end="url(#arrowGhost)"/>
|
|
<path d="M 310,560 L 295,560" fill="none" stroke="#30363D" stroke-width="1" stroke-dasharray="3,3" marker-end="url(#arrowGhost)"/>
|
|
<path d="M 200,530 L 200,505" fill="none" stroke="#30363D" stroke-width="1" stroke-dasharray="3,3" marker-end="url(#arrowGhost)"/>
|
|
|
|
<!-- MOLOCH label in center of faded cycle -->
|
|
<text x="270" y="525" fill="#30363D" font-size="16" font-weight="600" letter-spacing="0.08em" text-anchor="middle">MOLOCH</text>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- BREAKOUT — dramatic sweep -->
|
|
<!-- ========================================== -->
|
|
|
|
<!-- Purple breakout arrow — sweeping curve from cycle to coordination zone -->
|
|
<path d="M 400,525 C 480,480 540,350 600,260"
|
|
fill="none" stroke="#6E46E5" stroke-width="4" marker-end="url(#arrowPurple)"/>
|
|
|
|
<!-- "EXIT" label on the breakout arrow -->
|
|
<text x="530" y="370" fill="#6E46E5" font-size="18" font-weight="600" letter-spacing="0.08em">EXIT</text>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- COORDINATION ZONE (dominant, right+upper) -->
|
|
<!-- ~60% of canvas -->
|
|
<!-- ========================================== -->
|
|
|
|
<!-- Purple ambient glow -->
|
|
<ellipse cx="780" cy="280" rx="380" ry="250" fill="url(#purpleGlow)"/>
|
|
|
|
<!-- Coordination mechanism — main box -->
|
|
<rect x="530" y="60" width="580" height="220" rx="8" fill="rgba(110, 70, 229, 0.08)" stroke="#6E46E5" stroke-width="2"/>
|
|
|
|
<!-- Section label -->
|
|
<text x="820" y="100" fill="#6E46E5" font-size="14" font-weight="400" letter-spacing="0.08em" text-anchor="middle">COORDINATION MECHANISM</text>
|
|
|
|
<!-- Three pillars — horizontal row of sub-boxes -->
|
|
<rect x="560" y="120" width="160" height="70" rx="4" fill="rgba(110, 70, 229, 0.10)" stroke="#6E46E5" stroke-width="1" opacity="0.6"/>
|
|
<text x="640" y="152" fill="#E6EDF3" font-size="14" font-weight="400" text-anchor="middle">aligned</text>
|
|
<text x="640" y="172" fill="#E6EDF3" font-size="14" font-weight="400" text-anchor="middle">incentives</text>
|
|
|
|
<rect x="740" y="120" width="160" height="70" rx="4" fill="rgba(110, 70, 229, 0.10)" stroke="#6E46E5" stroke-width="1" opacity="0.6"/>
|
|
<text x="820" y="152" fill="#E6EDF3" font-size="14" font-weight="400" text-anchor="middle">shared</text>
|
|
<text x="820" y="172" fill="#E6EDF3" font-size="14" font-weight="400" text-anchor="middle">intelligence</text>
|
|
|
|
<rect x="920" y="120" width="160" height="70" rx="4" fill="rgba(110, 70, 229, 0.10)" stroke="#6E46E5" stroke-width="1" opacity="0.6"/>
|
|
<text x="1000" y="152" fill="#E6EDF3" font-size="14" font-weight="400" text-anchor="middle">priced</text>
|
|
<text x="1000" y="172" fill="#E6EDF3" font-size="14" font-weight="400" text-anchor="middle">outcomes</text>
|
|
|
|
<!-- Down arrow from mechanism to flourishing -->
|
|
<line x1="820" y1="280" x2="820" y2="310" stroke="#6E46E5" stroke-width="2" opacity="0.5"/>
|
|
<polygon points="813,310 820,322 827,310" fill="#6E46E5" opacity="0.5"/>
|
|
|
|
<!-- COLLECTIVE FLOURISHING — the destination, dominant -->
|
|
<rect x="600" y="210" width="440" height="65" rx="6" fill="rgba(110, 70, 229, 0.20)" stroke="#6E46E5" stroke-width="1.5"/>
|
|
<text x="820" y="250" fill="#FFFFFF" font-size="22" font-weight="600" letter-spacing="0.06em" text-anchor="middle">COLLECTIVE FLOURISHING</text>
|
|
|
|
<!-- Outcome descriptions below the main zone -->
|
|
<text x="680" y="340" fill="#8B949E" font-size="13" font-weight="400">everyone is better off</text>
|
|
<text x="680" y="362" fill="#8B949E" font-size="13" font-weight="400">and the system is sustainable</text>
|
|
|
|
<!-- ========================================== -->
|
|
<!-- CONTRAST LABELS — left vs right -->
|
|
<!-- ========================================== -->
|
|
|
|
<text x="200" y="635" fill="#30363D" font-size="12" font-weight="400" letter-spacing="0.05em" text-anchor="middle">where competition traps us</text>
|
|
<text x="820" y="635" fill="#6E46E5" font-size="12" font-weight="400" letter-spacing="0.05em" text-anchor="middle">where coordination takes us</text>
|
|
|
|
<!-- Bottom strip -->
|
|
<text x="60" y="660" fill="#6E46E5" font-size="10" font-weight="400">TELEO · this is what we're building</text>
|
|
</svg> |