From 043fb5ed0a0674124fb7edbe69dc2f60242e311f Mon Sep 17 00:00:00 2001
From: Julia Ogris <julia.ogris@gmail.com>
Date: Thu, 17 Oct 2024 11:35:26 +1100
Subject: [PATCH] labsite: Update SVG dimension

Update SVG dimension in labs when generating from evy source files so
that they render at a reasonable size on GitHub.
---
 Makefile                                      |   2 +-
 .../lab/samples/forloops/img/10-lines.svg     |   1 +
 .../lab/samples/forloops/img/20-lines.svg     |   1 +
 frontend/lab/samples/forloops/img/4-lines.svg |   1 +
 .../lab/samples/forloops/img/50-lines.svg     |   1 +
 frontend/lab/samples/forloops/img/bubble.svg  |   1 +
 .../lab/samples/forloops/img/circle-cat.svg   |   1 +
 .../samples/forloops/img/circle-outline.svg   |   1 +
 .../lab/samples/forloops/img/circle-rand.svg  |   1 +
 .../lab/samples/forloops/img/circle-wig.svg   |   1 +
 frontend/lab/samples/forloops/img/lines.svg   |   1 +
 frontend/lab/samples/forloops/img/zebra.svg   |   1 +
 frontend/lab/samples/ifs/img/2-squares.svg    |   1 +
 frontend/lab/samples/ifs/img/apartments.svg   |   1 +
 frontend/lab/samples/ifs/img/bauhaus.svg      |   1 +
 frontend/lab/samples/ifs/img/blue-pattern.svg |   1 +
 frontend/lab/samples/ifs/img/bwrect.svg       |   1 +
 frontend/lab/samples/ifs/img/grass.svg        |   1 +
 frontend/lab/samples/ifs/img/house.svg        |   1 +
 frontend/lab/samples/ifs/img/mondrian.svg     |   1 +
 frontend/lab/samples/ifs/img/monster.svg      |   1 +
 frontend/lab/samples/ifs/img/perspective.svg  |   1 +
 frontend/lab/samples/ifs/img/pulse-step-1.svg |   1 +
 frontend/lab/samples/ifs/img/pulse-step-2.svg |   1 +
 .../ifs/img/quarter-circle-triangle.svg       |   3 ++-
 .../lab/samples/ifs/img/quarter-circle.png    | Bin 0 -> 3861 bytes
 .../lab/samples/ifs/img/quarter-circle.svg    |   2 +-
 .../lab/samples/ifs/img/quarter-circle6.svg   |  13 +++++++++++++
 frontend/lab/samples/ifs/img/randrect.svg     |   1 +
 .../ifs/img/red-dot-two-squares-alpha.svg     |   1 +
 .../samples/ifs/img/red-dot-two-squares.svg   |   1 +
 .../lab/samples/ifs/img/red-green-squares.svg |   1 +
 frontend/lab/samples/ifs/img/stripes.svg      |   1 +
 frontend/lab/samples/ifs/img/target-blue.svg  |   1 +
 frontend/lab/samples/ifs/img/tetris.svg       |   1 +
 frontend/lab/samples/ifs/img/warm-squares.svg |   1 +
 frontend/lab/samples/ifs/img/window.svg       |   1 +
 frontend/lab/samples/ifs/pi.md                |   2 +-
 frontend/lab/samples/ifs/rectangles.md        |  18 +++++-------------
 .../lab/samples/intro/img/circles-anika.svg   |   1 +
 .../samples/intro/img/circles-bottom-left.svg |   1 +
 .../intro/img/circles-bottom-right.svg        |   1 +
 .../lab/samples/intro/img/circles-camh.svg    |   1 +
 .../lab/samples/intro/img/circles-kathi.svg   |   1 +
 .../lab/samples/intro/img/circles-mali.svg    |   1 +
 .../samples/intro/img/circles-top-left.svg    |   1 +
 .../samples/intro/img/circles-top-right.svg   |   1 +
 .../lab/samples/intro/img/coords-30-60.svg    |   1 +
 .../lab/samples/intro/img/move-6circles.svg   |   1 +
 .../lab/samples/loops/img/gradient-line.svg   |   1 +
 .../lab/samples/loops/img/gradient-thick.svg  |   1 +
 frontend/lab/samples/loops/img/target.svg     |   1 +
 52 files changed, 68 insertions(+), 17 deletions(-)
 create mode 100644 frontend/lab/samples/ifs/img/quarter-circle.png
 create mode 100644 frontend/lab/samples/ifs/img/quarter-circle6.svg

