Try

<svg width="400" height="400">
<rect width="400" height="400" fill="firebrick"/>

<symbol id="c00">
<circle r="200" cx="200" cy="200" stroke-width="10" stroke-dasharray="1257" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="1257;-1257" dur="48s"/></circle>

<circle r="175" cx="200" cy="200" stroke-width="35" stroke-dasharray="1100" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="-1100;1100" dur="48s"/></circle>

<circle r="150" cx="200" cy="200" stroke-width="10" stroke-dasharray="943" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="943;-943" dur="24s"/></circle>

<circle r="125" cx="200" cy="200" stroke-width="35" stroke-dasharray="786" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="-786;786" dur="24s"/></circle>

<circle r="100" cx="200" cy="200" stroke-width="10" stroke-dasharray="629" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="629;-629" dur="12s"/></circle>

<circle r="75" cx="200" cy="200" stroke-width="35" stroke-dasharray="472" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="-472;472" dur="12s"/></circle>

<circle r="050" cx="200" cy="200" stroke-width="10" stroke-dasharray="314" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="314;-314" dur="6s"/></circle>

<circle r="25" cx="200" cy="200" stroke-width="35" stroke-dasharray="157" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="-157;157" dur="6s"/></circle>

<circle r="5" cx="200" cy="200" stroke-width="0" fill="#ffffff"/>
</symbol>

<use xlink:href="#c00" stroke="#ffffff" opacity="0.75" transform="translate(0 0) scale(0.5)"/>
<use xlink:href="#c00" stroke="#ffffff" opacity="0.5" transform="translate(200 0) scale(0.5)"/>
<use xlink:href="#c00" stroke="#ffffff" opacity="0.5" transform="translate(0 200) scale(0.5)"/>
<use xlink:href="#c00" stroke="#ffffff" opacity="0.75" transform="translate(200 200) scale(0.5)"/>

</svg>

<svg width="400" height="400">
<rect width="400" height="400" fill="firebrick"/>
<defs>
<mask id="c00">

<circle stroke="#ffffff" r="200" cx="200" cy="200" stroke-width="10" stroke-dasharray="1257" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="1257;-1257" dur="48s"/></circle>

<circle stroke="#ffffff" r="175" cx="200" cy="200" stroke-width="35" stroke-dasharray="1100" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="-1100;1100" dur="48s"/></circle>

<circle stroke="#ffffff" r="150" cx="200" cy="200" stroke-width="10" stroke-dasharray="943" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="943;-943" dur="24s"/></circle>

<circle stroke="#ffffff" r="125" cx="200" cy="200" stroke-width="35" stroke-dasharray="786" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="-786;786" dur="24s"/></circle>

<circle stroke="#ffffff" r="100" cx="200" cy="200" stroke-width="10" stroke-dasharray="629" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="629;-629" dur="12s"/></circle>

<circle stroke="#ffffff" r="75" cx="200" cy="200" stroke-width="35" stroke-dasharray="472" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="-472;472" dur="12s"/></circle>

<circle stroke="#ffffff" r="050" cx="200" cy="200" stroke-width="10" stroke-dasharray="314" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="314;-314" dur="6s"/></circle>

<circle stroke="#ffffff" r="25" cx="200" cy="200" stroke-width="35" stroke-dasharray="157" fill="none" transform="rotate(-90 200 200)">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="-157;157" dur="6s"/></circle>

<circle r="5" cx="200" cy="200" stroke-width="0" fill="#ffffff"/>

