docs: Turtle Keyframes Example ( Fixes #251 )

James Brundage · James Brundage · commit 116e03ad23cf · 2025-10-03T00:57:39.000Z
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>
