Add infoboxes to introduce glyphs in tutorials

6 files changed, 258 insertions, 3 deletions

diff --git a/docs/style.css b/docs/style.css
index a37d04de..622f866f 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -40,7 +40,7 @@ table th {
   font-family: BQN;
   src: url(DejaVuBQNSansMono.ttf) format('truetype');
 }
-pre, code, textarea {
+pre, code, textarea, .primitives tr td:first-child {
   background-color: #e3e7e7;
   color: #292929;
 }
@@ -100,6 +100,26 @@ textarea { width: 100%; outline: none; resize: vertical; margin: 0; }
   opacity: 0.7;
 }
 
+.primitives {
+  float: right;
+  margin: 0.4em 0.8em 0 1em;
+}
+.primitives tr td:first-child {
+  font-family: BQN, monospace;
+}
+.primitives tr td:nth-child(2) {
+  padding: 0.3em 0.5em 0.4em;
+  min-width: 2em;
+}
+kbd {
+  font-family: BQN, monospace;
+  border: 0.06em solid currentColor;
+  padding: 0.04em 0.3em;
+  border-radius: 0.4em;
+  box-shadow: -0.02em 0.05em 0 0 currentColor;
+  white-space: pre;
+}
+
 .Value        { color: #1f2020; }
 .Function     { color: #1f7229; }
 .Modifier     { color: #7b3b60; }
@@ -124,7 +144,7 @@ a:visited     { color: #3d155f; }
 @media (prefers-color-scheme: dark) {
   body, input { color: #d6d7d9; background-color: #141515; }
   input       { border-color: #0c0d0e; }
-  textarea, pre, code      { color: #969698; background-color: #0c0d0e; }
+  textarea, pre, code, .primitives tr td:first-child { color: #969698; background-color: #0c0d0e; }
   textarea, pre, code, .kb { border-color: #040509; }
   .code, .codeCover { fill: #0c0d0e; stroke: #040509; }
   .codeCover  { stroke: #0c0d0e; }
diff --git a/docs/tutorial/expression.html b/docs/tutorial/expression.html
index 7669df1a..bb5fc9d6 100644
--- a/docs/tutorial/expression.html
+++ b/docs/tutorial/expression.html
@@ -15,6 +15,21 @@
     <span class='Function'>-</span> <span class='Number'>1.5</span>
 ¯1.5
 </pre>
+<table class='primitives'>
+  <tr>
+    <td><span class='Function'>+</span></td>
+    <td></td>
+    <td></td>
+    <td>Add</td>
+  </tr>
+  <tr>
+    <td><span class='Function'>-</span></td>
+    <td></td>
+    <td>Negate</td>
+    <td>Subtract</td>
+  </tr>
+</table>
+
 <p>Shown above are a few arithmetic operations. BQN manages to pass as a normal programming language for three lines so far. That's a big accomplishment for BQN! Earth's a confusing place!</p>
 <p>The number of spaces between <em>primitive functions</em> like <code><span class='Function'>+</span></code> and <code><span class='Function'>-</span></code> and their <em>arguments</em> doesn't matter: you can use as much or as little as you like. No spaces inside numbers, of course.</p>
 <a class="replLink" title="Open in the REPL" target="_blank" href="https://mlochbaum.github.io/BQN/try.html#code=MiDDlyDPgAo5IMO3IDIKw7cg4oie&run">↗️</a><pre>    <span class='Number'>2</span> <span class='Function'>×</span> <span class='Number'>π</span>
@@ -24,6 +39,31 @@
     <span class='Function'>÷</span> <span class='Number'>∞</span>
 0
 </pre>
+<table class='primitives'>
+  <tr>
+    <td><span class='Function'>×</span></td>
+    <td><kbd>\=</kbd></td>
+    <td></td>
+    <td>Multiply</td>
+  </tr>
+  <tr>
+    <td><span class='Function'>÷</span></td>
+    <td><kbd>\-</kbd></td>
+    <td>Reciprocal</td>
+    <td>Divide</td>
+  </tr>
+  <tr>
+    <td><span class='Number'>π</span></td>
+    <td><kbd>\p</kbd></td>
+    <td colspan='2'>Pi</td>
+  </tr>
+  <tr>
+    <td><span class='Number'>∞</span></td>
+    <td><kbd>\8</kbd></td>
+    <td colspan='2'>Infinity</td>
+  </tr>
+</table>
+
 <p>Okay, now BQN looks like normal (grade-school) mathematics, which is sort of like looking normal. Pi (<code><span class='Number'>π</span></code>) represents <a href="https://en.wikipedia.org/wiki/Pi">that real famous number</a> and Infinity (<code><span class='Number'>∞</span></code>) is also part of the number system (the BQN spec allows an implementation to choose its number system, and all existing implementations use double-precision floats, like Javascript or Lua). In analogy with the one-argument form of Minus (<code><span class='Function'>-</span></code>) giving the negation of a number, Divide (<code><span class='Function'>÷</span></code>) with only one argument gives its reciprocal.</p>
 <p>A number can be raised to the power of another with Power, written <code><span class='Function'>⋆</span></code>. That's a star rather than an asterisk; BQN doesn't use the asterisk symbol. If it's called without a left argument, then <code><span class='Function'>⋆</span></code> uses a base of <a href="https://en.wikipedia.org/wiki/E_(mathematical_constant)">Euler's number</a> <em>e</em> and is called Exponential.</p>
 <a class="replLink" title="Open in the REPL" target="_blank" href="https://mlochbaum.github.io/BQN/try.html#code=MiDii4YgMwozIOKLhiAyCuKLhiAxICAgIyBUaGVyZSdzIG5vIGNvbnN0YW50IGZvciBlIGJ1dCB5b3UgY2FuIGdldCBpdCB0aGlzIHdheQrii4YgMi4z&run">↗️</a><pre>    <span class='Number'>2</span> <span class='Function'>⋆</span> <span class='Number'>3</span>
@@ -35,6 +75,21 @@
     <span class='Function'>⋆</span> <span class='Number'>2.3</span>
 9.97418245481472
 </pre>
+<table class='primitives'>
+  <tr>
+    <td><span class='Function'>⋆</span></td>
+    <td><kbd>\+</kbd></td>
+    <td>Exponential</td>
+    <td>Power</td>
+  </tr>
+  <tr>
+    <td><span class='Function'>√</span></td>
+    <td><kbd>\_</kbd></td>
+    <td>Square Root</td>
+    <td>Root</td>
+  </tr>
+</table>
+
 <p>You could use Power to take square roots and <em>n</em>-th roots, but BQN also provides the primitive <code><span class='Function'>√</span></code> for this purpose. If no left argument is provided, then it is the Square Root function; with a left argument it is called Root and raises the right argument to the power of one divided by the left argument.</p>
 <a class="replLink" title="Open in the REPL" target="_blank" href="https://mlochbaum.github.io/BQN/try.html#code=4oiaIDIKMyDiiJogMjc=&run">↗️</a><pre>    <span class='Function'>√</span> <span class='Number'>2</span>
 1.4142135623731
@@ -208,6 +263,19 @@
     <span class='String'>@</span> <span class='Function'>+</span> <span class='Number'>97</span>
 'a'
 </pre>
+<table class='primitives'>
+  <tr>
+    <td><span class='String'>'</span></td>
+    <td></td>
+    <td colspan='2'>Character</td>
+  </tr>
+  <tr>
+    <td><span class='String'>@</span></td>
+    <td></td>
+    <td colspan='2'>Null character</td>
+  </tr>
+</table>
+
 <p>It's a convenient way to write non-printing characters without having to include them in your source code: for example <code><span class='String'>@</span><span class='Function'>+</span><span class='Number'>10</span></code> is the newline character.</p>
 <p>Addition and subtraction with affine characters have all the same algebraic properties that they do with numbers. One way to see this is to think of values as a combination of &quot;characterness&quot; (0 for numbers and 1 for characters) and either numeric value or code point. Addition and subtraction are done element-wise on these pairs of numbers, and are allowed if the result is a valid value, that is, its characterness is 0 or 1 and its value is a valid code point if the characterness is 1. However, because the space of values is no longer closed under addition and subtraction, certain rearrangements of valid computations might not be valid, if one of the values produced in the middle isn't legal.</p>
 <h2 id="modifiers">Modifiers</h2>
@@ -224,6 +292,25 @@
 16
 </pre>
 <p>What's wrong with <code><span class='Number'>4</span><span class='Function'>⋆</span><span class='Number'>2</span></code>? Depends on the context. Because of the way evaluation flows from right to left, it's usually best if the right argument to a function is the one that's being manipulated directly while the left argument is sort of a &quot;control value&quot; that describes how to manipulate it. That way several manipulations can be done in a row without any parentheses required. <code><span class='Function'>⋆</span></code> can go either way, but if &quot;squaring&quot; is the operation being done then the <em>left</em> argument is one being squared, so it's the active value. The Swap modifier allows us to put it on the right instead.</p>
+<table class='primitives'>
+  <tr>
+    <td><span class='Modifier'>˜</span></td>
+    <td><kbd>\`</kbd></td>
+    <td>Swap</td>
+    <td>Self</td>
+  </tr>
+  <tr>
+    <td><span class='Modifier'>⁼</span></td>
+    <td><kbd>\3</kbd></td>
+    <td colspan='2'>Undo</td>
+  </tr>
+  <tr>
+    <td><span class='Modifier'>˙</span></td>
+    <td><kbd>\"</kbd></td>
+    <td colspan='2'>Constant</td>
+  </tr>
+</table>
+
 <p>Another 1-modifier is Undo (<code><span class='Modifier'>⁼</span></code>). BQN has just enough computer algebra facilities to look like a tool for Neanderthals next to a real computer algebra system, and among them is the ability to invert some primitives. In general you can't be sure when Undo will work (it might even be undecidable), but the examples I'll give here are guaranteed by <a href="../spec/inferred.html#undo">the spec</a> to always work in the same way. Starting with a <em>third</em> way to square a number:</p>
 <a class="replLink" title="Open in the REPL" target="_blank" href="https://mlochbaum.github.io/BQN/try.html#code=4oia4oG8IDQ=&run">↗️</a><pre>    <span class='Function'>√</span><span class='Modifier'>⁼</span> <span class='Number'>4</span>
 16
@@ -251,6 +338,14 @@
     <span class='Function'>-</span><span class='Modifier2'>∘</span><span class='Paren'>(</span><span class='Function'>×</span><span class='Modifier'>˜</span><span class='Paren'>)</span> <span class='Number'>5</span>  <span class='Comment'># Negative square of 5
 </span>¯25
 </pre>
+<table class='primitives'>
+  <tr>
+    <td><span class='Modifier2'>∘</span></td>
+    <td><kbd>\j</kbd></td>
+    <td colspan='2'>Atop</td>
+  </tr>
+</table>
+
 <p>It's past time we covered how the syntax for modifiers works. Remember how I told you you hated learning the order of operations? No? Good. Modifiers bind more tightly than functions, so they are called on their operands before their operands can be used. As the parentheses above suggest, modifiers also associate from left to right, the opposite order as functions. For example, the first expression above is evaluated in the order shown below. First we construct the square function <code><span class='Function'>×</span><span class='Modifier'>˜</span></code>, then compose it with <code><span class='Function'>+</span></code>, and finally apply the result to some arguments.</p>
 <pre> <span class='Function'>=</span>    <span class='Function'>×</span><span class='Modifier'>˜</span>
         <span class='Modifier2'>∘</span><span class='Function'>+</span>
diff --git a/docs/tutorial/list.html b/docs/tutorial/list.html
index 3a389d42..deae0f11 100644
--- a/docs/tutorial/list.html
+++ b/docs/tutorial/list.html
@@ -18,6 +18,34 @@
 <p>There are three kinds of list notation in BQN. Every one has a subject role, even though expressions used inside it might have other roles. First, a <em>string</em> is a list of characters, and is written by placing those characters in double quotes.</p>
 <pre><span class='String'>&quot;Text!&quot;</span>
 </pre>
+<table class='primitives'>
+  <tr>
+    <td><span class='String'>"</span></td>
+    <td></td>
+    <td colspan='2'>String</td>
+  </tr>
+  <tr>
+    <td><span class='Bracket'>⟨</span></td>
+    <td><kbd>\(</kbd></td>
+    <td colspan='2'>Start list</td>
+  </tr>
+  <tr>
+    <td><span class='Bracket'>⟩</span></td>
+    <td><kbd>\)</kbd></td>
+    <td colspan='2'>End list</td>
+  </tr>
+  <tr>
+    <td><span class='Separator'>⋄</span></td>
+    <td><kbd>\;</kbd></td>
+    <td colspan='2'>Separator</td>
+  </tr>
+  <tr>
+    <td><span class='Separator'>,</span></td>
+    <td></td>
+    <td colspan='2'>Separator</td>
+  </tr>
+</table>
+
 <p>Only one character needs to be escaped to place it in a string: the double quote, which is escaped by writing it twice. Any other character, including a newline, can be placed directly in a string.</p>
 <p>Second, <em>list notation</em> uses angle brackets <code><span class='Bracket'>⟨⟩</span></code>. The <em>elements</em> in the list are kept apart with one of the three <em>separator</em> characters: <code><span class='Separator'>,</span></code>, <code><span class='Separator'>⋄</span></code>, and newline. Anything can be used as an element, even a function, or a modifier like <code><span class='Modifier2'>∘</span></code>. Here's a list containing a number, a 2-modifier, a string, and a non-string list:</p>
 <pre><span class='Bracket'>⟨</span> <span class='Number'>π</span><span class='Separator'>,</span> <span class='Modifier2'>∘</span><span class='Separator'>,</span> <span class='String'>&quot;element&quot;</span> <span class='Separator'>⋄</span> <span class='Bracket'>⟨</span><span class='String'>'l'</span><span class='Separator'>,</span><span class='Number'>1</span><span class='Separator'>,</span><span class='Number'>5</span><span class='Separator'>,</span><span class='String'>'t'</span><span class='Bracket'>⟩</span> <span class='Bracket'>⟩</span>
@@ -32,6 +60,19 @@
 </span>  <span class='String'>&quot;lines&quot;</span>
 <span class='Bracket'>⟩</span>
 </pre>
+<table class='primitives'>
+  <tr>
+    <td><span class='Comment'>#</span></td>
+    <td></td>
+    <td colspan='2'>Comment</td>
+  </tr>
+  <tr>
+    <td><span class='Ligature'>‿</span></td>
+    <td><kbd>\ </kbd></td>
+    <td colspan='2'>Strand</td>
+  </tr>
+</table>
+
 <p>Finally, <em>strand notation</em> is a shortcut for simple lists like a few numbers. It's written with the <em>ligature</em> <code><span class='Ligature'>‿</span></code>, which has a higher precedence than either functions or operators. A sequence of values joined with ligatures becomes a list, so that for example the following two expressions are equivalent:</p>
 <pre><span class='Bracket'>⟨</span><span class='Number'>2</span><span class='Separator'>,</span><span class='Function'>+</span><span class='Separator'>,</span><span class='Function'>-</span><span class='Bracket'>⟩</span>
 <span class='Number'>2</span><span class='Ligature'>‿</span><span class='Function'>+</span><span class='Ligature'>‿</span><span class='Function'>-</span>
@@ -92,6 +133,27 @@
 ⟨ ⟨ 11 12 ⟩ ⟨ 23 33 ⟩ ⟩
 </pre>
 <h2 id="some-list-functions">Some list functions</h2>
+<table class='primitives'>
+  <tr>
+    <td><span class='Function'>≍</span></td>
+    <td><kbd>\.</kbd></td>
+    <td>Solo</td>
+    <td>Couple</td>
+  </tr>
+  <tr>
+    <td><span class='Function'>∾</span></td>
+    <td><kbd>\,</kbd></td>
+    <td></td>
+    <td>Join To</td>
+  </tr>
+  <tr>
+    <td><span class='Function'>⌽</span></td>
+    <td><kbd>\q</kbd></td>
+    <td>Reverse</td>
+    <td>Rotate</td>
+  </tr>
+</table>
+
 <p>Let's introduce a few primitives to work with lists.</p>
 <p>Make one or two atom arguments into a list with <code><span class='Function'>≍</span></code>, pronounced Solo in the one-argument case and Couple in the two-argument case. This might not seem to merit a symbol but there's more to come. Don't call it on lists and ponder the results, igniting a hunger for ever more dimensions.</p>
 <a class="replLink" title="Open in the REPL" target="_blank" href="https://mlochbaum.github.io/BQN/try.html#code=4omNIDQKCjIg4omNIDQ=&run">↗️</a><pre>    <span class='Function'>≍</span> <span class='Number'>4</span>
@@ -122,6 +184,25 @@
 "abcde"
 </pre>
 <h3 id="and-modifiers">…and modifiers</h3>
+<table class='primitives'>
+  <tr>
+    <td><span class='Modifier'>¨</span></td>
+    <td><kbd>\1</kbd></td>
+    <td colspan='2'>Each</td>
+  </tr>
+  <tr>
+    <td><span class='Modifier'>´</span></td>
+    <td><kbd>\5</kbd></td>
+    <td colspan='2'>Fold</td>
+  </tr>
+  <tr>
+    <td><span class='Function'>∾</span></td>
+    <td><kbd>\,</kbd></td>
+    <td>Join</td>
+    <td>Join To</td>
+  </tr>
+</table>
+
 <p>The 1-modifier Each (<code><span class='Modifier'>¨</span></code>) applies its operand to every element of a list argument: it's the same as <code><span class='Value'>map</span></code> in a functional programming language. With two list arguments (which have to have the same length), Each pairs the corresponding elements from each, a bit like a <code><span class='Value'>zip</span></code> function. If one argument is a list and one's an atom, the atom is reused every time instead.</p>
 <a class="replLink" title="Open in the REPL" target="_blank" href="https://mlochbaum.github.io/BQN/try.html#code=4oy9wqggImFiY2Qi4oC/IkFCQ0RFRiLigL8iMDEiCgoic3RyaW5nIuKAvyJsaXN0IuKAvyJhcnJheSIg4oi+wqggJ3MnCgoiYWJjIiDiiY3CqCDijL0gImFiYyI=&run">↗️</a><pre>    <span class='Function'>⌽</span><span class='Modifier'>¨</span> <span class='String'>&quot;abcd&quot;</span><span class='Ligature'>‿</span><span class='String'>&quot;ABCDEF&quot;</span><span class='Ligature'>‿</span><span class='String'>&quot;01&quot;</span>
 ⟨ "dcba" "FEDCBA" "10" ⟩
@@ -156,6 +237,21 @@
 </pre>
 <h2 id="example-base-decoding">Example: base decoding</h2>
 <p>Some people like to imagine that robots or other techno-beings speak entirely in binary-encoded ASCII, like for instance &quot;01001110 01100101 01110010 01100100 00100001&quot;. This is dumb for a lot of reasons, and the encoded text probably just says something inane, but you're a slave to curiosity and can't ignore it. Are one and a half tutorials of BQN enough to clear your conscience?</p>
+<table class='primitives'>
+  <tr>
+    <td><span class='Function'>↕</span></td>
+    <td><kbd>\d</kbd></td>
+    <td>Range</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td><span class='Modifier2'>⊸</span></td>
+    <td><kbd>\h</kbd></td>
+    <td>Bind?</td>
+    <td></td>
+  </tr>
+</table>
+
 <p>Almost. It's really close. There are just two things missing, so I'll cover those and can we agree one and three-quarters is pretty good? First is Range (<code><span class='Function'>↕</span></code>), which is called on a number to give all the natural numbers less than it:</p>
 <a class="replLink" title="Open in the REPL" target="_blank" href="https://mlochbaum.github.io/BQN/try.html#code=4oaVIDg=&run">↗️</a><pre>    <span class='Function'>↕</span> <span class='Number'>8</span>
 ⟨ 0 1 2 3 4 5 6 7 ⟩
@@ -275,6 +371,11 @@ ERROR</pre>
 <td>Rotate</td>
 </tr>
 <tr>
+<td><code><span class='Function'>↕</span></code></td>
+<td></td>
+<td>Range</td>
+</tr>
+<tr>
 <td><code><span class='Modifier'>¨</span></code></td>
 <td>Each</td>
 <td>Each</td>
diff --git a/svg.bqn b/svg.bqn
index f419acd3..64878ddc 100644
--- a/svg.bqn
+++ b/svg.bqn
@@ -2,7 +2,7 @@
 
 # Snag the code highlighter from md.bqn
 Highlight ← {
-  AddT ← (↑∾"t"∾↓)¨˜⟜(1‿2⥊˜≢)  # span to tspan
+  AddT ← (↑∾"t"∾↓)¨˜⟜(1‿2⥊˜≢)⍟(𝕨⊣1)  # span to tspan
   (1¨ <⊸∾ ·AddT⌾⊑GetHighlights)⊸Modify 𝕩
 }
 
diff --git a/tutorial/expression.md b/tutorial/expression.md
index 09dc757a..fcc158d1 100644
--- a/tutorial/expression.md
+++ b/tutorial/expression.md
@@ -12,6 +12,9 @@ In the code blocks shown here, input is highlighted and indented, while output i
         6-   5
         - 1.5
 
+<!--SVG prim.bqn
+Primitives ⟨"+%%%Add", "-%%Negate%Subtract"⟩
+-->
 Shown above are a few arithmetic operations. BQN manages to pass as a normal programming language for three lines so far. That's a big accomplishment for BQN! Earth's a confusing place!
 
 The number of spaces between *primitive functions* like `+` and `-` and their *arguments* doesn't matter: you can use as much or as little as you like. No spaces inside numbers, of course.
@@ -20,6 +23,14 @@ The number of spaces between *primitive functions* like `+` and `-` and their *a
         9 ÷ 2
         ÷ ∞
 
+<!--SVG
+Primitives ⟨
+  "×%=%%Multiply"
+  "÷%-%Reciprocal%Divide"
+  "π%p%Pi"
+  "∞%8%Infinity"
+⟩
+-->
 Okay, now BQN looks like normal (grade-school) mathematics, which is sort of like looking normal. Pi (`π`) represents [that real famous number](https://en.wikipedia.org/wiki/Pi) and Infinity (`∞`) is also part of the number system (the BQN spec allows an implementation to choose its number system, and all existing implementations use double-precision floats, like Javascript or Lua). In analogy with the one-argument form of Minus (`-`) giving the negation of a number, Divide (`÷`) with only one argument gives its reciprocal.
 
 A number can be raised to the power of another with Power, written `⋆`. That's a star rather than an asterisk; BQN doesn't use the asterisk symbol. If it's called without a left argument, then `⋆` uses a base of [Euler's number](https://en.wikipedia.org/wiki/E_(mathematical_constant)) *e* and is called Exponential.
@@ -29,6 +40,9 @@ A number can be raised to the power of another with Power, written `⋆`. That's
         ⋆ 1   # There's no constant for e but you can get it this way
         ⋆ 2.3
 
+<!--SVG
+Primitives ⟨"⋆%+%Exponential%Power", "√%_%Square Root%Root"⟩
+-->
 You could use Power to take square roots and *n*-th roots, but BQN also provides the primitive `√` for this purpose. If no left argument is provided, then it is the Square Root function; with a left argument it is called Root and raises the right argument to the power of one divided by the left argument.
 
         √ 2
@@ -124,6 +138,9 @@ The one thing affine characters won't let you do is find some special "starting
         '*' - @
         @ + 97
 
+<!--SVG
+Primitives ⟨"'%%Character", "@%%Null character"⟩
+-->
 It's a convenient way to write non-printing characters without having to include them in your source code: for example `@+10` is the newline character.
 
 Addition and subtraction with affine characters have all the same algebraic properties that they do with numbers. One way to see this is to think of values as a combination of "characterness" (0 for numbers and 1 for characters) and either numeric value or code point. Addition and subtraction are done element-wise on these pairs of numbers, and are allowed if the result is a valid value, that is, its characterness is 0 or 1 and its value is a valid code point if the characterness is 1. However, because the space of values is no longer closed under addition and subtraction, certain rearrangements of valid computations might not be valid, if one of the values produced in the middle isn't legal.
@@ -142,6 +159,9 @@ This gives us two nice ways to square a value:
 
 What's wrong with `4⋆2`? Depends on the context. Because of the way evaluation flows from right to left, it's usually best if the right argument to a function is the one that's being manipulated directly while the left argument is sort of a "control value" that describes how to manipulate it. That way several manipulations can be done in a row without any parentheses required. `⋆` can go either way, but if "squaring" is the operation being done then the *left* argument is one being squared, so it's the active value. The Swap modifier allows us to put it on the right instead.
 
+<!--SVG
+Primitives ⟨"˜%`%Swap%Self", "⁼%3%Undo", "˙%""%Constant"⟩
+-->
 Another 1-modifier is Undo (`⁼`). BQN has just enough computer algebra facilities to look like a tool for Neanderthals next to a real computer algebra system, and among them is the ability to invert some primitives. In general you can't be sure when Undo will work (it might even be undecidable), but the examples I'll give here are guaranteed by [the spec](../spec/inferred.md#undo) to always work in the same way. Starting with a *third* way to square a number:
 
         √⁼ 4
@@ -168,6 +188,9 @@ Made it to the last role, the 2-modifier (if you think something's been skipped,
         3 ט∘+ 4  # Square of 3 plus 4
         -∘(ט) 5  # Negative square of 5
 
+<!--SVG
+Primitives ⟨"∘%j%Atop"⟩
+-->
 It's past time we covered how the syntax for modifiers works. Remember how I told you you hated learning the order of operations? No? Good. Modifiers bind more tightly than functions, so they are called on their operands before their operands can be used. As the parentheses above suggest, modifiers also associate from left to right, the opposite order as functions. For example, the first expression above is evaluated in the order shown below. First we construct the square function `ט`, then compose it with `+`, and finally apply the result to some arguments.
 
      =    ט
diff --git a/tutorial/list.md b/tutorial/list.md
index 015c2326..0a99ce42 100644
--- a/tutorial/list.md
+++ b/tutorial/list.md
@@ -18,6 +18,9 @@ There are three kinds of list notation in BQN. Every one has a subject role, eve
 
     "Text!"
 
+<!--SVG prim.bqn
+Primitives ⟨"""%%String", "⟨%(%Start list", "⟩%)%End list", "⋄%;%Separator", ",%%Separator"⟩
+-->
 Only one character needs to be escaped to place it in a string: the double quote, which is escaped by writing it twice. Any other character, including a newline, can be placed directly in a string.
 
 Second, *list notation* uses angle brackets `⟨⟩`. The *elements* in the list are kept apart with one of the three *separator* characters: `,`, `⋄`, and newline. Anything can be used as an element, even a function, or a modifier like `∘`. Here's a list containing a number, a 2-modifier, a string, and a non-string list:
@@ -35,6 +38,9 @@ The two characters `,` and `⋄` are completely interchangeable, and newline is
       "lines"
     ⟩
 
+<!--SVG
+Primitives ⟨"#%%Comment", "‿% %Strand"⟩
+-->
 Finally, *strand notation* is a shortcut for simple lists like a few numbers. It's written with the *ligature* `‿`, which has a higher precedence than either functions or operators. A sequence of values joined with ligatures becomes a list, so that for example the following two expressions are equivalent:
 
     ⟨2,+,-⟩
@@ -80,6 +86,9 @@ This list application works recursively, so that lists of lists (and so on) are
 
 ## Some list functions
 
+<!--SVG
+Primitives ⟨"≍%.%Solo%Couple", "∾%,%%Join To", "⌽%q%Reverse%Rotate"⟩
+-->
 Let's introduce a few primitives to work with lists.
 
 Make one or two atom arguments into a list with `≍`, pronounced Solo in the one-argument case and Couple in the two-argument case. This might not seem to merit a symbol but there's more to come. Don't call it on lists and ponder the results, igniting a hunger for ever more dimensions.
@@ -109,6 +118,9 @@ With a left argument `⌽` means Rotate instead, and shifts values over by the s
 
 ### …and modifiers
 
+<!--SVG
+Primitives ⟨"¨%1%Each", "´%5%Fold", "∾%,%Join%Join To"⟩
+-->
 The 1-modifier Each (`¨`) applies its operand to every element of a list argument: it's the same as `map` in a functional programming language. With two list arguments (which have to have the same length), Each pairs the corresponding elements from each, a bit like a `zip` function. If one argument is a list and one's an atom, the atom is reused every time instead.
 
         ⌽¨ "abcd"‿"ABCDEF"‿"01"
@@ -143,6 +155,9 @@ But you shouldn't! Just `∾` will do the job for you—with no left argument it
 
 Some people like to imagine that robots or other techno-beings speak entirely in binary-encoded ASCII, like for instance "01001110 01100101 01110010 01100100 00100001". This is dumb for a lot of reasons, and the encoded text probably just says something inane, but you're a slave to curiosity and can't ignore it. Are one and a half tutorials of BQN enough to clear your conscience?
 
+<!--SVG
+Primitives ⟨"↕%d%Range%", "⊸%h%Bind?%"⟩
+-->
 Almost. It's really close. There are just two things missing, so I'll cover those and can we agree one and three-quarters is pretty good? First is Range (`↕`), which is called on a number to give all the natural numbers less than it:
 
         ↕ 8
@@ -220,6 +235,7 @@ Glyph | 1 arg                    | 2 args
 `∾`   | [Join](../doc/join.md)   | Join To
 `≍`   | [Solo](../doc/couple.md) | [Couple](../doc/couple.md)
 `⌽`   | Reverse                  | Rotate
+`↕`   |                          | Range
 `¨`   | Each                     | Each
 `´`   | Fold