</mask>
</defs>
<g>
<symbol id="bars">
<rect y="000" x="0" width="400" height="10"/>
<rect y="020" x="0" width="400" height="10"/>
<rect y="040" x="0" width="400" height="10"/>
<rect y="060" x="0" width="400" height="10"/>
<rect y="080" x="0" width="400" height="10"/>
<rect y="100" x="0" width="400" height="10"/>
<rect y="120" x="0" width="400" height="10"/>
<rect y="140" x="0" width="400" height="10"/>
<rect y="160" x="0" width="400" height="10"/>
<rect y="180" x="0" width="400" height="10"/>
<rect y="200" x="0" width="400" height="10"/>
<rect y="220" x="0" width="400" height="10"/>
<rect y="240" x="0" width="400" height="10"/>
<rect y="260" x="0" width="400" height="10"/>
<rect y="280" x="0" width="400" height="10"/>
<rect y="300" x="0" width="400" height="10"/>
<rect y="320" x="0" width="400" height="10"/>
<rect y="340" x="0" width="400" height="10"/>
<rect y="360" x="0" width="400" height="10"/>
<rect y="380" x="0" width="400" height="10"/>
<rect y="400" x="0" width="400" height="10"/>
</symbol>
<use xlink:href="#bars" fill="#0000000" stroke="#000000" stroke-dasharray="10" stroke-width="10" opacity="0.25">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="10;30" dur="6s"/>
<animate attributename="stroke-width" begin="0s" repeatcount="indefinite" values="30;10;30" dur="6s"/>
</use>
<use xlink:href="#bars" fill="#0000000" stroke="#000000" stroke-dasharray="10" stroke-width="10" style="mask:url(#c00)" opacity="1">
<animate attributename="stroke-dashoffset" begin="0s" repeatcount="indefinite" values="10;30" dur="6s"/>
<animate attributename="stroke-width" begin="0s" repeatcount="indefinite" values="30;10;30" dur="6s"/>
</use>
</g>
</svg>

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<symbol id="sq00">
   <path d="m50,50l50,0l50,0l50,0l50,0l50,0l50,0l0,50l0,50l0,50l0,50l0,50l0,50l-50,0l-50,0l-50,0l-50,0l-50,0l-50,0l0,-50l0,-50l0,-50l0,-50l0,-50l0,-50z" id="path01" stroke="#000000" fill="#000000">
     <animate attributename="d" begin="0s" dur="6s" repeatcount="indefinite" values="
      m50,50l50,0l50,0l50,0l50,0l50,0l50,0l0,50l0,50l0,50l0,50l0,50l0,50l-50,0l-50,0l-50,0l-50,0l-50,0l-50,0l0,-50l0,-50l0,-50l0,-50l0,-50l0,-50z;
      m100,100l0,-50l50,0l50,0l50,0l50,0l0,50l50,0l0,50l0,50l0,50l0,50l-50,0l0,50l-50,0l-50,0l-50,0l-50,0l0,-50l-50,0l0,-50l0,-50l0,-50l0,-50l50,0z;
      m150,150l0,-50l50,0l0,-50l0,50l50,0l0,50l50,0l0,50l50,0l-50,0l0,50l-50,0l0,50l-50,0l0,50l0,-50l-50,0l0,-50l-50,0l0,-50l-50,0l50,0l0,-50l50,0z;
      m50,50l50,0l50,0l50,0l50,0l50,0l50,0l0,50l0,50l0,50l0,50l0,50l0,50l-50,0l-50,0l-50,0l-50,0l-50,0l-50,0l0,-50l0,-50l0,-50l0,-50l0,-50l0,-50z;
      m350,350l-250,-300l50,0l50,55l50,-55l50,0l-250,300l300,-250l0,50l-65,50l65,50l0,50l-300,-250l250,300l-50,0l-50,-55l-50,55l-50,0l250,-300l-300,250l0,-50l65,-50l-65,-50l0,-50l300,250z;
      m50,50l50,0l50,0l50,0l50,0l50,0l50,0l0,50l0,50l0,50l0,50l0,50l0,50l-50,0l-50,0l-50,0l-50,0l-50,0l-50,0l0,-50l0,-50l0,-50l0,-50l0,-50l0,-50z;"/>
   </path>
   </path fill="#ff0000" id="path02" d="m100,100l0,-50l50,0l50,0l50,0l50,0l0,50l50,0l0,50l0,50l0,50l0,50l-50,0l0,50l-50,0l-50,0l-50,0l-50,0l0,-50l-50,0l0,-50l0,-50l0,-50l0,-50l50,0z"/>
</symbol>
<symbol id="sq01">
<use xlink:href="#sq00" opacity="0.75"/>
<use xlink:href="#sq00" transform="scale(0.5)" opacity="0.75"/>
<use xlink:href="#sq00" transform="scale(0.5) translate(400)" opacity="0.75"/>
<use xlink:href="#sq00" transform="scale(0.5) translate(0 400)" opacity="0.75"/>
<use xlink:href="#sq00" transform="scale(0.5) translate(400 400)" opacity="0.75"/>
<use xlink:href="#sq00" transform="scale(0.25) translate(600 600)" opacity="0.75"/>
</symbol>
<use xlink:href="#sq01" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.5)" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.5) translate(400)" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.5) translate(0 400)" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.5) translate(400 400)" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.25) translate(600 600)" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.25) translate(100 600)" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.25) translate(1100 600)" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.25) translate(600 100)" opacity="0.75"/>
<use xlink:href="#sq01" transform="scale(0.25) translate(600 1100)" opacity="0.75"/>
</svg>