AlphaGPU · kunal-mansukhani · Mar 7, 2026 · Mar 6, 2026 · Mar 7, 2026 · Mar 7, 2026
@@ -105,6 +105,8 @@ HTML fragment with four required sections:
    - Be consistent within a single challenge
 4. **Constraints** — Size bounds, data types, value ranges, **and performance test size**
 
+**SVG visualization** (optional): If the challenge involves a spatial or structural concept that is hard to understand from text alone, add an inline SVG diagram after the problem description paragraph. Good candidates include convolutions, pooling, attention masks, tree reductions, grid algorithms, and data movement patterns. Use a consistent dark theme (`#222` background, `#ccc` text, blue/green accents) and `style="display:block; margin:20px auto;"`. See existing examples in `challenges/easy/9_1d_convolution/challenge.html` or `challenges/medium/74_gpt2_block/challenge.html`.
+
 **Formatting rules:**
 - `<code>` for variables/functions; `<pre>` for 1D examples, LaTeX `\begin{bmatrix}` for matrices
 - `&le;`, `&ge;`, `&times;` for math symbols
@@ -181,6 +183,7 @@ Verify every item before submitting. This is the single source of truth — work
 - [ ] First example matches `generate_example_test()` values
 - [ ] Examples use `<pre>` for 1D data, LaTeX `\begin{bmatrix}` for matrices — consistent, never mixed
 - [ ] Constraints includes `Performance is measured with <code>param</code> = value` bullet matching `generate_performance_test()`
+- [ ] If the concept is spatial/structural, includes an SVG visualization after the problem description (dark theme, `#222` background)
 
 ### challenge.py
 - [ ] `class Challenge` inherits `ChallengeBase`

@@ -3,6 +3,62 @@
   transpose of a matrix switches its rows and columns. Given a matrix \(A\) of dimensions \(rows \times cols\), the transpose \(A^T\) will have dimensions \(cols \times rows\). All matrices are stored in row-major format.
 </p>
 
+<svg width="420" height="180" viewBox="0 0 420 180" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:20px auto;">
+  <rect width="420" height="180" rx="8" fill="#222"/>
+  <defs>
+    <marker id="arrt" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+      <path d="M0,0 L6,3 L0,6" fill="none" stroke="#ccc" stroke-width="1"/>
+    </marker>
+  </defs>
+
+  <!-- Input matrix A (3x2) -->
+  <text x="60" y="18" text-anchor="middle" fill="#ccc" font-family="sans-serif" font-size="13" font-weight="bold">A</text>
+  <rect x="10" y="24" width="100" height="140" rx="4" fill="#333" stroke="#555" stroke-width="1"/>
+  <!-- Row 0 - blue -->
+  <rect x="16" y="30" width="40" height="24" rx="3" fill="#4477bb"/>
+  <text x="36" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">1</text>
+  <rect x="62" y="30" width="40" height="24" rx="3" fill="#4477bb"/>
+  <text x="82" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">2</text>
+  <!-- Row 1 - green -->
+  <rect x="16" y="60" width="40" height="24" rx="3" fill="#44aa66"/>
+  <text x="36" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">3</text>
+  <rect x="62" y="60" width="40" height="24" rx="3" fill="#44aa66"/>
+  <text x="82" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">4</text>
+  <!-- Row 2 - orange -->
+  <rect x="16" y="90" width="40" height="24" rx="3" fill="#cc7744"/>
+  <text x="36" y="107" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">5</text>
+  <rect x="62" y="90" width="40" height="24" rx="3" fill="#cc7744"/>
+  <text x="82" y="107" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">6</text>
+  <text x="60" y="145" text-anchor="middle" fill="#999" font-family="sans-serif" font-size="10">3 &#xd7; 2</text>
+
+  <!-- Middle label -->
+  <text x="210" y="95" text-anchor="middle" fill="#aaa" font-family="sans-serif" font-size="11" font-style="italic">rows &#x2192; cols</text>
+
+  <!-- Output matrix A^T (2x3) -->
+  <text x="330" y="18" text-anchor="middle" fill="#ccc" font-family="sans-serif" font-size="13" font-weight="bold">A&#x1d40;</text>
+  <rect x="270" y="24" width="140" height="110" rx="4" fill="#333" stroke="#555" stroke-width="1"/>
+  <!-- Row 0 of A^T: col 0 of A -->
+  <rect x="276" y="30" width="40" height="24" rx="3" fill="#4477bb"/>
+  <text x="296" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">1</text>
+  <rect x="320" y="30" width="40" height="24" rx="3" fill="#44aa66"/>
+  <text x="340" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">3</text>
+  <rect x="364" y="30" width="40" height="24" rx="3" fill="#cc7744"/>
+  <text x="384" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">5</text>
+  <!-- Row 1 of A^T: col 1 of A -->
+  <rect x="276" y="60" width="40" height="24" rx="3" fill="#4477bb"/>
+  <text x="296" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">2</text>
+  <rect x="320" y="60" width="40" height="24" rx="3" fill="#44aa66"/>
+  <text x="340" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">4</text>
+  <rect x="364" y="60" width="40" height="24" rx="3" fill="#cc7744"/>
+  <text x="384" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">6</text>
+  <text x="340" y="115" text-anchor="middle" fill="#999" font-family="sans-serif" font-size="10">2 &#xd7; 3</text>
+
+  <!-- Curved dashed arrows showing element movement -->
+  <path d="M 56,72 C 140,30 220,20 320,42" fill="none" stroke="#44aa66" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrt)"/>
+  <path d="M 56,102 C 150,55 230,35 364,42" fill="none" stroke="#cc7744" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrt)"/>
+  <path d="M 102,72 C 170,120 240,110 320,72" fill="none" stroke="#44aa66" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrt)"/>
+</svg>
+
 <h2>Implementation Requirements</h2>
 <ul>
   <li>Use only native features (external libraries are not permitted)</li>

