{
const height = 600;
const icon = paths[2];
const scale = 1.5;
const subdivisions = 120;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width/2, -height/2, width, height])
.attr("transform", `translate(${(-icon.width*scale)/2},${(-icon.height*scale)/2}) scale(${scale}, ${scale})`);
const path = svg.append("g")
.append("path")
.attr("d", icon.paths[0].d)
.attr("fill", "transparent")
.attr("stroke-width", "0.5px")
.attr("opacity", 0.2)
const totalLength = path.node().getTotalLength();
for (let i=0; i < subdivisions; i++) {
const radius = Math.random() * 12 + 1;
const distance = i * totalLength / subdivisions + Math.random() * totalLength / subdivisions;
const point = path.node().getPointAtLength(distance);
const point2 = path.node().getPointAtLength(distance + 0.1);
const vector = vec(point, point2);
const translatedCenter = translate(point, vector.normal, radius, -1);
const circle = svg.append("circle")
.attr("cx", translatedCenter.x)
.attr("cy", translatedCenter.y)
.attr("r", radius)
.attr("opacity", Math.random())
.attr("i", i)
.attr("fill", color_scale(i/subdivisions));
};
yield svg.node();
let ease = false;
while (true) {
yield svg.node();
const pos = [...Array(subdivisions).keys()].map(d => {
const distance = d * totalLength / subdivisions + Math.random() * totalLength / subdivisions * 0.5;
const point = path.node().getPointAtLength(distance);
const point2 = path.node().getPointAtLength(distance + 0.01);
const vector = vec(point, point2);
const radius = Math.random()*15+1;
const translatedCenter = translate(point, vector.normal, radius, -1);
return {x: translatedCenter.x, y: translatedCenter.y, r: radius}
});
await d3.selectAll("circle").transition()
.ease(d3.easeBackOut)
.duration(4000)
.attr("r", (d,i) => pos[i].r)
.attr("cx", (d,i) => pos[i].x)
.attr("cy", (d,i) => pos[i].y)
.end();
ease = !ease;
}
}