diff --git a/Makefile b/Makefile
index 82f8b9ae..4be13934 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-style "width: 200px; height: 200px" --svg-out "$@" $(FLAGS_$@) "$<"
 	$(PRETTIER) --write "$@"
 
 %.htmlf: %.md | $(NODELIB)
diff --git a/frontend/lab/samples/forloops/img/10-lines.svg b/frontend/lab/samples/forloops/img/10-lines.svg
index 91815a4e..04130330 100644
--- a/frontend/lab/samples/forloops/img/10-lines.svg
+++ b/frontend/lab/samples/forloops/img/10-lines.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/forloops/img/20-lines.svg b/frontend/lab/samples/forloops/img/20-lines.svg
index 6b321237..f55781b2 100644
--- a/frontend/lab/samples/forloops/img/20-lines.svg
+++ b/frontend/lab/samples/forloops/img/20-lines.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/forloops/img/4-lines.svg b/frontend/lab/samples/forloops/img/4-lines.svg
index 879b9ddc..39d67a39 100644
--- a/frontend/lab/samples/forloops/img/4-lines.svg
+++ b/frontend/lab/samples/forloops/img/4-lines.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/forloops/img/50-lines.svg b/frontend/lab/samples/forloops/img/50-lines.svg
index afa55263..ba6ff91d 100644
--- a/frontend/lab/samples/forloops/img/50-lines.svg
+++ b/frontend/lab/samples/forloops/img/50-lines.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/forloops/img/bubble.svg b/frontend/lab/samples/forloops/img/bubble.svg
index fb14abc5..4e241feb 100644
--- a/frontend/lab/samples/forloops/img/bubble.svg
+++ b/frontend/lab/samples/forloops/img/bubble.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/forloops/img/circle-cat.svg b/frontend/lab/samples/forloops/img/circle-cat.svg
index e6d1a2e8..15ba7373 100644
--- a/frontend/lab/samples/forloops/img/circle-cat.svg
+++ b/frontend/lab/samples/forloops/img/circle-cat.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/forloops/img/circle-outline.svg b/frontend/lab/samples/forloops/img/circle-outline.svg
index 34a6d5b8..357fc1ea 100644
--- a/frontend/lab/samples/forloops/img/circle-outline.svg
+++ b/frontend/lab/samples/forloops/img/circle-outline.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/forloops/img/circle-rand.svg b/frontend/lab/samples/forloops/img/circle-rand.svg
index 479a99a7..bbaa7681 100644
--- a/frontend/lab/samples/forloops/img/circle-rand.svg
+++ b/frontend/lab/samples/forloops/img/circle-rand.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/forloops/img/circle-wig.svg b/frontend/lab/samples/forloops/img/circle-wig.svg
index ee4e0966..6b676b24 100644
--- a/frontend/lab/samples/forloops/img/circle-wig.svg
+++ b/frontend/lab/samples/forloops/img/circle-wig.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/forloops/img/lines.svg b/frontend/lab/samples/forloops/img/lines.svg
index 4b26d106..9422ccdf 100644
--- a/frontend/lab/samples/forloops/img/lines.svg
+++ b/frontend/lab/samples/forloops/img/lines.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/forloops/img/zebra.svg b/frontend/lab/samples/forloops/img/zebra.svg
index aacad438..24e50e0b 100644
--- a/frontend/lab/samples/forloops/img/zebra.svg
+++ b/frontend/lab/samples/forloops/img/zebra.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/2-squares.svg b/frontend/lab/samples/ifs/img/2-squares.svg
index 0cddd03d..e69cc5d5 100644
--- a/frontend/lab/samples/ifs/img/2-squares.svg
+++ b/frontend/lab/samples/ifs/img/2-squares.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/ifs/img/apartments.svg b/frontend/lab/samples/ifs/img/apartments.svg
index 65f67935..5fd39135 100644
--- a/frontend/lab/samples/ifs/img/apartments.svg
+++ b/frontend/lab/samples/ifs/img/apartments.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/bauhaus.svg b/frontend/lab/samples/ifs/img/bauhaus.svg
index a3e9f2b4..73aeee4a 100644
--- a/frontend/lab/samples/ifs/img/bauhaus.svg
+++ b/frontend/lab/samples/ifs/img/bauhaus.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/ifs/img/blue-pattern.svg b/frontend/lab/samples/ifs/img/blue-pattern.svg
index 4f6b3182..9c9eb4ff 100644
--- a/frontend/lab/samples/ifs/img/blue-pattern.svg
+++ b/frontend/lab/samples/ifs/img/blue-pattern.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/bwrect.svg b/frontend/lab/samples/ifs/img/bwrect.svg
index 88eaf77d..82c0b9cd 100644
--- a/frontend/lab/samples/ifs/img/bwrect.svg
+++ b/frontend/lab/samples/ifs/img/bwrect.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/grass.svg b/frontend/lab/samples/ifs/img/grass.svg
index eab13807..5847206e 100644
--- a/frontend/lab/samples/ifs/img/grass.svg
+++ b/frontend/lab/samples/ifs/img/grass.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/house.svg b/frontend/lab/samples/ifs/img/house.svg
index f4209ed3..bb293b24 100644
--- a/frontend/lab/samples/ifs/img/house.svg
+++ b/frontend/lab/samples/ifs/img/house.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/mondrian.svg b/frontend/lab/samples/ifs/img/mondrian.svg
index 432c76ff..3d11c7fb 100644
--- a/frontend/lab/samples/ifs/img/mondrian.svg
+++ b/frontend/lab/samples/ifs/img/mondrian.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/monster.svg b/frontend/lab/samples/ifs/img/monster.svg
index 880aebd2..e14fe2e4 100644
--- a/frontend/lab/samples/ifs/img/monster.svg
+++ b/frontend/lab/samples/ifs/img/monster.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/ifs/img/perspective.svg b/frontend/lab/samples/ifs/img/perspective.svg
index 6065e00f..f8c92d84 100644
--- a/frontend/lab/samples/ifs/img/perspective.svg
+++ b/frontend/lab/samples/ifs/img/perspective.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/ifs/img/pulse-step-1.svg b/frontend/lab/samples/ifs/img/pulse-step-1.svg
index 901b781b..fded51b0 100644
--- a/frontend/lab/samples/ifs/img/pulse-step-1.svg
+++ b/frontend/lab/samples/ifs/img/pulse-step-1.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/pulse-step-2.svg b/frontend/lab/samples/ifs/img/pulse-step-2.svg
index 2d041418..40215c26 100644
--- a/frontend/lab/samples/ifs/img/pulse-step-2.svg
+++ b/frontend/lab/samples/ifs/img/pulse-step-2.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg b/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
index 9d9fc466..ffeaf830 100644
--- a/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
+++ b/frontend/lab/samples/ifs/img/quarter-circle-triangle.svg
@@ -2,7 +2,8 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
-  viewBox="0 0 1000 1000"
+  viewBox="0 0 200px 200px"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/ifs/img/quarter-circle.png b/frontend/lab/samples/ifs/img/quarter-circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f78c11a23055ee67f8a50b9899e7f818684c210
GIT binary patch
literal 3861
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

