JSFiddle - React, Tailwind, and code Playground

by emepyc

JavaScript

var d1 = ["M0,210 0,120 138.46153846153845,120"];
var d2 = ["M25.98,15 A30,30 0 0,0 25.98,-15L51.96152422706632,-30"];

// Tweaked versions of the same paths to have the same structure
//d1 = ["M0,210 A0,210 0 0,0 0,210 L0,120 L138.46153846153845,120"];
//d2 = ["M25.98,15 A30,30 0 0,0 25.98,-15L51.96152422706632,-30L51.96152422706632,-30"];

var svg = d3.select("body")
    .append("svg")
    .attr("width", 360)
    .attr("height", 468)
    .append("g")
    .attr("transform", "translate(180,234)");

svg.selectAll(".link")
    .data(d1)
    .enter()
    .append("path")
    .attr("class", "link")
    .attr("d", function(d) {return d})
    .style("stroke", "blue")
    .style("stroke-width", "2px")
    .attr("fill", "none");

svg.selectAll(".link")
    .data(d2)
    .transition()
    .duration(2000)
    .delay(2000)
    .attr("d", function(d) {return d})
    .style("stroke", "green")