From 9544a48f80bc5297e2a01f1be14485f6c9ab8b6b Mon Sep 17 00:00:00 2001
From: Daniel Suh <daniel.suh@duke.edu>
Date: Tue, 14 May 2024 16:28:44 -0400
Subject: [PATCH] seems to be working

---
 d2renderers/d2svg/d2svg.go                    | 63 +++++++++++--------
 .../dagre/sketch.exp.svg                      |  2 +-
 .../elk/sketch.exp.svg                        |  2 +-
 3 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 707a922df..9dc4b7acd 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -635,12 +635,17 @@ func splitPath(path string, percentage float64) (string, string) {
 				heading2 := geo.Point{X: h2x, Y: h2y}
 				nextPoint := geo.Point{X: p1x, Y: p1y}
 				
-				_, q2, q3, q4 := splitBezierCurve(&prevPosition, &heading1, &heading2, &nextPoint, 0, 0.5)
+				q1, q2, q3, q4 := splitBezierCurve(&prevPosition, &heading1, &heading2, &nextPoint, 0, 0.5)
 				
 				path1 += fmt.Sprintf("C %f %f %f %f %f %f ", q2.X, q2.Y, q3.X, q3.Y, q4.X, q4.Y);
 				
+				q1, q2, q3, q4 = splitBezierCurve(&prevPosition, &heading1, &heading2, &nextPoint, 0.5, 1)
+				
+				path2 += fmt.Sprintf("M %f %f C %f %f %f %f %f %f ", q1.X, q1.Y, q2.X, q2.Y, q3.X, q3.Y, q4.X, q4.Y);
+				
 			case "S":
 				path1 += fmt.Sprintf("S %s %s %s %s ", pathData[i + 1], pathData[i + 2], pathData[i + 3], pathData[i + 4])
+				path2 += fmt.Sprintf("M %s %s ", pathData[i + 3], pathData[i + 4])
 			default:
 				panic(fmt.Sprintf("unknown svg path command \"%s\"", pathData[i]))
 			}
@@ -736,8 +741,6 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 	srcAdj, dstAdj := getArrowheadAdjustments(connection, idToShape)
 	path := pathData(connection, srcAdj, dstAdj)
 	mask := fmt.Sprintf(`mask="url(#%s)"`, labelMaskID)
-
-	path1, path2 := splitPath(path, 0.5);
 	
 	if sketchRunner != nil {
 		out, err := d2sketch.Connection(sketchRunner, connection, path, mask)
@@ -758,32 +761,38 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 			animatedClass = " animated-connection"
 		}
 
