Add additional animations

I want to also animate on colour, but I'm waiting for

https://developer.mozilla.org/en-US/docs/Web/CSS/@property

to be released for better support

public/game-win-animations.css

@@ -1,8 +1,8 @@
-:root.win #route {
+:root.win[data-animation="1"] #route {
   animation: 5s infinite normal stroke-dash-array;
 }
 
-:root.win #walls {
+:root.win[data-animation="1"] #walls {
   animation: 10s infinite normal stroke-dash-array;
 }
 
@@ -21,3 +21,42 @@
     stroke-dasharray: 5 0;
   }
 }
+
+:root.win[data-animation="2"] #route {
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  animation: 2.5s infinite alternate expand-width;
+}
+
+:root.win[data-animation="2"] #walls {
+  animation: 5s infinite alternate fade-to-transparent;
+}
+
+@keyframes expand-width {
+  to {
+    stroke-width: 5;
+  }
+}
+
+@keyframes fade-to-transparent {
+  to {
+    stroke: transparent;
+  }
+}
+
+:root.win[data-animation="3"] #route {
+  animation: 5s infinite alternate fade-to-transparent;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+:root.win[data-animation="3"] #walls {
+  stroke-linecap: round;
+  animation: 5s infinite alternate expand-to-1;
+}
+
+@keyframes expand-to-1 {
+  to {
+    stroke-width: 1;
+  }
+}

src/game/app.ts

@@ -110,6 +110,7 @@ function newMaze(app: App): void {
     "viewBox",
     `-0.125 -0.125 ${app.computer.maze_width(app.maze) + 0.25} ${app.computer.maze_height(app.maze) + 0.25}`,
   );
+  app.root.dataset["animation"] = `${Math.floor(Math.random() * 3) + 1}`;
   renderAfterMove(app);
 }