SVG="http://www.w3.org/2000/svg";XLNK="http://www.w3.org/1999/xlink";
s=["1200","----"];p=0;function d(n){for(i=n.length;i>0;i--) {
document.getElementById('n'+i).setAttribute('class','n'+n[i-1])}
document.getElementById('sz').setAttribute('class','n'+n[0])}
setInterval("p=1-p;d(s[p])",500);
#svg2 { --c: #FF6;stroke:#432;stroke-width:12;stroke-linecap:round;stroke-linejoin:round; stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none; } path.b { fill:#543;stroke:none; } .blue { --c: #68F; } .green { --c: #6F8; } .red { --c: #F88; } .dec rect { stroke: var(--c); } .n1 #B { stroke: var(--c); } .n1 #C { stroke: var(--c); } .n2 #A { stroke: var(--c); } .n2 #B { stroke: var(--c); } .n2 #D { stroke: var(--c); } .n2 #E { stroke: var(--c); } .n2 #G { stroke: var(--c); } .n3 #A { stroke: var(--c); } .n3 #B { stroke: var(--c); } .n3 #C { stroke: var(--c); } .n3 #D { stroke: var(--c); } .n3 #G { stroke: var(--c); } .n4 #B { stroke: var(--c); } .n4 #C { stroke: var(--c); } .n4 #F { stroke: var(--c); } .n4 #G { stroke: var(--c); } .n5 #A { stroke: var(--c); } .n5 #C { stroke: var(--c); } .n5 #D { stroke: var(--c); } .n5 #F { stroke: var(--c); } .n5 #G { stroke: var(--c); } .n6 #A { stroke: var(--c); } .n6 #C { stroke: var(--c); } .n6 #D { stroke: var(--c); } .n6 #E { stroke: var(--c); } .n6 #F { stroke: var(--c); } .n6 #G { stroke: var(--c); } .n7 #A { stroke: var(--c); } .n7 #B { stroke: var(--c); } .n7 #C { stroke: var(--c); } .n8 #A { stroke: var(--c); } .n8 #B { stroke: var(--c); } .n8 #C { stroke: var(--c); } .n8 #D { stroke: var(--c); } .n8 #E { stroke: var(--c); } .n8 #F { stroke: var(--c); } .n8 #G { stroke: var(--c); } .n9 #A { stroke: var(--c); } .n9 #B { stroke: var(--c); } .n9 #C { stroke: var(--c); } .n9 #D { stroke: var(--c); } .n9 #F { stroke: var(--c); } .n9 #G { stroke: var(--c); } .n0 #A { stroke: var(--c); } .n0 #B { stroke: var(--c); } .n0 #C { stroke: var(--c); } .n0 #D { stroke: var(--c); } .n0 #E { stroke: var(--c); } .n0 #F { stroke: var(--c); } .n11 #B { stroke: var(--c); } .n11 #C { stroke: var(--c); } .n11 #E { stroke: var(--c); } .n11 #F { stroke: var(--c); } .nA #A { stroke: var(--c); } .nA #B { stroke: var(--c); } .nA #C { stroke: var(--c); } .nA #E { stroke: var(--c); } .nA #F { stroke: var(--c); } .nA #G { stroke: var(--c); } .nB #C { stroke: var(--c); } .nB #D { stroke: var(--c); } .nB #E { stroke: var(--c); } .nB #F { stroke: var(--c); } .nB #G { stroke: var(--c); } .nC #A { stroke: var(--c); } .nC #D { stroke: var(--c); } .nC #E { stroke: var(--c); } .nC #F { stroke: var(--c); } .nD #B { stroke: var(--c); } .nD #C { stroke: var(--c); } .nD #D { stroke: var(--c); } .nD #E { stroke: var(--c); } .nD #G { stroke: var(--c); } .nE #A { stroke: var(--c); } .nE #D { stroke: var(--c); } .nE #E { stroke: var(--c); } .nE #F { stroke: var(--c); } .nE #G { stroke: var(--c); } .nF #A { stroke: var(--c); } .nF #E { stroke: var(--c); } .nF #F { stroke: var(--c); } .nF #G { stroke: var(--c); } .nR #E { stroke: var(--c); } .nR #G { stroke: var(--c); } .nO #C { stroke: var(--c); } .nO #D { stroke: var(--c); } .nO #E { stroke: var(--c); } .nO #G { stroke: var(--c); } .n- #G { stroke: var(--c); } .n1 #y { stroke: var(--c); } .n1 #z { stroke: var(--c); }
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 645 230" id="svg2"> <defs id="dfs4"><g id="n"><path d="M 15,5 155,5 145,225 5,225 z" class="b"/> <path id="A" d="M 45,15 125, 15"/><path id="B" d="M 135,25 125,105"/><path id="C" d="M 125,125 115,205"/><path id="D" d="M 25,215 105,215"/><path id="E" d="M 25,125 15,205"/><path id="F" d="M 35,25 25,105"/><path id="G" d="M 35,115 115,115"/><rect id="P" width="5" height="5" ry="2.5" x="130" y="205"/></g><g id="s"><path d="M 10,5 35,5 25,225 0,225 z" id="a" class="b"/><rect id="y" width="5" height="5" ry="2.5" x="13.5" y="145"/><rect id="z" width="5" x="17" height="5" ry="2.5" y="75"/></g></defs><use id="n1" xlink:href="#n" /><use id="n2" xlink:href="#n" transform="translate(150,0)" /><use xlink:href="#s" id="sz" transform="translate(305,0)"/><use id="n3" transform="translate(335,0)" xlink:href="#n" /><use id="n4" xlink:href="#n" transform="translate(485,0)" />
</svg>