From 58d91b8b2623eb5959433c80a82429421b2dffd8 Mon Sep 17 00:00:00 2001
From: Julia Ogris <julia.ogris@gmail.com>
Date: Thu, 17 Oct 2024 08:45:45 +1100
Subject: [PATCH 1/4] lab: Mark .htmlf as generated in linguist

Mark all *.htmlf files in frontend/lab as generated in the linguist
configs, so that PR reviews on GitHub are less spammed with generated
files. Should have done this ages ago - apologies.
---
 .gitattributes | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.gitattributes b/.gitattributes
index 148178df..68517515 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,5 +1,4 @@
+/frontend/**/*.htmlf linguist-generated=true
 /frontend/docs/**/*.html linguist-generated=true
-/frontend/docs/**/*.htmlf linguist-generated=true
 /frontend/learn/**/*.html linguist-generated=true
-/frontend/learn/**/*.htmlf linguist-generated=true
 /frontend/learn/index.html linguist-generated=false

From f60f3023bd07ad4926f1e000324400aee946f960 Mon Sep 17 00:00:00 2001
From: Julia Ogris <julia.ogris@gmail.com>
Date: Thu, 17 Oct 2024 10:31:06 +1100
Subject: [PATCH 2/4] labsite: Re-write img URLs

 Re-write img URLs in labsite-gen tool from correct relative location
 of .md file to img/IMG.svg file to the correct location when deployed
 and served from root of lab.evy.dev: samples/LAB-ID/img/IMG.svg.

 Update all .md files alongside to use working and correct relative
 links to images from Markdown file perspective. We add this change so
 that Markdown files on GitHub show images. Previously we had broken
 image links for Markdown source and GitHub.

 I was communicating with a friend trying to advocate for the ease of
 creating new evy labs in Markdown and wanted to point her to GitHub
 when I realized links there to images don't render, but the rest is
 actually quite readable. This commit should fix it.
---
 build-tools/labsite-gen/main.go             | 29 +++++++++++++++++++++
 frontend/lab/samples/forloops/bubble.md     |  2 +-
 frontend/lab/samples/forloops/forcircles.md | 10 +++----
 frontend/lab/samples/forloops/lines-show.md |  2 +-
 frontend/lab/samples/forloops/lines.md      | 10 +++----
 frontend/lab/samples/forloops/zebra.md      |  2 +-
 frontend/lab/samples/ifs/alpha.md           |  4 +--
 frontend/lab/samples/ifs/bounce.md          |  7 +++--
 frontend/lab/samples/ifs/pi.md              |  4 +--
 frontend/lab/samples/ifs/pulse.md           | 10 +++----
 frontend/lab/samples/ifs/rectangles.md      | 28 ++++++++++----------
 frontend/lab/samples/intro/circles.md       | 16 ++++++------
 frontend/lab/samples/intro/coords.md        |  2 +-
 frontend/lab/samples/intro/move.md          | 10 +++----
 frontend/lab/samples/loops/gradient-show.md |  4 +--
 frontend/lab/samples/loops/target-show.md   |  2 +-
 frontend/lab/samples/loops/target.md        |  2 +-
 17 files changed, 86 insertions(+), 58 deletions(-)

diff --git a/build-tools/labsite-gen/main.go b/build-tools/labsite-gen/main.go
index a8a9a31c..02096ee3 100644
--- a/build-tools/labsite-gen/main.go
+++ b/build-tools/labsite-gen/main.go
@@ -7,10 +7,13 @@ package main
 import (
 	"bytes"
 	"fmt"
+	"net/url"
 	"os"
+	"path/filepath"
 	"strings"
 	"unicode"
 
+	"evylang.dev/evy/pkg/md"
 	"rsc.io/markdown"
 )
 
@@ -39,6 +42,7 @@ func run(mdFile, htmlfFile string) error {
 		return err
 	}
 	doc := parse(string(md))
+	updateImgURL(doc, mdFile)
 	replaceNextButton(doc)
 	doc.Blocks = collapse(doc.Blocks)
 	html := markdown.ToHTML(doc)
@@ -51,6 +55,31 @@ func parse(md string) *markdown.Document {
 	return p.Parse(md)
 }
 
