const SVG_NS = "http://www.w3.org/2000/svg";
let sz = 50;
let sqRy = [{ s: sz, d: "", l: p.getTotalLength(), el: p }];
for (let i = 1; i < 8; i++) {
let o = {};
let size = sqRy[i - 1].s / 2;
o.s = Math.sqrt(2 * size * size);
o.d = `M-${o.s},-${o.s}L${o.s},-${o.s} ${o.s},${o.s} -${o.s},${o.s} -${o.s},-${o.s}z`;
o.el = document.createElementNS(SVG_NS, "path");
o.el.setAttribute("d", o.d);
o.el.setAttribute("transform", `rotate(${45 * i})`);
svg.appendChild(o.el);
o.l = o.el.getTotalLength();
sqRy.push(o);
}
sqRy.map((sq) => {
sq.el.setAttribute("style", `stroke-dasharray:${sq.s};stroke-dashoffset:${sq.l}`);
});
svg{fill:none;stroke:black;}
path{
animation: dash 16s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg width="300" viewBox="-60 -60 120 120" id="svg">
<path id="p" d="M-50,-50L50,-50 50,50 -50,50 -50,-50z" />
</svg>