{
replay;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", `${-width / 2} ${-height / 2} ${width} ${height}`);
svg.append("circle")
.attr("r", r / Math.sqrt(3))
.attr("transform", "rotate(-90)")
.attr("fill", "none")
.attr("stroke", "#777")
.attr("stroke-dasharray", `0 ${r / Math.sqrt(3) * 2 * Math.PI}`)
.attr("stroke-opacity", 1)
.transition()
.duration(1500)
.attr("stroke-dasharray", `${r / Math.sqrt(3) * 2 * Math.PI} ${r / Math.sqrt(3) * 2 * Math.PI}`)
.transition()
.duration(750)
.attr("stroke-opacity", 0);
svg.append("g")
.attr("fill", "red")
.selectAll("circle")
.data(points)
.join("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", 4)
.attr("fill-opacity", 0)
.transition()
.delay((d, i) => d3.easePolyInOut.exponent(1 / 3)(i / 3) * 1500)
.attr("fill-opacity", 1)
.transition()
.delay(5500)
.attr("r", 0)
.remove();
svg.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("d", `M${points.join("L")}Z`)
.attr("stroke-opacity", 0)
.transition()
.delay(1500)
.duration(750)
.attr("stroke-opacity", 1);
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#777")
.selectAll("circle")
.data(points)
.join("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", 0)
.attr("stroke-opacity", 1)
.transition()
.delay((d, i) => i * 1500 + 2500)
.duration(750)
.attr("r", r)
.transition()
.attr("stroke-opacity", 0);
svg.append("path")
.attr("fill", "#ddd")
.attr("fill-opacity", 0)
.attr("stroke", "#000")
.attr("stroke-width", 2.5)
.attr("stroke-dasharray", `0 ${Math.PI * r}`)
.attr("d", `
M${points[1]}
A${r} ${r} 0 0 1 ${points[2]}
A${r} ${r} 0 0 1 ${points[0]}
A${r} ${r} 0 0 1 ${points[1]}
Z
`)
.transition()
.delay(3250)
.duration(750)
.attr("stroke-dasharray", `${Math.PI * r / 3} ${Math.PI * r}`)
.transition()
.delay(750)
.attr("stroke-dasharray", `${2 * Math.PI * r / 3} ${Math.PI * r}`)
.transition()
.delay(750)
.attr("stroke-dasharray", `${Math.PI * r} ${Math.PI * r}`)
.transition()
.attr("fill-opacity", 1);
return svg.node();
}