docs/quantum_world.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="1200" height="800">
  <defs>
    <radialGradient id="coreGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#FFD60A" stop-opacity="1">
        <animate attributeName="stop-opacity" values="1;0.3;1" dur="1.5s" repeatCount="indefinite"/>
      </stop>
      <stop offset="70%" stop-color="#FFD60A" stop-opacity="0.2"/>
      <stop offset="100%" stop-color="#0A84FF" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="orbitalGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#FFD60A" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#0A84FF" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="plasmaGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FF453A"><animate attributeName="stop-color" values="#FF453A;#FFD60A;#0A84FF;#FF453A" dur="3s" repeatCount="indefinite"/></stop>
      <stop offset="50%" stop-color="#0A84FF"><animate attributeName="stop-color" values="#0A84FF;#30D158;#FFD60A;#0A84FF" dur="3s" repeatCount="indefinite"/></stop>
      <stop offset="100%" stop-color="#30D158"><animate attributeName="stop-color" values="#30D158;#FF453A;#0A84FF;#30D158" dur="3s" repeatCount="indefinite"/></stop>
    </linearGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="8" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" result="blur"/>
      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#0A84FF"/>
    </marker>
    <marker id="goldArrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#FFD60A"/>
    </marker>
  </defs>

  <rect width="1200" height="800" fill="#000000"/>

  <!-- Title -->
  <text x="600" y="60" text-anchor="middle" font-family="monospace" font-size="28" font-weight="bold" fill="#FFD60A" letter-spacing="3">
    BOB Quantum Civilization Engine
    <animate attributeName="opacity" values="1;0.7;1" dur="2s" repeatCount="indefinite"/>
  </text>
  <text x="600" y="90" text-anchor="middle" font-family="monospace" font-size="12" fill="#0A84FF" letter-spacing="2">
    FORTRAN KERNEL • 7 BINDINGS • QUANTUM LATTICE • BORN RULE • PLASMA GATE
  </text>

  <!-- Central Fortran Quantum Kernel -->
  <g id="core" transform="translate(600,400)">
    <!-- Outer glow ring -->
    <circle r="85" fill="none" stroke="url(#orbitalGlow)" stroke-width="2" filter="url(#glow)">
      <animate attributeName="r" values="85;95;85" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="stroke-opacity" values="0.6;0.2;0.6" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle r="100" fill="none" stroke="#0A84FF" stroke-width="1" stroke-opacity="0.3">
      <animate attributeName="r" values="100;115;100" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="stroke-opacity" values="0.3;0.05;0.3" dur="3s" repeatCount="indefinite"/>
    </circle>
    <!-- Gold hexagon core -->
    <polygon points="0,-50 43.3,-25 43.3,25 0,50 -43.3,25 -43.3,-25" 
             fill="url(#coreGlow)" stroke="#FFD60A" stroke-width="3" filter="url(#glow)">
      <animateTransform attributeName="transform" type="rotate" values="0;360" dur="20s" repeatCount="indefinite"/>
    </polygon>
    <!-- Inner rotating triangle -->
    <polygon points="0,-30 26,15 -26,15" fill="none" stroke="#0A84FF" stroke-width="2" stroke-opacity="0.8">
      <animateTransform attributeName="transform" type="rotate" values="0;-360" dur="8s" repeatCount="indefinite"/>
    </polygon>
    <!-- Core label -->
    <text x="0" y="5" text-anchor="middle" font-family="monospace" font-size="11" font-weight="bold" fill="#FFD60A">FORTRAN</text>
    <text x="0" y="20" text-anchor="middle" font-family="monospace" font-size="9" fill="#0A84FF">QUANTUM KERNEL</text>
    <!-- Pulsing particles around core -->
    <g>
      <circle r="3" fill="#FFD60A" filter="url(#softGlow)">
        <animateMotion path="M 0 -65 A 65 65 0 1 1 0.01 -65" dur="3s" repeatCount="indefinite"/>
      </circle>
      <circle r="2" fill="#0A84FF" filter="url(#softGlow)">
        <animateMotion path="M 0 -65 A 65 65 0 1 1 0.01 -65" dur="4s" repeatCount="indefinite" begin="1s"/>
      </circle>
      <circle r="2.5" fill="#30D158" filter="url(#softGlow)">
        <animateMotion path="M 0 -65 A 65 65 0 1 1 0.01 -65" dur="5s" repeatCount="indefinite" begin="2s"/>
      </circle>
    </g>
  </g>

  <!-- 7 Language Bindings in Orbit -->
  <g id="orbitals">
    <!-- Julia (purple) - 0° -->
    <g class="orbital" transform="translate(600,400)">
      <circle r="160" fill="none" stroke="#8833FF" stroke-width="1" stroke-opacity="0.15" stroke-dasharray="4,4"/>
      <g transform="translate(160,0)">
        <circle r="22" fill="#8833FF" filter="url(#softGlow)" stroke="#FFD60A" stroke-width="1">
          <animate attributeName="r" values="22;26;22" dur="2.5s" repeatCount="indefinite"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#FFFFFF">Julia</text>
        <text x="0" y="16" text-anchor="middle" font-family="monospace" font-size="7" fill="#FFD60A">PURPLE</text>
      </g>
      <!-- Data flow arrow -->
      <path d="M 85,0 L 140,0" fill="none" stroke="#0A84FF" stroke-width="2" marker-end="url(#arrowhead)" stroke-opacity="0.7">
        <animate attributeName="stroke-dashoffset" values="0;-50" dur="1.5s" repeatCount="indefinite"/>
        <animate attributeName="stroke-opacity" values="0.7;0.2;0.7" dur="1.5s" repeatCount="indefinite"/>
      </path>
    </g>

    <!-- Elixir (violet) - ~51° -->
    <g class="orbital" transform="translate(600,400) rotate(51.4)">
      <circle r="160" fill="none" stroke="#A020F0" stroke-width="1" stroke-opacity="0.15" stroke-dasharray="4,4"/>
      <g transform="translate(160,0)">
        <circle r="22" fill="#A020F0" filter="url(#softGlow)" stroke="#FFD60A" stroke-width="1">
          <animate attributeName="r" values="22;26;22" dur="2.5s" repeatCount="indefinite" begin="0.3s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#FFFFFF">Elixir</text>
        <text x="0" y="16" text-anchor="middle" font-family="monospace" font-size="7" fill="#FFD60A">VIOLET</text>
      </g>
      <path d="M 85,0 L 140,0" fill="none" stroke="#0A84FF" stroke-width="2" marker-end="url(#arrowhead)" stroke-opacity="0.7">
        <animate attributeName="stroke-dashoffset" values="0;-50" dur="1.5s" repeatCount="indefinite" begin="0.2s"/>
        <animate attributeName="stroke-opacity" values="0.7;0.2;0.7" dur="1.5s" repeatCount="indefinite" begin="0.2s"/>
      </path>
    </g>

    <!-- Rust (orange) - ~103° -->
    <g class="orbital" transform="translate(600,400) rotate(102.8)">
      <circle r="160" fill="none" stroke="#DE7E00" stroke-width="1" stroke-opacity="0.15" stroke-dasharray="4,4"/>
      <g transform="translate(160,0)">
        <circle r="22" fill="#DE7E00" filter="url(#softGlow)" stroke="#FFD60A" stroke-width="1">
          <animate attributeName="r" values="22;26;22" dur="2.5s" repeatCount="indefinite" begin="0.6s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#FFFFFF">Rust</text>
        <text x="0" y="16" text-anchor="middle" font-family="monospace" font-size="7" fill="#FFD60A">ORANGE</text>
      </g>
      <path d="M 85,0 L 140,0" fill="none" stroke="#0A84FF" stroke-width="2" marker-end="url(#arrowhead)" stroke-opacity="0.7">
        <animate attributeName="stroke-dashoffset" values="0;-50" dur="1.5s" repeatCount="indefinite" begin="0.4s"/>
        <animate attributeName="stroke-opacity" values="0.7;0.2;0.7" dur="1.5s" repeatCount="indefinite" begin="0.4s"/>
      </path>
    </g>

    <!-- Lean4 (green) - ~154° -->
    <g class="orbital" transform="translate(600,400) rotate(154.2)">
      <circle r="160" fill="none" stroke="#30D158" stroke-width="1" stroke-opacity="0.15" stroke-dasharray="4,4"/>
      <g transform="translate(160,0)">
        <circle r="22" fill="#30D158" filter="url(#softGlow)" stroke="#FFD60A" stroke-width="1">
          <animate attributeName="r" values="22;26;22" dur="2.5s" repeatCount="indefinite" begin="0.9s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#FFFFFF">Lean4</text>
        <text x="0" y="16" text-anchor="middle" font-family="monospace" font-size="7" fill="#FFD60A">GREEN</text>
      </g>
      <path d="M 85,0 L 140,0" fill="none" stroke="#0A84FF" stroke-width="2" marker-end="url(#arrowhead)" stroke-opacity="0.7">
        <animate attributeName="stroke-dashoffset" values="0;-50" dur="1.5s" repeatCount="indefinite" begin="0.6s"/>
        <animate attributeName="stroke-opacity" values="0.7;0.2;0.7" dur="1.5s" repeatCount="indefinite" begin="0.6s"/>
      </path>
    </g>

    <!-- Smalltalk (blue) - ~206° -->
    <g class="orbital" transform="translate(600,400) rotate(205.6)">
      <circle r="160" fill="none" stroke="#007AFF" stroke-width="1" stroke-opacity="0.15" stroke-dasharray="4,4"/>
      <g transform="translate(160,0)">
        <circle r="22" fill="#007AFF" filter="url(#softGlow)" stroke="#FFD60A" stroke-width="1">
          <animate attributeName="r" values="22;26;22" dur="2.5s" repeatCount="indefinite" begin="1.2s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#FFFFFF">Smalltalk</text>
        <text x="0" y="16" text-anchor="middle" font-family="monospace" font-size="7" fill="#FFD60A">BLUE</text>
      </g>
      <path d="M 85,0 L 140,0" fill="none" stroke="#0A84FF" stroke-width="2" marker-end="url(#arrowhead)" stroke-opacity="0.7">
        <animate attributeName="stroke-dashoffset" values="0;-50" dur="1.5s" repeatCount="indefinite" begin="0.8s"/>
        <animate attributeName="stroke-opacity" values="0.7;0.2;0.7" dur="1.5s" repeatCount="indefinite" begin="0.8s"/>
      </path>
    </g>

    <!-- R (teal) - ~257° -->
    <g class="orbital" transform="translate(600,400) rotate(257)">
      <circle r="160" fill="none" stroke="#00C7BE" stroke-width="1" stroke-opacity="0.15" stroke-dasharray="4,4"/>
      <g transform="translate(160,0)">
        <circle r="22" fill="#00C7BE" filter="url(#softGlow)" stroke="#FFD60A" stroke-width="1">
          <animate attributeName="r" values="22;26;22" dur="2.5s" repeatCount="indefinite" begin="1.5s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#FFFFFF">R</text>
        <text x="0" y="16" text-anchor="middle" font-family="monospace" font-size="7" fill="#FFD60A">TEAL</text>
      </g>
      <path d="M 85,0 L 140,0" fill="none" stroke="#0A84FF" stroke-width="2" marker-end="url(#arrowhead)" stroke-opacity="0.7">
        <animate attributeName="stroke-dashoffset" values="0;-50" dur="1.5s" repeatCount="indefinite" begin="1s"/>
        <animate attributeName="stroke-opacity" values="0.7;0.2;0.7" dur="1.5s" repeatCount="indefinite" begin="1s"/>
      </path>
    </g>

    <!-- NATS/Go (cyan) - ~308° -->
    <g class="orbital" transform="translate(600,400) rotate(308.4)">
      <circle r="160" fill="none" stroke="#0A84FF" stroke-width="1" stroke-opacity="0.15" stroke-dasharray="4,4"/>
      <g transform="translate(160,0)">
        <circle r="22" fill="#0A84FF" filter="url(#softGlow)" stroke="#FFD60A" stroke-width="1">
          <animate attributeName="r" values="22;26;22" dur="2.5s" repeatCount="indefinite" begin="1.8s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="10" font-weight="bold" fill="#FFFFFF">NATS/Go</text>
        <text x="0" y="16" text-anchor="middle" font-family="monospace" font-size="7" fill="#FFD60A">CYAN</text>
      </g>
      <path d="M 85,0 L 140,0" fill="none" stroke="#0A84FF" stroke-width="2" marker-end="url(#arrowhead)" stroke-opacity="0.7">
        <animate attributeName="stroke-dashoffset" values="0;-50" dur="1.5s" repeatCount="indefinite" begin="1.2s"/>
        <animate attributeName="stroke-opacity" values="0.7;0.2;0.7" dur="1.5s" repeatCount="indefinite" begin="1.2s"/>
      </path>
    </g>

    <!-- Cross-orbit data flows -->
    <g transform="translate(600,400)">
      <path d="M 160,0 A 160 160 0 0 1 100.5,124.5" fill="none" stroke="#FFD60A" stroke-width="1.5" stroke-opacity="0.5" marker-end="url(#goldArrow)" stroke-dasharray="8,4">
        <animate attributeName="stroke-dashoffset" values="0;-100" dur="2s" repeatCount="indefinite"/>
      </path>
      <path d="M 100.5,124.5 A 160 160 0 0 1 -50.5,152" fill="none" stroke="#FFD60A" stroke-width="1.5" stroke-opacity="0.5" marker-end="url(#goldArrow)" stroke-dasharray="8,4">
        <animate attributeName="stroke-dashoffset" values="0;-100" dur="2s" repeatCount="indefinite" begin="0.3s"/>
      </path>
      <path d="M -50.5,152 A 160 160 0 0 1 -152,50.5" fill="none" stroke="#FFD60A" stroke-width="1.5" stroke-opacity="0.5" marker-end="url(#goldArrow)" stroke-dasharray="8,4">
        <animate attributeName="stroke-dashoffset" values="0;-100" dur="2s" repeatCount="indefinite" begin="0.6s"/>
      </path>
      <path d="M -152,50.5 A 160 160 0 0 1 -152,-50.5" fill="none" stroke="#FFD60A" stroke-width="1.5" stroke-opacity="0.5" marker-end="url(#goldArrow)" stroke-dasharray="8,4">
        <animate attributeName="stroke-dashoffset" values="0;-100" dur="2s" repeatCount="indefinite" begin="0.9s"/>
      </path>
      <path d="M -152,-50.5 A 160 160 0 0 1 -50.5,-152" fill="none" stroke="#FFD60A" stroke-width="1.5" stroke-opacity="0.5" marker-end="url(#goldArrow)" stroke-dasharray="8,4">
        <animate attributeName="stroke-dashoffset" values="0;-100" dur="2s" repeatCount="indefinite" begin="1.2s"/>
      </path>
      <path d="M -50.5,-152 A 160 160 0 0 1 100.5,-124.5" fill="none" stroke="#FFD60A" stroke-width="1.5" stroke-opacity="0.5" marker-end="url(#goldArrow)" stroke-dasharray="8,4">
        <animate attributeName="stroke-dashoffset" values="0;-100" dur="2s" repeatCount="indefinite" begin="1.5s"/>
      </path>
      <path d="M 100.5,-124.5 A 160 160 0 0 1 160,0" fill="none" stroke="#FFD60A" stroke-width="1.5" stroke-opacity="0.5" marker-end="url(#goldArrow)" stroke-dasharray="8,4">
        <animate attributeName="stroke-dashoffset" values="0;-100" dur="2s" repeatCount="indefinite" begin="1.8s"/>
      </path>
    </g>
  </g>

  <!-- 4x4 Quantum Lattice Grid (Bottom-Left) -->
  <g id="lattice" transform="translate(100,580)">
    <text x="120" y="-20" text-anchor="middle" font-family="monospace" font-size="12" font-weight="bold" fill="#0A84FF">QUANTUM LATTICE 4×4</text>
    <g id="vortexNodes">
      <!-- 16 nodes in 4x4 grid -->
      <g class="node" transform="translate(0,0)">
        <circle r="14" fill="#000000" stroke="#0A84FF" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#0A84FF;#FFD60A;#30D158;#FF453A;#0A84FF" dur="4s" repeatCount="indefinite"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|0⟩</text>
      </g>
      <g class="node" transform="translate(50,0)">
        <circle r="14" fill="#000000" stroke="#30D158" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#30D158;#FF453A;#0A84FF;#FFD60A;#30D158" dur="4s" repeatCount="indefinite" begin="0.25s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="0.25s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|1⟩</text>
      </g>
      <g class="node" transform="translate(100,0)">
        <circle r="14" fill="#000000" stroke="#FFD60A" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#FFD60A;#0A84FF;#FF453A;#30D158;#FFD60A" dur="4s" repeatCount="indefinite" begin="0.5s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="0.5s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|+⟩</text>
      </g>
      <g class="node" transform="translate(150,0)">
        <circle r="14" fill="#000000" stroke="#FF453A" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#FF453A;#30D158;#FFD60A;#0A84FF;#FF453A" dur="4s" repeatCount="indefinite" begin="0.75s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="0.75s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|-⟩</text>
      </g>

      <g class="node" transform="translate(0,50)">
        <circle r="14" fill="#000000" stroke="#FF453A" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#FF453A;#FFD60A;#0A84FF;#30D158;#FF453A" dur="4s" repeatCount="indefinite" begin="1s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="1s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|i⟩</text>
      </g>
      <g class="node" transform="translate(50,50)">
        <circle r="14" fill="#000000" stroke="#0A84FF" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#0A84FF;#30D158;#FF453A;#FFD60A;#0A84FF" dur="4s" repeatCount="indefinite" begin="1.25s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="1.25s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|-i⟩</text>
      </g>
      <g class="node" transform="translate(100,50)">
        <circle r="14" fill="#000000" stroke="#30D158" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#30D158;#FF453A;#FFD60A;#0A84FF;#30D158" dur="4s" repeatCount="indefinite" begin="1.5s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="1.5s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|ψ⟩</text>
      </g>
      <g class="node" transform="translate(150,50)">
        <circle r="14" fill="#000000" stroke="#FFD60A" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#FFD60A;#0A84FF;#30D158;#FF453A;#FFD60A" dur="4s" repeatCount="indefinite" begin="1.75s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="1.75s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|φ⟩</text>
      </g>

      <g class="node" transform="translate(0,100)">
        <circle r="14" fill="#000000" stroke="#FFD60A" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#FFD60A;#FF453A;#0A84FF;#30D158;#FFD60A" dur="4s" repeatCount="indefinite" begin="2s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="2s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">|H⟩</text>
      </g>
      <g class="node" transform="translate(50,100)">
        <circle r="14" fill="#000000" stroke="#FF453A" stroke-width="2" filter="url(#softGlow)">
          <animate attributeName="fill" values="#FF453A;#30D158;#FFD60A;#0A84FF;#FF453A" dur="4s" repeatCount="indefinite" begin="2.25s"/>
          <animate attributeName="r" values="14;18;14" dur="2s" repeatCount="indefinite" begin="2.25s"/>
        </circle>
        <text x="0" y="4" text-anchor="middle" font-family="monospace" font-size="8" fill="#FFFFFF" font-weight="bold">