@@ -5,6 +5,75 @@
   <code>[A[0], B[0], A[1], B[1], A[2], B[2], ...]</code>
 </p>
 
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180" width="400" height="180"
+     style="display:block; margin:20px auto;" font-family="monospace" font-size="11">
+  <defs>
+    <marker id="arrBlue" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#4477bb"/>
+    </marker>
+    <marker id="arrGreen" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#44aa66"/>
+    </marker>
+  </defs>
+  <rect width="400" height="180" rx="8" fill="#222"/>
+
+  <!-- Label A -->
+  <text x="60" y="20" fill="#ccc" font-size="13" text-anchor="middle" font-weight="bold">A</text>
+  <!-- Array A cells -->
+  <rect x="10"  y="26" width="40" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <text x="30"  y="45" text-anchor="middle" fill="#ccc">a&#x2080;</text>
+  <rect x="54"  y="26" width="40" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <text x="74"  y="45" text-anchor="middle" fill="#ccc">a&#x2081;</text>
+  <rect x="98"  y="26" width="40" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <text x="118" y="45" text-anchor="middle" fill="#ccc">a&#x2082;</text>
+  <rect x="142" y="26" width="40" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <text x="162" y="45" text-anchor="middle" fill="#ccc">a&#x2083;</text>
+
+  <!-- Label B -->
+  <text x="310" y="20" fill="#ccc" font-size="13" text-anchor="middle" font-weight="bold">B</text>
+  <!-- Array B cells -->
+  <rect x="220" y="26" width="40" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
+  <text x="240" y="45" text-anchor="middle" fill="#ccc">b&#x2080;</text>
+  <rect x="264" y="26" width="40" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
+  <text x="284" y="45" text-anchor="middle" fill="#ccc">b&#x2081;</text>
+  <rect x="308" y="26" width="40" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
+  <text x="328" y="45" text-anchor="middle" fill="#ccc">b&#x2082;</text>
+  <rect x="352" y="26" width="40" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
+  <text x="372" y="45" text-anchor="middle" fill="#ccc">b&#x2083;</text>
+
+  <!-- Label output -->
+  <text x="200" y="108" fill="#ccc" font-size="13" text-anchor="middle" font-weight="bold">output</text>
+  <!-- Output array cells (alternating blue/green) -->
+  <rect x="10"  y="114" width="42" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <text x="31"  y="133" text-anchor="middle" fill="#ccc">a&#x2080;</text>
+  <rect x="56"  y="114" width="42" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
+  <text x="77"  y="133" text-anchor="middle" fill="#ccc">b&#x2080;</text>
+  <rect x="102" y="114" width="42" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <text x="123" y="133" text-anchor="middle" fill="#ccc">a&#x2081;</text>
+  <rect x="148" y="114" width="42" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
+  <text x="169" y="133" text-anchor="middle" fill="#ccc">b&#x2081;</text>
+  <rect x="194" y="114" width="42" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <text x="215" y="133" text-anchor="middle" fill="#ccc">a&#x2082;</text>
+  <rect x="240" y="114" width="42" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
+  <text x="261" y="133" text-anchor="middle" fill="#ccc">b&#x2082;</text>
+  <rect x="286" y="114" width="42" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <text x="307" y="133" text-anchor="middle" fill="#ccc">a&#x2083;</text>
+  <rect x="332" y="114" width="42" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
+  <text x="353" y="133" text-anchor="middle" fill="#ccc">b&#x2083;</text>
+
+  <!-- Curved arrows from A to output (dashed, blue) -->
+  <path d="M30,54 C30,80 31,90 31,114" stroke="#4477bb" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrBlue)"/>
+  <path d="M74,54 C74,78 123,90 123,114" stroke="#4477bb" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrBlue)"/>
+  <path d="M118,54 C118,78 215,90 215,114" stroke="#4477bb" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrBlue)"/>
+  <path d="M162,54 C162,78 307,90 307,114" stroke="#4477bb" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrBlue)"/>
+
+  <!-- Curved arrows from B to output (dashed, green) -->
+  <path d="M240,54 C240,78 77,90 77,114" stroke="#44aa66" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrGreen)"/>
+  <path d="M284,54 C284,78 169,90 169,114" stroke="#44aa66" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrGreen)"/>
+  <path d="M328,54 C328,78 261,90 261,114" stroke="#44aa66" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrGreen)"/>
+  <path d="M372,54 C372,78 353,90 353,114" stroke="#44aa66" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrGreen)"/>
+</svg>
+
 <h2>Implementation Requirements</h2>
 <ul>
   <li>Use only native features (external libraries are not permitted)</li>

