{
const height = 250;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width/2, -height/2, width, height]);
const size = 200;
for (let i=0; i<subdivision; i++) {
if (i === 0) {
svg.append("rect")
.attr("width", size)
.attr("height", size)
.attr("fill", "none")
.attr("stroke", d3.schemeCategory10[i])
.attr("stroke-width", 10)
.attr("transform", `translate(${-size/2},${-size/2})`);
} else {
svg.append("rect")
.attr("width", size)
.attr("height", size)
.attr("fill", "none")
.attr("stroke", d3.schemeCategory10[i])
.attr("stroke-width", 10)
.attr("stroke-dashoffset", Math.trunc(size*4/subdivision)*i)
.attr("stroke-dasharray", size*4)
.attr("transform", `translate(${-size/2},${-size/2})`);
}
}
return svg.node()
}