From a05c791c41becc9421350e2c84e24f26bcfaa93e Mon Sep 17 00:00:00 2001
From: Shayan Rais <shanraisshan@gmail.com>
Date: Thu, 7 May 2026 11:45:16 +0500
Subject: [PATCH] =?UTF-8?q?add=20llm-advanced.svg=20=E2=80=94=20combined?=
 =?UTF-8?q?=20BPE=20tokenization=20+=20autoregressive=20diagram?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Animated SVG showing the same BPE-tokenized prompt from tokens.jpg (32 colored
subword tiles, e.g., "Anthropic" → "Anth"+"ropic", "Perplexity" →
"Per"+"plex"+"ity") feeding into the LLM and generating "Yes, they all use
BPE." token-by-token across 7 iterations. Combines tokenization and
autoregressive generation into one view.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 presentation/assets/llm/llm-advanced.svg | 150 +++++++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 presentation/assets/llm/llm-advanced.svg

diff --git a/presentation/assets/llm/llm-advanced.svg b/presentation/assets/llm/llm-advanced.svg
new file mode 100644
index 0000000..4e6728c
--- /dev/null
+++ b/presentation/assets/llm/llm-advanced.svg
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1240 540" width="1240" height="540"
+     font-family="Helvetica, Arial, sans-serif">
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
+            markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="#333"/>
+    </marker>
+    <marker id="arrowFB" viewBox="0 0 10 10" refX="9" refY="5"
+            markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M0,0 L10,5 L0,10 z" fill="#9c27b0"/>
+    </marker>
+  </defs>
+
+  <rect width="1240" height="540" fill="#fafbfc"/>
+
+  <text x="620" y="34" text-anchor="middle" font-size="22" font-weight="bold" fill="#1a1a1a">
+    How an LLM tokenizes input and generates text autoregressively
+  </text>
+  <text x="620" y="56" text-anchor="middle" font-size="13" fill="#666">
+    BPE chops words into subword tokens — same color = same word, gray = punctuation
+  </text>
+
+    <text x="620" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 1 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.11056;0.11111;0.22222;0.23333;1" dur="18.0s" repeatCount="indefinite"/></text>
+  <text x="620" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 2 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.22167;0.22222;0.33333;0.34444;1" dur="18.0s" repeatCount="indefinite"/></text>
+  <text x="620" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 3 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.33278;0.33333;0.44444;0.45556;1" dur="18.0s" repeatCount="indefinite"/></text>
+  <text x="620" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 4 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.44389;0.44444;0.55556;0.56667;1" dur="18.0s" repeatCount="indefinite"/></text>
+  <text x="620" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 5 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.55500;0.55556;0.66667;0.67778;1" dur="18.0s" repeatCount="indefinite"/></text>
+  <text x="620" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 6 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.66611;0.66667;0.77778;0.78889;1" dur="18.0s" repeatCount="indefinite"/></text>
+  <text x="620" y="83" text-anchor="middle" font-size="13" font-weight="700" fill="#1976d2" opacity="0" letter-spacing="1">ITERATION 7 / 7<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.77722;0.77778;0.88889;0.90000;1" dur="18.0s" repeatCount="indefinite"/></text>
+
+  <!-- INPUT PANEL -->
+  <text x="250" y="100" text-anchor="middle" font-size="11" font-weight="700"
+        fill="#777" letter-spacing="1.5">INPUT (CONTEXT)</text>
+  <rect x="30" y="110" width="440" height="290" rx="10"
+        fill="#fff" stroke="#c5cee0" stroke-width="2"/>
+
+  <text x="42" y="148" font-size="11" font-weight="600" fill="#555"
+        letter-spacing="0.3">Original prompt → 32 BPE tokens (105 chars)</text>
+    <g opacity="0"><rect x="42" y="170" width="44" height="28" rx="5" fill="#dbeafe" stroke="#1d4ed8" stroke-width="1.5"/><text x="64.0" y="189" text-anchor="middle" font-size="13" fill="#1e3a8a" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">Does</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01056;0.02500;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="90" y="170" width="51" height="28" rx="5" fill="#dcfce7" stroke="#15803d" stroke-width="1.5"/><text x="115.5" y="189" text-anchor="middle" font-size="13" fill="#14532d" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Chat</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01278;0.02722;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="145" y="170" width="37" height="28" rx="5" fill="#dcfce7" stroke="#15803d" stroke-width="1.5"/><text x="163.5" y="189" text-anchor="middle" font-size="13" fill="#14532d" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">GPT</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01500;0.02944;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="186" y="170" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="197.5" y="189" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01722;0.03167;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="213" y="170" width="65" height="28" rx="5" fill="#fce7f3" stroke="#9d174d" stroke-width="1.5"/><text x="245.5" y="189" text-anchor="middle" font-size="13" fill="#831843" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Claude</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.01944;0.03389;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="282" y="170" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="293.5" y="189" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.02167;0.03611;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="309" y="170" width="51" height="28" rx="5" fill="#ede9fe" stroke="#5b21b6" stroke-width="1.5"/><text x="334.5" y="189" text-anchor="middle" font-size="13" fill="#4c1d95" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Anth</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.02389;0.03833;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="364" y="170" width="51" height="28" rx="5" fill="#ede9fe" stroke="#5b21b6" stroke-width="1.5"/><text x="389.5" y="189" text-anchor="middle" font-size="13" fill="#4c1d95" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">ropic</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.02611;0.04056;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="419" y="170" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="430.5" y="189" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.02833;0.04278;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="42" y="205" width="37" height="28" rx="5" fill="#fef3c7" stroke="#a16207" stroke-width="1.5"/><text x="60.5" y="224" text-anchor="middle" font-size="13" fill="#713f12" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Ll</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03000;0.04444;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="83" y="205" width="37" height="28" rx="5" fill="#fef3c7" stroke="#a16207" stroke-width="1.5"/><text x="101.5" y="224" text-anchor="middle" font-size="13" fill="#713f12" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">ama</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03222;0.04667;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="124" y="205" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="135.5" y="224" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03444;0.04889;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="151" y="205" width="51" height="28" rx="5" fill="#fed7aa" stroke="#9a3412" stroke-width="1.5"/><text x="176.5" y="224" text-anchor="middle" font-size="13" fill="#7c2d12" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Mist</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03667;0.05111;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="206" y="205" width="37" height="28" rx="5" fill="#fed7aa" stroke="#9a3412" stroke-width="1.5"/><text x="224.5" y="224" text-anchor="middle" font-size="13" fill="#7c2d12" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">ral</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.03889;0.05333;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="247" y="205" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="258.5" y="224" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04111;0.05556;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="274" y="205" width="44" height="28" rx="5" fill="#cffafe" stroke="#0e7490" stroke-width="1.5"/><text x="296.0" y="224" text-anchor="middle" font-size="13" fill="#155e75" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Gem</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04333;0.05778;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="322" y="205" width="37" height="28" rx="5" fill="#cffafe" stroke="#0e7490" stroke-width="1.5"/><text x="340.5" y="224" text-anchor="middle" font-size="13" fill="#155e75" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">ini</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04556;0.06000;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="363" y="205" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="374.5" y="224" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04778;0.06222;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="390" y="205" width="44" height="28" rx="5" fill="#fee2e2" stroke="#b91c1c" stroke-width="1.5"/><text x="412.0" y="224" text-anchor="middle" font-size="13" fill="#7f1d1d" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> and</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05000;0.06444;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="42" y="240" width="44" height="28" rx="5" fill="#e0e7ff" stroke="#3730a3" stroke-width="1.5"/><text x="64.0" y="259" text-anchor="middle" font-size="13" fill="#312e81" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Per</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.04944;0.06389;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="90" y="240" width="44" height="28" rx="5" fill="#e0e7ff" stroke="#3730a3" stroke-width="1.5"/><text x="112.0" y="259" text-anchor="middle" font-size="13" fill="#312e81" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">plex</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05167;0.06611;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="138" y="240" width="37" height="28" rx="5" fill="#e0e7ff" stroke="#3730a3" stroke-width="1.5"/><text x="156.5" y="259" text-anchor="middle" font-size="13" fill="#312e81" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">ity</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05389;0.06833;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="179" y="240" width="44" height="28" rx="5" fill="#d1fae5" stroke="#065f46" stroke-width="1.5"/><text x="201.0" y="259" text-anchor="middle" font-size="13" fill="#064e3b" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> all</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05611;0.07056;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="227" y="240" width="44" height="28" rx="5" fill="#fef9c3" stroke="#854d0e" stroke-width="1.5"/><text x="249.0" y="259" text-anchor="middle" font-size="13" fill="#713f12" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> use</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.05833;0.07278;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="275" y="240" width="51" height="28" rx="5" fill="#bae6fd" stroke="#075985" stroke-width="1.5"/><text x="300.5" y="259" text-anchor="middle" font-size="13" fill="#0c4a6e" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Byte</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.06056;0.07500;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="330" y="240" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="341.5" y="259" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">-</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.06278;0.07722;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="357" y="240" width="44" height="28" rx="5" fill="#bae6fd" stroke="#075985" stroke-width="1.5"/><text x="379.0" y="259" text-anchor="middle" font-size="13" fill="#0c4a6e" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">Pair</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.06500;0.07944;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="42" y="275" width="79" height="28" rx="5" fill="#f5d0fe" stroke="#86198f" stroke-width="1.5"/><text x="81.5" y="294" text-anchor="middle" font-size="13" fill="#701a75" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> Encoding</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.06889;0.08333;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="125" y="275" width="30" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="140.0" y="294" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> (</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.07111;0.08556;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="159" y="275" width="37" height="28" rx="5" fill="#fde68a" stroke="#92400e" stroke-width="1.5"/><text x="177.5" y="294" text-anchor="middle" font-size="13" fill="#78350f" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">BPE</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.07333;0.08778;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="200" y="275" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="211.5" y="294" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">)</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.07556;0.09000;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="227" y="275" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="238.5" y="294" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">?</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.07778;0.09222;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+
+  <text x="42" y="335" font-size="11" font-weight="600" fill="#bf360c"
+        letter-spacing="0.3">Generated tokens (autoregressive)</text>
+    <g opacity="0"><rect x="42" y="345" width="37" height="28" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="60.5" y="364" text-anchor="middle" font-size="13" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">Yes</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.19389;0.20833;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="83" y="345" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="94.5" y="364" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.30500;0.31944;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="110" y="345" width="51" height="28" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="135.5" y="364" text-anchor="middle" font-size="13" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> they</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.41611;0.43056;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="165" y="345" width="44" height="28" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="187.0" y="364" text-anchor="middle" font-size="13" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> all</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.52722;0.54167;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="213" y="345" width="44" height="28" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="235.0" y="364" text-anchor="middle" font-size="13" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> use</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.63833;0.65278;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="261" y="345" width="44" height="28" rx="5" fill="#fff3e0" stroke="#e65100" stroke-width="1.5"/><text x="283.0" y="364" text-anchor="middle" font-size="13" fill="#bf360c" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> BPE</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.74944;0.76389;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="309" y="345" width="23" height="28" rx="5" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1.5"/><text x="320.5" y="364" text-anchor="middle" font-size="13" fill="#4b5563" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">.</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.86056;0.87500;0.93333;0.95556;1" dur="18.0s" repeatCount="indefinite"/></g>
+
+  <!-- arrow input -> LLM -->
+  <line x1="470" y1="235" x2="505" y2="235" stroke="#333" stroke-width="2.5"
+        marker-end="url(#arrow)"/>
+  <circle cx="465" cy="235" r="6" fill="#1976d2" opacity="0"><animate attributeName="cx" values="465;465;465;505;505;465;465;505;505;465;465;505;505;465;465;505;505;465;465;505;505;465;465;505;505;465;465;505;505;465" keyTimes="0;0.10833;0.11111;0.13056;0.13333;0.21944;0.22222;0.24167;0.24444;0.33056;0.33333;0.35278;0.35556;0.44167;0.44444;0.46389;0.46667;0.55278;0.55556;0.57500;0.57778;0.66389;0.66667;0.68611;0.68889;0.77500;0.77778;0.79722;0.80000;1" dur="18.0s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0" keyTimes="0;0.10833;0.11111;0.13056;0.13333;0.21944;0.22222;0.24167;0.24444;0.33056;0.33333;0.35278;0.35556;0.44167;0.44444;0.46389;0.46667;0.55278;0.55556;0.57500;0.57778;0.66389;0.66667;0.68611;0.68889;0.77500;0.77778;0.79722;0.80000;1" dur="18.0s" repeatCount="indefinite"/></circle>
+
+  <!-- LLM black box -->
+  <rect x="510" y="175" width="220" height="120" rx="12" fill="#0d0d0d" stroke="#000"/>
+  <text x="620" y="232" text-anchor="middle" fill="#fff"
+        font-size="38" font-weight="bold" font-family="ui-monospace,Menlo,monospace">LLM</text>
+  <text x="620" y="254" text-anchor="middle" fill="#888" font-size="11"
+        letter-spacing="0.5">(black box)</text>
+  <circle cx="600" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.11333;0.11389;0.13333;0.13611;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="620" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.11889;0.11944;0.13333;0.13611;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="640" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.12444;0.12500;0.13333;0.13611;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="600" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.22444;0.22500;0.24444;0.24722;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="620" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.23000;0.23056;0.24444;0.24722;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="640" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.23556;0.23611;0.24444;0.24722;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="600" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.33556;0.33611;0.35556;0.35833;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="620" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.34111;0.34167;0.35556;0.35833;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="640" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.34667;0.34722;0.35556;0.35833;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="600" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.44667;0.44722;0.46667;0.46944;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="620" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.45222;0.45278;0.46667;0.46944;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="640" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.45778;0.45833;0.46667;0.46944;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="600" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.55778;0.55833;0.57778;0.58056;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="620" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.56333;0.56389;0.57778;0.58056;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="640" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.56889;0.56944;0.57778;0.58056;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="600" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.66889;0.66944;0.68889;0.69167;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="620" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.67444;0.67500;0.68889;0.69167;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="640" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.68000;0.68056;0.68889;0.69167;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="600" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.78000;0.78056;0.80000;0.80278;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="620" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.78556;0.78611;0.80000;0.80278;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <circle cx="640" cy="272" r="3.5" fill="#ffc107" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.79111;0.79167;0.80000;0.80278;1" dur="18.0s" repeatCount="indefinite"/></circle>
+  <rect x="508" y="173" width="224" height="124" rx="12" fill="none" stroke="#ffc107" stroke-width="4" opacity="0"><animate attributeName="opacity" values="0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0" keyTimes="0;0.10833;0.11111;0.13333;0.13611;0.21944;0.22222;0.24444;0.24722;0.33056;0.33333;0.35556;0.35833;0.44167;0.44444;0.46667;0.46944;0.55278;0.55556;0.57778;0.58056;0.66389;0.66667;0.68889;0.69167;0.77500;0.77778;0.80000;0.80278;1" dur="18.0s" repeatCount="indefinite"/></rect>
+
+  <!-- arrow LLM -> output -->
+  <line x1="735" y1="235" x2="770" y2="235" stroke="#333" stroke-width="2.5"
+        marker-end="url(#arrow)"/>
+  <circle cx="735" cy="235" r="6" fill="#e65100" opacity="0"><animate attributeName="cx" values="735;735;735;775;775;735;735;775;775;735;735;775;775;735;735;775;775;735;735;775;775;735;735;775;775;735;735;775;775;735" keyTimes="0;0.13056;0.13333;0.15278;0.15556;0.24167;0.24444;0.26389;0.26667;0.35278;0.35556;0.37500;0.37778;0.46389;0.46667;0.48611;0.48889;0.57500;0.57778;0.59722;0.60000;0.68611;0.68889;0.70833;0.71111;0.79722;0.80000;0.81944;0.82222;1" dur="18.0s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0;1;1;0;0" keyTimes="0;0.13056;0.13333;0.15278;0.15556;0.24167;0.24444;0.26389;0.26667;0.35278;0.35556;0.37500;0.37778;0.46389;0.46667;0.48611;0.48889;0.57500;0.57778;0.59722;0.60000;0.68611;0.68889;0.70833;0.71111;0.79722;0.80000;0.81944;0.82222;1" dur="18.0s" repeatCount="indefinite"/></circle>
+
+  <!-- OUTPUT PANEL -->
+  <text x="990" y="100" text-anchor="middle" font-size="11" font-weight="700"
+        fill="#777" letter-spacing="1.5">PREDICTED NEXT TOKEN</text>
+  <rect x="770" y="110" width="440" height="290" rx="10"
+        fill="#fff" stroke="#ffc107" stroke-width="2"/>
+  <text x="990" y="200" text-anchor="middle" font-size="12" fill="#888"
+        font-style="italic">argmax  P(next token | input)</text>
+    <g opacity="0"><rect x="840" y="225" width="300" height="70" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="990" y="271" text-anchor="middle" font-size="32" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">Yes</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.13889;0.15000;0.20556;0.21667;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="840" y="225" width="300" height="70" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="990" y="271" text-anchor="middle" font-size="32" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">,</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.25000;0.26111;0.31667;0.32778;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="840" y="225" width="300" height="70" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="990" y="271" text-anchor="middle" font-size="32" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> they</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.36111;0.37222;0.42778;0.43889;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="840" y="225" width="300" height="70" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="990" y="271" text-anchor="middle" font-size="32" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> all</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.47222;0.48333;0.53889;0.55000;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="840" y="225" width="300" height="70" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="990" y="271" text-anchor="middle" font-size="32" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> use</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.58333;0.59444;0.65000;0.66111;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="840" y="225" width="300" height="70" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="990" y="271" text-anchor="middle" font-size="32" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve"> BPE</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.69444;0.70556;0.76111;0.77222;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <g opacity="0"><rect x="840" y="225" width="300" height="70" rx="10" fill="#fff3e0" stroke="#e65100" stroke-width="2.5"/><text x="990" y="271" text-anchor="middle" font-size="32" fill="#bf360c" font-weight="700" font-family="ui-monospace,Menlo,Consolas,monospace" xml:space="preserve">.</text><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.80556;0.81667;0.87222;0.88333;1" dur="18.0s" repeatCount="indefinite"/></g>
+  <text x="990" y="335" text-anchor="middle" font-size="11" fill="#777"
+        font-style="italic">single token, drawn from the same vocab as the input</text>
+
+  <!-- Feedback loop -->
+  <path d="M 990 410 Q 620 480 250 410"
+        stroke="#9c27b0" stroke-width="2.5" fill="none"
+        stroke-dasharray="6,5" marker-end="url(#arrowFB)">
+    <animate attributeName="stroke-dashoffset" from="0" to="-22"
+             dur="0.8s" repeatCount="indefinite"/>
+  </path>
+  <text x="620" y="510" text-anchor="middle" fill="#9c27b0" font-size="13"
+        font-style="italic" font-weight="600">
+    predicted token appended to input → next iteration
+  </text>
+</svg>