@@ -4,6 +4,69 @@
   where it fully overlaps with the input.
 </p>
 
+<svg width="420" height="210" viewBox="0 0 420 210" xmlns="http://www.w3.org/2000/svg"
+     style="display:block; margin:20px auto;" font-family="monospace" font-size="13">
+  <!-- Background -->
+  <rect width="420" height="210" rx="8" fill="#222"/>
+
+  <!-- "input" label -->
+  <text x="16" y="38" fill="#999" font-size="11">input</text>
+
+  <!-- Input cells -->
+  <rect x="65"  y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
+  <rect x="120" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
+  <rect x="175" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
+  <rect x="230" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
+  <rect x="285" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
+  <!-- Input values -->
+  <text x="90"  y="41" text-anchor="middle" fill="#ccc">1</text>
+  <text x="145" y="41" text-anchor="middle" fill="#ccc">2</text>
+  <text x="200" y="41" text-anchor="middle" fill="#ccc">3</text>
+  <text x="255" y="41" text-anchor="middle" fill="#ccc">4</text>
+  <text x="310" y="41" text-anchor="middle" fill="#ccc">5</text>
+
+  <!-- Kernel highlight window over first 3 input cells -->
+  <rect x="63" y="18" width="164" height="36" rx="4" fill="none" stroke="#4477bb" stroke-width="2" stroke-dasharray="5,3"/>
+
+  <!-- "kernel" label -->
+  <text x="16" y="86" fill="#999" font-size="11">kernel</text>
+
+  <!-- Kernel cells (aligned under first 3 input cells) -->
+  <rect x="65"  y="68" width="50" height="32" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <rect x="120" y="68" width="50" height="32" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <rect x="175" y="68" width="50" height="32" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
+  <!-- Kernel values -->
+  <text x="90"  y="89" text-anchor="middle" fill="#88bbff">1</text>
+  <text x="145" y="89" text-anchor="middle" fill="#88bbff">0</text>
+  <text x="200" y="89" text-anchor="middle" fill="#88bbff">-1</text>
+
+  <!-- Multiplication signs between pairs -->
+  <text x="90"  y="118" text-anchor="middle" fill="#777" font-size="11">1&#xd7;1</text>
+  <text x="145" y="118" text-anchor="middle" fill="#777" font-size="11">2&#xd7;0</text>
+  <text x="200" y="118" text-anchor="middle" fill="#777" font-size="11">3&#xd7;(-1)</text>
+
+  <!-- Computation line -->
+  <text x="145" y="140" text-anchor="middle" fill="#aaa" font-size="12">= 1 + 0 + (-3) = -2</text>
+
+  <!-- Arrow down to output -->
+  <line x1="145" y1="148" x2="145" y2="168" stroke="#4477bb" stroke-width="1.5" marker-end="url(#arrowhead)"/>
+  <defs>
+    <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+      <polygon points="0 0, 8 3, 0 6" fill="#4477bb"/>
+    </marker>
+  </defs>
+
+  <!-- "output" label -->
+  <text x="16" y="187" fill="#999" font-size="11">output</text>
+
+  <!-- Output cell -->
+  <rect x="120" y="170" width="50" height="30" rx="3" fill="#1a3a1a" stroke="#44aa44" stroke-width="1.5"/>
+  <text x="145" y="190" text-anchor="middle" fill="#66dd66" font-weight="bold">-2</text>
+
+  <!-- Ellipsis for remaining output -->
+  <text x="195" y="190" fill="#666" font-size="14">&#x2026;</text>
+</svg>
+
 <p>
   The input consists of two arrays:
 <ul>