From 74f708a2ea2ac8ec1a510f85e22263926bb91d92 Mon Sep 17 00:00:00 2001
From: Alexander Wang <alex@terrastruct.com>
Date: Sat, 14 Dec 2024 19:35:18 -0700
Subject: [PATCH] allow animated: true for shape

---
 d2compiler/compile.go                         |    3 -
 d2exporter/export.go                          |    3 +
 d2renderers/d2svg/d2svg.go                    |   21 +
 d2target/d2target.go                          |    1 +
 .../txtar/shape-animate/dagre/board.exp.json  | 1115 +++++++++++++++++
 .../txtar/shape-animate/dagre/sketch.exp.svg  |  168 +++
 .../txtar/shape-animate/elk/board.exp.json    |  906 ++++++++++++++
 .../txtar/shape-animate/elk/sketch.exp.svg    |  168 +++
 e2etests/txtar.txt                            |   54 +
 9 files changed, 2436 insertions(+), 3 deletions(-)
 create mode 100644 e2etests/testdata/txtar/shape-animate/dagre/board.exp.json
 create mode 100644 e2etests/testdata/txtar/shape-animate/dagre/sketch.exp.svg
 create mode 100644 e2etests/testdata/txtar/shape-animate/elk/board.exp.json
 create mode 100644 e2etests/testdata/txtar/shape-animate/elk/sketch.exp.svg

diff --git a/d2compiler/compile.go b/d2compiler/compile.go
index 3d46bea2d..65b5ee76e 100644
--- a/d2compiler/compile.go
+++ b/d2compiler/compile.go
@@ -341,9 +341,6 @@ func (c *compiler) compileField(obj *d2graph.Object, f *d2ir.Field) {
 			return
 		}
 		c.compileStyle(&obj.Attributes, f.Map())
-		if obj.Style.Animated != nil {
-			c.errorf(obj.Style.Animated.MapKey, `key "animated" can only be applied to edges`)
-		}
 		return
 	}
 
