{
const svg = d3.create("svg").attr("height", 250).attr("width", 250).attr("viewBox", [0, 0, 250, 250]);
const myData = [
40, 80, 100, 200, 10, 30
];
const rc = rough.svg(svg);
svg.selectAll("g")
.data(myData)
.enter()
.append("g").attr("class", "roughElement")
.append( (d, i) => rc.rectangle(
10, i * 30 + 10, d, 20, {fillWeight: 0.7, fill: "steelblue", roughness: 2}));
var paths = [];
yield svg.node();
svg.selectAll("path")
.each( (d, i, nl) => nl[i].getAttribute("d").split(/[M]/).slice(1).forEach(p=>
paths.push({'d': "M" + p,
'style': nl[i].style})))
.remove();
svg.selectAll("g").remove();
var base = svg.selectAll("path")
.data(paths)
.enter();
base.filter( d => { console.log(d); return d.style.stroke != 'steelblue'})
.append("path")
.attr("d", d => d.d)
.style("stroke", d => d.style.stroke)
.style("fill", d => d.style.fill)
.style("stroke-width", d => d.style['stroke-width']);
base.filter( d => { console.log(d); return d.style.stroke == 'steelblue'})
.append("path")
.attr("d", d => d.d)
.style("stroke", d => d.style.stroke)
.style("fill", d => d.style.fill)
.style("stroke-width", d => d.style['stroke-width']);
svg.selectAll("path")
.attr("stroke-dasharray", (d, i, nl) => nl[i].getTotalLength() + " " + nl[i].getTotalLength())
.attr("stroke-dashoffset", (d, i, nl) => nl[i].getTotalLength())
.transition()
.delay( (d, i) => i * 25)
.duration(25)
.attr("stroke-dashoffset", 0);
yield svg.node();
}