carry-agent / docs /braid_animation.svg
SNAPKITTYWEST's picture
push from SNAPKITTYWEST/carry-agent
80d7559 verified
|
Raw History Blame Contribute Delete
8.28 kB
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#0a0a0f"/>
<stop offset="100%" style="stop-color:#1a0a2e"/>
</linearGradient>
<linearGradient id="curry-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b35"/>
<stop offset="100%" style="stop-color:#ff2200"/>
</linearGradient>
<linearGradient id="crystal-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#00ffcc"/>
<stop offset="100%" style="stop-color:#0088ff"/>
</linearGradient>
<linearGradient id="c3-grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#a855f7"/>
<stop offset="100%" style="stop-color:#7c3aed"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="600" height="400" fill="url(#bg)"/>
<!-- Title -->
<text x="300" y="35" text-anchor="middle" fill="#ffffff" font-family="monospace" font-size="16" font-weight="bold">CARRY BRAID — Authority Transfer (B3)</text>
<text x="300" y="55" text-anchor="middle" fill="#888888" font-family="monospace" font-size="11">Braid Word: sigma_2 . sigma_1 | Writhe = +2</text>
<!-- Column labels -->
<text x="100" y="85" text-anchor="middle" fill="#ff6b35" font-family="monospace" font-size="12">INITIAL</text>
<text x="300" y="85" text-anchor="middle" fill="#00ffcc" font-family="monospace" font-size="12">After sigma_2</text>
<text x="500" y="85" text-anchor="middle" fill="#a855f7" font-family="monospace" font-size="12">After sigma_1</text>
<!-- Position labels -->
<text x="30" y="150" text-anchor="middle" fill="#666" font-family="monospace" font-size="10">pos 0</text>
<text x="30" y="230" text-anchor="middle" fill="#666" font-family="monospace" font-size="10">pos 1</text>
<text x="30" y="310" text-anchor="middle" fill="#666" font-family="monospace" font-size="10">pos 2</text>
<!-- INITIAL STATE: [Curry, Crystal, C3] -->
<!-- Curry at pos 0 -->
<circle cx="100" cy="145" r="20" fill="url(#curry-grad)" filter="url(#glow)">
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
</circle>
<text x="100" y="150" text-anchor="middle" fill="#fff" font-family="monospace" font-size="9" font-weight="bold">CURRY</text>
<!-- Crystal at pos 1 -->
<circle cx="100" cy="225" r="20" fill="url(#crystal-grad)" filter="url(#glow)">
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" begin="0.3s"/>
</circle>
<text x="100" y="230" text-anchor="middle" fill="#fff" font-family="monospace" font-size="8" font-weight="bold">CRYSTAL</text>
<!-- C3 at pos 2 -->
<circle cx="100" cy="305" r="20" fill="url(#c3-grad)" filter="url(#glow)">
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" begin="0.6s"/>
</circle>
<text x="100" y="310" text-anchor="middle" fill="#fff" font-family="monospace" font-size="11" font-weight="bold">C3</text>
<!-- CROSSING sigma_2: swap pos 1 and pos 2 (C3 crosses over Crystal) -->
<!-- Arrow from C3(pos2) to pos1 -->
<path d="M 130,305 C 180,305 220,225 270,225" stroke="#a855f7" stroke-width="2.5" fill="none" stroke-dasharray="5,3" filter="url(#glow)">
<animate attributeName="stroke-dashoffset" values="0;-16" dur="1s" repeatCount="indefinite"/>
</path>
<!-- Arrow from Crystal(pos1) to pos2 -->
<path d="M 130,225 C 180,225 220,305 270,305" stroke="#00ffcc" stroke-width="2.5" fill="none" stroke-dasharray="5,3">
<animate attributeName="stroke-dashoffset" values="0;-16" dur="1s" repeatCount="indefinite"/>
</path>
<!-- Curry stays -->
<path d="M 130,145 L 270,145" stroke="#ff6b35" stroke-width="2" fill="none" opacity="0.5"/>
<!-- sigma_2 label -->
<text x="200" y="270" text-anchor="middle" fill="#a855f7" font-family="monospace" font-size="13" font-weight="bold">sigma_2</text>
<text x="200" y="285" text-anchor="middle" fill="#666" font-family="monospace" font-size="9">C3 over Crystal</text>
<!-- AFTER sigma_2: [Curry, C3, Crystal] -->
<!-- Curry still at pos 0 -->
<circle cx="300" cy="145" r="20" fill="url(#curry-grad)" filter="url(#glow)">
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
</circle>
<text x="300" y="150" text-anchor="middle" fill="#fff" font-family="monospace" font-size="9" font-weight="bold">CURRY</text>
<!-- C3 now at pos 1 -->
<circle cx="300" cy="225" r="20" fill="url(#c3-grad)" filter="url(#glow)">
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" begin="0.6s"/>
</circle>
<text x="300" y="230" text-anchor="middle" fill="#fff" font-family="monospace" font-size="11" font-weight="bold">C3</text>
<!-- Crystal now at pos 2 -->
<circle cx="300" cy="305" r="20" fill="url(#crystal-grad)" filter="url(#glow)">
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" begin="0.3s"/>
</circle>
<text x="300" y="310" text-anchor="middle" fill="#fff" font-family="monospace" font-size="8" font-weight="bold">CRYSTAL</text>
<!-- CROSSING sigma_1: swap pos 0 and pos 1 (C3 crosses over Curry) -->
<!-- Arrow from C3(pos1) to pos0 -->
<path d="M 330,225 C 380,225 420,145 470,145" stroke="#a855f7" stroke-width="2.5" fill="none" stroke-dasharray="5,3" filter="url(#glow)">
<animate attributeName="stroke-dashoffset" values="0;-16" dur="1s" repeatCount="indefinite"/>
</path>
<!-- Arrow from Curry(pos0) to pos1 -->
<path d="M 330,145 C 380,145 420,225 470,225" stroke="#ff6b35" stroke-width="2.5" fill="none" stroke-dasharray="5,3">
<animate attributeName="stroke-dashoffset" values="0;-16" dur="1s" repeatCount="indefinite"/>
</path>
<!-- Crystal stays -->
<path d="M 330,305 L 470,305" stroke="#00ffcc" stroke-width="2" fill="none" opacity="0.5"/>
<!-- sigma_1 label -->
<text x="400" y="190" text-anchor="middle" fill="#a855f7" font-family="monospace" font-size="13" font-weight="bold">sigma_1</text>
<text x="400" y="205" text-anchor="middle" fill="#666" font-family="monospace" font-size="9">C3 over Curry</text>
<!-- FINAL STATE: [C3, Curry, Crystal] — C3 HAS AUTHORITY -->
<!-- C3 at pos 0 (AUTHORITY) -->
<circle cx="500" cy="145" r="22" fill="url(#c3-grad)" filter="url(#glow)" stroke="#ffffff" stroke-width="2">
<animate attributeName="r" values="20;24;20" dur="1.5s" repeatCount="indefinite"/>
</circle>
<text x="500" y="150" text-anchor="middle" fill="#fff" font-family="monospace" font-size="11" font-weight="bold">C3</text>
<!-- Curry at pos 1 -->
<circle cx="500" cy="225" r="18" fill="url(#curry-grad)" opacity="0.7"/>
<text x="500" y="230" text-anchor="middle" fill="#fff" font-family="monospace" font-size="9">CURRY</text>
<!-- Crystal at pos 2 -->
<circle cx="500" cy="305" r="18" fill="url(#crystal-grad)" opacity="0.7"/>
<text x="500" y="310" text-anchor="middle" fill="#fff" font-family="monospace" font-size="8">CRYSTAL</text>
<!-- Authority indicator -->
<text x="500" y="115" text-anchor="middle" fill="#a855f7" font-family="monospace" font-size="10" font-weight="bold">AUTHORITY</text>
<polygon points="490,120 500,128 510,120" fill="#a855f7">
<animate attributeName="opacity" values="0.5;1;0.5" dur="1s" repeatCount="indefinite"/>
</polygon>
<!-- Bottom proof box -->
<rect x="50" y="345" width="500" height="45" rx="5" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-width="1"/>
<text x="300" y="365" text-anchor="middle" fill="#00ff88" font-family="monospace" font-size="12" font-weight="bold">BRAID INVARIANT HOLDS</text>
<text x="300" y="382" text-anchor="middle" fill="#888" font-family="monospace" font-size="10">writhe = +2 | C3 at pos 0 | Reidemeister: no cancellation</text>
</svg>