literal 0
HcmV?d00001

diff --git a/frontend/lab/samples/ifs/img/quarter-circle.svg b/frontend/lab/samples/ifs/img/quarter-circle.svg
index 6b59f664..414949c0 100644
--- a/frontend/lab/samples/ifs/img/quarter-circle.svg
+++ b/frontend/lab/samples/ifs/img/quarter-circle.svg
@@ -2,7 +2,7 @@
   stroke="black"
   stroke-linecap="round"
   font-size="60"
-  viewBox="0 0 1000 1000"
+  viewBox="0 0 300px 300px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/ifs/img/quarter-circle6.svg b/frontend/lab/samples/ifs/img/quarter-circle6.svg
new file mode 100644
index 00000000..69bf8658
--- /dev/null
+++ b/frontend/lab/samples/ifs/img/quarter-circle6.svg
@@ -0,0 +1,13 @@
+<svg
+  stroke="black"
+  stroke-linecap="round"
+  font-size="60"
+  viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g>
+    <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
+    <rect fill="black" stroke="black" x="0" y="0" width="100%" height="100%"></rect>
+  </g>
+  <circle fill="red" stroke="red" cx="0" cy="100" r="100"></circle>
+</svg>
diff --git a/frontend/lab/samples/ifs/img/randrect.svg b/frontend/lab/samples/ifs/img/randrect.svg
index 1a556a13..cbaf2bbc 100644
--- a/frontend/lab/samples/ifs/img/randrect.svg
+++ b/frontend/lab/samples/ifs/img/randrect.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
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..946b0e80 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
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
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..f923354d 100644
--- a/frontend/lab/samples/ifs/img/red-dot-two-squares.svg
+++ b/frontend/lab/samples/ifs/img/red-dot-two-squares.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/red-green-squares.svg b/frontend/lab/samples/ifs/img/red-green-squares.svg
index 7ab019b8..c429355a 100644
--- a/frontend/lab/samples/ifs/img/red-green-squares.svg
+++ b/frontend/lab/samples/ifs/img/red-green-squares.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/stripes.svg b/frontend/lab/samples/ifs/img/stripes.svg
index bf19930e..61a55854 100644
--- a/frontend/lab/samples/ifs/img/stripes.svg
+++ b/frontend/lab/samples/ifs/img/stripes.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/target-blue.svg b/frontend/lab/samples/ifs/img/target-blue.svg
index 2d041418..40215c26 100644
--- a/frontend/lab/samples/ifs/img/target-blue.svg
+++ b/frontend/lab/samples/ifs/img/target-blue.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/tetris.svg b/frontend/lab/samples/ifs/img/tetris.svg
index 0108f53c..1dff5131 100644
--- a/frontend/lab/samples/ifs/img/tetris.svg
+++ b/frontend/lab/samples/ifs/img/tetris.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/ifs/img/warm-squares.svg b/frontend/lab/samples/ifs/img/warm-squares.svg
index e6ab9ad6..8991fa5a 100644
--- a/frontend/lab/samples/ifs/img/warm-squares.svg
+++ b/frontend/lab/samples/ifs/img/warm-squares.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/img/window.svg b/frontend/lab/samples/ifs/img/window.svg
index a2fa9e94..2db3ce8b 100644
--- a/frontend/lab/samples/ifs/img/window.svg
+++ b/frontend/lab/samples/ifs/img/window.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/ifs/pi.md b/frontend/lab/samples/ifs/pi.md
index e408a39c..e3439a01 100644
--- a/frontend/lab/samples/ifs/pi.md
+++ b/frontend/lab/samples/ifs/pi.md
@@ -20,7 +20,7 @@ answer.
 
 ## ⭐ Quarter circle
 