+// Change relative links to work for frontend lab root which is where it will be
+// requested from on https://lab.evy.dev. The generated .htmlf files are loaded
+// as fragments and image links relative to these fragments do not work, they need
+// to be relative to the initially loaded frontend/lab/index.html site.
+func updateImgURL(doc *markdown.Document, mdFile string) {
+	md.Walk(doc, func(n md.Node) {
+		img, ok := n.(*markdown.Image)
+		if !ok {
+			return
+		}
+		u, err := url.Parse(img.URL)
+		if err != nil || u.IsAbs() {
+			return
+		}
+		// change img/circle.svg to samples/ifs/img/circle.svg
+		u.Path = updateIMGPath(mdFile, u.Path)
+		img.URL = u.String()
+	})
+}
+
+func updateIMGPath(mdPath, imgPath string) string {
+	labDir := filepath.Base(filepath.Dir(mdPath))
+	return "samples/" + labDir + "/" + imgPath
+}
+
 func replaceNextButton(doc *markdown.Document) {
 	for i, block := range doc.Blocks {
 		if isNextButton(block) {
diff --git a/frontend/lab/samples/forloops/bubble.md b/frontend/lab/samples/forloops/bubble.md
index 7a579f74..f4cab147 100644
--- a/frontend/lab/samples/forloops/bubble.md
+++ b/frontend/lab/samples/forloops/bubble.md
@@ -23,7 +23,7 @@ end
 
 Change the x-coordinate by a maximum of ± 2 of its previous value.
 
-![Animated bubble](samples/forloops/img/bubble.gif)
+![Animated bubble](img/bubble.gif)
 
 ## [>] Hint
 
diff --git a/frontend/lab/samples/forloops/forcircles.md b/frontend/lab/samples/forloops/forcircles.md
index b4a0335b..92beebe1 100644
--- a/frontend/lab/samples/forloops/forcircles.md
+++ b/frontend/lab/samples/forloops/forcircles.md
@@ -26,10 +26,10 @@ Use `for` loops and circles to create your own unique drawing.
 | -------------------------------- | ---------------------- |
 | ![Circle with random radius]     | ![Cat made of circles] |
 
-[Circle with different outline]: samples/forloops/img/circle-outline.svg "evy:edit"
-[Circle in wig shape]: samples/forloops/img/circle-wig.svg "evy:edit"
-[Circle with random radius]: samples/forloops/img/circle-rand.svg "evy:edit"
-[Cat made of circles]: samples/forloops/img/circle-cat.svg "evy:edit"
+[Circle with different outline]: img/circle-outline.svg "evy:edit"
+[Circle in wig shape]: img/circle-wig.svg "evy:edit"
+[Circle with random radius]: img/circle-rand.svg "evy:edit"
+[Cat made of circles]: img/circle-cat.svg "evy:edit"
 
 [Next]
 
@@ -37,7 +37,7 @@ Use `for` loops and circles to create your own unique drawing.
 
 Use the code from the cat sample above and make its eyes move:
 
-![Black cat with moving yellow eyes](samples/forloops/img/cat.gif)
+![Black cat with moving yellow eyes](img/cat.gif)
 
 ## [>] Hint
 
diff --git a/frontend/lab/samples/forloops/lines-show.md b/frontend/lab/samples/forloops/lines-show.md
index 06b0d76d..8dede646 100644
--- a/frontend/lab/samples/forloops/lines-show.md
+++ b/frontend/lab/samples/forloops/lines-show.md
@@ -12,4 +12,4 @@ For this program we need two **nested** `for` loops.
 - Create a _static_ image with 10 lines (see picture below).
 - What needs to change to turn the static image into an animation?
 
-  ![Static lines](samples/forloops/img/10-lines.svg)
+  ![Static lines](img/10-lines.svg)
diff --git a/frontend/lab/samples/forloops/lines.md b/frontend/lab/samples/forloops/lines.md
index 67688dcb..d2ba50eb 100644
--- a/frontend/lab/samples/forloops/lines.md
+++ b/frontend/lab/samples/forloops/lines.md
@@ -2,7 +2,7 @@
 
 ⭐ Can you complete the program create this output?
 
-![Static lines](samples/forloops/img/lines.svg)
+![Static lines](img/lines.svg)
 
 [Next]
 
@@ -26,10 +26,10 @@ end
 | ----------- | ----------- |
 | ![20 Lines] | ![50 Lines] |
 
-[4 Lines]: samples/forloops/img/4-lines.svg "evy:edit"
-[10 Lines]: samples/forloops/img/10-lines.svg "evy:edit"
-[20 Lines]: samples/forloops/img/20-lines.svg "evy:edit"
-[50 Lines]: samples/forloops/img/50-lines.svg "evy:edit"
+[4 Lines]: img/4-lines.svg "evy:edit"
+[10 Lines]: img/10-lines.svg "evy:edit"
+[20 Lines]: img/20-lines.svg "evy:edit"
+[50 Lines]: img/50-lines.svg "evy:edit"
 
 [Next]
 
diff --git a/frontend/lab/samples/forloops/zebra.md b/frontend/lab/samples/forloops/zebra.md
index a0bf8043..a158c705 100644
--- a/frontend/lab/samples/forloops/zebra.md
+++ b/frontend/lab/samples/forloops/zebra.md
@@ -32,7 +32,7 @@ values?
 
 ⭐ Can you use `hsl` to create a green-to-red gradient animation like below?
 
-![Animate rainbow zebra crossing](samples/forloops/img/zebra.gif)
+![Animate rainbow zebra crossing](img/zebra.gif)
 
 ## [>] Hint
 
diff --git a/frontend/lab/samples/ifs/alpha.md b/frontend/lab/samples/ifs/alpha.md
index f3b5e48a..d0ee1b0d 100644
--- a/frontend/lab/samples/ifs/alpha.md
+++ b/frontend/lab/samples/ifs/alpha.md
@@ -12,7 +12,7 @@
 
 Complete the code to create the following drawing:
 
-![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares.svg)
+![simple drawing of circles and squares](img/red-dot-two-squares.svg)
 
 [Next]
 
@@ -21,7 +21,7 @@ Complete the code to create the following drawing:
 Tweak the Alpha parameter to the [`hsl`] function, its fourth parameter, to make
 the bottom left quadrant grey:
 
-![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares-alpha.svg)
+![simple drawing of circles and squares](img/red-dot-two-squares-alpha.svg)
 
 ## [>] Docs
 
diff --git a/frontend/lab/samples/ifs/bounce.md b/frontend/lab/samples/ifs/bounce.md
index 80121b77..dcb9b2e5 100644
--- a/frontend/lab/samples/ifs/bounce.md
+++ b/frontend/lab/samples/ifs/bounce.md
@@ -7,10 +7,9 @@ animation below.
 
 ## Demo
 
-<details>
-  <summary>Animation demo</summary>
-  <p><img src="samples/ifs/img/bounce.gif" alt="small centered circle" /></p>
-</details>
+### [>] Animation demo
+
+![small centered circle](img/bounce.gif)
 
 ## Animation notes 🗒
 
diff --git a/frontend/lab/samples/ifs/pi.md b/frontend/lab/samples/ifs/pi.md
index e1a5e7c2..e408a39c 100644
--- a/frontend/lab/samples/ifs/pi.md
+++ b/frontend/lab/samples/ifs/pi.md
@@ -20,7 +20,7 @@ answer.
 
 ## ⭐ Quarter circle
 
-![quarter circle](samples/ifs/img/quarter-circle.svg)
+![quarter circle](img/quarter-circle.svg)
 
 What's the **area** of the red **quarter-circle** if the radius is `1`? Can
 you estimate it to the nearest tenth?
@@ -72,7 +72,7 @@ using the Pythagorean theorem `a² + b² = c²`:
 c := sqrt a*a+b*b
 ```
 
-![quarter circle](samples/ifs/img/quarter-circle-triangle.svg)
+![quarter circle](img/quarter-circle-triangle.svg)
 
 If this distance is less than or equal to `1`, the point lies within the
 quarter-circle and should be colored red. (Remember, we're scaling `x` and `y`
diff --git a/frontend/lab/samples/ifs/pulse.md b/frontend/lab/samples/ifs/pulse.md
index 359f32f1..5afaba67 100644
--- a/frontend/lab/samples/ifs/pulse.md
+++ b/frontend/lab/samples/ifs/pulse.md
@@ -4,7 +4,7 @@
 
 Write a program that draws:
 
-![small centered circle](samples/ifs/img/pulse-step-1.svg)
+![small centered circle](img/pulse-step-1.svg)
 
 - Background: `"black"`
 - Outline width: `1`
@@ -30,7 +30,7 @@ circle ❓
 
 Extend your program to draw:
 
-![many concentric circles](samples/ifs/img/pulse-step-2.svg)
+![many concentric circles](img/pulse-step-2.svg)
 
 Use a variable `r` for the circle radius, starting at `1`.
 
@@ -60,7 +60,7 @@ animation.
 
 ### [>] Demo
 
-![small centered circle](samples/ifs/img/pulse-step-3.gif)
+![small centered circle](img/pulse-step-3.gif)
 
 ### [>] Hint
 
@@ -83,7 +83,7 @@ Use `clear` with `hsl 0 0 0 15`.
 
 ### [>] Demo
 
-![small centered circle](samples/ifs/img/pulse-step-4.gif)
+![small centered circle](img/pulse-step-4.gif)
 
 ### [>] Hint
 
@@ -108,7 +108,7 @@ Reduce the
 
 ### [>] Demo
 
-![small centered circle](samples/ifs/img/pulse-step-5.gif)
+![small centered circle](img/pulse-step-5.gif)
 
 ### [>] Hint
 
diff --git a/frontend/lab/samples/ifs/rectangles.md b/frontend/lab/samples/ifs/rectangles.md
index 71339b45..d32781f9 100644
--- a/frontend/lab/samples/ifs/rectangles.md
+++ b/frontend/lab/samples/ifs/rectangles.md
@@ -20,8 +20,8 @@ Need ideas? **Click** on the images below for their Evy code.
 
 Be inspired by culture and art
 
-[Perspective]: samples/ifs/img/perspective.svg "evy:edit"
-[2 Squares]: samples/ifs/img/2-squares.svg "evy:edit"
+[Perspective]: img/perspective.svg "evy:edit"
+[2 Squares]: img/2-squares.svg "evy:edit"
 
 ### [>] Samples
 
@@ -29,10 +29,10 @@ Be inspired by culture and art
 | ---------- | ----------- |
 | ![Monster] | ![Tetris]   |
 
-[Bauhaus]: samples/ifs/img/bauhaus.svg "evy:edit"
-[Mondrian]: samples/ifs/img/mondrian.svg "evy:edit"
-[Monster]: samples/ifs/img/monster.svg "evy:edit"
-[Tetris]: samples/ifs/img/tetris.svg "evy:edit"
+[Bauhaus]: img/bauhaus.svg "evy:edit"
+[Mondrian]: img/mondrian.svg "evy:edit"
+[Monster]: img/monster.svg "evy:edit"
+[Tetris]: img/tetris.svg "evy:edit"
 
 #### [>] More
 
@@ -42,10 +42,10 @@ Be inspired by culture and art
 
 [Next]
 
-[Window]: samples/ifs/img/window.svg "evy:edit"
-[Apartments]: samples/ifs/img/apartments.svg "evy:edit"
-[Black and White Rectangles]: samples/ifs/img/bwrect.svg "evy:edit"
-[Red Green Squares]: samples/ifs/img/red-green-squares.svg "evy:edit"
+[Window]: img/window.svg "evy:edit"
+[Apartments]: img/apartments.svg "evy:edit"
+[Black and White Rectangles]: img/bwrect.svg "evy:edit"
+[Red Green Squares]: img/red-green-squares.svg "evy:edit"
 
 ## ⭐ Use Loops and Randomness
 
@@ -68,7 +68,7 @@ end
 | ---------- | --------------------------- |
 | ![Stripes] | ![Warm Squares]             |
 
-[Grass]: samples/ifs/img/grass.svg "evy:edit"
-[Random Purple Rectangles]: samples/ifs/img/randrect.svg "evy:edit"
-[Warm Squares]: samples/ifs/img/warm-squares.svg "evy:edit"
-[Stripes]: samples/ifs/img/stripes.svg "evy:edit"
+[Grass]: img/grass.svg "evy:edit"
+[Random Purple Rectangles]: img/randrect.svg "evy:edit"
+[Warm Squares]: img/warm-squares.svg "evy:edit"
+[Stripes]: img/stripes.svg "evy:edit"
diff --git a/frontend/lab/samples/intro/circles.md b/frontend/lab/samples/intro/circles.md
index c64e7870..204347e2 100644
--- a/frontend/lab/samples/intro/circles.md
+++ b/frontend/lab/samples/intro/circles.md
@@ -18,10 +18,10 @@ Can you move the circle center to each corner?
 | ----------------------------- | ------------------------------ |
 | ![Quarter circle bottom left] | ![Quarter circle bottom right] |
 
-[Quarter circle top left]: samples/intro/img/circles-top-left.svg
-[Quarter circle top right]: samples/intro/img/circles-top-right.svg
-[Quarter circle bottom left]: samples/intro/img/circles-bottom-left.svg
-[Quarter circle bottom right]: samples/intro/img/circles-bottom-right.svg
+[Quarter circle top left]: img/circles-top-left.svg
+[Quarter circle top right]: img/circles-top-right.svg
+[Quarter circle bottom left]: img/circles-bottom-left.svg
+[Quarter circle bottom right]: img/circles-bottom-right.svg
 
 [Next]
 
@@ -36,10 +36,10 @@ fully or partially visible.
 | ----------------------------- | ------------------------------------------------- |
 | ![Overlapping circles]        | ![Cloud made from circles]                        |
 
-[Three circles of same size]: samples/intro/img/circles-anika.svg
-[Three large overlapping circles in warm colors]: samples/intro/img/circles-mali.svg
-[Overlapping circles]: samples/intro/img/circles-camh.svg
-[Cloud made from circles]: samples/intro/img/circles-kathi.svg
+[Three circles of same size]: img/circles-anika.svg
+[Three large overlapping circles in warm colors]: img/circles-mali.svg
+[Overlapping circles]: img/circles-camh.svg
+[Cloud made from circles]: img/circles-kathi.svg
 
 [Next]
 
diff --git a/frontend/lab/samples/intro/coords.md b/frontend/lab/samples/intro/coords.md
index 8121f3e3..fd61ed9c 100644
--- a/frontend/lab/samples/intro/coords.md
+++ b/frontend/lab/samples/intro/coords.md
@@ -23,7 +23,7 @@ Imagine the canvas as a grid. Each point on this grid is identified by two numbe
 
 You write these coordinates together like this: `x y`.
 
-![Coordinates 30 60 on the Evy Canvas](samples/intro/img/coords-30-60.svg)
+![Coordinates 30 60 on the Evy Canvas](img/coords-30-60.svg)
 [Image Source]
 
 [Image Source]: https://play.evy.dev/#content=H4sIAAAAAAAAA2WRQW6DMBBF9z7Fl9cFbIidmG2lXgKxoOAQqwRHhpDQqnevDIaq6mpmnv/M99hJglb32lWjRm2ta4YoY5Fk8TC1eJjxQpIEeprh7j2iaJjayN7H/9I/QE8zqTtdOdDHxYyaktaZhtS2sw70vavqD0oephkvYPGBkM70GgycMXK1k0/ZyjjzKbnZbkaxFCUKdQKPxZr4euVBtEzxMBZQp9KDEDwn6/xsN8gYJNv85W6VMQhVokgVxLFEkfEQFx5EqYL0VukxiI+QvNw48Q836ue4L8rJ2fYjvgbzqfMDztXVdHNO34yr8Gob/YKr7e1wq2pNv8NNlQAnfgrok66IQ4mA5h1tIkZDYyog0wCXJbeDjCNVW3/+yzmDkJtVnnke/svphu7vJhmpjas7DU5+AAOGBlk8AgAA
diff --git a/frontend/lab/samples/intro/move.md b/frontend/lab/samples/intro/move.md
index 639760ac..136da2fe 100644
--- a/frontend/lab/samples/intro/move.md
+++ b/frontend/lab/samples/intro/move.md
@@ -7,7 +7,7 @@ Can you draw 6 purple circles at x coordinates `0`, `20`, `40`, `60`, `80`, and
 
 ### [>] Demo
 
-![6 circles on horizontally center aligned](samples/intro/img/move-6circles.svg)
+![6 circles on horizontally center aligned](img/move-6circles.svg)
 
 [Next]
 
@@ -47,7 +47,7 @@ Can you change the program to make the circle move from left to right, using the
 
 ### [>] Demo
 
-![one horizontally jumping circle](samples/intro/img/1-jumpy-circle.gif)
+![one horizontally jumping circle](img/1-jumpy-circle.gif)
 
 ### [>] Hint
 
@@ -71,7 +71,7 @@ Reduce the `x` increment and the `sleep` time.
 
 ### [>] Demo
 
-![one horizontally moving circle](samples/intro/img/1-circle.gif)
+![one horizontally moving circle](img/1-circle.gif)
 
 ### [>] Hint
 
@@ -92,7 +92,7 @@ Make 2 circles move in opposite direction.
 
 ### [>] Demo
 
-![two horizontally moving circles](samples/intro/img/2-circles.gif)
+![two horizontally moving circles](img/2-circles.gif)
 
 ### [>] Hint
 
@@ -110,7 +110,7 @@ circle 10
 
 ### [>] Demo
 
-![four moving circles](samples/intro/img/4-circles.gif)
+![four moving circles](img/4-circles.gif)
 
 ### [>] Hint
 
diff --git a/frontend/lab/samples/loops/gradient-show.md b/frontend/lab/samples/loops/gradient-show.md
index 167ca0df..847a9fa1 100644
--- a/frontend/lab/samples/loops/gradient-show.md
+++ b/frontend/lab/samples/loops/gradient-show.md
@@ -13,7 +13,7 @@ How would you go about writing this program?
 
 - Break down the problem into smaller bits.
 - Create a static image with line `width 10`:
-  ![thick vertical lines](samples/loops/img/gradient-thick.svg)
+  ![thick vertical lines](img/gradient-thick.svg)
 - Animate the lines with the `sleep` command.
 - Reduce the line width, move, sleep and loop increment.
 
@@ -29,4 +29,4 @@ line 80 50
 
 Output:
 
-![Line from 10 20 to 80 50](samples/loops/img/gradient-line.svg)
+![Line from 10 20 to 80 50](img/gradient-line.svg)
diff --git a/frontend/lab/samples/loops/target-show.md b/frontend/lab/samples/loops/target-show.md
index 00ecb8bb..01f85b89 100644
--- a/frontend/lab/samples/loops/target-show.md
+++ b/frontend/lab/samples/loops/target-show.md
@@ -8,6 +8,6 @@ How would you go about writing this program?
 
 - Break down the problem into smaller bits.
 - Create a static image that fits on the canvas:
-  ![target board](samples/loops/img/target.svg)
+  ![target board](img/target.svg)
 - Animate the circles with the <code>sleep</code> command.
 - Increase the starting radius to cover the whole canvas.
diff --git a/frontend/lab/samples/loops/target.md b/frontend/lab/samples/loops/target.md
index fd00b660..cd95533b 100644
--- a/frontend/lab/samples/loops/target.md
+++ b/frontend/lab/samples/loops/target.md
@@ -3,7 +3,7 @@
 ## ⭐ Draw a target board
 
 Draw a target board with concentric circles.
-![Target board](samples/loops/img/target.svg)
+![Target board](img/target.svg)
 
 ## [>] Hint
 

From fe2d8edb99364cd05a216c0c9b36c3d13754d955 Mon Sep 17 00:00:00 2001
From: Julia Ogris <julia.ogris@gmail.com>
Date: Thu, 17 Oct 2024 10:50:38 +1100
Subject: [PATCH 3/4] labsite: Re-write links to other labs

Similar to the previous commit, links to other labs, e.g. `#hsl` were
broken from the Markdown perspective and on GitHub previous. We now use
the correct relative URLs to files, e.g. `../ifs/hsl.md` in links in
the markdown source files and rewrite them to fragments, e.g. `#hsl`
when generating HTML fragments in .htmlf files.
---
 build-tools/labsite-gen/main.go         | 16 ++++++++++++++++
 frontend/lab/samples/ifs/alpha.md       |  2 +-
 frontend/lab/samples/ifs/bounce-show.md |  2 +-
 frontend/lab/samples/ifs/bounce.md      |  6 +++---
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/build-tools/labsite-gen/main.go b/build-tools/labsite-gen/main.go
index 02096ee3..25fb29bd 100644
--- a/build-tools/labsite-gen/main.go
+++ b/build-tools/labsite-gen/main.go
@@ -43,6 +43,7 @@ func run(mdFile, htmlfFile string) error {
 	}
 	doc := parse(string(md))
 	updateImgURL(doc, mdFile)
+	updateLabLinks(doc)
 	replaceNextButton(doc)
 	doc.Blocks = collapse(doc.Blocks)
 	html := markdown.ToHTML(doc)
@@ -80,6 +81,21 @@ func updateIMGPath(mdPath, imgPath string) string {
 	return "samples/" + labDir + "/" + imgPath
 }
 
+func updateLabLinks(doc *markdown.Document) {
+	md.Walk(doc, func(n md.Node) {
+		link, ok := n.(*markdown.Link)
+		if !ok {
+			return
+		}
+		u, err := url.Parse(link.URL)
+		if err != nil || u.IsAbs() || !strings.HasSuffix(u.Path, ".md") {
+			return
+		}
+		// change ../loops/hsl.md and hsl.md to #hsl
+		link.URL = "#" + strings.TrimSuffix(filepath.Base(u.Path), ".md")
+	})
+}
+
 func replaceNextButton(doc *markdown.Document) {
 	for i, block := range doc.Blocks {
 		if isNextButton(block) {
diff --git a/frontend/lab/samples/ifs/alpha.md b/frontend/lab/samples/ifs/alpha.md
index d0ee1b0d..f0b02e6c 100644
--- a/frontend/lab/samples/ifs/alpha.md
+++ b/frontend/lab/samples/ifs/alpha.md
@@ -25,7 +25,7 @@ the bottom left quadrant grey:
 
 ## [>] Docs
 
-In the interactive [`hsl`] function [color explorer](#hsl) we learned how hsl
+In the interactive [`hsl`] function [color explorer](../loops/hsl.md) we learned how hsl
 takes three values: hue, saturation, lightness values to create a color.
 
 There is an optional fourth value called **alpha** that controls the
diff --git a/frontend/lab/samples/ifs/bounce-show.md b/frontend/lab/samples/ifs/bounce-show.md
index e7dbb333..5f816ec8 100644
--- a/frontend/lab/samples/ifs/bounce-show.md
+++ b/frontend/lab/samples/ifs/bounce-show.md
@@ -9,4 +9,4 @@ Hit **Run** and watch the ball bounce!
 - How is the fading effect created?
 - What concepts from previous labs are being used here?
 
-Let's explore further in the interactive [Bounce Challenge](#bounce).
+Let's explore further in the interactive [Bounce Challenge](bounce.md).
diff --git a/frontend/lab/samples/ifs/bounce.md b/frontend/lab/samples/ifs/bounce.md
index dcb9b2e5..5caae7a6 100644
--- a/frontend/lab/samples/ifs/bounce.md
+++ b/frontend/lab/samples/ifs/bounce.md
@@ -2,7 +2,7 @@
 
 ⭐ **Your Challenge:** Can you create a bouncing ball animation?
 
-Check out the [bouncing ball page 🏓📺](#bounce-show) or observe the
+Check out the [bouncing ball page 🏓📺](bounce-show.md) or observe the
 animation below.
 
 ## Demo
@@ -23,10 +23,10 @@ animation below.
 ⭐ Start by making a single green circle at position `0 50`.
 
 ⭐ Move the ball horizontally across the screen, like in the
-[🟣🚚 Move challenge](#move) in the Introduction lab, don't worry about the bounce yet.
+[🟣🚚 Move challenge](../intro/move.md) in the Introduction lab, don't worry about the bounce yet.
 
 ⭐ Finally, to change direction at the edges use the reversible increment trick
-from the [Pulse challenge](#pulse).
+from the [Pulse challenge](pulse.md).
 
 ### [>] Hint
 

From 5bc048310cb230a59ebf4e7756b51aaf13336189 Mon Sep 17 00:00:00 2001
From: Julia Ogris <julia.ogris@gmail.com>
Date: Thu, 17 Oct 2024 14:15:16 +1100
Subject: [PATCH 4/4] cli: Add --svg-width and --svg-height flags

Add --svg-width and --svg-height flags to `evy run` so that we can
render SVG files at a reasonable size on GitHub. Setting the width and
height inside the style attribute of the top level element of the SVG
file does not flow through to GitHub.
---
 Makefile                                      |  2 +-
 docs/usage.md                                 | 27 ++++++++++---------
 frontend/docs/usage.html                      | 25 +++++++++--------
 frontend/docs/usage.htmlf                     | 27 ++++++++++---------
 .../lab/samples/forloops/img/10-lines.svg     |  2 ++
 .../lab/samples/forloops/img/20-lines.svg     |  2 ++
 frontend/lab/samples/forloops/img/4-lines.svg |  2 ++
 .../lab/samples/forloops/img/50-lines.svg     |  2 ++
 frontend/lab/samples/forloops/img/bubble.svg  |  2 ++
 .../lab/samples/forloops/img/circle-cat.svg   |  2 ++
 .../samples/forloops/img/circle-outline.svg   |  2 ++
 .../lab/samples/forloops/img/circle-rand.svg  |  2 ++
 .../lab/samples/forloops/img/circle-wig.svg   |  2 ++
 frontend/lab/samples/forloops/img/lines.svg   |  2 ++
 frontend/lab/samples/forloops/img/zebra.svg   |  2 ++
 frontend/lab/samples/ifs/img/2-squares.svg    |  2 ++
 frontend/lab/samples/ifs/img/apartments.svg   |  2 ++
 frontend/lab/samples/ifs/img/bauhaus.svg      |  2 ++
 frontend/lab/samples/ifs/img/blue-pattern.svg |  2 ++
 frontend/lab/samples/ifs/img/bwrect.svg       |  2 ++
 frontend/lab/samples/ifs/img/grass.svg        |  2 ++
 frontend/lab/samples/ifs/img/house.svg        |  2 ++
 frontend/lab/samples/ifs/img/mondrian.svg     |  2 ++
 frontend/lab/samples/ifs/img/monster.svg      |  2 ++
 frontend/lab/samples/ifs/img/perspective.svg  |  2 ++
 frontend/lab/samples/ifs/img/pulse-step-1.svg |  2 ++
 frontend/lab/samples/ifs/img/pulse-step-2.svg |  2 ++
 .../ifs/img/quarter-circle-triangle.svg       |  2 ++
 .../lab/samples/ifs/img/quarter-circle.svg    |  2 ++
 frontend/lab/samples/ifs/img/randrect.svg     |  2 ++
 .../ifs/img/red-dot-two-squares-alpha.svg     |  2 ++
 .../samples/ifs/img/red-dot-two-squares.svg   |  2 ++
 .../lab/samples/ifs/img/red-green-squares.svg |  2 ++
 frontend/lab/samples/ifs/img/stripes.svg      |  2 ++
 frontend/lab/samples/ifs/img/target-blue.svg  |  2 ++
 frontend/lab/samples/ifs/img/tetris.svg       |  2 ++
 frontend/lab/samples/ifs/img/warm-squares.svg |  2 ++
 frontend/lab/samples/ifs/img/window.svg       |  2 ++
 .../lab/samples/intro/img/circles-anika.svg   |  2 ++
 .../samples/intro/img/circles-bottom-left.svg |  2 ++
 .../intro/img/circles-bottom-right.svg        |  2 ++
 .../lab/samples/intro/img/circles-camh.svg    |  2 ++
 .../lab/samples/intro/img/circles-kathi.svg   |  2 ++
 .../lab/samples/intro/img/circles-mali.svg    |  2 ++
 .../samples/intro/img/circles-top-left.svg    |  2 ++
 .../samples/intro/img/circles-top-right.svg   |  2 ++
 .../lab/samples/intro/img/coords-30-60.svg    |  2 ++
 .../lab/samples/intro/img/move-6circles.svg   |  2 ++
 .../lab/samples/loops/img/gradient-line.svg   |  2 ++
 .../lab/samples/loops/img/gradient-thick.svg  |  2 ++
 frontend/lab/samples/loops/img/target.svg     |  2 ++
 learn/pkg/learn/renderer.go                   |  2 +-
 main.go                                       |  4 ++-
 pkg/cli/runtime.go                            |  4 ++-
 pkg/cli/runtime_test.go                       |  2 +-
 55 files changed, 147 insertions(+), 40 deletions(-)

diff --git a/Makefile b/Makefile
index 82f8b9ae..3dd19791 100644
--- a/Makefile
+++ b/Makefile
@@ -202,7 +202,7 @@ FLAGS_frontend/lab/samples/ifs/img/grass.svg = --rand-seed=1
 FLAGS_frontend/lab/samples/forloops/img/bubble.svg = --rand-seed=1
 FLAGS_frontend/lab/samples/forloops/img/circle-rand.svg = --rand-seed=1
 %.svg: %.evy | $(NODELIB)
-	go run . run --svg-out "$@" $(FLAGS_$@) "$<"
+	go run . run --svg-width "200px" --svg-height "200px" --svg-out "$@" $(FLAGS_$@) "$<"
 	$(PRETTIER) --write "$@"
 
 %.htmlf: %.md | $(NODELIB)
diff --git a/docs/usage.md b/docs/usage.md
index a7c4c42c..c7758b04 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -60,18 +60,21 @@ You can also get help for each subcommand by running it with the
       [<source>]    Source file. Default: stdin.
 
     Flags:
-      -h, --help                Show context-sensitive help.
-      -V, --version             Print version information
-
-          --skip-sleep          Skip evy sleep command ($EVY_SKIP_SLEEP).
-          --svg-out=FILE        Output drawing to SVG file. Stdout: -.
-          --svg-style=STYLE     Style of top-level SVG element.
-      -s, --no-test-summary     Do not print test summary, only report failed tests.
-          --fail-fast           Stop execution on first failed test.
-      -t, --txtar=MEMBER        Read source from txtar file and select select given
-                                filename
-          --rand-seed=INT-64    Seed for random number generation (0 means random
-                                seed).
+      -h, --help                 Show context-sensitive help.
+      -V, --version              Print version information
+
+          --skip-sleep           Skip evy sleep command ($EVY_SKIP_SLEEP).
+          --svg-out=FILE         Output drawing to SVG file. Stdout: -.
+          --svg-style=STYLE      Style of top-level SVG element.
+          --svg-width=WIDTH      Width of SVG file.
+          --svg-height=HEIGHT    Height of SVG file.
+      -s, --no-test-summary      Do not print test summary, only report failed
+                                 tests.
+          --fail-fast            Stop execution on first failed test.
+      -t, --txtar=MEMBER         Read source from txtar file and select select given
+                                 filename
+          --rand-seed=INT-64     Seed for random number generation (0 means random
+                                 seed).
 
 <!-- genend -->
 
diff --git a/frontend/docs/usage.html b/frontend/docs/usage.html
index 79135976..0c70e7f0 100644
--- a/frontend/docs/usage.html
+++ b/frontend/docs/usage.html
@@ -620,18 +620,21 @@ <h3><a id="evy-run-help" href="#evy-run-help" class="anchor">#</a>evy run --help
   [&lt;source&gt;]    Source file. Default: stdin.
 
 Flags:
-  -h, --help                Show context-sensitive help.
-  -V, --version             Print version information
+  -h, --help                 Show context-sensitive help.
+  -V, --version              Print version information
 
-      --skip-sleep          Skip evy sleep command ($EVY_SKIP_SLEEP).
-      --svg-out=FILE        Output drawing to SVG file. Stdout: -.
-      --svg-style=STYLE     Style of top-level SVG element.
-  -s, --no-test-summary     Do not print test summary, only report failed tests.
-      --fail-fast           Stop execution on first failed test.
-  -t, --txtar=MEMBER        Read source from txtar file and select select given
-                            filename
-      --rand-seed=INT-64    Seed for random number generation (0 means random
-                            seed).
+      --skip-sleep           Skip evy sleep command ($EVY_SKIP_SLEEP).
+      --svg-out=FILE         Output drawing to SVG file. Stdout: -.
+      --svg-style=STYLE      Style of top-level SVG element.
+      --svg-width=WIDTH      Width of SVG file.
+      --svg-height=HEIGHT    Height of SVG file.
+  -s, --no-test-summary      Do not print test summary, only report failed
+                             tests.
+      --fail-fast            Stop execution on first failed test.
+  -t, --txtar=MEMBER         Read source from txtar file and select select given
+                             filename
+      --rand-seed=INT-64     Seed for random number generation (0 means random
+                             seed).
 </code></pre>
         <!-- genend -->
         <h3><a id="evy-fmt-help" href="#evy-fmt-help" class="anchor">#</a>evy fmt --help</h3>
diff --git a/frontend/docs/usage.htmlf b/frontend/docs/usage.htmlf
index 211fc27d..b0042d78 100644
--- a/frontend/docs/usage.htmlf
+++ b/frontend/docs/usage.htmlf
@@ -50,18 +50,21 @@ Arguments:
   [&lt;source&gt;]    Source file. Default: stdin.
 
 Flags:
-  -h, --help                Show context-sensitive help.
-  -V, --version             Print version information
-
-      --skip-sleep          Skip evy sleep command ($EVY_SKIP_SLEEP).
-      --svg-out=FILE        Output drawing to SVG file. Stdout: -.
-      --svg-style=STYLE     Style of top-level SVG element.
-  -s, --no-test-summary     Do not print test summary, only report failed tests.
-      --fail-fast           Stop execution on first failed test.
-  -t, --txtar=MEMBER        Read source from txtar file and select select given
-                            filename
-      --rand-seed=INT-64    Seed for random number generation (0 means random
-                            seed).
+  -h, --help                 Show context-sensitive help.
+  -V, --version              Print version information
+
+      --skip-sleep           Skip evy sleep command ($EVY_SKIP_SLEEP).
+      --svg-out=FILE         Output drawing to SVG file. Stdout: -.
+      --svg-style=STYLE      Style of top-level SVG element.
+      --svg-width=WIDTH      Width of SVG file.
+      --svg-height=HEIGHT    Height of SVG file.
+  -s, --no-test-summary      Do not print test summary, only report failed
+                             tests.
+      --fail-fast            Stop execution on first failed test.
+  -t, --txtar=MEMBER         Read source from txtar file and select select given
+                             filename
+      --rand-seed=INT-64     Seed for random number generation (0 means random
+                             seed).
 </code></pre>
 <!-- genend -->
 <h3><a id="evy-fmt-help" href="#evy-fmt-help" class="anchor">#</a>evy fmt --help</h3>
diff --git a/frontend/lab/samples/forloops/img/10-lines.svg b/frontend/lab/samples/forloops/img/10-lines.svg
index 91815a4e..115e02b6 100644
--- a/frontend/lab/samples/forloops/img/10-lines.svg
+++ b/frontend/lab/samples/forloops/img/10-lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/20-lines.svg b/frontend/lab/samples/forloops/img/20-lines.svg
index 6b321237..3fe0cbf1 100644
--- a/frontend/lab/samples/forloops/img/20-lines.svg
+++ b/frontend/lab/samples/forloops/img/20-lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/4-lines.svg b/frontend/lab/samples/forloops/img/4-lines.svg
index 879b9ddc..98025543 100644
--- a/frontend/lab/samples/forloops/img/4-lines.svg
+++ b/frontend/lab/samples/forloops/img/4-lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/50-lines.svg b/frontend/lab/samples/forloops/img/50-lines.svg
index afa55263..2f07b48b 100644
--- a/frontend/lab/samples/forloops/img/50-lines.svg
+++ b/frontend/lab/samples/forloops/img/50-lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/bubble.svg b/frontend/lab/samples/forloops/img/bubble.svg
index fb14abc5..a30a221c 100644
--- a/frontend/lab/samples/forloops/img/bubble.svg
+++ b/frontend/lab/samples/forloops/img/bubble.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/circle-cat.svg b/frontend/lab/samples/forloops/img/circle-cat.svg
index e6d1a2e8..a20515c5 100644
--- a/frontend/lab/samples/forloops/img/circle-cat.svg
+++ b/frontend/lab/samples/forloops/img/circle-cat.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/circle-outline.svg b/frontend/lab/samples/forloops/img/circle-outline.svg
index 34a6d5b8..b085fe47 100644
--- a/frontend/lab/samples/forloops/img/circle-outline.svg
+++ b/frontend/lab/samples/forloops/img/circle-outline.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/circle-rand.svg b/frontend/lab/samples/forloops/img/circle-rand.svg
index 479a99a7..58c5fd66 100644
--- a/frontend/lab/samples/forloops/img/circle-rand.svg
+++ b/frontend/lab/samples/forloops/img/circle-rand.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/circle-wig.svg b/frontend/lab/samples/forloops/img/circle-wig.svg
index ee4e0966..9b64acc4 100644
--- a/frontend/lab/samples/forloops/img/circle-wig.svg
+++ b/frontend/lab/samples/forloops/img/circle-wig.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/lines.svg b/frontend/lab/samples/forloops/img/lines.svg
index 4b26d106..eacd9e6c 100644
--- a/frontend/lab/samples/forloops/img/lines.svg
+++ b/frontend/lab/samples/forloops/img/lines.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/forloops/img/zebra.svg b/frontend/lab/samples/forloops/img/zebra.svg
index aacad438..f3eb6e1b 100644
--- a/frontend/lab/samples/forloops/img/zebra.svg
+++ b/frontend/lab/samples/forloops/img/zebra.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/2-squares.svg b/frontend/lab/samples/ifs/img/2-squares.svg
index 0cddd03d..ffb49bce 100644
--- a/frontend/lab/samples/ifs/img/2-squares.svg
+++ b/frontend/lab/samples/ifs/img/2-squares.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/apartments.svg b/frontend/lab/samples/ifs/img/apartments.svg
index 65f67935..f811d16b 100644
--- a/frontend/lab/samples/ifs/img/apartments.svg
+++ b/frontend/lab/samples/ifs/img/apartments.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/bauhaus.svg b/frontend/lab/samples/ifs/img/bauhaus.svg
index a3e9f2b4..084c9fdb 100644
--- a/frontend/lab/samples/ifs/img/bauhaus.svg
+++ b/frontend/lab/samples/ifs/img/bauhaus.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/blue-pattern.svg b/frontend/lab/samples/ifs/img/blue-pattern.svg
index 4f6b3182..a98f4c5f 100644
--- a/frontend/lab/samples/ifs/img/blue-pattern.svg
+++ b/frontend/lab/samples/ifs/img/blue-pattern.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/bwrect.svg b/frontend/lab/samples/ifs/img/bwrect.svg
index 88eaf77d..5d64909c 100644
--- a/frontend/lab/samples/ifs/img/bwrect.svg
+++ b/frontend/lab/samples/ifs/img/bwrect.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/grass.svg b/frontend/lab/samples/ifs/img/grass.svg
index eab13807..ea0ba9ff 100644
--- a/frontend/lab/samples/ifs/img/grass.svg
+++ b/frontend/lab/samples/ifs/img/grass.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/house.svg b/frontend/lab/samples/ifs/img/house.svg
index f4209ed3..da2e8424 100644
--- a/frontend/lab/samples/ifs/img/house.svg
+++ b/frontend/lab/samples/ifs/img/house.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/mondrian.svg b/frontend/lab/samples/ifs/img/mondrian.svg
index 432c76ff..bf8abcab 100644
--- a/frontend/lab/samples/ifs/img/mondrian.svg
+++ b/frontend/lab/samples/ifs/img/mondrian.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/monster.svg b/frontend/lab/samples/ifs/img/monster.svg
index 880aebd2..eaf47142 100644
--- a/frontend/lab/samples/ifs/img/monster.svg
+++ b/frontend/lab/samples/ifs/img/monster.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/perspective.svg b/frontend/lab/samples/ifs/img/perspective.svg
index 6065e00f..87d8b8b8 100644
--- a/frontend/lab/samples/ifs/img/perspective.svg
+++ b/frontend/lab/samples/ifs/img/perspective.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/pulse-step-1.svg b/frontend/lab/samples/ifs/img/pulse-step-1.svg
index 901b781b..dd907f06 100644
--- a/frontend/lab/samples/ifs/img/pulse-step-1.svg
+++ b/frontend/lab/samples/ifs/img/pulse-step-1.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/pulse-step-2.svg b/frontend/lab/samples/ifs/img/pulse-step-2.svg
index 2d041418..cebbadb3 100644
--- a/frontend/lab/samples/ifs/img/pulse-step-2.svg
+++ b/frontend/lab/samples/ifs/img/pulse-step-2.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg b/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
index 9d9fc466..54ad6b7e 100644
--- a/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
+++ b/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/quarter-circle.svg b/frontend/lab/samples/ifs/img/quarter-circle.svg
index 6b59f664..963ecb6c 100644
--- a/frontend/lab/samples/ifs/img/quarter-circle.svg
+++ b/frontend/lab/samples/ifs/img/quarter-circle.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/randrect.svg b/frontend/lab/samples/ifs/img/randrect.svg
index 1a556a13..4533d72c 100644
--- a/frontend/lab/samples/ifs/img/randrect.svg
+++ b/frontend/lab/samples/ifs/img/randrect.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/red-dot-two-squares-alpha.svg b/frontend/lab/samples/ifs/img/red-dot-two-squares-alpha.svg
index 1629bb93..c376b616 100644
--- a/frontend/lab/samples/ifs/img/red-dot-two-squares-alpha.svg
+++ b/frontend/lab/samples/ifs/img/red-dot-two-squares-alpha.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/red-dot-two-squares.svg b/frontend/lab/samples/ifs/img/red-dot-two-squares.svg
index 2c48c893..5398d0fd 100644
--- a/frontend/lab/samples/ifs/img/red-dot-two-squares.svg
+++ b/frontend/lab/samples/ifs/img/red-dot-two-squares.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/red-green-squares.svg b/frontend/lab/samples/ifs/img/red-green-squares.svg
index 7ab019b8..3d1b5a49 100644
--- a/frontend/lab/samples/ifs/img/red-green-squares.svg
+++ b/frontend/lab/samples/ifs/img/red-green-squares.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/stripes.svg b/frontend/lab/samples/ifs/img/stripes.svg
index bf19930e..62c146d2 100644
--- a/frontend/lab/samples/ifs/img/stripes.svg
+++ b/frontend/lab/samples/ifs/img/stripes.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/target-blue.svg b/frontend/lab/samples/ifs/img/target-blue.svg
index 2d041418..cebbadb3 100644
--- a/frontend/lab/samples/ifs/img/target-blue.svg
+++ b/frontend/lab/samples/ifs/img/target-blue.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/tetris.svg b/frontend/lab/samples/ifs/img/tetris.svg
index 0108f53c..2495d115 100644
--- a/frontend/lab/samples/ifs/img/tetris.svg
+++ b/frontend/lab/samples/ifs/img/tetris.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/warm-squares.svg b/frontend/lab/samples/ifs/img/warm-squares.svg
index e6ab9ad6..b0c588fc 100644
--- a/frontend/lab/samples/ifs/img/warm-squares.svg
+++ b/frontend/lab/samples/ifs/img/warm-squares.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/ifs/img/window.svg b/frontend/lab/samples/ifs/img/window.svg
index a2fa9e94..614e6581 100644
--- a/frontend/lab/samples/ifs/img/window.svg
+++ b/frontend/lab/samples/ifs/img/window.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-anika.svg b/frontend/lab/samples/intro/img/circles-anika.svg
index e9fc1ebf..d656af3a 100644
--- a/frontend/lab/samples/intro/img/circles-anika.svg
+++ b/frontend/lab/samples/intro/img/circles-anika.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-bottom-left.svg b/frontend/lab/samples/intro/img/circles-bottom-left.svg
index 7c146a01..bbb2374a 100644
--- a/frontend/lab/samples/intro/img/circles-bottom-left.svg
+++ b/frontend/lab/samples/intro/img/circles-bottom-left.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-bottom-right.svg b/frontend/lab/samples/intro/img/circles-bottom-right.svg
index 4b5bfa48..9f093127 100644
--- a/frontend/lab/samples/intro/img/circles-bottom-right.svg
+++ b/frontend/lab/samples/intro/img/circles-bottom-right.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-camh.svg b/frontend/lab/samples/intro/img/circles-camh.svg
index 29e43395..7d490055 100644
--- a/frontend/lab/samples/intro/img/circles-camh.svg
+++ b/frontend/lab/samples/intro/img/circles-camh.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-kathi.svg b/frontend/lab/samples/intro/img/circles-kathi.svg
index 1381b74a..57c10c63 100644
--- a/frontend/lab/samples/intro/img/circles-kathi.svg
+++ b/frontend/lab/samples/intro/img/circles-kathi.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-mali.svg b/frontend/lab/samples/intro/img/circles-mali.svg
index 1330de67..e732e426 100644
--- a/frontend/lab/samples/intro/img/circles-mali.svg
+++ b/frontend/lab/samples/intro/img/circles-mali.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-top-left.svg b/frontend/lab/samples/intro/img/circles-top-left.svg
index 4e27349a..1435b1b7 100644
--- a/frontend/lab/samples/intro/img/circles-top-left.svg
+++ b/frontend/lab/samples/intro/img/circles-top-left.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/circles-top-right.svg b/frontend/lab/samples/intro/img/circles-top-right.svg
index 329cd620..eca82cc1 100644
--- a/frontend/lab/samples/intro/img/circles-top-right.svg
+++ b/frontend/lab/samples/intro/img/circles-top-right.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/coords-30-60.svg b/frontend/lab/samples/intro/img/coords-30-60.svg
index 4759321e..ce3e5bb9 100644
--- a/frontend/lab/samples/intro/img/coords-30-60.svg
+++ b/frontend/lab/samples/intro/img/coords-30-60.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/intro/img/move-6circles.svg b/frontend/lab/samples/intro/img/move-6circles.svg
index 7d454185..57b49a24 100644
--- a/frontend/lab/samples/intro/img/move-6circles.svg
+++ b/frontend/lab/samples/intro/img/move-6circles.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/loops/img/gradient-line.svg b/frontend/lab/samples/loops/img/gradient-line.svg
index 03cabd3d..b304ac00 100644
--- a/frontend/lab/samples/loops/img/gradient-line.svg
+++ b/frontend/lab/samples/loops/img/gradient-line.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/loops/img/gradient-thick.svg b/frontend/lab/samples/loops/img/gradient-thick.svg
index e5cf92a7..a74db87a 100644
--- a/frontend/lab/samples/loops/img/gradient-thick.svg
+++ b/frontend/lab/samples/loops/img/gradient-thick.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/frontend/lab/samples/loops/img/target.svg b/frontend/lab/samples/loops/img/target.svg
index f299131a..cef5aac6 100644
--- a/frontend/lab/samples/loops/img/target.svg
+++ b/frontend/lab/samples/loops/img/target.svg
@@ -2,6 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
+  width="200px"
+  height="200px"
   viewBox="0 0 1000 1000"
   xmlns="http://www.w3.org/2000/svg"
 >
diff --git a/learn/pkg/learn/renderer.go b/learn/pkg/learn/renderer.go
index 7724f905..4adc2a38 100644
--- a/learn/pkg/learn/renderer.go
+++ b/learn/pkg/learn/renderer.go
@@ -346,7 +346,7 @@ func runEvy(source string, t ResultType) string {
 		cli.WithSkipSleep(true),
 		cli.WithOutputWriter(textWriter),
 		cli.WithCls(textWriter.Reset),
-		cli.WithSVG("" /* root style */),
+		cli.WithSVG("", "", "" /* root style, width, height */),
 	}
 	rt := cli.NewRuntime(opts...)
 	eval := evaluator.NewEvaluator(rt)
diff --git a/main.go b/main.go
index bd0a82d2..4441e9b6 100644
--- a/main.go
+++ b/main.go
@@ -136,6 +136,8 @@ type runCmd struct {
 	SkipSleep     bool   `help:"Skip evy sleep command." env:"EVY_SKIP_SLEEP"`
 	SVGOut        string `help:"Output drawing to SVG file. Stdout: -." placeholder:"FILE"`
 	SVGStyle      string `help:"Style of top-level SVG element." placeholder:"STYLE"`
+	SVGWidth      string `help:"Width of SVG file." placeholder:"WIDTH"`
+	SVGHeight     string `help:"Height of SVG file." placeholder:"HEIGHT"`
 	NoTestSummary bool   `short:"s" help:"Do not print test summary, only report failed tests."`
 	FailFast      bool   `help:"Stop execution on first failed test."`
 	Txtar         string `short:"t" help:"Read source from txtar file and select select given filename" placeholder:"MEMBER"`
@@ -222,7 +224,7 @@ func (c *runCmd) fileBytes() ([]byte, error) {
 func (c *runCmd) runtimeOptions() []cli.Option {
 	opts := []cli.Option{cli.WithSkipSleep(c.SkipSleep)}
 	if c.SVGOut != "" {
-		opts = append(opts, cli.WithSVG(c.SVGStyle))
+		opts = append(opts, cli.WithSVG(c.SVGStyle, c.SVGWidth, c.SVGHeight))
 	}
 	return opts
 }
diff --git a/pkg/cli/runtime.go b/pkg/cli/runtime.go
index c18801f5..3166e11c 100644
--- a/pkg/cli/runtime.go
+++ b/pkg/cli/runtime.go
@@ -38,10 +38,12 @@ func WithSkipSleep(skipSleep bool) Option {
 
 // WithSVG sets up an SVG graphics runtime and writes its output to the
 // given writer.
-func WithSVG(svgStyle string) Option {
+func WithSVG(svgStyle string, svgWidth string, svgHeight string) Option {
 	return func(rt *Runtime) {
 		svgRT := svg.NewGraphicsRuntime()
 		svgRT.SVG.Style = svgStyle
+		svgRT.SVG.Width = svgWidth
+		svgRT.SVG.Height = svgHeight
 		rt.GraphicsRuntime = svgRT
 	}
 }
diff --git a/pkg/cli/runtime_test.go b/pkg/cli/runtime_test.go
index a9df568f..14d89b3a 100644
--- a/pkg/cli/runtime_test.go
+++ b/pkg/cli/runtime_test.go
@@ -22,7 +22,7 @@ func TestGraphics(t *testing.T) {
 		t.Run(name, func(t *testing.T) {
 			style := "border: 1px solid red; width: 400px; height: 400px"
 			svgWriter := &bytes.Buffer{}
-			rt := NewRuntime(WithSVG(style), WithSkipSleep(true))
+			rt := NewRuntime(WithSVG(style, "", ""), WithSkipSleep(true))
 
 			eval := evaluator.NewEvaluator(rt)
 			evyFilename := strings.TrimSuffix(file, filepath.Ext(file)) + ".evy"