-		pathEl := d2themes.NewThemableElement("path")
-		pathEl.D = path
-		pathEl.Fill = color.None
-		pathEl.Stroke = connection.Stroke
-		pathEl.ClassName = fmt.Sprintf("connection%s", animatedClass)
-		pathEl.Style = connection.CSSStyle()
-		pathEl.Attributes = fmt.Sprintf("%s%s%s", markerStart, markerEnd, mask)
-		// fmt.Fprint(writer, pathEl.Render())
+		// if connection is not animated or is a directed connection
+		if !connection.Animated || ((connection.DstArrow == d2target.NoArrowhead && connection.SrcArrow != d2target.NoArrowhead) || (connection.DstArrow != d2target.NoArrowhead && connection.SrcArrow == d2target.NoArrowhead)) {
+			pathEl := d2themes.NewThemableElement("path")
+			pathEl.D = path
+			pathEl.Fill = color.None
+			pathEl.Stroke = connection.Stroke
+			pathEl.ClassName = fmt.Sprintf("connection%s", animatedClass)
+			pathEl.Style = connection.CSSStyle()
+			pathEl.Attributes = fmt.Sprintf("%s%s%s", markerStart, markerEnd, mask)
+			fmt.Fprint(writer, pathEl.Render())
+		} else {
+			path1, path2 := splitPath(path, 0.5);
 
-		pathEl1 := d2themes.NewThemableElement("path")
-		pathEl1.D = path1
-		pathEl1.Fill = color.None
-		pathEl1.Stroke = connection.Stroke
-		pathEl1.ClassName = fmt.Sprintf("connection%s", animatedClass)
-		pathEl1.Style = connection.CSSStyle()
-		pathEl1.Attributes = fmt.Sprintf("%s%s%s", markerStart, markerEnd, mask)
-		fmt.Fprint(writer, pathEl1.Render())
+			pathEl1 := d2themes.NewThemableElement("path")
+			pathEl1.D = path1
+			pathEl1.Fill = color.None
+			pathEl1.Stroke = connection.Stroke
+			pathEl1.ClassName = fmt.Sprintf("connection%s", animatedClass)
+			pathEl1.Style = connection.CSSStyle()
+			pathEl1.Style += "animation-direction: reverse;"
+			pathEl1.Attributes = fmt.Sprintf("%s%s", markerStart, mask)
+			fmt.Fprint(writer, pathEl1.Render())
 
-		pathEl2 := d2themes.NewThemableElement("path")
-		pathEl2.D = path2
-		pathEl2.Fill = color.None
-		pathEl2.Stroke = connection.Stroke
-		pathEl2.ClassName = fmt.Sprintf("connection%s", animatedClass)
-		pathEl2.Style = connection.CSSStyle()
-		pathEl2.Attributes = fmt.Sprintf("%s%s%s", markerStart, markerEnd, mask)
-		fmt.Fprint(writer, pathEl2.Render())
+			pathEl2 := d2themes.NewThemableElement("path")
+			pathEl2.D = path2
+			pathEl2.Fill = color.None
+			pathEl2.Stroke = connection.Stroke
+			pathEl2.ClassName = fmt.Sprintf("connection%s", animatedClass)
+			pathEl2.Style = connection.CSSStyle()
+			pathEl2.Attributes = fmt.Sprintf("%s%s", markerEnd, mask)
+			fmt.Fprint(writer, pathEl2.Render())
+		}
 	}
 
 	if connection.Label != "" {
diff --git a/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/sketch.exp.svg b/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/sketch.exp.svg
index 8bf7169d7..5c7dc4c21 100644
--- a/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/sketch.exp.svg
+++ b/e2etests/testdata/txtar/bidirectional_connection_animation/dagre/sketch.exp.svg
@@ -95,7 +95,7 @@
 		.d2-4137793201 .color-AA4{color:#EDF0FD;}
 		.d2-4137793201 .color-AA5{color:#F7F8FE;}
 		.d2-4137793201 .color-AB4{color:#EDF0FD;}
-		.d2-4137793201 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--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-bright);mix-blend-mode:darken}.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-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.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-bright);mix-blend-mode:darken}.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><g id="a"><g class="shape" ><rect x="170.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="196.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="226.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="253.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="340.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="366.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="455.000000" y="0.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="453.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 166.156547 47.714014 C 110.652772 74.852505 75.738636 94.424002 54.700443 111.710876 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /><path fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><g id="(a &lt;-&gt; c)[0]"><path d="M 171.250760 69.307706 C 158.775382 87.653853 150.837692 101.826926 146.018846 115.913463 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /><path fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><g id="(a &lt;-&gt; d)[0]"><path d="M 221.249240 69.307706 C 233.724618 87.653853 241.662308 101.826926 246.481154 115.913463 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /><path fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><g id="(a &lt;-&gt; e)[0]"><path d="M 226.097471 47.748771 C 281.898742 74.874386 316.999374 94.437193 338.149688 111.718596 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /><path fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><g id="(f &lt;-&gt; g)[0]"><path d="M 480.000000 70.000000 C 480.000000 88.000000 480.000000 102.000000 480.000000 116.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /><path fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><mask id="d2-4137793201" maskUnits="userSpaceOnUse" x="-1" y="-1" width="509" height="234">
+		.d2-4137793201 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--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-bright);mix-blend-mode:darken}.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-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.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-bright);mix-blend-mode:darken}.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><g id="a"><g class="shape" ><rect x="170.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="196.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="113.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="139.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="226.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="253.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="340.000000" y="166.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="366.500000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="455.000000" y="0.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="453.000000" y="166.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.000000" y="204.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 166.156547 47.714014 C 110.652772 74.852505 75.738636 94.424002 54.700443 111.710876 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-4137793201)" /><path d="M 54.700443 111.710876 C 33.662250 128.997749 26.500000 144.000000 26.500000 162.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><g id="(a &lt;-&gt; c)[0]"><path d="M 171.250760 69.307706 C 158.775382 87.653853 150.837692 101.826926 146.018846 115.913463 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-4137793201)" /><path d="M 146.018846 115.913463 C 141.200001 130.000000 139.500000 144.000000 139.500000 162.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><g id="(a &lt;-&gt; d)[0]"><path d="M 221.249240 69.307706 C 233.724618 87.653853 241.662308 101.826926 246.481154 115.913463 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-4137793201)" /><path d="M 246.481154 115.913463 C 251.299999 130.000000 253.000000 144.000000 253.000000 162.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><g id="(a &lt;-&gt; e)[0]"><path d="M 226.097471 47.748771 C 281.898742 74.874386 316.999374 94.437193 338.149688 111.718596 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-4137793201)" /><path d="M 338.149688 111.718596 C 359.300003 129.000000 366.500000 144.000000 366.500000 162.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><g id="(f &lt;-&gt; g)[0]"><path d="M 480.000000 70.000000 C 480.000000 88.000000 480.000000 102.000000 480.000000 116.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-4137793201)" /><path d="M 480.000000 116.000000 C 480.000000 130.000000 480.000000 144.000000 480.000000 162.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-4137793201)" /></g><mask id="d2-4137793201" maskUnits="userSpaceOnUse" x="-1" y="-1" width="509" height="234">
 <rect x="-1" y="-1" width="509" height="234" fill="white"></rect>
 <rect x="192.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="22.500000" y="188.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