-![quarter circle](img/quarter-circle.svg)
+![quarter circle](img/quarter-circle6.svg)
 
 What's the **area** of the red **quarter-circle** if the radius is `1`? Can
 you estimate it to the nearest tenth?
diff --git a/frontend/lab/samples/ifs/rectangles.md b/frontend/lab/samples/ifs/rectangles.md
index d32781f9..4a351648 100644
--- a/frontend/lab/samples/ifs/rectangles.md
+++ b/frontend/lab/samples/ifs/rectangles.md
@@ -15,24 +15,16 @@ and positions.
 
 Need ideas? **Click** on the images below for their Evy code.
 
-| ![Perspective] | ![2 Squares] |
-| -------------- | ------------ |
+| ![Perspective](img/perspective.svg "evy:edit") | ![2 Squares](img/2-squares.svg "evy:edit") |
+| ---------------------------------------------- | ------------------------------------------ |
 
 Be inspired by culture and art
 
-[Perspective]: img/perspective.svg "evy:edit"
-[2 Squares]: img/2-squares.svg "evy:edit"
-
 ### [>] Samples
 
-| ![Bauhaus] | ![Mondrian] |
-| ---------- | ----------- |
-| ![Monster] | ![Tetris]   |
-
-[Bauhaus]: img/bauhaus.svg "evy:edit"
-[Mondrian]: img/mondrian.svg "evy:edit"
-[Monster]: img/monster.svg "evy:edit"
-[Tetris]: 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
 
