From cc0a04875745bfb1ea06e537c2251e99efa6b479 Mon Sep 17 00:00:00 2001
From: Alexander Wang <alex@terrastruct.com>
Date: Thu, 12 Jan 2023 10:29:13 -0800
Subject: [PATCH] test

---
 d2renderers/d2svg/style.css                          | 12 ++++++++++++
 .../dagre_edge_label_spacing/dagre/sketch.exp.svg    | 12 ++++++++++++
 .../dagre_edge_label_spacing/elk/sketch.exp.svg      | 12 ++++++++++++
 .../dagre_special_ids/dagre/sketch.exp.svg           | 12 ++++++++++++
 .../regression/dagre_special_ids/elk/sketch.exp.svg  | 12 ++++++++++++
 .../regression/elk_alignment/dagre/sketch.exp.svg    | 12 ++++++++++++
 .../regression/elk_alignment/elk/sketch.exp.svg      | 12 ++++++++++++
 .../elk_img_empty_label_panic/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../elk_img_empty_label_panic/elk/sketch.exp.svg     | 12 ++++++++++++
 .../regression/elk_order/dagre/sketch.exp.svg        | 12 ++++++++++++
 .../testdata/regression/elk_order/elk/sketch.exp.svg | 12 ++++++++++++
 .../regression/empty_sequence/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../regression/empty_sequence/elk/sketch.exp.svg     | 12 ++++++++++++
 .../regression/no-lexer/dagre/sketch.exp.svg         | 12 ++++++++++++
 .../testdata/regression/no-lexer/elk/sketch.exp.svg  | 12 ++++++++++++
 .../only_header_class_table/dagre/sketch.exp.svg     | 12 ++++++++++++
 .../only_header_class_table/elk/sketch.exp.svg       | 12 ++++++++++++
 .../overlapping-edge-label/dagre/sketch.exp.svg      | 12 ++++++++++++
 .../overlapping-edge-label/elk/sketch.exp.svg        | 12 ++++++++++++
 .../query_param_escape/dagre/sketch.exp.svg          | 12 ++++++++++++
 .../regression/query_param_escape/elk/sketch.exp.svg | 12 ++++++++++++
 .../sequence_diagram_name_crash/dagre/sketch.exp.svg | 12 ++++++++++++
 .../sequence_diagram_name_crash/elk/sketch.exp.svg   | 12 ++++++++++++
 .../sequence_diagram_no_message/dagre/sketch.exp.svg | 12 ++++++++++++
 .../sequence_diagram_no_message/elk/sketch.exp.svg   | 12 ++++++++++++
 .../sequence_diagram_span_cover/dagre/sketch.exp.svg | 12 ++++++++++++
 .../sequence_diagram_span_cover/elk/sketch.exp.svg   | 12 ++++++++++++
 .../sql_table_overflow/dagre/sketch.exp.svg          | 12 ++++++++++++
 .../regression/sql_table_overflow/elk/sketch.exp.svg | 12 ++++++++++++
 .../unnamed_class_table_code/dagre/sketch.exp.svg    | 12 ++++++++++++
 .../unnamed_class_table_code/elk/sketch.exp.svg      | 12 ++++++++++++
 e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg | 12 ++++++++++++
 e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg   | 12 ++++++++++++
 e2etests/testdata/sanity/basic/dagre/sketch.exp.svg  | 12 ++++++++++++
 e2etests/testdata/sanity/basic/elk/sketch.exp.svg    | 12 ++++++++++++
 .../sanity/child_to_child/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../sanity/child_to_child/elk/sketch.exp.svg         | 12 ++++++++++++
 .../sanity/connection_label/dagre/sketch.exp.svg     | 12 ++++++++++++
 .../sanity/connection_label/elk/sketch.exp.svg       | 12 ++++++++++++
 e2etests/testdata/sanity/empty/dagre/sketch.exp.svg  | 12 ++++++++++++
 e2etests/testdata/sanity/empty/elk/sketch.exp.svg    | 12 ++++++++++++
 .../testdata/stable/all_shapes/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../testdata/stable/all_shapes/elk/sketch.exp.svg    | 12 ++++++++++++
 .../stable/all_shapes_multiple/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../stable/all_shapes_multiple/elk/sketch.exp.svg    | 12 ++++++++++++
 .../stable/all_shapes_shadow/dagre/sketch.exp.svg    | 12 ++++++++++++
 .../stable/all_shapes_shadow/elk/sketch.exp.svg      | 12 ++++++++++++
 .../stable/arrowhead_adjustment/dagre/sketch.exp.svg | 12 ++++++++++++
 .../stable/arrowhead_adjustment/elk/sketch.exp.svg   | 12 ++++++++++++
 .../stable/arrowhead_labels/dagre/sketch.exp.svg     | 12 ++++++++++++
 .../stable/arrowhead_labels/elk/sketch.exp.svg       | 12 ++++++++++++
 .../testdata/stable/binary_tree/dagre/sketch.exp.svg | 12 ++++++++++++
 .../testdata/stable/binary_tree/elk/sketch.exp.svg   | 12 ++++++++++++
 e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg | 12 ++++++++++++
 e2etests/testdata/stable/chaos1/elk/sketch.exp.svg   | 12 ++++++++++++
 e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg | 12 ++++++++++++
 e2etests/testdata/stable/chaos2/elk/sketch.exp.svg   | 12 ++++++++++++
 .../stable/child_parent_edges/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../stable/child_parent_edges/elk/sketch.exp.svg     | 12 ++++++++++++
 .../stable/circular_dependency/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../stable/circular_dependency/elk/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/class/dagre/sketch.exp.svg  | 12 ++++++++++++
 e2etests/testdata/stable/class/elk/sketch.exp.svg    | 12 ++++++++++++
 .../stable/code_snippet/dagre/sketch.exp.svg         | 12 ++++++++++++
 .../testdata/stable/code_snippet/elk/sketch.exp.svg  | 12 ++++++++++++
 .../stable/connected_container/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../stable/connected_container/elk/sketch.exp.svg    | 12 ++++++++++++
 .../stable/constant_near_stress/dagre/sketch.exp.svg | 12 ++++++++++++
 .../stable/constant_near_stress/elk/sketch.exp.svg   | 12 ++++++++++++
 .../stable/constant_near_title/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../stable/constant_near_title/elk/sketch.exp.svg    | 12 ++++++++++++
 .../stable/container_edges/dagre/sketch.exp.svg      | 12 ++++++++++++
 .../stable/container_edges/elk/sketch.exp.svg        | 12 ++++++++++++
 .../stable/crow_foot_arrowhead/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../stable/crow_foot_arrowhead/elk/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/dense/dagre/sketch.exp.svg  | 12 ++++++++++++
 e2etests/testdata/stable/dense/elk/sketch.exp.svg    | 12 ++++++++++++
 .../stable/different_subgraphs/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../stable/different_subgraphs/elk/sketch.exp.svg    | 12 ++++++++++++
 .../testdata/stable/direction/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../testdata/stable/direction/elk/sketch.exp.svg     | 12 ++++++++++++
 .../testdata/stable/font_colors/dagre/sketch.exp.svg | 12 ++++++++++++
 .../testdata/stable/font_colors/elk/sketch.exp.svg   | 12 ++++++++++++
 .../testdata/stable/font_sizes/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../testdata/stable/font_sizes/elk/sketch.exp.svg    | 12 ++++++++++++
 .../stable/giant_markdown_test/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../stable/giant_markdown_test/elk/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/hr/dagre/sketch.exp.svg     | 12 ++++++++++++
 e2etests/testdata/stable/hr/elk/sketch.exp.svg       | 12 ++++++++++++
 .../testdata/stable/icon-label/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../testdata/stable/icon-label/elk/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/images/dagre/sketch.exp.svg | 12 ++++++++++++
 e2etests/testdata/stable/images/elk/sketch.exp.svg   | 12 ++++++++++++
 .../testdata/stable/investigate/dagre/sketch.exp.svg | 12 ++++++++++++
 .../testdata/stable/investigate/elk/sketch.exp.svg   | 12 ++++++++++++
 .../testdata/stable/large_arch/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../testdata/stable/large_arch/elk/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/latex/dagre/sketch.exp.svg  | 12 ++++++++++++
 e2etests/testdata/stable/latex/elk/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/li1/dagre/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/li1/elk/sketch.exp.svg      | 12 ++++++++++++
 e2etests/testdata/stable/li2/dagre/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/li2/elk/sketch.exp.svg      | 12 ++++++++++++
 e2etests/testdata/stable/li3/dagre/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/li3/elk/sketch.exp.svg      | 12 ++++++++++++
 e2etests/testdata/stable/li4/dagre/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/li4/elk/sketch.exp.svg      | 12 ++++++++++++
 e2etests/testdata/stable/links/dagre/sketch.exp.svg  | 12 ++++++++++++
 e2etests/testdata/stable/links/elk/sketch.exp.svg    | 12 ++++++++++++
 .../testdata/stable/lone_h1/dagre/sketch.exp.svg     | 12 ++++++++++++
 e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg  | 12 ++++++++++++
 .../testdata/stable/markdown/dagre/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/markdown/elk/sketch.exp.svg | 12 ++++++++++++
 .../stable/markdown_stroke_fill/dagre/sketch.exp.svg | 12 ++++++++++++
 .../stable/markdown_stroke_fill/elk/sketch.exp.svg   | 12 ++++++++++++
 .../stable/md_2space_newline/dagre/sketch.exp.svg    | 12 ++++++++++++
 .../stable/md_2space_newline/elk/sketch.exp.svg      | 12 ++++++++++++
 .../stable/md_backslash_newline/dagre/sketch.exp.svg | 12 ++++++++++++
 .../stable/md_backslash_newline/elk/sketch.exp.svg   | 12 ++++++++++++
 .../stable/md_code_block_fenced/dagre/sketch.exp.svg | 12 ++++++++++++
 .../stable/md_code_block_fenced/elk/sketch.exp.svg   | 12 ++++++++++++
 .../md_code_block_indented/dagre/sketch.exp.svg      | 12 ++++++++++++
 .../stable/md_code_block_indented/elk/sketch.exp.svg | 12 ++++++++++++
 .../stable/md_code_inline/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../stable/md_code_inline/elk/sketch.exp.svg         | 12 ++++++++++++
 .../stable/multiline_text/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../stable/multiline_text/elk/sketch.exp.svg         | 12 ++++++++++++
 .../stable/multiple_trees/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../stable/multiple_trees/elk/sketch.exp.svg         | 12 ++++++++++++
 .../testdata/stable/n22_e32/dagre/sketch.exp.svg     | 12 ++++++++++++
 e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg  | 12 ++++++++++++
 .../stable/number_connections/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../stable/number_connections/elk/sketch.exp.svg     | 12 ++++++++++++
 .../stable/one_container_loop/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../stable/one_container_loop/elk/sketch.exp.svg     | 12 ++++++++++++
 .../one_three_one_container/dagre/sketch.exp.svg     | 12 ++++++++++++
 .../one_three_one_container/elk/sketch.exp.svg       | 12 ++++++++++++
 .../dagre/sketch.exp.svg                             | 12 ++++++++++++
 .../elk/sketch.exp.svg                               | 12 ++++++++++++
 e2etests/testdata/stable/p/dagre/sketch.exp.svg      | 12 ++++++++++++
 e2etests/testdata/stable/p/elk/sketch.exp.svg        | 12 ++++++++++++
 e2etests/testdata/stable/pre/dagre/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/pre/elk/sketch.exp.svg      | 12 ++++++++++++
 .../stable/self-referencing/dagre/sketch.exp.svg     | 12 ++++++++++++
 .../stable/self-referencing/elk/sketch.exp.svg       | 12 ++++++++++++
 .../dagre/sketch.exp.svg                             | 12 ++++++++++++
 .../elk/sketch.exp.svg                               | 12 ++++++++++++
 .../sequence_diagram_all_shapes/dagre/sketch.exp.svg | 12 ++++++++++++
 .../sequence_diagram_all_shapes/elk/sketch.exp.svg   | 12 ++++++++++++
 .../sequence_diagram_distance/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../sequence_diagram_distance/elk/sketch.exp.svg     | 12 ++++++++++++
 .../sequence_diagram_groups/dagre/sketch.exp.svg     | 12 ++++++++++++
 .../sequence_diagram_groups/elk/sketch.exp.svg       | 12 ++++++++++++
 .../sequence_diagram_long_note/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../sequence_diagram_long_note/elk/sketch.exp.svg    | 12 ++++++++++++
 .../dagre/sketch.exp.svg                             | 12 ++++++++++++
 .../elk/sketch.exp.svg                               | 12 ++++++++++++
 .../dagre/sketch.exp.svg                             | 12 ++++++++++++
 .../sequence_diagram_nested_span/elk/sketch.exp.svg  | 12 ++++++++++++
 .../sequence_diagram_note/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../stable/sequence_diagram_note/elk/sketch.exp.svg  | 12 ++++++++++++
 .../sequence_diagram_real/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../stable/sequence_diagram_real/elk/sketch.exp.svg  | 12 ++++++++++++
 .../sequence_diagram_self_edges/dagre/sketch.exp.svg | 12 ++++++++++++
 .../sequence_diagram_self_edges/elk/sketch.exp.svg   | 12 ++++++++++++
 .../sequence_diagram_simple/dagre/sketch.exp.svg     | 12 ++++++++++++
 .../sequence_diagram_simple/elk/sketch.exp.svg       | 12 ++++++++++++
 .../sequence_diagram_span/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../stable/sequence_diagram_span/elk/sketch.exp.svg  | 12 ++++++++++++
 .../stable/sequence_diagrams/dagre/sketch.exp.svg    | 12 ++++++++++++
 .../stable/sequence_diagrams/elk/sketch.exp.svg      | 12 ++++++++++++
 .../testdata/stable/sql_tables/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../testdata/stable/sql_tables/elk/sketch.exp.svg    | 12 ++++++++++++
 .../testdata/stable/square_3d/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../testdata/stable/square_3d/elk/sketch.exp.svg     | 12 ++++++++++++
 .../dagre/sketch.exp.svg                             | 12 ++++++++++++
 .../straight_hierarchy_container/elk/sketch.exp.svg  | 12 ++++++++++++
 .../testdata/stable/stylish/dagre/sketch.exp.svg     | 12 ++++++++++++
 e2etests/testdata/stable/stylish/elk/sketch.exp.svg  | 12 ++++++++++++
 .../stable/text_font_sizes/dagre/sketch.exp.svg      | 12 ++++++++++++
 .../stable/text_font_sizes/elk/sketch.exp.svg        | 12 ++++++++++++
 .../testdata/stable/tooltips/dagre/sketch.exp.svg    | 12 ++++++++++++
 e2etests/testdata/stable/tooltips/elk/sketch.exp.svg | 12 ++++++++++++
 .../stable/transparent_3d/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../stable/transparent_3d/elk/sketch.exp.svg         | 12 ++++++++++++
 .../stable/unnamed_only_height/dagre/sketch.exp.svg  | 12 ++++++++++++
 .../stable/unnamed_only_height/elk/sketch.exp.svg    | 12 ++++++++++++
 .../stable/unnamed_only_width/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../stable/unnamed_only_width/elk/sketch.exp.svg     | 12 ++++++++++++
 e2etests/testdata/stable/us_map/dagre/sketch.exp.svg | 12 ++++++++++++
 e2etests/testdata/stable/us_map/elk/sketch.exp.svg   | 12 ++++++++++++
 .../todo/container_child_edge/dagre/sketch.exp.svg   | 12 ++++++++++++
 .../todo/container_child_edge/elk/sketch.exp.svg     | 12 ++++++++++++
 .../font_sizes_containers_large/dagre/sketch.exp.svg | 12 ++++++++++++
 .../font_sizes_containers_large/elk/sketch.exp.svg   | 12 ++++++++++++
 .../todo/font_sizes_large/dagre/sketch.exp.svg       | 12 ++++++++++++
 .../todo/font_sizes_large/elk/sketch.exp.svg         | 12 ++++++++++++
 .../dagre/sketch.exp.svg                             | 12 ++++++++++++
 .../elk/sketch.exp.svg                               | 12 ++++++++++++
 .../todo/shape_set_width_height/dagre/sketch.exp.svg | 12 ++++++++++++
 .../todo/shape_set_width_height/elk/sketch.exp.svg   | 12 ++++++++++++
 .../todo/tall_edge_label/dagre/sketch.exp.svg        | 12 ++++++++++++
 .../testdata/todo/tall_edge_label/elk/sketch.exp.svg | 12 ++++++++++++
 203 files changed, 2436 insertions(+)

