Merge branch 'turtles-in-svg' of https://github.com/PowerShellWeb/Turtle into turtles-in-svg

StartAutomating · StartAutomating · commit 86f4883a7a11 · 2025-10-03T12:03:32.000-07:00
diff --git a/Examples/Keyframes-Moving-Square.svg b/Examples/Keyframes-Moving-Square.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 84" transform-origin="50% 50%" width="100%" height="100%">
+  <style>
+@keyframes moving-in-3d {
+  0%,100% {
+    transform: translate3d(0ch, 2ch, 5em) rotateY(-180deg);
+  }
+  50% {
+    transform: translate3d(5ch, 1ch, 5em) rotateY(0deg);
+  }
+}
+.moving-in-3d {
+    animation-name: moving-in-3d;
+    animation-duration: 4.2s;
+    animation-iteration-count: infinite;
+}
+</style>
+  <path id="moving-square-path" d="m 0 0   l 42 0 l 0 42 l -42 0 l -0 -42" stroke="#224488" stroke-width="0.25%" fill="#4488ff" class="moving-in-3d" transform-origin="50% 50%">
+  </path>
+</svg>
diff --git a/Examples/Keyframes-Wiggle-Square.svg b/Examples/Keyframes-Wiggle-Square.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" transform-origin="50% 50%" width="100%" height="100%">
+  <style>
+@keyframes wiggle3d {
+  0%,100% {
+    transform: rotateX(-3deg) rotateY(-3deg) rotateZ(-3deg);
+  }
+  50% {
+    transform: rotateX(3deg) rotateY(3deg) rotateZ(3deg);
+  }
+}
+.wiggle3d {
+    animation-name: wiggle3d;
+    animation-duration: 4.2s;
+    animation-iteration-count: infinite;
+}
+</style>
+  <path id="wiggle-square-path" d="m 0 0   l 42 0 l 0 42 l -42 0 l -0 -42" stroke="#224488" stroke-width="0.25%" fill="#4488ff" class="wiggle3d" transform-origin="50% 50%">
+  </path>
+</svg>
diff --git a/Examples/Keyframes-Wow.svg b/Examples/Keyframes-Wow.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" transform-origin="50% 50%" width="100%" height="100%">
+  <style>
+@keyframes bigger-font {
+  0% {
+    font-size: 1rem;
+  }
+  16% {
+    font-size: 2rem;
+  }
+  32% {
+    font-size: 5rem;
+  }
+  48% {
+    font-size: 10rem;
+  }
+  64% {
+    font-size: 15rem;
+  }
+  100% {
+    font-size: 20rem;
+  }
+}
+.bigger-font {
+    animation-name: bigger-font;
+    animation-duration: 1.68s;
+    animation-iteration-count: infinite;
+}
+</style>
+  <path id="wow-wow-wow-wow-wow-path" d="m 0 0" stroke="currentcolor" stroke-width="0.25%" fill="transparent" class="foreground-stroke" transform-origin="50% 50%">
+  </path>
+  <text id="wow-wow-wow-wow-wow-text" dominant-baseline="middle" text-anchor="middle" x="50%" y="50%" class="bigger-font">
+wow
+</text>
+</svg>