diff --git a/e2etests/testdata/txtar/bidirectional_connection_animation/elk/sketch.exp.svg b/e2etests/testdata/txtar/bidirectional_connection_animation/elk/sketch.exp.svg
index eb9196aad..2beadaab6 100644
--- a/e2etests/testdata/txtar/bidirectional_connection_animation/elk/sketch.exp.svg
+++ b/e2etests/testdata/txtar/bidirectional_connection_animation/elk/sketch.exp.svg
@@ -95,7 +95,7 @@
 		.d2-2098060027 .color-AA4{color:#EDF0FD;}
 		.d2-2098060027 .color-AA5{color:#F7F8FE;}
 		.d2-2098060027 .color-AB4{color:#EDF0FD;}
-		.d2-2098060027 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--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-bright);mix-blend-mode:darken}.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-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.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-bright);mix-blend-mode:darken}.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><g id="a"><g class="shape" ><rect x="68.000000" y="12.000000" width="160.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="148.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="158.000000" y="208.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="185.000000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="232.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="258.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="306.000000" y="12.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="331.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="305.000000" y="208.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="332.000000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 100.250000 82.000000 L 100.250000 108.000000 S 100.250000 118.000000 90.250000 118.000000 L 48.500000 118.000000 S 38.500000 118.000000 38.500000 128.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /><path d="L 38.500000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><g id="(a &lt;-&gt; c)[0]"><path d="M 132.250000 82.000000 L 132.250000 147.517136 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /><path d="M 132.250000 147.517136 L 132.250000 158.000000 S 132.250000 168.000000 122.250000 168.000000 L 121.500000 168.000000 S 111.500000 168.000000 111.500000 178.000000 L 111.500000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><g id="(a &lt;-&gt; d)[0]"><path d="M 164.250000 82.000000 L 164.250000 147.517136 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /><path d="M 164.250000 147.517136 L 164.250000 158.000000 S 164.250000 168.000000 174.250000 168.000000 L 175.000000 168.000000 S 185.000000 168.000000 185.000000 178.000000 L 185.000000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><g id="(a &lt;-&gt; e)[0]"><path d="M 196.250000 82.000000 L 196.250000 108.000000 S 196.250000 118.000000 206.250000 118.000000 L 248.500000 118.000000 S 258.500000 118.000000 258.500000 128.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /><path d="L 258.500000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><g id="(f &lt;-&gt; g)[0]"><path d="M 332.000000 82.000000 L 332.000000 143.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /><path d="M 332.000000 143.000000 L 332.000000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><mask id="d2-2098060027" maskUnits="userSpaceOnUse" x="11" y="11" width="349" height="264">
+		.d2-2098060027 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--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-bright);mix-blend-mode:darken}.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-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.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-bright);mix-blend-mode:darken}.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><g id="a"><g class="shape" ><rect x="68.000000" y="12.000000" width="160.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="148.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="158.000000" y="208.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="185.000000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="e"><g class="shape" ><rect x="232.000000" y="208.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="258.500000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">e</text></g><g id="f"><g class="shape" ><rect x="306.000000" y="12.000000" width="51.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="331.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">f</text></g><g id="g"><g class="shape" ><rect x="305.000000" y="208.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="332.000000" y="246.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">g</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><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" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 100.250000 82.000000 L 100.250000 108.000000 S 100.250000 118.000000 90.250000 118.000000 L 48.500000 118.000000 S 38.500000 118.000000 38.500000 128.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-2098060027)" /><path d="M 38.500000 128.000000 L 38.500000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><g id="(a &lt;-&gt; c)[0]"><path d="M 132.250000 82.000000 L 132.250000 147.517136 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-2098060027)" /><path d="M 132.250000 147.517136 L 132.250000 158.000000 S 132.250000 168.000000 122.250000 168.000000 L 121.500000 168.000000 S 111.500000 168.000000 111.500000 178.000000 L 111.500000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><g id="(a &lt;-&gt; d)[0]"><path d="M 164.250000 82.000000 L 164.250000 147.517136 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-2098060027)" /><path d="M 164.250000 147.517136 L 164.250000 158.000000 S 164.250000 168.000000 174.250000 168.000000 L 175.000000 168.000000 S 185.000000 168.000000 185.000000 178.000000 L 185.000000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><g id="(a &lt;-&gt; e)[0]"><path d="M 196.250000 82.000000 L 196.250000 108.000000 S 196.250000 118.000000 206.250000 118.000000 L 248.500000 118.000000 S 258.500000 118.000000 258.500000 128.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-2098060027)" /><path d="M 258.500000 128.000000 L 258.500000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><g id="(f &lt;-&gt; g)[0]"><path d="M 332.000000 82.000000 L 332.000000 143.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;animation-direction: reverse;" marker-start="url(#mk-2451250203)" mask="url(#d2-2098060027)" /><path d="M 332.000000 143.000000 L 332.000000 204.000000 " fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-3488378134)" mask="url(#d2-2098060027)" /></g><mask id="d2-2098060027" maskUnits="userSpaceOnUse" x="11" y="11" width="349" height="264">
 <rect x="11" y="11" width="349" height="264" fill="white"></rect>
 <rect x="144.000000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
 <rect x="34.500000" y="230.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>