diff --git a/d2renderers/d2svg/style.css b/d2renderers/d2svg/style.css
index 2476c6ae7..5a7bc3b10 100644
--- a/d2renderers/d2svg/style.css
+++ b/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;
+}
diff --git a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
index 1e7b73085..24918268a 100644
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg b/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
index 72f4772c0..33a6d44ab 100644
--- a/e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
index c9fcffb75..f61e05f54 100644
--- a/e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg b/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
index 726f95d7b..8feb0dba7 100644
--- a/e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
index 63e8305ca..d7100dfad 100644
--- a/e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
index ce9fadc25..ee5eb4bc5 100644
--- a/e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
index 41697315e..4ca60b902 100644
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
index 2ca3fb21b..8c52f1677 100644
--- a/e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg b/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
index 373f07923..211909ed9 100644
--- a/e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg b/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
index bf2f0c60b..c8f6608e2 100644
--- a/e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg b/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
index abfc62dfd..d9bd2e75d 100644
--- a/e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg b/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
index 810e7a840..56111a24c 100644
--- a/e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg b/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
index 506bdae15..14a613f12 100644
--- a/e2etests/testdata/regression/no-lexer/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg b/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
index 216375a7b..7860e2f0d 100644
--- a/e2etests/testdata/regression/no-lexer/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
index df46d764c..1dad15afb 100644
--- a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg b/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
index e974ba8f4..4cf3520b2 100644
--- a/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
index 5a0f1cfad..f0138f81a 100644
--- a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg b/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
index c8c173ec9..a6c2a57f8 100644
--- a/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg b/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
index 70f3449d4..15fc18e18 100644
--- a/e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg b/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
index c0072a72c..9623cebee 100644
--- a/e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
index 88123c8c3..ad4d1722b 100644
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
index 0a3c9a326..87144e878 100644
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
index babe9c027..49c00f11e 100644
--- a/e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
index babe9c027..49c00f11e 100644
--- a/e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
index 28e51963b..cf06b57a7 100644
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
index 28e51963b..cf06b57a7 100644
--- a/e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg b/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
index a4d3dde94..2d1f475f0 100644
--- a/e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg b/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
index 64d4c4cbd..138e63217 100644
--- a/e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg b/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
index fafa910ca..e6186fbb7 100644
--- a/e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg b/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
index 66bf10875..d7f41de53 100644
--- a/e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
index 42f38a32d..be5d11b05 100644
--- a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg b/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
index ec09757e1..b6e090e0c 100644
--- a/e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg b/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
index d319496eb..cadeb1266 100644
--- a/e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg b/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
index c229739c4..b6d98fa3e 100644
--- a/e2etests/testdata/sanity/basic/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg b/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
index 7500e7a98..44de96e96 100644
--- a/e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg b/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
index a3825d736..ea59143e2 100644
--- a/e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg b/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
index 51ae8878c..d39700a89 100644
--- a/e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg b/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
index eb2141940..f4f7f7afe 100644
--- a/e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg b/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
index 5169c50f1..c7d1036a9 100644
--- a/e2etests/testdata/sanity/empty/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/sanity/empty/elk/sketch.exp.svg b/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
index 5169c50f1..c7d1036a9 100644
--- a/e2etests/testdata/sanity/empty/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg b/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
index da44f0f40..ccc234422 100644
--- a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg b/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
index aec28417d..e048ea964 100644
--- a/e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg b/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
index 4be842b8e..ace3052b4 100644
--- a/e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg b/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
index fb9269af1..98309d8e7 100644
--- a/e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg b/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
index fd0dbfb44..e21f5623d 100644
--- a/e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg b/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
index 79f60ba91..73c880ee3 100644
--- a/e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
index 90796e221..048039058 100644
--- a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
index 538ff4999..14d6af691 100644
--- a/e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
index 9bc4af0a9..87f7c82f6 100644
--- a/e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
index 9ad82e945..f3380e531 100644
--- a/e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg b/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
index 0c32ad21a..bbd0bc16d 100644
--- a/e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg b/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
index 05c609f60..9fecfb041 100644
--- a/e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg b/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg
index cd29bb47a..00b25e300 100644
--- a/e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg
index 66de339b6..d8ad0ad18 100644
--- a/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
index 5631cb34a..e2e7bbd60 100644
--- a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
index 08bad938b..3187c8dba 100644
--- a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
index c157addac..05fc0689b 100644
--- a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
index a533327ec..79f0065f6 100644
--- a/e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg b/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
index fbe2c63b8..154803fe1 100644
--- a/e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg b/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
index 7e27dd4e2..9c11faad6 100644
--- a/e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/class/dagre/sketch.exp.svg b/e2etests/testdata/stable/class/dagre/sketch.exp.svg
index 7955f25c5..9fa2e0075 100644
--- a/e2etests/testdata/stable/class/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/class/elk/sketch.exp.svg b/e2etests/testdata/stable/class/elk/sketch.exp.svg
index 09edba75b..dbe63b656 100644
--- a/e2etests/testdata/stable/class/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg b/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
index 92e56e53a..7b5658aa2 100644
--- a/e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg b/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
index f26b7ba4a..0d691fe58 100644
--- a/e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg b/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
index 7db73b331..57139a014 100644
--- a/e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg b/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
index bf39fadbc..8669a1a2d 100644
--- a/e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg b/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
index cb8fdfff7..57cdd1eaa 100644
--- a/e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg b/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
index 9782d0e03..727d91ef5 100644
--- a/e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg b/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
index 39aa31783..b81217ca2 100644
--- a/e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg b/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
index b2f1173fc..899de4a90 100644
--- a/e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
index 73d793e23..a645e7d89 100644
--- a/e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
index 54534b190..f09bdf00b 100644
--- a/e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg b/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg
index d791e38ef..1a76f277c 100644
--- a/e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg b/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg
index 9e900f499..9cf5958f9 100644
--- a/e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/dense/dagre/sketch.exp.svg b/e2etests/testdata/stable/dense/dagre/sketch.exp.svg
index de442c896..c63a89651 100644
--- a/e2etests/testdata/stable/dense/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/dense/elk/sketch.exp.svg b/e2etests/testdata/stable/dense/elk/sketch.exp.svg
index 84fbd7b5c..7d081249c 100644
--- a/e2etests/testdata/stable/dense/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg b/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
index 31bb25e09..0fc128e8d 100644
--- a/e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg b/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
index 522df89bc..9ebd66e54 100644
--- a/e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/direction/dagre/sketch.exp.svg b/e2etests/testdata/stable/direction/dagre/sketch.exp.svg
index 4c604c7a1..96c53078f 100644
--- a/e2etests/testdata/stable/direction/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/direction/elk/sketch.exp.svg b/e2etests/testdata/stable/direction/elk/sketch.exp.svg
index 79ff258f5..3e2b20a1b 100644
--- a/e2etests/testdata/stable/direction/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
index 7a7a3f8d1..2bfa86fb9 100644
--- a/e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg b/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
index ea1e0e246..ba94f3c14 100644
--- a/e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
index 86d194ee7..125ab3a66 100644
--- a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
index 2d5f2fe91..c9298d53b 100644
--- a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg b/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
index 0072c98ec..b78fa6734 100644
--- a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg b/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
index 782ee18ed..82626a97a 100644
--- a/e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/hr/dagre/sketch.exp.svg b/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
index ff94ee68a..05abb4731 100644
--- a/e2etests/testdata/stable/hr/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/hr/elk/sketch.exp.svg b/e2etests/testdata/stable/hr/elk/sketch.exp.svg
index 1b8a44184..565687623 100644
--- a/e2etests/testdata/stable/hr/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg b/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
index ad9e7fda5..a3feefc96 100644
--- a/e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg b/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
index 6ba84f366..ffeeb4d57 100644
--- a/e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/images/dagre/sketch.exp.svg b/e2etests/testdata/stable/images/dagre/sketch.exp.svg
index d66835731..e15426b76 100644
--- a/e2etests/testdata/stable/images/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/images/elk/sketch.exp.svg b/e2etests/testdata/stable/images/elk/sketch.exp.svg
index b11b02081..029e3b428 100644
--- a/e2etests/testdata/stable/images/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg b/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
index 72468d97b..0938ae7a7 100644
--- a/e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg b/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
index 6845f7bf7..1a24d43b8 100644
--- a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg b/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
index 2c9fa385f..52acced60 100644
--- a/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg b/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
index a5da7041f..fc92b9513 100644
--- a/e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/latex/dagre/sketch.exp.svg b/e2etests/testdata/stable/latex/dagre/sketch.exp.svg
index 90629b250..7f7c064f3 100644
--- a/e2etests/testdata/stable/latex/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/latex/elk/sketch.exp.svg b/e2etests/testdata/stable/latex/elk/sketch.exp.svg
index 8afe0e340..b2b3805ec 100644
--- a/e2etests/testdata/stable/latex/elk/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/li1/dagre/sketch.exp.svg b/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
index b5eed21ad..320bc36b6 100644
--- a/e2etests/testdata/stable/li1/dagre/sketch.exp.svg
+++ b/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") {
diff --git a/e2etests/testdata/stable/li1/elk/sketch.exp.svg b/e2etests/testdata/stable/li1/elk/sketch.exp.svg
index ca94e1b1f..f9f812538 100644
--- a/e2etests/testdata/stable/li1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li1/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="583" height="756" viewBox="-90 -90 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") {
diff --git a/e2etests/testdata/stable/li2/dagre/sketch.exp.svg b/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
index 9c96573ef..371e0683d 100644
--- a/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li2/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="449" height="732" viewBox="-102 -102 449 732"><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") {
diff --git a/e2etests/testdata/stable/li2/elk/sketch.exp.svg b/e2etests/testdata/stable/li2/elk/sketch.exp.svg
index a31a92e0f..61bedecd1 100644
--- a/e2etests/testdata/stable/li2/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li2/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="449" height="732" viewBox="-90 -90 449 732"><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") {
diff --git a/e2etests/testdata/stable/li3/dagre/sketch.exp.svg b/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
index 38e10b3f6..08e98a4b3 100644
--- a/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li3/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="551" height="1168" viewBox="-102 -102 551 1168"><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") {
diff --git a/e2etests/testdata/stable/li3/elk/sketch.exp.svg b/e2etests/testdata/stable/li3/elk/sketch.exp.svg
index 251ad4974..38d0fb36c 100644
--- a/e2etests/testdata/stable/li3/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li3/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="551" height="1168" viewBox="-90 -90 551 1168"><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") {
diff --git a/e2etests/testdata/stable/li4/dagre/sketch.exp.svg b/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
index b22952cee..14a10f2f4 100644
--- a/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/li4/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1124" height="1032" viewBox="-102 -102 1124 1032"><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") {
diff --git a/e2etests/testdata/stable/li4/elk/sketch.exp.svg b/e2etests/testdata/stable/li4/elk/sketch.exp.svg
index 8a94c5871..00a0b8981 100644
--- a/e2etests/testdata/stable/li4/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/li4/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1124" height="1032" viewBox="-90 -90 1124 1032"><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") {
diff --git a/e2etests/testdata/stable/links/dagre/sketch.exp.svg b/e2etests/testdata/stable/links/dagre/sketch.exp.svg
index 528da3345..b191de2e5 100644
--- a/e2etests/testdata/stable/links/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/links/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="334" height="572" viewBox="-102 -118 334 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") {
diff --git a/e2etests/testdata/stable/links/elk/sketch.exp.svg b/e2etests/testdata/stable/links/elk/sketch.exp.svg
index a67cdb315..2176b51d7 100644
--- a/e2etests/testdata/stable/links/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/links/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="334" height="572" viewBox="-90 -106 334 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") {
diff --git a/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg b/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
index a2f26109a..d7286ed7f 100644
--- a/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="470" height="706" viewBox="-102 -102 470 706"><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") {
diff --git a/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg b/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
index a11d57fbd..d4b9da259 100644
--- a/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="470" height="706" viewBox="-90 -90 470 706"><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") {
diff --git a/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg b/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
index 1376381a7..5eed4e2ee 100644
--- a/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="735" height="842" viewBox="-102 -102 735 842"><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") {
diff --git a/e2etests/testdata/stable/markdown/elk/sketch.exp.svg b/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
index 80e32b099..b8168943d 100644
--- a/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="735" height="842" viewBox="-90 -90 735 842"><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") {
diff --git a/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg b/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
index cb80d9150..f768e54e5 100644
--- a/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="516" height="685" viewBox="-102 -102 516 685"><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") {
diff --git a/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg b/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
index af4f70bea..73974fa28 100644
--- a/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="566" height="735" viewBox="-90 -90 566 735"><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") {
diff --git a/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
index 8067bd57d..34295a32d 100644
--- a/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="763" height="352" viewBox="-102 -102 763 352"><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") {
diff --git a/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg b/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
index 556034da3..a540487e9 100644
--- a/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="813" height="402" viewBox="-90 -90 813 402"><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") {
diff --git a/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
index 02882dac2..516c25001 100644
--- a/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="763" height="352" viewBox="-102 -102 763 352"><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") {
diff --git a/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg b/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
index 36b39bde1..c6b7f1385 100644
--- a/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="813" height="402" viewBox="-90 -90 813 402"><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") {
diff --git a/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
index e6e3efc9b..d6ded012b 100644
--- a/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="400" height="767" viewBox="-102 -102 400 767"><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") {
diff --git a/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
index f872e7556..55024c10a 100644
--- a/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="400" height="767" viewBox="-90 -90 400 767"><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") {
diff --git a/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
index 82eccd60a..a3fe8c0ef 100644
--- a/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="416" height="807" viewBox="-102 -102 416 807"><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") {
diff --git a/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg b/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
index b3f33573f..150b9aab0 100644
--- a/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="416" height="807" viewBox="-90 -90 416 807"><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") {
diff --git a/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg b/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
index 68589f1d4..60b958daf 100644
--- a/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="317" height="680" viewBox="-102 -102 317 680"><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") {
diff --git a/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg b/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
index 016cfb6a6..26ac1c6b0 100644
--- a/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="317" height="680" viewBox="-90 -90 317 680"><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") {
diff --git a/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg b/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
index 9f4ed17f9..aca36dcfa 100644
--- a/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="406" height="362" viewBox="-102 -102 406 362"><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") {
diff --git a/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg b/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
index d26813cd3..3d3e7a697 100644
--- a/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="406" height="362" viewBox="-90 -90 406 362"><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") {
diff --git a/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg b/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
index 0530ac6a9..cc62adec6 100644
--- a/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1954" height="1460" viewBox="-102 -102 1954 1460"><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") {
diff --git a/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg b/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
index f46b9e061..80a6387e3 100644
--- a/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1537" height="1560" viewBox="-90 -90 1537 1560"><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") {
diff --git a/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg b/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
index b06dcf8a1..f0755b3b4 100644
--- a/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1356" height="1912" viewBox="-150 -102 1356 1912"><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") {
diff --git a/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg b/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
index bc0694a14..d3255e995 100644
--- a/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1017" height="2112" viewBox="-90 -90 1017 2112"><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") {
diff --git a/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg b/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
index 6676d8fe9..6aaf2bd6e 100644
--- a/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="536" height="556" viewBox="-102 -102 536 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") {
diff --git a/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg b/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
index e588fdede..cc582cb6c 100644
--- a/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="495" height="556" viewBox="-90 -90 495 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") {
diff --git a/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg b/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
index 7c7d22c0c..94470a907 100644
--- a/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="683" height="1334" viewBox="-102 -102 683 1334"><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") {
diff --git a/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg b/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
index 0ccec5797..a398e3dd0 100644
--- a/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="600" height="1439" viewBox="-90 -90 600 1439"><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") {
diff --git a/e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg b/e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg
index 96d652be7..135d02291 100644
--- a/e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="710" height="982" viewBox="-102 -102 710 982"><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") {
diff --git a/e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg b/e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg
index ff81f0275..43d4653f6 100644
--- a/e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="634" height="1142" viewBox="-90 -90 634 1142"><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") {
diff --git a/e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg b/e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg
index ee92d064a..0998fe2a0 100644
--- a/e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1316" height="1462" viewBox="-102 -102 1316 1462"><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") {
diff --git a/e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg b/e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg
index 2f95431e5..71df07eb2 100644
--- a/e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1526" height="1827" viewBox="-90 -90 1526 1827"><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") {
diff --git a/e2etests/testdata/stable/p/dagre/sketch.exp.svg b/e2etests/testdata/stable/p/dagre/sketch.exp.svg
index caec929ea..7ce6f3f75 100644
--- a/e2etests/testdata/stable/p/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/p/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="2061" height="680" viewBox="-102 -102 2061 680"><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") {
diff --git a/e2etests/testdata/stable/p/elk/sketch.exp.svg b/e2etests/testdata/stable/p/elk/sketch.exp.svg
index 59837a6d0..2c018ded5 100644
--- a/e2etests/testdata/stable/p/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/p/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="2061" height="680" viewBox="-90 -90 2061 680"><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") {
diff --git a/e2etests/testdata/stable/pre/dagre/sketch.exp.svg b/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
index a369446bc..62d80b69f 100644
--- a/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/pre/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="806" height="826" viewBox="-102 -102 806 826"><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") {
diff --git a/e2etests/testdata/stable/pre/elk/sketch.exp.svg b/e2etests/testdata/stable/pre/elk/sketch.exp.svg
index efc635ff2..93d5d208b 100644
--- a/e2etests/testdata/stable/pre/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/pre/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="806" height="826" viewBox="-90 -90 806 826"><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") {
diff --git a/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg b/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
index cb9bb4386..2b1904e0b 100644
--- a/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="647" height="556" viewBox="-102 -102 647 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") {
diff --git a/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg b/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
index adb980627..4da8367d0 100644
--- a/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="592" height="556" viewBox="-88 -90 592 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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg
index da52a5275..e23d7061e 100644
--- a/e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="2696" height="1398" viewBox="-78 -28 2696 1398"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg
index da52a5275..e23d7061e 100644
--- a/e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="2696" height="1398" viewBox="-78 -28 2696 1398"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
index b3642eb08..1d8b4400b 100644
--- a/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="5181" height="2986" viewBox="-78 -28 5181 2986"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
index b3642eb08..1d8b4400b 100644
--- a/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="5181" height="2986" viewBox="-78 -28 5181 2986"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
index ff9aa774f..fb74b6846 100644
--- a/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="756" height="718" viewBox="-78 -28 756 718"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
index ff9aa774f..fb74b6846 100644
--- a/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="756" height="718" viewBox="-78 -28 756 718"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
index 65bec6a73..b82ef1342 100644
--- a/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1149" height="2270" viewBox="-78 -28 1149 2270"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
index 65bec6a73..b82ef1342 100644
--- a/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1149" height="2270" viewBox="-78 -28 1149 2270"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg
index 14ef25227..4bedd028c 100644
--- a/e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="854" height="1164" viewBox="-265 -28 854 1164"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg
index 14ef25227..4bedd028c 100644
--- a/e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="854" height="1164" viewBox="-265 -28 854 1164"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg
index dcb85eeaa..3fac4e1f4 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1118" height="2460" viewBox="-197 -28 1118 2460"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg
index dcb85eeaa..3fac4e1f4 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1118" height="2460" viewBox="-197 -28 1118 2460"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg
index 4d782f1f0..a98068271 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1631" height="1631" viewBox="-81 -31 1631 1631"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg
index 4d782f1f0..a98068271 100644
--- a/e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1631" height="1631" viewBox="-81 -31 1631 1631"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
index 35550ac21..5c301ed59 100644
--- a/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1332" height="1888" viewBox="-123 -28 1332 1888"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
index 35550ac21..5c301ed59 100644
--- a/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1332" height="1888" viewBox="-123 -28 1332 1888"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
index 2bd30406b..fdb3ea2ba 100644
--- a/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="2447" height="2536" viewBox="-100 -100 2447 2536"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
index d35f83ea3..0351b35b9 100644
--- a/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="2447" height="2536" viewBox="-88 -88 2447 2536"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/sketch.exp.svg
index b9ac8aeed..cb1883d20 100644
--- a/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_self_edges/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="698" height="1368" viewBox="-78 -28 698 1368"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_self_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_self_edges/elk/sketch.exp.svg
index b9ac8aeed..cb1883d20 100644
--- a/e2etests/testdata/stable/sequence_diagram_self_edges/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_self_edges/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="698" height="1368" viewBox="-78 -28 698 1368"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
index 5b7083c7b..fca33cd7e 100644
--- a/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1602" height="1870" viewBox="-78 -28 1602 1870"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
index 5b7083c7b..fca33cd7e 100644
--- a/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1602" height="1870" viewBox="-78 -28 1602 1870"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
index 39b8a5c94..ccbe92bc7 100644
--- a/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1628" height="2148" viewBox="-78 -28 1628 2148"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
index 39b8a5c94..ccbe92bc7 100644
--- a/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1628" height="2148" viewBox="-78 -28 1628 2148"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
index 6d0144b14..3e9842e9c 100644
--- a/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="3404" height="4273" viewBox="-102 -102 3404 4273"><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") {
diff --git a/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
index ef949f3d9..5ec04462c 100644
--- a/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="3324" height="4433" viewBox="-88 -90 3324 4433"><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") {
diff --git a/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg b/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
index 025bd88a8..d072835b6 100644
--- a/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1000" height="664" viewBox="-102 -102 1000 664"><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") {
diff --git a/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg b/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
index cc119f17b..41672fae6 100644
--- a/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="920" height="664" viewBox="-90 -90 920 664"><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") {
diff --git a/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg b/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
index 1c26e6ccd..339cc0589 100644
--- a/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="375" height="584" viewBox="-102 -102 375 584"><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") {
diff --git a/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg b/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
index ddb86b450..0f2cf2bdb 100644
--- a/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="375" height="584" viewBox="-90 -90 375 584"><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") {
diff --git a/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg b/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
index aae5df239..9cbd49629 100644
--- a/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1003" height="1734" viewBox="-102 -102 1003 1734"><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") {
diff --git a/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg b/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
index 7389e435b..79b0c7f83 100644
--- a/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1241" height="2174" viewBox="-90 -90 1241 2174"><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") {
diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
index b1f14ed51..ed473c5a4 100644
--- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="323" height="580" viewBox="-104 -105 323 580"><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") {
diff --git a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
index f07375a21..8c44e62bf 100644
--- a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="323" height="680" viewBox="-93 -93 323 680"><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") {
diff --git a/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
index 909e5c738..444341781 100644
--- a/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="533" height="373" viewBox="-102 -102 533 373"><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") {
diff --git a/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
index f3026eb54..9b88bd607 100644
--- a/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="493" height="373" viewBox="-90 -90 493 373"><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") {
diff --git a/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg b/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
index 77331e870..72f396969 100644
--- a/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="334" height="572" viewBox="-102 -118 334 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") {
diff --git a/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg b/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
index 3e8acafdf..d851cfafc 100644
--- a/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="334" height="572" viewBox="-90 -106 334 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") {
diff --git a/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg b/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
index 2dea1bd6d..c3892b60f 100644
--- a/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="353" height="340" viewBox="-107 -107 353 340"><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") {
diff --git a/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg b/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
index 39f3bd0dd..f1d1aaec0 100644
--- a/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="353" height="340" viewBox="-95 -95 353 340"><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") {
diff --git a/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
index 0c91b0941..7bae4449c 100644
--- a/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="626" height="2752" viewBox="-102 -102 626 2752"><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") {
diff --git a/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
index 02fe7aa75..fff663a6b 100644
--- a/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="626" height="2752" viewBox="-90 -90 626 2752"><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") {
diff --git a/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
index a3de62380..436ce8010 100644
--- a/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="716" height="1428" viewBox="-102 -102 716 1428"><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") {
diff --git a/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg b/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
index ee38259d3..20d070a85 100644
--- a/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="716" height="1428" viewBox="-90 -90 716 1428"><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") {
diff --git a/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg b/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
index 169acc010..447cf6b76 100644
--- a/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="3324" height="2816" viewBox="-102 -102 3324 2816"><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") {
diff --git a/e2etests/testdata/stable/us_map/elk/sketch.exp.svg b/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
index 81daf9f06..f15574046 100644
--- a/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/us_map/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="1948" height="4266" viewBox="-90 -90 1948 4266"><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") {
diff --git a/e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg b/e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg
index 610ad9b05..2372ab9fa 100644
--- a/e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="459" height="677" viewBox="-102 -102 459 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") {
diff --git a/e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg b/e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg
index bd336b770..645eaa61f 100644
--- a/e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="538" height="827" viewBox="-90 -90 538 827"><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") {
diff --git a/e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg
index 6ce5dd1f4..99534385d 100644
--- a/e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="668" height="720" viewBox="-102 -102 668 720"><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") {
diff --git a/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
index c971c575f..52a20892d 100644
--- a/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="928" height="920" viewBox="-90 -90 928 920"><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") {
diff --git a/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
index 24a94cba1..ae4c6cbdd 100644
--- a/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="793" height="1786" viewBox="-102 -102 793 1786"><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") {
diff --git a/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
index 8689c9d30..cda4a7cb7 100644
--- a/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="793" height="2018" viewBox="-90 -90 793 2018"><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") {
diff --git a/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg b/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg
index cacabd774..dc7bbf53d 100644
--- a/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="923" height="1244" viewBox="-147 -28 923 1244"><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") {
diff --git a/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg b/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg
index cacabd774..dc7bbf53d 100644
--- a/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="923" height="1244" viewBox="-147 -28 923 1244"><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") {
diff --git a/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg b/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
index 369de844c..cd784bca8 100644
--- a/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="2482" height="2672" viewBox="-102 -102 2482 2672"><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") {
diff --git a/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg b/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
index 62fd714a4..774b6d1a8 100644
--- a/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="2622" height="2644" viewBox="-90 -90 2622 2644"><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") {
diff --git a/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
index a72972873..3883ddf04 100644
--- a/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
+++ b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
@@ -18,6 +18,18 @@ width="317" height="762" viewBox="-102 -102 317 762"><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") {
diff --git a/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
index d71dbf026..7521e3df5 100644
--- a/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
+++ b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
@@ -18,6 +18,18 @@ width="317" height="789" viewBox="-90 -90 317 789"><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") {