sketch

d2renderers/d2sketch/sketch.go

@@ -163,20 +163,6 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 	return output, nil
 }
 
-func connectionStyle(connection d2target.Connection) string {
-	out := ""
-
-	out += fmt.Sprintf(`stroke:%s;`, connection.Stroke)
-	out += fmt.Sprintf(`opacity:%f;`, connection.Opacity)
-	out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth)
-	if connection.StrokeDash != 0 {
-		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), connection.StrokeDash)
-		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
-	}
-
-	return out
-}
-
 func Connection(r *Runner, connection d2target.Connection, path, attrs string) (string, error) {
 	roughness := 1.0
 	js := fmt.Sprintf(`node = rc.path("%s", {roughness: %f, seed: 1});`, path, roughness)
@@ -185,10 +171,14 @@ func Connection(r *Runner, connection d2target.Connection, path, attrs string) (
 		return "", err
 	}
 	output := ""
+	animatedClass := ""
+	if connection.Animated {
+		animatedClass = " animated-connection"
+	}
 	for _, p := range paths {
 		output += fmt.Sprintf(
-			`<path class="connection" fill="none" d="%s" style="%s" %s/>`,
+			`<path class="connection%s" fill="none" d="%s" style="%s" %s/>`,
-			p, connectionStyle(connection), attrs,
+			animatedClass, p, connection.CSSStyle(), attrs,
 		)
 	}
 	return output, nil

d2renderers/d2sketch/sketch_test.go

@@ -39,6 +39,11 @@ func TestSketch(t *testing.T) {
 			script: `winter.snow -> summer.sun
 		`,
 		},
+		{
+			name: "animated",
+			script: `winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true }
+		`,
+		},
 		{
 			name: "connection label",
 			script: `a -> b: hello

d2renderers/d2svg/d2svg.go

@@ -466,7 +466,7 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 			animatedClass = " animated-connection"
 		}
 		fmt.Fprintf(writer, `<path d="%s" class="connection%s" style="fill:none;%s" %s/>`,
-			path, animatedClass, connectionStyle(connection), attrs)
+			path, animatedClass, connection.CSSStyle(), attrs)
 	}
 
 	if connection.Label != "" {
@@ -966,32 +966,6 @@ func shapeStyle(shape d2target.Shape) string {
 	return out
 }
 
-func connectionStyle(connection d2target.Connection) string {
-	out := ""
-
-	out += fmt.Sprintf(`stroke:%s;`, connection.Stroke)
-	out += fmt.Sprintf(`opacity:%f;`, connection.Opacity)
-	out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth)
-	strokeDash := connection.StrokeDash
-	if strokeDash == 0 && connection.Animated {
-		strokeDash = 5
-	}
-	if strokeDash != 0 {
-		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), strokeDash)
-		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
-
-		if connection.Animated {
-			dashOffset := -10
-			if connection.SrcArrow != d2target.NoArrowhead && connection.DstArrow == d2target.NoArrowhead {
-				dashOffset = 10
-			}
-			out += fmt.Sprintf(`stroke-dashoffset:%f;`, float64(dashOffset)*(dashSize+gapSize))
-			out += fmt.Sprintf(`animation: dashdraw %fs linear infinite;`, gapSize*0.5)
-		}
-	}
-	return out
-}
-
 func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
 	content := buf.String()
 	buf.WriteString(`<style type="text/css"><![CDATA[`)

d2target/d2target.go

@@ -15,6 +15,7 @@ import (
 	"oss.terrastruct.com/d2/lib/geo"
 	"oss.terrastruct.com/d2/lib/label"
 	"oss.terrastruct.com/d2/lib/shape"
+	"oss.terrastruct.com/d2/lib/svg"
 )
 
 const (
@@ -251,6 +252,32 @@ func BaseConnection() *Connection {
 	}
 }
 
+func (c Connection) CSSStyle() string {
+	out := ""
+
+	out += fmt.Sprintf(`stroke:%s;`, c.Stroke)
+	out += fmt.Sprintf(`opacity:%f;`, c.Opacity)
+	out += fmt.Sprintf(`stroke-width:%d;`, c.StrokeWidth)
+	strokeDash := c.StrokeDash
+	if strokeDash == 0 && c.Animated {
+		strokeDash = 5
+	}
+	if strokeDash != 0 {
+		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(c.StrokeWidth), strokeDash)
+		out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
+
+		if c.Animated {
+			dashOffset := -10
+			if c.SrcArrow != NoArrowhead && c.DstArrow == NoArrowhead {
+				dashOffset = 10
+			}
+			out += fmt.Sprintf(`stroke-dashoffset:%f;`, float64(dashOffset)*(dashSize+gapSize))
+			out += fmt.Sprintf(`animation: dashdraw %fs linear infinite;`, gapSize*0.5)
+		}
+	}
+	return out
+}
+
 func (c *Connection) GetLabelTopLeft() *geo.Point {
 	return label.Position(c.LabelPosition).GetPointOnRoute(
 		c.Route,