<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 280" font-family="Consolas, 'Courier New', monospace">
  <defs>
    <marker id="ah" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0L10 5L0 10z" fill="#888"/>
    </marker>
    <marker id="ahg" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0L10 5L0 10z" fill="#98c379"/>
    </marker>
  </defs>

  <!-- BEFORE -->
  <text x="20" y="22" fill="#d4d4d4" font-size="12" font-weight="bold">Before</text>
  <text x="80" y="22" fill="#666" font-size="10">Add() called, but no partial cluster in category 1</text>

  <!-- Category 1 chain (all full) -->
  <text x="50" y="52" fill="#9a6be8" font-size="10">Category 1</text>

  <rect x="50" y="60" width="115" height="44" rx="4" fill="#2a1a40" stroke="#7a3aaf" stroke-width="1"/>
  <text x="107" y="78" fill="#aaa" font-size="10" text-anchor="middle">Cluster A</text>
  <text x="107" y="94" fill="#666" font-size="9" text-anchor="middle">128 / 128</text>

  <line x1="165" y1="82" x2="188" y2="82" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="190" y="60" width="115" height="44" rx="4" fill="#2a1a40" stroke="#7a3aaf" stroke-width="1"/>
  <text x="247" y="78" fill="#aaa" font-size="10" text-anchor="middle">Cluster D</text>
  <text x="247" y="94" fill="#666" font-size="9" text-anchor="middle">128 / 128</text>

  <text x="152" y="120" fill="#888" font-size="9" text-anchor="middle">all full, no head with space</text>

  <!-- Free pool -->
  <text x="500" y="52" fill="#888" font-size="10">Free Pool</text>

  <rect x="500" y="60" width="80" height="34" rx="3" fill="#1a2a1a" stroke="#98c379" stroke-width="1.2"/>
  <text x="540" y="82" fill="#98c379" font-size="10" text-anchor="middle">F</text>

  <rect x="585" y="60" width="80" height="34" rx="3" fill="#2a2a2a" stroke="#555" stroke-width="1"/>
  <text x="625" y="82" fill="#666" font-size="10" text-anchor="middle">G</text>

  <rect x="670" y="60" width="60" height="34" rx="3" fill="#2a2a2a" stroke="#555" stroke-width="1"/>
  <text x="700" y="82" fill="#666" font-size="10" text-anchor="middle">H</text>

  <!-- Separator -->
  <line x1="20" y1="138" x2="730" y2="138" stroke="#444" stroke-width="0.6" stroke-dasharray="4"/>
  <text x="375" y="156" fill="#98c379" font-size="10" text-anchor="middle">F popped from free pool, linked at head of category 1</text>

  <!-- AFTER -->
  <text x="20" y="182" fill="#d4d4d4" font-size="12" font-weight="bold">After</text>

  <!-- Category 1 chain (F at head) -->
  <text x="50" y="205" fill="#9a6be8" font-size="10">Category 1</text>

  <rect x="50" y="212" width="115" height="44" rx="4" fill="#2a1a40" stroke="#98c379" stroke-width="1.5"/>
  <text x="107" y="230" fill="#d4d4d4" font-size="10" text-anchor="middle">Cluster F</text>
  <text x="107" y="246" fill="#98c379" font-size="9" text-anchor="middle">1 / 128</text>
  <text x="107" y="272" fill="#9a6be8" font-size="9" text-anchor="middle" font-style="italic">head (new)</text>

  <line x1="165" y1="234" x2="188" y2="234" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="190" y="212" width="115" height="44" rx="4" fill="#2a1a40" stroke="#7a3aaf" stroke-width="1"/>
  <text x="247" y="230" fill="#aaa" font-size="10" text-anchor="middle">Cluster A</text>
  <text x="247" y="246" fill="#666" font-size="9" text-anchor="middle">128 / 128</text>

  <line x1="305" y1="234" x2="328" y2="234" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="330" y="212" width="115" height="44" rx="4" fill="#2a1a40" stroke="#7a3aaf" stroke-width="1"/>
  <text x="387" y="230" fill="#aaa" font-size="10" text-anchor="middle">Cluster D</text>
  <text x="387" y="246" fill="#666" font-size="9" text-anchor="middle">128 / 128</text>
  <text x="387" y="272" fill="#9a6be8" font-size="9" text-anchor="middle" font-style="italic">tail</text>

  <!-- Remaining free pool -->
  <text x="560" y="205" fill="#888" font-size="10">Free Pool</text>

  <rect x="560" y="212" width="80" height="34" rx="3" fill="#2a2a2a" stroke="#555" stroke-width="1"/>
  <text x="600" y="234" fill="#666" font-size="10" text-anchor="middle">G</text>

  <rect x="645" y="212" width="60" height="34" rx="3" fill="#2a2a2a" stroke="#555" stroke-width="1"/>
  <text x="675" y="234" fill="#666" font-size="10" text-anchor="middle">H</text>
</svg>
