<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<symbol id="carre">
<g>
<path fill="#FF0000" id="svg_1" opacity="0.5">
<animate attributename="d" begin="0s" dur="12s" repeatcount="indefinite" values="m100,0l100,100l-100,100l-100,-100z;m100,100l0,0l0,0l0,0z;m100,0l100,100l-100,100l-100,-100z;m0,0l200,0l0,200l-200,0z;m100,0l100,100l-100,100l-100,-100z;m100,200l-100,-100l100,100l100,-100z;m100,0l100,100l-100,100l-100,-100z"
</path>
</g>
</symbol>
<symbol id="carre2">
<use xlink:href="#carre"/>
<use xlink:href="#carre" transform="scale(0.5)"/>
<use xlink:href="#carre" transform="scale(0.5)translate(200 200)"/>
<use xlink:href="#carre" transform="scale(0.5)translate(0 200)"/>
<use xlink:href="#carre" transform="scale(0.5)translate(200 0)"/>
</symbol>
<symbol id="carre3">
<use xlink:href="#carre2"/>
<use xlink:href="#carre2" transform="scale(0.5)"/>
<use xlink:href="#carre2" transform="scale(0.5)translate(200 200)"/>
<use xlink:href="#carre2" transform="scale(0.5)translate(0 200)"/>
<use xlink:href="#carre2" transform="scale(0.5)translate(200 0)"/>
</symbol>
<use xlink:href="#carre3"/>
<use xlink:href="#carre3" transform="scale(0.5)"/>
<use xlink:href="#carre3" transform="scale(0.5)translate(200 200)"/>
<use xlink:href="#carre3" transform="scale(0.5)translate(0 200)"/>
<use xlink:href="#carre3" transform="scale(0.5)translate(200 0)"/>
</svg>