diff --git a/d2exporter/export.go b/d2exporter/export.go
index 0a078a1ff..8b676e554 100644
--- a/d2exporter/export.go
+++ b/d2exporter/export.go
@@ -194,6 +194,9 @@ func toShape(obj *d2graph.Object, g *d2graph.Graph) d2target.Shape {
 	if obj.Tooltip != nil {
 		shape.Tooltip = obj.Tooltip.Value
 	}
+	if obj.Style.Animated != nil {
+		shape.Animated, _ = strconv.ParseBool(obj.Style.Animated.Value)
+	}
 	if obj.Link != nil {
 		shape.Link = obj.Link.Value
 		shape.PrettyLink = toPrettyLink(g, obj.Link.Value)
diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index ae702341c..cb14ff041 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -975,6 +975,10 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
 		fmt.Fprint(writer, clipPathForBorderRadius(diagramHash, targetShape))
 	}
 	classStr := ""
+	if targetShape.Animated {
+		// the animated class applies to the whole svg group to include the label, unlike connections
+		targetShape.Classes = append(targetShape.Classes, "animated-shape")
+	}
 	if len(targetShape.Classes) > 0 {
 		classStr = fmt.Sprintf(` class="%s"`, strings.Join(targetShape.Classes, " "))
 	}
@@ -1633,6 +1637,23 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
 `,
 	)
 
+	appendOnTrigger(
+		buf,
+		source,
+		[]string{
+			`animated-shape`,
+		},
+		`
+@keyframes shapeappear {
+    0%, 100% { transform: translateY(0); filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)); }
+    50% { transform: translateY(-4px); filter: drop-shadow(0px 12.6px 25.2px rgba(50,50,93,0.25)) drop-shadow(0px 7.56px 15.12px rgba(0,0,0,0.1)); }
+}
+.animated-shape {
+	animation: shapeappear 1s linear infinite;
+}
+`,
+	)
+
 	appendOnTrigger(
 		buf,
 		source,
diff --git a/d2target/d2target.go b/d2target/d2target.go
index a2c6d680d..11da29688 100644
--- a/d2target/d2target.go
+++ b/d2target/d2target.go
@@ -469,6 +469,7 @@ type Shape struct {
 	FillPattern string `json:"fillPattern,omitempty"`
 	Stroke      string `json:"stroke"`
 
+	Animated     bool `json:"animated"`
 	Shadow       bool `json:"shadow"`
 	ThreeDee     bool `json:"3d"`
 	Multiple     bool `json:"multiple"`
diff --git a/e2etests/testdata/txtar/shape-animate/dagre/board.exp.json b/e2etests/testdata/txtar/shape-animate/dagre/board.exp.json
new file mode 100644
index 000000000..17f451a0e
--- /dev/null
+++ b/e2etests/testdata/txtar/shape-animate/dagre/board.exp.json
@@ -0,0 +1,1115 @@
+{
+  "name": "",
+  "config": {
+    "sketch": null,
+    "themeID": 300,
+    "darkThemeID": null,
+    "pad": null,
+    "center": null,
+    "layoutEngine": "elk"
+  },
+  "isFolderOnly": false,
+  "fontFamily": "SourceCodePro",
+  "shapes": [
+    {
+      "id": "network",
+      "type": "rectangle",
+      "pos": {
+        "x": 9,
+        "y": 227
+      },
+      "width": 404,
+      "height": 1198,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B4",
+      "fillPattern": "dots",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": true,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "NETWORK",
+      "fontSize": 28,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 116,
+      "labelHeight": 36,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "network.cell tower",
+      "type": "rectangle",
+      "pos": {
+        "x": 130,
+        "y": 268
+      },
+      "width": 253,
+      "height": 323,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B5",
+      "fillPattern": "dots",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "CELL TOWER",
+      "fontSize": 24,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 143,
+      "labelHeight": 31,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "network.cell tower.satellites",
+      "type": "stored_data",
+      "pos": {
+        "x": 176,
+        "y": 308
+      },
+      "width": 161,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "AA5",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": true,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "SATELLITES",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 96,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "network.cell tower.transmitter",
+      "type": "rectangle",
+      "pos": {
+        "x": 181,
+        "y": 495
+      },
+      "width": 151,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B6",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "TRANSMITTER",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 106,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "network.online portal",
+      "type": "rectangle",
+      "pos": {
+        "x": 39,
+        "y": 1266
+      },
+      "width": 125,
+      "height": 129,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B5",
+      "fillPattern": "dots",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "ONLINE PORTAL",
+      "fontSize": 24,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 185,
+      "labelHeight": 31,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "network.online portal.ui",
+      "type": "hexagon",
+      "pos": {
+        "x": 69,
+        "y": 1296
+      },
+      "width": 65,
+      "height": 69,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "N5",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "UI",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 18,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "network.data processor",
+      "type": "rectangle",
+      "pos": {
+        "x": 171,
+        "y": 742
+      },
+      "width": 182,
+      "height": 188,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B5",
+      "fillPattern": "dots",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "DATA PROCESSOR",
+      "fontSize": 24,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 200,
+      "labelHeight": 31,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "network.data processor.storage",
+      "type": "cylinder",
+      "pos": {
+        "x": 201,
+        "y": 782
+      },
+      "width": 112,
+      "height": 118,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "AA5",
+      "stroke": "B1",
+      "animated": true,
+      "shadow": false,
+      "3d": false,
+      "multiple": true,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "STORAGE",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 67,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "user",
+      "type": "person",
+      "pos": {
+        "x": 85,
+        "y": 0
+      },
+      "width": 130,
+      "height": 87,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B3",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "USER",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 21,
+      "labelPosition": "OUTSIDE_BOTTOM_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "api server",
+      "type": "rectangle",
+      "pos": {
+        "x": 497,
+        "y": 1050
+      },
+      "width": 142,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B6",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "API SERVER",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 97,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "logs",
+      "type": "page",
+      "pos": {
+        "x": 527,
+        "y": 1287
+      },
+      "width": 82,
+      "height": 87,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "AB4",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": true,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "LOGS",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 37,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "network.cell tower.(satellites -> transmitter)[0]",
+      "src": "network.cell tower.satellites",
+      "srcArrow": "none",
+      "dst": "network.cell tower.transmitter",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "SEND",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 228,
+          "y": 374
+        },
+        {
+          "x": 188.39999389648438,
+          "y": 422.3999938964844
+        },
+        {
+          "x": 188.5,
+          "y": 446.70001220703125
+        },
+        {
+          "x": 228.5,
+          "y": 495.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "network.cell tower.(satellites -> transmitter)[1]",
+      "src": "network.cell tower.satellites",
+      "srcArrow": "none",
+      "dst": "network.cell tower.transmitter",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "SEND",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 256,
+          "y": 374
+        },
+        {
+          "x": 256.39898681640625,
+          "y": 422.3999938964844
+        },
+        {
+          "x": 256.5,
+          "y": 446.70001220703125
+        },
+        {
+          "x": 256.5,
+          "y": 495.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "network.cell tower.(satellites -> transmitter)[2]",
+      "src": "network.cell tower.satellites",
+      "srcArrow": "none",
+      "dst": "network.cell tower.transmitter",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "SEND",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 285,
+          "y": 374
+        },
+        {
+          "x": 324.6000061035156,
+          "y": 422.3999938964844
+        },
+        {
+          "x": 324.5,
+          "y": 446.70001220703125
+        },
+        {
+          "x": 284.5,
+          "y": 495.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "network.(cell tower.transmitter -> data processor.storage)[0]",
+      "src": "network.cell tower.transmitter",
+      "srcArrow": "none",
+      "dst": "network.data processor.storage",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "PHONE LOGS",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 96,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 256.5,
+          "y": 561
+        },
+        {
+          "x": 256.5,
+          "y": 601
+        },
+        {
+          "x": 256.5,
+          "y": 623.0999755859375
+        },
+        {
+          "x": 256.5,
+          "y": 641.25
+        },
+        {
+          "x": 256.5,
+          "y": 659.4000244140625
+        },
+        {
+          "x": 256.6000061035156,
+          "y": 740
+        },
+        {
+          "x": 257,
+          "y": 772
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(user -> network.cell tower)[0]",
+      "src": "user",
+      "srcArrow": "none",
+      "dst": "network.cell tower",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "MAKE CALL",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 86,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 195,
+          "y": 87
+        },
+        {
+          "x": 244.1999969482422,
+          "y": 135.39999389648438
+        },
+        {
+          "x": 256.5,
+          "y": 212.8000030517578
+        },
+        {
+          "x": 256.5,
+          "y": 232
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(user -> network.online portal.ui)[0]",
+      "src": "user",
+      "srcArrow": "none",
+      "dst": "network.online portal.ui",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 3,
+      "strokeWidth": 2,
+      "stroke": "B2",
+      "label": "ACCESS",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 58,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 119,
+          "y": 87
+        },
+        {
+          "x": 84.80000305175781,
+          "y": 135.39999389648438
+        },
+        {
+          "x": 76.25,
+          "y": 159.60000610351562
+        },
+        {
+          "x": 76.25,
+          "y": 177.75
+        },
+        {
+          "x": 76.25,
+          "y": 195.89999389648438
+        },
+        {
+          "x": 76.25,
+          "y": 218
+        },
+        {
+          "x": 76.25,
+          "y": 233
+        },
+        {
+          "x": 76.25,
+          "y": 248
+        },
+        {
+          "x": 76.25,
+          "y": 274.6000061035156
+        },
+        {
+          "x": 76.25,
+          "y": 299.5
+        },
+        {
+          "x": 76.25,
+          "y": 324.3999938964844
+        },
+        {
+          "x": 76.25,
+          "y": 359.70001220703125
+        },
+        {
+          "x": 76.25,
+          "y": 387.75
+        },
+        {
+          "x": 76.25,
+          "y": 415.79998779296875
+        },
+        {
+          "x": 76.25,
+          "y": 453.20001220703125
+        },
+        {
+          "x": 76.25,
+          "y": 481.25
+        },
+        {
+          "x": 76.25,
+          "y": 509.29998779296875
+        },
+        {
+          "x": 76.25,
+          "y": 544.5999755859375
+        },
+        {
+          "x": 76.25,
+          "y": 569.5
+        },
+        {
+          "x": 76.25,
+          "y": 594.4000244140625
+        },
+        {
+          "x": 76.25,
+          "y": 623.0999755859375
+        },
+        {
+          "x": 76.25,
+          "y": 641.25
+        },
+        {
+          "x": 76.25,
+          "y": 659.4000244140625
+        },
+        {
+          "x": 76.25,
+          "y": 683.5999755859375
+        },
+        {
+          "x": 76.25,
+          "y": 701.75
+        },
+        {
+          "x": 76.25,
+          "y": 719.9000244140625
+        },
+        {
+          "x": 76.25,
+          "y": 753.7999877929688
+        },
+        {
+          "x": 76.25,
+          "y": 786.5
+        },
+        {
+          "x": 76.25,
+          "y": 819.2000122070312
+        },
+        {
+          "x": 76.25,
+          "y": 862.7999877929688
+        },
+        {
+          "x": 76.25,
+          "y": 895.5
+        },
+        {
+          "x": 76.25,
+          "y": 928.2000122070312
+        },
+        {
+          "x": 76.25,
+          "y": 960
+        },
+        {
+          "x": 76.25,
+          "y": 975
+        },
+        {
+          "x": 76.25,
+          "y": 990
+        },
+        {
+          "x": 76.25,
+          "y": 1016.5999755859375
+        },
+        {
+          "x": 76.25,
+          "y": 1041.5
+        },
+        {
+          "x": 76.25,
+          "y": 1066.4000244140625
+        },
+        {
+          "x": 76.25,
+          "y": 1101.699951171875
+        },
+        {
+          "x": 76.25,
+          "y": 1129.75
+        },
+        {
+          "x": 76.25,
+          "y": 1157.800048828125
+        },
+        {
+          "x": 79.4000015258789,
+          "y": 1248.800048828125
+        },
+        {
+          "x": 92,
+          "y": 1296
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(api server -> network.online portal.ui)[0]",
+      "src": "api server",
+      "srcArrow": "none",
+      "dst": "network.online portal.ui",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "DISPLAY",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 69,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 496.75,
+          "y": 1098.9189453125
+        },
+        {
+          "x": 203.9499969482422,
+          "y": 1160.9830322265625
+        },
+        {
+          "x": 127,
+          "y": 1248.800048828125
+        },
+        {
+          "x": 112,
+          "y": 1296
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(api server -> logs)[0]",
+      "src": "api server",
+      "srcArrow": "none",
+      "dst": "logs",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "PERSIST",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 68,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 567.75,
+          "y": 1115.5
+        },
+        {
+          "x": 567.75,
+          "y": 1164.300048828125
+        },
+        {
+          "x": 567.7999877929688,
+          "y": 1245
+        },
+        {
+          "x": 568,
+          "y": 1277
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(network.data processor -> api server)[0]",
+      "src": "network.data processor",
+      "srcArrow": "none",
+      "dst": "api server",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 256.5,
+          "y": 930
+        },
+        {
+          "x": 256.5,
+          "y": 986
+        },
+        {
+          "x": 304.54998779296875,
+          "y": 1012.552978515625
+        },
+        {
+          "x": 496.75,
+          "y": 1062.7659912109375
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "animated": false,
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}
diff --git a/e2etests/testdata/txtar/shape-animate/dagre/sketch.exp.svg b/e2etests/testdata/txtar/shape-animate/dagre/sketch.exp.svg
new file mode 100644
index 000000000..4f3f5774a
--- /dev/null
+++ b/e2etests/testdata/txtar/shape-animate/dagre/sketch.exp.svg
@@ -0,0 +1,168 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.8-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 632 1427"><svg id="d2-svg" class="d2-3776544641" width="632" height="1427" viewBox="8 -1 632 1427"><rect x="8.000000" y="-1.000000" width="632.000000" height="1427.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+@keyframes shapeappear {
+    0%, 100% { transform: translateY(0); filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)); }
+    50% { transform: translateY(-4px); filter: drop-shadow(0px 12.6px 25.2px rgba(50,50,93,0.25)) drop-shadow(0px 7.56px 15.12px rgba(0,0,0,0.1)); }
+}
+.animated-shape {
+	animation: shapeappear 1s linear infinite;
+}
+
+.d2-3776544641 .text-mono {
+	font-family: "d2-3776544641-font-mono";
+}
+@font-face {
+	font-family: d2-3776544641-font-mono;
+	src: url("data:application/font-woff;base64,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");
+}
+.d2-3776544641 .text-mono-bold {
+	font-family: "d2-3776544641-font-mono-bold";
+}
+@font-face {
+	font-family: d2-3776544641-font-mono-bold;
+	src: url("data:application/font-woff;base64,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");
+}
+.d2-3776544641 .text-mono-italic {
+	font-family: "d2-3776544641-font-mono-italic";
+}
+@font-face {
+	font-family: d2-3776544641-font-mono-italic;
+	src: url("data:application/font-woff;base64,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");
+}]]></style><style type="text/css"><![CDATA[.shape {
+  shape-rendering: geometricPrecision;
+  stroke-linejoin: round;
+}
+.connection {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.blend {
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+		.d2-3776544641 .fill-N1{fill:#000410;}
+		.d2-3776544641 .fill-N2{fill:#0000B8;}
+		.d2-3776544641 .fill-N3{fill:#9499AB;}
+		.d2-3776544641 .fill-N4{fill:#CFD2DD;}
+		.d2-3776544641 .fill-N5{fill:#C3DEF3;}
+		.d2-3776544641 .fill-N6{fill:#EEF1F8;}
+		.d2-3776544641 .fill-N7{fill:#FFFFFF;}
+		.d2-3776544641 .fill-B1{fill:#000410;}
+		.d2-3776544641 .fill-B2{fill:#0000E4;}
+		.d2-3776544641 .fill-B3{fill:#5AA4DC;}
+		.d2-3776544641 .fill-B4{fill:#E7E9EE;}
+		.d2-3776544641 .fill-B5{fill:#F5F6F9;}
+		.d2-3776544641 .fill-B6{fill:#FFFFFF;}
+		.d2-3776544641 .fill-AA2{fill:#008566;}
+		.d2-3776544641 .fill-AA4{fill:#45BBA5;}
+		.d2-3776544641 .fill-AA5{fill:#7ACCBD;}
+		.d2-3776544641 .fill-AB4{fill:#F1C759;}
+		.d2-3776544641 .fill-AB5{fill:#F9E088;}
+		.d2-3776544641 .stroke-N1{stroke:#000410;}
+		.d2-3776544641 .stroke-N2{stroke:#0000B8;}
+		.d2-3776544641 .stroke-N3{stroke:#9499AB;}
+		.d2-3776544641 .stroke-N4{stroke:#CFD2DD;}
+		.d2-3776544641 .stroke-N5{stroke:#C3DEF3;}
+		.d2-3776544641 .stroke-N6{stroke:#EEF1F8;}
+		.d2-3776544641 .stroke-N7{stroke:#FFFFFF;}
+		.d2-3776544641 .stroke-B1{stroke:#000410;}
+		.d2-3776544641 .stroke-B2{stroke:#0000E4;}
+		.d2-3776544641 .stroke-B3{stroke:#5AA4DC;}
+		.d2-3776544641 .stroke-B4{stroke:#E7E9EE;}
+		.d2-3776544641 .stroke-B5{stroke:#F5F6F9;}
+		.d2-3776544641 .stroke-B6{stroke:#FFFFFF;}
+		.d2-3776544641 .stroke-AA2{stroke:#008566;}
+		.d2-3776544641 .stroke-AA4{stroke:#45BBA5;}
+		.d2-3776544641 .stroke-AA5{stroke:#7ACCBD;}
+		.d2-3776544641 .stroke-AB4{stroke:#F1C759;}
+		.d2-3776544641 .stroke-AB5{stroke:#F9E088;}
+		.d2-3776544641 .background-color-N1{background-color:#000410;}
+		.d2-3776544641 .background-color-N2{background-color:#0000B8;}
+		.d2-3776544641 .background-color-N3{background-color:#9499AB;}
+		.d2-3776544641 .background-color-N4{background-color:#CFD2DD;}
+		.d2-3776544641 .background-color-N5{background-color:#C3DEF3;}
+		.d2-3776544641 .background-color-N6{background-color:#EEF1F8;}
+		.d2-3776544641 .background-color-N7{background-color:#FFFFFF;}
+		.d2-3776544641 .background-color-B1{background-color:#000410;}
+		.d2-3776544641 .background-color-B2{background-color:#0000E4;}
+		.d2-3776544641 .background-color-B3{background-color:#5AA4DC;}
+		.d2-3776544641 .background-color-B4{background-color:#E7E9EE;}
+		.d2-3776544641 .background-color-B5{background-color:#F5F6F9;}
+		.d2-3776544641 .background-color-B6{background-color:#FFFFFF;}
+		.d2-3776544641 .background-color-AA2{background-color:#008566;}
+		.d2-3776544641 .background-color-AA4{background-color:#45BBA5;}
+		.d2-3776544641 .background-color-AA5{background-color:#7ACCBD;}
+		.d2-3776544641 .background-color-AB4{background-color:#F1C759;}
+		.d2-3776544641 .background-color-AB5{background-color:#F9E088;}
+		.d2-3776544641 .color-N1{color:#000410;}
+		.d2-3776544641 .color-N2{color:#0000B8;}
+		.d2-3776544641 .color-N3{color:#9499AB;}
+		.d2-3776544641 .color-N4{color:#CFD2DD;}
+		.d2-3776544641 .color-N5{color:#C3DEF3;}
+		.d2-3776544641 .color-N6{color:#EEF1F8;}
+		.d2-3776544641 .color-N7{color:#FFFFFF;}
+		.d2-3776544641 .color-B1{color:#000410;}
+		.d2-3776544641 .color-B2{color:#0000E4;}
+		.d2-3776544641 .color-B3{color:#5AA4DC;}
+		.d2-3776544641 .color-B4{color:#E7E9EE;}
+		.d2-3776544641 .color-B5{color:#F5F6F9;}
+		.d2-3776544641 .color-B6{color:#FFFFFF;}
+		.d2-3776544641 .color-AA2{color:#008566;}
+		.d2-3776544641 .color-AA4{color:#45BBA5;}
+		.d2-3776544641 .color-AA5{color:#7ACCBD;}
+		.d2-3776544641 .color-AB4{color:#F1C759;}
+		.d2-3776544641 .color-AB5{color:#F9E088;}.appendix text.text{fill:#000410}.md{--color-fg-default:#000410;--color-fg-muted:#0000B8;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#000410;--color-border-muted:#0000E4;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0000E4;--color-accent-emphasis:#0000E4;--color-attention-subtle:#0000B8;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><style type="text/css"><![CDATA[
+.dots-overlay {
+	fill: url(#dots);
+	mix-blend-mode: multiply;
+}]]></style><defs><pattern id="dots" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="2" y="2" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="12" y="2" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="12" y="12" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="2" y="12" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="2" y="7" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="12" y="7" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="7" y="2" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="7" y="12" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="7" y="7" width="1" height="1" fill="#0A0F25"/>
+</g>
+</pattern>
+</defs><g id="network"><g class="shape" ><rect x="9.000000" y="227.000000" width="404.000000" height="1198.000000" stroke="#000410" fill="#E7E9EE" class=" stroke-B1 fill-B4" style="stroke-width:2;" /><rect x="9.000000" y="227.000000" width="404.000000" height="1198.000000" class="dots-overlay" style="stroke-width:2;" /><rect x="14.000000" y="232.000000" width="394.000000" height="1188.000000" stroke="#000410" fill="transparent" class=" stroke-B1" style="stroke-width:2;" /></g><text x="211.000000" y="214.000000" fill="#000410" class="text-mono fill-N1" style="text-anchor:middle;font-size:28px">NETWORK</text></g><g id="user"><g class="shape" ><path d="M 215 87 H 85 V 86 C 85 71 99 58 122 51 C 109 46 102 38 102 28 C 102 13 123 0 150 0 C 176 0 198 13 198 28 C 198 37 191 46 178 51 C 200 57 215 71 215 86 V 87 H 215 Z" stroke="#000410" fill="#5AA4DC" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="150.000000" y="108.000000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">USER</text></g><g id="api server"><g class="shape" ><rect x="497.000000" y="1050.000000" width="142.000000" height="66.000000" stroke="#000410" fill="#FFFFFF" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="568.000000" y="1088.500000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">API SERVER</text></g><g id="logs"><g class="shape" ><path d="M 538 1277 H 598 C 599 1277 600 1277 601 1278 L 618 1294 C 619 1295 619 1296 619 1297 V 1364 C 619 1364 619 1364 619 1364 H 538 C 537 1364 537 1364 537 1364 V 1278 C 537 1277 537 1277 538 1277 Z" stroke="#000410" fill="#F1C759" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 618 1364 H 538 C 537 1364 537 1364 537 1363 V 1278 C 537 1277 537 1277 538 1277 H 597 C 598 1277 598 1277 598 1278 V 1295 C 598 1296 599 1297 600 1297 H 618 C 619 1297 619 1297 619 1298 V 1363 C 618 1364 619 1364 618 1364 Z" stroke="#000410" fill="#F1C759" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 528 1287 H 588 C 589 1287 590 1287 591 1288 L 608 1304 C 609 1305 609 1306 609 1307 V 1374 C 609 1374 609 1374 609 1374 H 528 C 527 1374 527 1374 527 1374 V 1288 C 527 1287 527 1287 528 1287 Z" stroke="#000410" fill="#F1C759" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 608 1374 H 528 C 527 1374 527 1374 527 1373 V 1288 C 527 1287 527 1287 528 1287 H 587 C 588 1287 588 1287 588 1288 V 1305 C 588 1306 589 1307 590 1307 H 608 C 609 1307 609 1307 609 1308 V 1373 C 608 1374 609 1374 608 1374 Z" stroke="#000410" fill="#F1C759" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="568.000000" y="1336.000000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">LOGS</text></g><g id="network.cell tower"><g class="shape" ><rect x="130.000000" y="268.000000" width="253.000000" height="323.000000" stroke="#000410" fill="#F5F6F9" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><rect x="130.000000" y="268.000000" width="253.000000" height="323.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="256.500000" y="256.000000" fill="#000410" class="text-mono fill-N1" style="text-anchor:middle;font-size:24px">CELL TOWER</text></g><g id="network.online portal"><g class="shape" ><rect x="39.000000" y="1266.000000" width="125.000000" height="129.000000" stroke="#000410" fill="#F5F6F9" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><rect x="39.000000" y="1266.000000" width="125.000000" height="129.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="101.500000" y="1254.000000" fill="#000410" class="text-mono fill-N1" style="text-anchor:middle;font-size:24px">ONLINE PORTAL</text></g><g id="network.data processor"><g class="shape" ><rect x="171.000000" y="742.000000" width="182.000000" height="188.000000" stroke="#000410" fill="#F5F6F9" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><rect x="171.000000" y="742.000000" width="182.000000" height="188.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="262.000000" y="730.000000" fill="#000410" class="text-mono fill-N1" style="text-anchor:middle;font-size:24px">DATA PROCESSOR</text></g><g id="network.cell tower.satellites"><g class="shape" ><path d="M 201 298 H 347 C 343 298 332 316 332 331 C 332 346 343 364 347 364 H 201 C 197 364 186 346 186 331 C 186 316 197 298 201 298 Z" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /><path d="M 191 308 H 337 C 333 308 322 326 322 341 C 322 356 333 374 337 374 H 191 C 187 374 176 356 176 341 C 176 326 187 308 191 308 Z" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /></g><text x="256.500000" y="346.500000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">SATELLITES</text></g><g id="network.cell tower.transmitter"><g class="shape" ><rect x="181.000000" y="495.000000" width="151.000000" height="66.000000" stroke="#000410" fill="#FFFFFF" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="256.500000" y="533.500000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">TRANSMITTER</text></g><g id="network.online portal.ui"><g class="shape" ><path d="M 85 1296 L 69 1330 L 85 1365 L 118 1365 L 134 1330 L 118 1296 Z" stroke="#000410" fill="#C3DEF3" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="101.500000" y="1336.000000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">UI</text></g><g id="network.data processor.storage" class="animated-shape"><g class="shape" ><path d="M 211 796 C 211 772 261 772 267 772 C 273 772 323 772 323 796 V 866 C 323 890 273 890 267 890 C 261 890 211 890 211 866 V 796 Z" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /><path d="M 211 796 C 211 820 261 820 267 820 C 273 820 323 820 323 796" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /><path d="M 201 806 C 201 782 251 782 257 782 C 263 782 313 782 313 806 V 876 C 313 900 263 900 257 900 C 251 900 201 900 201 876 V 806 Z" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /><path d="M 201 806 C 201 830 251 830 257 830 C 263 830 313 830 313 806" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /></g><text x="257.000000" y="858.500000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">STORAGE</text></g><g id="network.cell tower.(satellites -&gt; transmitter)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#000410" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 226.733524 375.547914 C 188.399994 422.399994 188.500000 446.700012 225.964288 492.406432" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3776544641)" /><text x="188.000000" y="440.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><g id="network.cell tower.(satellites -&gt; transmitter)[1]"><path d="M 256.016487 375.999932 C 256.398987 422.399994 256.500000 446.700012 256.500000 491.500000" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3776544641)" /><text x="256.000000" y="440.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><g id="network.cell tower.(satellites -&gt; transmitter)[2]"><path d="M 286.266476 375.547914 C 324.600006 422.399994 324.500000 446.700012 287.035712 492.406432" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3776544641)" /><text x="325.000000" y="440.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><g id="network.(cell tower.transmitter -&gt; data processor.storage)[0]"><path d="M 256.500000 563.000000 C 256.500000 601.000000 256.500000 623.099976 256.500000 641.250000 C 256.500000 659.400024 256.600006 740.000000 256.950005 768.000312" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3776544641)" /><text x="257.000000" y="672.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">PHONE LOGS</text></g><g id="(user -&gt; network.cell tower)[0]"><path d="M 196.425758 88.402574 C 244.199997 135.399994 256.500000 212.800003 256.500000 228.000000" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3776544641)" /><text x="246.000000" y="155.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">MAKE CALL</text></g><g id="(user -&gt; network.online portal.ui)[0]"><marker id="mk-2177206569" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0000E4" class="connection fill-B2" stroke-width="2" /> </marker><path d="M 117.845839 88.633374 C 84.800003 135.399994 76.250000 159.600006 76.250000 177.750000 C 76.250000 195.899994 76.250000 218.000000 76.250000 233.000000 C 76.250000 248.000000 76.250000 274.600006 76.250000 299.500000 C 76.250000 324.399994 76.250000 359.700012 76.250000 387.750000 C 76.250000 415.799988 76.250000 453.200012 76.250000 481.250000 C 76.250000 509.299988 76.250000 544.599976 76.250000 569.500000 C 76.250000 594.400024 76.250000 623.099976 76.250000 641.250000 C 76.250000 659.400024 76.250000 683.599976 76.250000 701.750000 C 76.250000 719.900024 76.250000 753.799988 76.250000 786.500000 C 76.250000 819.200012 76.250000 862.799988 76.250000 895.500000 C 76.250000 928.200012 76.250000 960.000000 76.250000 975.000000 C 76.250000 990.000000 76.250000 1016.599976 76.250000 1041.500000 C 76.250000 1066.400024 76.250000 1101.699951 76.250000 1129.750000 C 76.250000 1157.800049 79.400002 1248.800049 90.968329 1292.135332" stroke="#0000E4" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:6.000000,5.919384;" marker-end="url(#mk-2177206569)" mask="url(#d2-3776544641)" /><text x="76.000000" y="692.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">ACCESS</text></g><g id="(api server -&gt; network.online portal.ui)[0]"><path d="M 494.793471 1099.333666 C 203.949997 1160.983032 127.000000 1248.800049 113.211482 1292.187873" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3776544641)" /><text x="269.500000" y="1153.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">DISPLAY</text></g><g id="(api server -&gt; logs)[0]"><path d="M 567.750000 1117.500000 C 567.750000 1164.300049 567.799988 1245.000000 567.974999 1273.000078" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3776544641)" /><text x="568.000000" y="1202.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">PERSIST</text></g><g id="(network.data processor -&gt; api server)[0]"><path d="M 256.500000 932.000000 C 256.500000 986.000000 304.549988 1012.552979 492.879895 1061.754911" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-3776544641)" /></g><mask id="d2-3776544641" maskUnits="userSpaceOnUse" x="8" y="-1" width="632" height="1427">
+<rect x="8" y="-1" width="632" height="1427" fill="white"></rect>
+<rect x="153.000000" y="186.000000" width="116" height="36" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="131.000000" y="92.000000" width="38" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="519.500000" y="1072.500000" width="97" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="549.500000" y="1320.000000" width="37" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="185.000000" y="232.000000" width="143" height="31" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="9.000000" y="1230.000000" width="185" height="31" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="162.000000" y="706.000000" width="200" height="31" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="208.500000" y="330.500000" width="96" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="203.500000" y="517.500000" width="106" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="92.500000" y="1320.000000" width="18" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="223.500000" y="842.500000" width="67" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="169.000000" y="424.000000" width="38" height="21" fill="black"></rect>
+<rect x="237.000000" y="424.000000" width="38" height="21" fill="black"></rect>
+<rect x="306.000000" y="424.000000" width="38" height="21" fill="black"></rect>
+<rect x="209.000000" y="656.000000" width="96" height="21" fill="black"></rect>
+<rect x="203.000000" y="139.000000" width="86" height="21" fill="black"></rect>
+<rect x="47.000000" y="676.000000" width="58" height="21" fill="black"></rect>
+<rect x="235.000000" y="1137.000000" width="69" height="21" fill="black"></rect>
+<rect x="534.000000" y="1186.000000" width="68" height="21" fill="black"></rect>
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/testdata/txtar/shape-animate/elk/board.exp.json b/e2etests/testdata/txtar/shape-animate/elk/board.exp.json
new file mode 100644
index 000000000..54216fb87
--- /dev/null
+++ b/e2etests/testdata/txtar/shape-animate/elk/board.exp.json
@@ -0,0 +1,906 @@
+{
+  "name": "",
+  "config": {
+    "sketch": null,
+    "themeID": 300,
+    "darkThemeID": null,
+    "pad": null,
+    "center": null,
+    "layoutEngine": "elk"
+  },
+  "isFolderOnly": false,
+  "fontFamily": "SourceCodePro",
+  "shapes": [
+    {
+      "id": "network",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 311
+      },
+      "width": 621,
+      "height": 922,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B4",
+      "fillPattern": "dots",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": true,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "NETWORK",
+      "fontSize": 28,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 116,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "network.cell tower",
+      "type": "rectangle",
+      "pos": {
+        "x": 62,
+        "y": 361
+      },
+      "width": 271,
+      "height": 423,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B5",
+      "fillPattern": "dots",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "CELL TOWER",
+      "fontSize": 24,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 143,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "network.cell tower.satellites",
+      "type": "stored_data",
+      "pos": {
+        "x": 112,
+        "y": 421
+      },
+      "width": 161,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "AA5",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": true,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "SATELLITES",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 96,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "network.cell tower.transmitter",
+      "type": "rectangle",
+      "pos": {
+        "x": 122,
+        "y": 668
+      },
+      "width": 151,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B6",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "TRANSMITTER",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 106,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "network.online portal",
+      "type": "rectangle",
+      "pos": {
+        "x": 353,
+        "y": 366
+      },
+      "width": 230,
+      "height": 169,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B5",
+      "fillPattern": "dots",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "ONLINE PORTAL",
+      "fontSize": 24,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 185,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "network.online portal.ui",
+      "type": "hexagon",
+      "pos": {
+        "x": 428,
+        "y": 416
+      },
+      "width": 80,
+      "height": 69,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "N5",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "UI",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 18,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "network.data processor",
+      "type": "rectangle",
+      "pos": {
+        "x": 75,
+        "y": 955
+      },
+      "width": 245,
+      "height": 228,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B5",
+      "fillPattern": "dots",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "DATA PROCESSOR",
+      "fontSize": 24,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 200,
+      "labelHeight": 31,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "network.data processor.storage",
+      "type": "cylinder",
+      "pos": {
+        "x": 136,
+        "y": 1015
+      },
+      "width": 112,
+      "height": 118,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "AA5",
+      "stroke": "B1",
+      "animated": true,
+      "shadow": false,
+      "3d": false,
+      "multiple": true,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "STORAGE",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 67,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 3
+    },
+    {
+      "id": "user",
+      "type": "person",
+      "pos": {
+        "x": 218,
+        "y": 12
+      },
+      "width": 130,
+      "height": 87,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B3",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "USER",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 21,
+      "labelPosition": "OUTSIDE_BOTTOM_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "api server",
+      "type": "rectangle",
+      "pos": {
+        "x": 341,
+        "y": 1388
+      },
+      "width": 142,
+      "height": 66,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "B6",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "API SERVER",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 97,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "logs",
+      "type": "page",
+      "pos": {
+        "x": 366,
+        "y": 1625
+      },
+      "width": 82,
+      "height": 87,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "AB4",
+      "stroke": "B1",
+      "animated": false,
+      "shadow": false,
+      "3d": false,
+      "multiple": true,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "LOGS",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 37,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [
+    {
+      "id": "network.cell tower.(satellites -> transmitter)[0]",
+      "src": "network.cell tower.satellites",
+      "srcArrow": "none",
+      "dst": "network.cell tower.transmitter",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "SEND",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 148,
+          "y": 487
+        },
+        {
+          "x": 148.5,
+          "y": 668
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "network.cell tower.(satellites -> transmitter)[1]",
+      "src": "network.cell tower.satellites",
+      "srcArrow": "none",
+      "dst": "network.cell tower.transmitter",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "SEND",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 197,
+          "y": 487
+        },
+        {
+          "x": 198,
+          "y": 668
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "network.cell tower.(satellites -> transmitter)[2]",
+      "src": "network.cell tower.satellites",
+      "srcArrow": "none",
+      "dst": "network.cell tower.transmitter",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "SEND",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 38,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 246,
+          "y": 487
+        },
+        {
+          "x": 246.5,
+          "y": 668
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "network.(cell tower.transmitter -> data processor.storage)[0]",
+      "src": "network.cell tower.transmitter",
+      "srcArrow": "none",
+      "dst": "network.data processor.storage",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "PHONE LOGS",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 96,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 197.5,
+          "y": 734
+        },
+        {
+          "x": 198,
+          "y": 1005
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(user -> network.cell tower)[0]",
+      "src": "user",
+      "srcArrow": "none",
+      "dst": "network.cell tower",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "MAKE CALL",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 86,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 261.6659851074219,
+          "y": 125
+        },
+        {
+          "x": 261.6659851074219,
+          "y": 165
+        },
+        {
+          "x": 117.91600036621094,
+          "y": 165
+        },
+        {
+          "x": 117.91600036621094,
+          "y": 361
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(user -> network.online portal.ui)[0]",
+      "src": "user",
+      "srcArrow": "none",
+      "dst": "network.online portal.ui",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 3,
+      "strokeWidth": 2,
+      "stroke": "B2",
+      "label": "ACCESS",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 58,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 305,
+          "y": 125
+        },
+        {
+          "x": 305,
+          "y": 165
+        },
+        {
+          "x": 448.75,
+          "y": 165
+        },
+        {
+          "x": 449,
+          "y": 416
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(api server -> network.online portal.ui)[0]",
+      "src": "api server",
+      "srcArrow": "none",
+      "dst": "network.online portal.ui",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "DISPLAY",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 69,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 435.6659851074219,
+          "y": 1388
+        },
+        {
+          "x": 435.6659851074219,
+          "y": 1348
+        },
+        {
+          "x": 687.5,
+          "y": 1348
+        },
+        {
+          "x": 687.5,
+          "y": 266
+        },
+        {
+          "x": 481.3330078125,
+          "y": 266
+        },
+        {
+          "x": 481,
+          "y": 416
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(api server -> logs)[0]",
+      "src": "api server",
+      "srcArrow": "none",
+      "dst": "logs",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "PERSIST",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 68,
+      "labelHeight": 21,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 412,
+          "y": 1454
+        },
+        {
+          "x": 412,
+          "y": 1615
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(network.data processor -> api server)[0]",
+      "src": "network.data processor",
+      "srcArrow": "none",
+      "dst": "api server",
+      "dstArrow": "triangle",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "B1",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "mono",
+      "language": "",
+      "color": "N2",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "link": "",
+      "route": [
+        {
+          "x": 136.5,
+          "y": 1183
+        },
+        {
+          "x": 136.5,
+          "y": 1348
+        },
+        {
+          "x": 388.3330078125,
+          "y": 1348
+        },
+        {
+          "x": 388.3330078125,
+          "y": 1388
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "animated": false,
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}
diff --git a/e2etests/testdata/txtar/shape-animate/elk/sketch.exp.svg b/e2etests/testdata/txtar/shape-animate/elk/sketch.exp.svg
new file mode 100644
index 000000000..25e22380c
--- /dev/null
+++ b/e2etests/testdata/txtar/shape-animate/elk/sketch.exp.svg
@@ -0,0 +1,168 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.8-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 711 1702"><svg id="d2-svg" class="d2-4286216148" width="711" height="1702" viewBox="11 11 711 1702"><rect x="11.000000" y="11.000000" width="711.000000" height="1702.000000" rx="0.000000" fill="#FFFFFF" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+@keyframes shapeappear {
+    0%, 100% { transform: translateY(0); filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)); }
+    50% { transform: translateY(-4px); filter: drop-shadow(0px 12.6px 25.2px rgba(50,50,93,0.25)) drop-shadow(0px 7.56px 15.12px rgba(0,0,0,0.1)); }
+}
+.animated-shape {
+	animation: shapeappear 1s linear infinite;
+}
+
+.d2-4286216148 .text-mono {
+	font-family: "d2-4286216148-font-mono";
+}
+@font-face {
+	font-family: d2-4286216148-font-mono;
+	src: url("data:application/font-woff;base64,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");
+}
+.d2-4286216148 .text-mono-bold {
+	font-family: "d2-4286216148-font-mono-bold";
+}
+@font-face {
+	font-family: d2-4286216148-font-mono-bold;
+	src: url("data:application/font-woff;base64,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");
+}
+.d2-4286216148 .text-mono-italic {
+	font-family: "d2-4286216148-font-mono-italic";
+}
+@font-face {
+	font-family: d2-4286216148-font-mono-italic;
+	src: url("data:application/font-woff;base64,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");
+}]]></style><style type="text/css"><![CDATA[.shape {
+  shape-rendering: geometricPrecision;
+  stroke-linejoin: round;
+}
+.connection {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.blend {
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+		.d2-4286216148 .fill-N1{fill:#000410;}
+		.d2-4286216148 .fill-N2{fill:#0000B8;}
+		.d2-4286216148 .fill-N3{fill:#9499AB;}
+		.d2-4286216148 .fill-N4{fill:#CFD2DD;}
+		.d2-4286216148 .fill-N5{fill:#C3DEF3;}
+		.d2-4286216148 .fill-N6{fill:#EEF1F8;}
+		.d2-4286216148 .fill-N7{fill:#FFFFFF;}
+		.d2-4286216148 .fill-B1{fill:#000410;}
+		.d2-4286216148 .fill-B2{fill:#0000E4;}
+		.d2-4286216148 .fill-B3{fill:#5AA4DC;}
+		.d2-4286216148 .fill-B4{fill:#E7E9EE;}
+		.d2-4286216148 .fill-B5{fill:#F5F6F9;}
+		.d2-4286216148 .fill-B6{fill:#FFFFFF;}
+		.d2-4286216148 .fill-AA2{fill:#008566;}
+		.d2-4286216148 .fill-AA4{fill:#45BBA5;}
+		.d2-4286216148 .fill-AA5{fill:#7ACCBD;}
+		.d2-4286216148 .fill-AB4{fill:#F1C759;}
+		.d2-4286216148 .fill-AB5{fill:#F9E088;}
+		.d2-4286216148 .stroke-N1{stroke:#000410;}
+		.d2-4286216148 .stroke-N2{stroke:#0000B8;}
+		.d2-4286216148 .stroke-N3{stroke:#9499AB;}
+		.d2-4286216148 .stroke-N4{stroke:#CFD2DD;}
+		.d2-4286216148 .stroke-N5{stroke:#C3DEF3;}
+		.d2-4286216148 .stroke-N6{stroke:#EEF1F8;}
+		.d2-4286216148 .stroke-N7{stroke:#FFFFFF;}
+		.d2-4286216148 .stroke-B1{stroke:#000410;}
+		.d2-4286216148 .stroke-B2{stroke:#0000E4;}
+		.d2-4286216148 .stroke-B3{stroke:#5AA4DC;}
+		.d2-4286216148 .stroke-B4{stroke:#E7E9EE;}
+		.d2-4286216148 .stroke-B5{stroke:#F5F6F9;}
+		.d2-4286216148 .stroke-B6{stroke:#FFFFFF;}
+		.d2-4286216148 .stroke-AA2{stroke:#008566;}
+		.d2-4286216148 .stroke-AA4{stroke:#45BBA5;}
+		.d2-4286216148 .stroke-AA5{stroke:#7ACCBD;}
+		.d2-4286216148 .stroke-AB4{stroke:#F1C759;}
+		.d2-4286216148 .stroke-AB5{stroke:#F9E088;}
+		.d2-4286216148 .background-color-N1{background-color:#000410;}
+		.d2-4286216148 .background-color-N2{background-color:#0000B8;}
+		.d2-4286216148 .background-color-N3{background-color:#9499AB;}
+		.d2-4286216148 .background-color-N4{background-color:#CFD2DD;}
+		.d2-4286216148 .background-color-N5{background-color:#C3DEF3;}
+		.d2-4286216148 .background-color-N6{background-color:#EEF1F8;}
+		.d2-4286216148 .background-color-N7{background-color:#FFFFFF;}
+		.d2-4286216148 .background-color-B1{background-color:#000410;}
+		.d2-4286216148 .background-color-B2{background-color:#0000E4;}
+		.d2-4286216148 .background-color-B3{background-color:#5AA4DC;}
+		.d2-4286216148 .background-color-B4{background-color:#E7E9EE;}
+		.d2-4286216148 .background-color-B5{background-color:#F5F6F9;}
+		.d2-4286216148 .background-color-B6{background-color:#FFFFFF;}
+		.d2-4286216148 .background-color-AA2{background-color:#008566;}
+		.d2-4286216148 .background-color-AA4{background-color:#45BBA5;}
+		.d2-4286216148 .background-color-AA5{background-color:#7ACCBD;}
+		.d2-4286216148 .background-color-AB4{background-color:#F1C759;}
+		.d2-4286216148 .background-color-AB5{background-color:#F9E088;}
+		.d2-4286216148 .color-N1{color:#000410;}
+		.d2-4286216148 .color-N2{color:#0000B8;}
+		.d2-4286216148 .color-N3{color:#9499AB;}
+		.d2-4286216148 .color-N4{color:#CFD2DD;}
+		.d2-4286216148 .color-N5{color:#C3DEF3;}
+		.d2-4286216148 .color-N6{color:#EEF1F8;}
+		.d2-4286216148 .color-N7{color:#FFFFFF;}
+		.d2-4286216148 .color-B1{color:#000410;}
+		.d2-4286216148 .color-B2{color:#0000E4;}
+		.d2-4286216148 .color-B3{color:#5AA4DC;}
+		.d2-4286216148 .color-B4{color:#E7E9EE;}
+		.d2-4286216148 .color-B5{color:#F5F6F9;}
+		.d2-4286216148 .color-B6{color:#FFFFFF;}
+		.d2-4286216148 .color-AA2{color:#008566;}
+		.d2-4286216148 .color-AA4{color:#45BBA5;}
+		.d2-4286216148 .color-AA5{color:#7ACCBD;}
+		.d2-4286216148 .color-AB4{color:#F1C759;}
+		.d2-4286216148 .color-AB5{color:#F9E088;}.appendix text.text{fill:#000410}.md{--color-fg-default:#000410;--color-fg-muted:#0000B8;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#000410;--color-border-muted:#0000E4;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0000E4;--color-accent-emphasis:#0000E4;--color-attention-subtle:#0000B8;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><style type="text/css"><![CDATA[
+.dots-overlay {
+	fill: url(#dots);
+	mix-blend-mode: multiply;
+}]]></style><defs><pattern id="dots" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="2" y="2" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="12" y="2" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="12" y="12" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="2" y="12" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="2" y="7" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="12" y="7" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="7" y="2" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="7" y="12" width="1" height="1" fill="#0A0F25"/>
+</g>
+<g style="mix-blend-mode:multiply" opacity="0.1">
+<rect x="7" y="7" width="1" height="1" fill="#0A0F25"/>
+</g>
+</pattern>
+</defs><g id="network"><g class="shape" ><rect x="12.000000" y="311.000000" width="621.000000" height="922.000000" stroke="#000410" fill="#E7E9EE" class=" stroke-B1 fill-B4" style="stroke-width:2;" /><rect x="12.000000" y="311.000000" width="621.000000" height="922.000000" class="dots-overlay" style="stroke-width:2;" /><rect x="17.000000" y="316.000000" width="611.000000" height="912.000000" stroke="#000410" fill="transparent" class=" stroke-B1" style="stroke-width:2;" /></g><text x="322.500000" y="344.000000" fill="#000410" class="text-mono fill-N1" style="text-anchor:middle;font-size:28px">NETWORK</text></g><g id="user"><g class="shape" ><path d="M 348 99 H 218 V 98 C 218 83 232 70 255 63 C 242 58 235 50 235 40 C 235 25 256 12 283 12 C 309 12 331 25 331 40 C 331 49 324 58 311 63 C 333 69 348 83 348 98 V 99 H 348 Z" stroke="#000410" fill="#5AA4DC" class=" stroke-B1 fill-B3" style="stroke-width:2;" /></g><text x="283.000000" y="120.000000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">USER</text></g><g id="api server"><g class="shape" ><rect x="341.000000" y="1388.000000" width="142.000000" height="66.000000" stroke="#000410" fill="#FFFFFF" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="412.000000" y="1426.500000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">API SERVER</text></g><g id="logs"><g class="shape" ><path d="M 377 1615 H 437 C 438 1615 439 1615 440 1616 L 457 1632 C 458 1633 458 1634 458 1635 V 1702 C 458 1702 458 1702 458 1702 H 377 C 376 1702 376 1702 376 1702 V 1616 C 376 1615 376 1615 377 1615 Z" stroke="#000410" fill="#F1C759" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 457 1702 H 377 C 376 1702 376 1702 376 1701 V 1616 C 376 1615 376 1615 377 1615 H 436 C 437 1615 437 1615 437 1616 V 1633 C 437 1634 438 1635 439 1635 H 457 C 458 1635 458 1635 458 1636 V 1701 C 457 1702 458 1702 457 1702 Z" stroke="#000410" fill="#F1C759" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 367 1625 H 427 C 428 1625 429 1625 430 1626 L 447 1642 C 448 1643 448 1644 448 1645 V 1712 C 448 1712 448 1712 448 1712 H 367 C 366 1712 366 1712 366 1712 V 1626 C 366 1625 366 1625 367 1625 Z" stroke="#000410" fill="#F1C759" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /><path d="M 447 1712 H 367 C 366 1712 366 1712 366 1711 V 1626 C 366 1625 366 1625 367 1625 H 426 C 427 1625 427 1625 427 1626 V 1643 C 427 1644 428 1645 429 1645 H 447 C 448 1645 448 1645 448 1646 V 1711 C 447 1712 448 1712 447 1712 Z" stroke="#000410" fill="#F1C759" class=" stroke-B1 fill-AB4" style="stroke-width:2;" /></g><text x="407.000000" y="1674.000000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">LOGS</text></g><g id="network.cell tower"><g class="shape" ><rect x="62.000000" y="361.000000" width="271.000000" height="423.000000" stroke="#000410" fill="#F5F6F9" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><rect x="62.000000" y="361.000000" width="271.000000" height="423.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="197.500000" y="390.000000" fill="#000410" class="text-mono fill-N1" style="text-anchor:middle;font-size:24px">CELL TOWER</text></g><g id="network.online portal"><g class="shape" ><rect x="353.000000" y="366.000000" width="230.000000" height="169.000000" stroke="#000410" fill="#F5F6F9" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><rect x="353.000000" y="366.000000" width="230.000000" height="169.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="468.000000" y="395.000000" fill="#000410" class="text-mono fill-N1" style="text-anchor:middle;font-size:24px">ONLINE PORTAL</text></g><g id="network.data processor"><g class="shape" ><rect x="75.000000" y="955.000000" width="245.000000" height="228.000000" stroke="#000410" fill="#F5F6F9" class=" stroke-B1 fill-B5" style="stroke-width:2;" /><rect x="75.000000" y="955.000000" width="245.000000" height="228.000000" class="dots-overlay" style="stroke-width:2;" /></g><text x="197.500000" y="984.000000" fill="#000410" class="text-mono fill-N1" style="text-anchor:middle;font-size:24px">DATA PROCESSOR</text></g><g id="network.cell tower.satellites"><g class="shape" ><path d="M 137 411 H 283 C 279 411 268 429 268 444 C 268 459 279 477 283 477 H 137 C 133 477 122 459 122 444 C 122 429 133 411 137 411 Z" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /><path d="M 127 421 H 273 C 269 421 258 439 258 454 C 258 469 269 487 273 487 H 127 C 123 487 112 469 112 454 C 112 439 123 421 127 421 Z" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /></g><text x="192.500000" y="459.500000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">SATELLITES</text></g><g id="network.cell tower.transmitter"><g class="shape" ><rect x="122.000000" y="668.000000" width="151.000000" height="66.000000" stroke="#000410" fill="#FFFFFF" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="197.500000" y="706.500000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">TRANSMITTER</text></g><g id="network.online portal.ui"><g class="shape" ><path d="M 448 416 L 428 450 L 448 485 L 488 485 L 508 450 L 488 416 Z" stroke="#000410" fill="#C3DEF3" class=" stroke-B1 fill-N5" style="stroke-width:2;" /></g><text x="468.000000" y="456.000000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">UI</text></g><g id="network.data processor.storage" class="animated-shape"><g class="shape" ><path d="M 146 1029 C 146 1005 196 1005 202 1005 C 208 1005 258 1005 258 1029 V 1099 C 258 1123 208 1123 202 1123 C 196 1123 146 1123 146 1099 V 1029 Z" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /><path d="M 146 1029 C 146 1053 196 1053 202 1053 C 208 1053 258 1053 258 1029" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /><path d="M 136 1039 C 136 1015 186 1015 192 1015 C 198 1015 248 1015 248 1039 V 1109 C 248 1133 198 1133 192 1133 C 186 1133 136 1133 136 1109 V 1039 Z" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /><path d="M 136 1039 C 136 1063 186 1063 192 1063 C 198 1063 248 1063 248 1039" stroke="#000410" fill="#7ACCBD" class=" stroke-B1 fill-AA5" style="stroke-width:2;" /></g><text x="192.000000" y="1091.500000" fill="#000410" class="text-mono-bold fill-N1" style="text-anchor:middle;font-size:16px">STORAGE</text></g><g id="network.cell tower.(satellites -&gt; transmitter)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#000410" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 148.005525 488.999992 L 148.488950 664.000015" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4286216148)" /><text x="148.000000" y="583.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><g id="network.cell tower.(satellites -&gt; transmitter)[1]"><path d="M 197.011050 488.999969 L 197.977901 664.000061" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4286216148)" /><text x="198.000000" y="583.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><g id="network.cell tower.(satellites -&gt; transmitter)[2]"><path d="M 246.005525 488.999992 L 246.488950 664.000015" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4286216148)" /><text x="246.000000" y="583.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">SEND</text></g><g id="network.(cell tower.transmitter -&gt; data processor.storage)[0]"><path d="M 197.503690 735.999997 L 197.992620 1001.000007" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4286216148)" /><text x="198.000000" y="875.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">PHONE LOGS</text></g><g id="(user -&gt; network.cell tower)[0]"><path d="M 261.665985 127.000000 L 261.665985 165.000000 S 261.665985 165.000000 261.665985 165.000000 L 117.916000 165.000000 S 117.916000 165.000000 117.916000 165.000000 L 117.916000 357.000000" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4286216148)" /><text x="118.000000" y="177.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">MAKE CALL</text></g><g id="(user -&gt; network.online portal.ui)[0]"><marker id="mk-2177206569" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" fill="#0000E4" class="connection fill-B2" stroke-width="2" /> </marker><path d="M 305.000000 127.000000 L 305.000000 165.000000 S 305.000000 165.000000 305.000000 165.000000 L 448.750000 165.000000 S 448.750000 165.000000 448.750000 165.000000 L 448.996016 412.000002" stroke="#0000E4" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:6.000000,5.919384;" marker-end="url(#mk-2177206569)" mask="url(#d2-4286216148)" /><text x="449.000000" y="204.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">ACCESS</text></g><g id="(api server -&gt; network.online portal.ui)[0]"><path d="M 435.665985 1386.000000 L 435.665985 1348.000000 S 435.665985 1348.000000 435.665985 1348.000000 L 687.500000 1348.000000 S 687.500000 1348.000000 687.500000 1348.000000 L 687.500000 266.000000 S 687.500000 266.000000 687.500000 266.000000 L 481.333008 266.000000 S 481.333008 266.000000 481.333008 266.000000 L 481.008880 412.000010" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4286216148)" /><text x="687.500000" y="780.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">DISPLAY</text></g><g id="(api server -&gt; logs)[0]"><path d="M 412.000000 1456.000000 L 412.000000 1611.000000" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4286216148)" /><text x="412.000000" y="1540.000000" fill="#0000B8" class="text-mono-italic fill-N2" style="text-anchor:middle;font-size:16px">PERSIST</text></g><g id="(network.data processor -&gt; api server)[0]"><path d="M 136.500000 1185.000000 L 136.500000 1348.000000 S 136.500000 1348.000000 136.500000 1348.000000 L 388.333008 1348.000000 S 388.333008 1348.000000 388.333008 1348.000000 L 388.333008 1384.000000" stroke="#000410" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4286216148)" /></g><mask id="d2-4286216148" maskUnits="userSpaceOnUse" x="11" y="11" width="711" height="1702">
+<rect x="11" y="11" width="711" height="1702" fill="white"></rect>
+<rect x="264.500000" y="316.000000" width="116" height="36" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="264.000000" y="104.000000" width="38" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="363.500000" y="1410.500000" width="97" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="388.500000" y="1658.000000" width="37" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="126.000000" y="366.000000" width="143" height="31" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="375.500000" y="371.000000" width="185" height="31" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="97.500000" y="960.000000" width="200" height="31" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="144.500000" y="443.500000" width="96" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="144.500000" y="690.500000" width="106" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="459.000000" y="440.000000" width="18" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="158.500000" y="1075.500000" width="67" height="21" fill="rgba(0,0,0,0.75)"></rect>
+<rect x="129.000000" y="567.000000" width="38" height="21" fill="black"></rect>
+<rect x="179.000000" y="567.000000" width="38" height="21" fill="black"></rect>
+<rect x="227.000000" y="567.000000" width="38" height="21" fill="black"></rect>
+<rect x="150.000000" y="859.000000" width="96" height="21" fill="black"></rect>
+<rect x="75.000000" y="161.000000" width="86" height="21" fill="black"></rect>
+<rect x="420.000000" y="188.000000" width="58" height="21" fill="black"></rect>
+<rect x="653.000000" y="764.000000" width="69" height="21" fill="black"></rect>
+<rect x="378.000000" y="1524.000000" width="68" height="21" fill="black"></rect>
+</mask></svg></svg>
\ No newline at end of file
diff --git a/e2etests/txtar.txt b/e2etests/txtar.txt
index d3560277d..004b0eae7 100644
--- a/e2etests/txtar.txt
+++ b/e2etests/txtar.txt
@@ -684,3 +684,57 @@ layers: {
     d
   }
 }
+
+-- shape-animate --
+vars: {
+  d2-config: {
+    layout-engine: elk
+    # Terminal theme code
+    theme-id: 300
+  }
+}
+network: {
+  cell tower: {
+    satellites: {
+      shape: stored_data
+      style.multiple: true
+    }
+
+    transmitter
+
+    satellites -> transmitter: send
+    satellites -> transmitter: send
+    satellites -> transmitter: send
+  }
+
+  online portal: {
+    ui: {shape: hexagon}
+  }
+
+  data processor: {
+    storage: {
+               style.animated: true
+      shape: cylinder
+      style.multiple: true
+    }
+  }
+
+  cell tower.transmitter -> data processor.storage: phone logs
+}
+
+user: {
+  shape: person
+  width: 130
+}
+
+user -> network.cell tower: make call
+user -> network.online portal.ui: access {
+  style.stroke-dash: 3
+}
+
+api server -> network.online portal.ui: display
+api server -> logs: persist
+logs: {shape: page; style.multiple: true}
+
+network.data processor -> api server
+