<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 270" 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>
  </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() targets C, the head of category 1</text>

  <rect x="40" y="36" width="105" height="44" rx="4" fill="#1a3050" stroke="#3a6a9f" stroke-width="1"/>
  <text x="92" y="54" fill="#aaa" font-size="10" text-anchor="middle">A</text>
  <text x="92" y="70" fill="#666" font-size="9" text-anchor="middle">47 / 128</text>

  <line x1="145" y1="58" x2="158" y2="58" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="160" y="36" width="105" height="44" rx="4" fill="#1a3050" stroke="#3a6a9f" stroke-width="1"/>
  <text x="212" y="54" fill="#aaa" font-size="10" text-anchor="middle">B</text>
  <text x="212" y="70" fill="#666" font-size="9" text-anchor="middle">128 / 128</text>

  <line x1="265" y1="58" x2="298" y2="58" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="300" y="36" width="105" height="44" rx="4" fill="#2a1a40" stroke="#98c379" stroke-width="1.5"/>
  <text x="352" y="54" fill="#d4d4d4" font-size="10" text-anchor="middle">C</text>
  <text x="352" y="70" fill="#98c379" font-size="9" text-anchor="middle">127 / 128</text>
  <text x="352" y="98" fill="#9a6be8" font-size="9" text-anchor="middle" font-style="italic">head</text>

  <line x1="405" y1="58" x2="418" y2="58" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="420" y="36" width="105" height="44" rx="4" fill="#2a1a40" stroke="#7a3aaf" stroke-width="1"/>
  <text x="472" y="54" fill="#aaa" font-size="10" text-anchor="middle">D</text>
  <text x="472" y="70" fill="#666" font-size="9" text-anchor="middle">128 / 128</text>
  <text x="472" y="98" fill="#9a6be8" font-size="9" text-anchor="middle" font-style="italic">tail</text>

  <line x1="525" y1="58" x2="558" y2="58" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="560" y="36" width="105" height="44" rx="4" fill="#40301a" stroke="#e8a46b" stroke-width="1"/>
  <text x="612" y="54" fill="#aaa" font-size="10" text-anchor="middle">E</text>
  <text x="612" y="70" fill="#666" font-size="9" text-anchor="middle">61 / 128</text>

  <!-- Separator -->
  <line x1="20" y1="118" x2="800" y2="118" stroke="#444" stroke-width="0.6" stroke-dasharray="4"/>
  <text x="410" y="136" fill="#e06c75" font-size="10" text-anchor="middle">128th element added — C is full, re-linked at tail of category 1</text>

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

  <rect x="40" y="180" width="105" height="44" rx="4" fill="#1a3050" stroke="#3a6a9f" stroke-width="1"/>
  <text x="92" y="198" fill="#aaa" font-size="10" text-anchor="middle">A</text>
  <text x="92" y="214" fill="#666" font-size="9" text-anchor="middle">47 / 128</text>

  <line x1="145" y1="202" x2="158" y2="202" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="160" y="180" width="105" height="44" rx="4" fill="#1a3050" stroke="#3a6a9f" stroke-width="1"/>
  <text x="212" y="198" fill="#aaa" font-size="10" text-anchor="middle">B</text>
  <text x="212" y="214" fill="#666" font-size="9" text-anchor="middle">128 / 128</text>

  <line x1="265" y1="202" x2="298" y2="202" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="300" y="180" width="105" height="44" rx="4" fill="#2a1a40" stroke="#7a3aaf" stroke-width="1"/>
  <text x="352" y="198" fill="#aaa" font-size="10" text-anchor="middle">D</text>
  <text x="352" y="214" fill="#666" font-size="9" text-anchor="middle">128 / 128</text>

  <line x1="405" y1="202" x2="418" y2="202" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="420" y="180" width="105" height="44" rx="4" fill="#2a1a40" stroke="#e06c75" stroke-width="1.5"/>
  <text x="472" y="198" fill="#d4d4d4" font-size="10" text-anchor="middle">C</text>
  <text x="472" y="214" fill="#e06c75" font-size="9" text-anchor="middle">128 / 128</text>
  <text x="472" y="242" fill="#9a6be8" font-size="9" text-anchor="middle" font-style="italic">tail (moved)</text>

  <line x1="525" y1="202" x2="558" y2="202" stroke="#888" stroke-width="1" marker-end="url(#ah)"/>

  <rect x="560" y="180" width="105" height="44" rx="4" fill="#40301a" stroke="#e8a46b" stroke-width="1"/>
  <text x="612" y="198" fill="#aaa" font-size="10" text-anchor="middle">E</text>
  <text x="612" y="214" fill="#666" font-size="9" text-anchor="middle">61 / 128</text>

  <!-- Annotation -->
  <text x="410" y="265" fill="#555" font-size="10" text-anchor="middle">Next insertion allocates a fresh cluster at the head of category 1</text>
</svg>
