JavaScript
var c = [60, 0]; // center
var r = 120; // radius
var complete = 0.8; // percent
var circlePath = `
M-62.90933904319014,71.00996452012176A5,5,0,0,1,-70.15988714110068,71.25721181991345A100,100,0,1,1,70.15988714110068,71.25721181991345A5,5,0,0,1,62.90933904319014,71.00996452012176L62.90933904319014,71.00996452012176A5,5,0,0,1,63.14389842699061,64.13149063792211A90,90,0,1,0,-63.14389842699061,64.13149063792213A5,5,0,0,1,-62.90933904319014,71.00996452012176Z
`;
var colorInterpolator = d3.interpolateRgbBasis(["rgb(225, 65, 118)", "rgb(108, 125, 255)", "rgb(225, 65, 118)"]);
var colorHandler = (d, i, nodes) => {
let color = d3.color(colorInterpolator(d.t));
color.opacity = i/nodes.length > 1-complete ? 1 : 0;
return color;
};
var path = d3.select("path").attr("d", circlePath).remove();
console.time("[gradient stroke performance]");
d3.select("svg").selectAll("path")
.data(quads(samples(path.node(), 8)))
.enter().append("path")
.style("fill", colorHandler)
.style("stroke", colorHandler)
.style("stroke-width", 30)
.style("stroke-linecap", (d, i, all) => i === 0 || i === all.length ? "round" : "round" )
.attr("d", d => lineJoin(d[0], d[1], d[2], d[3], 32) );
console.timeEnd("[gradient stroke performance]");
// Sample the SVG path uniformly with the specified precision.
function samples(path, precision) {
var n = path.getTotalLength(), t = [0], i = 0, dt = precision;
while ((i += dt) < n) t.push(i);
t.push(n);
return t.map(function(t) {
var p = path.getPointAtLength(t), a = [p.x, p.y];
a.t = t / n;
return a;
});
}
// Compute quads of adjacent points [p0, p1, p2, p3].
function quads(points) {
return d3.range(points.length - 1).map(function(i) {
var a = [points[i - 1], points[i], points[i + 1], points[i + 2]];
a.t = (points[i].t + points[i + 1].t) / 2;
return a;
});
}
// Compute stroke outline for segment p12.
function lineJoin(p0, p1, p2, p3, width) {
var u12 = perp(p1, p2),
r = width / 2,
...