diff --git a/frontend/lab/samples/intro/img/circles-anika.svg b/frontend/lab/samples/intro/img/circles-anika.svg
index e9fc1ebf..ec18de56 100644
--- a/frontend/lab/samples/intro/img/circles-anika.svg
+++ b/frontend/lab/samples/intro/img/circles-anika.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/circles-bottom-left.svg b/frontend/lab/samples/intro/img/circles-bottom-left.svg
index 7c146a01..c9001669 100644
--- a/frontend/lab/samples/intro/img/circles-bottom-left.svg
+++ b/frontend/lab/samples/intro/img/circles-bottom-left.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/circles-bottom-right.svg b/frontend/lab/samples/intro/img/circles-bottom-right.svg
index 4b5bfa48..4b3a2278 100644
--- a/frontend/lab/samples/intro/img/circles-bottom-right.svg
+++ b/frontend/lab/samples/intro/img/circles-bottom-right.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/circles-camh.svg b/frontend/lab/samples/intro/img/circles-camh.svg
index 29e43395..1e6034b2 100644
--- a/frontend/lab/samples/intro/img/circles-camh.svg
+++ b/frontend/lab/samples/intro/img/circles-camh.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/circles-kathi.svg b/frontend/lab/samples/intro/img/circles-kathi.svg
index 1381b74a..ea2e9b9c 100644
--- a/frontend/lab/samples/intro/img/circles-kathi.svg
+++ b/frontend/lab/samples/intro/img/circles-kathi.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/circles-mali.svg b/frontend/lab/samples/intro/img/circles-mali.svg
index 1330de67..bc7569b6 100644
--- a/frontend/lab/samples/intro/img/circles-mali.svg
+++ b/frontend/lab/samples/intro/img/circles-mali.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/circles-top-left.svg b/frontend/lab/samples/intro/img/circles-top-left.svg
index 4e27349a..c1ce4d17 100644
--- a/frontend/lab/samples/intro/img/circles-top-left.svg
+++ b/frontend/lab/samples/intro/img/circles-top-left.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/circles-top-right.svg b/frontend/lab/samples/intro/img/circles-top-right.svg
index 329cd620..6af3feec 100644
--- a/frontend/lab/samples/intro/img/circles-top-right.svg
+++ b/frontend/lab/samples/intro/img/circles-top-right.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/coords-30-60.svg b/frontend/lab/samples/intro/img/coords-30-60.svg
index 4759321e..f84e02c0 100644
--- a/frontend/lab/samples/intro/img/coords-30-60.svg
+++ b/frontend/lab/samples/intro/img/coords-30-60.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <g>
diff --git a/frontend/lab/samples/intro/img/move-6circles.svg b/frontend/lab/samples/intro/img/move-6circles.svg
index 7d454185..c56e4ff0 100644
--- a/frontend/lab/samples/intro/img/move-6circles.svg
+++ b/frontend/lab/samples/intro/img/move-6circles.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/loops/img/gradient-line.svg b/frontend/lab/samples/loops/img/gradient-line.svg
index 03cabd3d..0fd6426c 100644
--- a/frontend/lab/samples/loops/img/gradient-line.svg
+++ b/frontend/lab/samples/loops/img/gradient-line.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/loops/img/gradient-thick.svg b/frontend/lab/samples/loops/img/gradient-thick.svg
index e5cf92a7..5773e987 100644
--- a/frontend/lab/samples/loops/img/gradient-thick.svg
+++ b/frontend/lab/samples/loops/img/gradient-thick.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>
diff --git a/frontend/lab/samples/loops/img/target.svg b/frontend/lab/samples/loops/img/target.svg
index f299131a..80dfd58a 100644
--- a/frontend/lab/samples/loops/img/target.svg
+++ b/frontend/lab/samples/loops/img/target.svg
@@ -3,6 +3,7 @@
   stroke-linecap="round"
   font-size="60"
   viewBox="0 0 1000 1000"
+  style="width: 200px; height: 200px"
   xmlns="http://www.w3.org/2000/svg"
 >
   <rect fill="white" stroke="white" x="0" y="0" width="100%" height="100%"></rect>