test

d2renderers/d2svg/style.css

@@ -10,3 +10,15 @@
   mix-blend-mode: multiply;
   opacity: 0.5;
 }
+
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}

e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="2832" height="441" viewBox="-102 -102 2832 441"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="2737" height="491" viewBox="-90 -90 2737 491"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1431" height="572" viewBox="-102 -102 1431 572"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1231" height="572" viewBox="-90 -90 1231 572"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1698" height="1876" viewBox="-102 -102 1698 1876"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1829" height="1943" viewBox="-90 -90 1829 1943"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="492" height="332" viewBox="-102 -102 492 332"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="452" height="332" viewBox="-90 -90 452 332"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1540" height="578" viewBox="-102 -102 1540 578"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/elk_order/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1350" height="633" viewBox="-90 -90 1350 633"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="366" height="552" viewBox="-100 -100 366 552"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="366" height="552" viewBox="-88 -88 366 552"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="277" height="242" viewBox="-102 -102 277 242"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="277" height="242" viewBox="-90 -90 277 242"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1286" height="548" viewBox="-102 -102 1286 548"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1286" height="548" viewBox="-90 -90 1286 548"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1825" height="777" viewBox="-102 -102 1825 777"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1609" height="1027" viewBox="-90 -90 1609 1027"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="394" height="356" viewBox="-102 -102 394 356"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="394" height="356" viewBox="-90 -90 394 356"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="648" height="1340" viewBox="-100 -100 648 1340"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="648" height="1340" viewBox="-88 -88 648 1340"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="604" height="458" viewBox="-78 -28 604 458"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="377" height="798" viewBox="-78 -28 377 798"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1392" height="312" viewBox="-102 -102 1392 312"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1352" height="312" viewBox="-90 -90 1352 312"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="626" height="1028" viewBox="-102 -102 626 1028"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="626" height="1028" viewBox="-90 -90 626 1028"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="490" height="556" viewBox="-102 -102 490 556"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="450" height="556" viewBox="-90 -90 450 556"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/basic/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="317" height="556" viewBox="-102 -102 317 556"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/basic/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="317" height="556" viewBox="-90 -90 317 556"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="418" height="756" viewBox="-102 -102 418 756"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="468" height="866" viewBox="-90 -90 468 866"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="317" height="577" viewBox="-102 -102 317 577"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="317" height="677" viewBox="-90 -90 317 677"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/empty/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/sanity/empty/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="200" height="200" viewBox="-100 -100 200 200"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1543" height="828" viewBox="-102 -102 1543 828"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1343" height="828" viewBox="-90 -90 1343 828"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="494" height="793" viewBox="-108 -107 494 793"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="447" height="843" viewBox="-96 -95 447 843"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="401" height="577" viewBox="-100 -102 401 577"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="401" height="677" viewBox="-88 -90 401 677"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1522" height="1008" viewBox="-102 -102 1522 1008"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1242" height="1008" viewBox="-90 -90 1242 1008"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="650" height="677" viewBox="-102 -102 650 677"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/chaos1/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="634" height="953" viewBox="-90 -90 634 953"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1331" height="1939" viewBox="-102 -102 1331 1939"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/chaos2/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1275" height="2738" viewBox="-90 -90 1275 2738"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="698" height="630" viewBox="-102 -102 698 630"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="778" height="885" viewBox="-90 -90 778 885"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="317" height="782" viewBox="-102 -102 317 782"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="317" height="782" viewBox="-90 -90 317 782"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/class/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="626" height="572" viewBox="-102 -102 626 572"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/class/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="626" height="572" viewBox="-90 -90 626 572"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="959" height="822" viewBox="-102 -102 959 822"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="959" height="822" viewBox="-90 -90 959 822"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="498" height="1182" viewBox="-102 -102 498 1182"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/connected_container/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="618" height="1407" viewBox="-90 -90 618 1407"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1410" height="747" viewBox="-643 -143 1410 747"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1410" height="747" viewBox="-631 -131 1410 747"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="655" height="1078" viewBox="-102 -172 655 1078"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="615" height="1078" viewBox="-90 -160 615 1078"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="790" height="1534" viewBox="-102 -102 790 1534"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/container_edges/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="756" height="1350" viewBox="-90 -90 756 1350"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="837" height="782" viewBox="-102 -102 837 782"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="717" height="782" viewBox="-90 -90 717 782"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/dense/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1594" height="1686" viewBox="-102 -102 1594 1686"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/dense/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1014" height="2362" viewBox="-88 -90 1014 2362"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="2546" height="1108" viewBox="-102 -102 2546 1108"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1757" height="1660" viewBox="-90 -90 1757 1660"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/direction/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1025" height="1660" viewBox="-102 -102 1025 1660"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/direction/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="618" height="3342" viewBox="-90 -90 618 3342"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="349" height="577" viewBox="-102 -102 349 577"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/font_colors/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="349" height="677" viewBox="-90 -90 349 677"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="2364" height="698" viewBox="-102 -102 2364 698"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="2043" height="797" viewBox="-90 -90 2043 797"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="3255" height="5504" viewBox="-102 -102 3255 5504"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="3255" height="5504" viewBox="-90 -90 3255 5504"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/hr/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="942" height="790" viewBox="-102 -102 942 790"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/hr/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="942" height="790" viewBox="-90 -90 942 790"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="344" height="356" viewBox="-102 -102 344 356"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/icon-label/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="344" height="356" viewBox="-90 -90 344 356"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/images/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="332" height="615" viewBox="-102 -102 332 615"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/images/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="332" height="615" viewBox="-90 -90 332 615"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/investigate/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1015" height="4587" viewBox="-102 -102 1015 4587"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/investigate/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="898" height="5294" viewBox="-90 -90 898 5294"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="3248" height="1784" viewBox="-102 -102 3248 1784"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/large_arch/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="1698" height="3152" viewBox="-90 -90 1698 3152"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/latex/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="917" height="954" viewBox="-102 -102 917 954"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/latex/elk/sketch.exp.svg

@@ -18,6 +18,18 @@ width="837" height="1054" viewBox="-90 -90 837 1054"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {

e2etests/testdata/stable/li1/dagre/sketch.exp.svg

@@ -18,6 +18,18 @@ width="583" height="756" viewBox="-102 -102 583 756"><style type="text/css">
   opacity: 0.5;
 }
 
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 30;
+  }
+}
+
+path[stroke-dasharray] {
+  stroke-dasharray: 15 15;
+  animation: dashdraw 0.5s linear infinite;
+}
+
 ]]>
 </style><script type="application/javascript"><![CDATA[window.addEventListener("DOMContentLoaded", () => {
   if (document.documentElement.getAttribute("id") !== "d2-svg") {