CCCCCIRCLES

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<symbol id="fiver">
 <g>
  <line id="svg_31" y2="200" x2="200" y1="200" x1="200" stroke-width="2" fill="none">
    <animate attributename="y2" begin="first.end" dur="1s" fill="freeze" values="200;100" id="second"/>
  </line>
  <line id="svg_32" y2="200" x2="200" y1="200" x1="200" stroke-width="2" fill="none">
    <animate attributename="x2" begin="first.end" dur="1s" fill="freeze" values="200;300"/>
  </line>
  <line id="svg_33" y2="200" x2="200" y1="200" x1="200" stroke-width="2" fill="none">
    <animate attributename="y2" begin="first.end" dur="1s" fill="freeze" values="200;300"/>
  </line>
  <line id="svg_34" y2="200" x2="200" y1="200" x1="200" stroke-width="2" fill="none">
    <animate attributename="x2" begin="first.end" dur="1s" fill="freeze" values="200;100"/>
  </line>
  <circle id="svg_1" r="0" cy="200" cx="200">
    <animate attributename="r" begin="svg_278.mousedown" dur="4s" fill="freeze" values="0;40" id="first"/>
  </circle>
  <circle id="svg_21" r="0" cy="100" cx="200">
    <animate attributename="r" begin="second.end" dur="2s" fill="freeze" values="0;12" id="third"/>
  </circle>
  <circle id="svg_21b" r="0" cy="100" cx="200" fill="#ffffff">
    <animate attributename="r" begin="second.end" dur="2s" repeatcount="indefinite" values="0;6;0"/>
  </circle>
  <circle id="svg_22" r="0" cy="200" cx="300">
    <animate attributename="r" begin="second.end" dur="2s" fill="freeze" values="0;12"/>
  </circle>
  <circle id="svg_22b" r="0" cy="200" cx="300" fill="#ffffff">
    <animate attributename="r" begin="second.end" dur="2s" repeatcount="indefinite" values="0;6;0"/>
  </circle>
  <circle id="svg_23" r="0" cy="300" cx="200">
    <animate attributename="r" begin="second.end" dur="2s" fill="freeze" values="0;12"/>
  </circle>
  <circle id="svg_23b" r="0" cy="300" cx="200" fill="#ffffff">
    <animate attributename="r" begin="second.end" dur="2s" repeatcount="indefinite" values="0;6;0"/>
  </circle>
  <circle id="svg_24" r="0" cy="200" cx="100">
    <animate attributename="r" begin="second.end" dur="2s" fill="freeze" values="0;12"/>
  </circle>
  <circle id="svg_24b" r="0" cy="200" cx="100" fill="#ffffff">
    <animate attributename="r" begin="second.end" dur="2s" repeatcount="indefinite" values="0;6;0"/>
  </circle>

  <animatetransform attributename="transform" attributetype="xml" dur="6s" repeatcount="indefinite" type="rotate" values="0 200 200; 360 200 200"/>
 </g>
</symbol>
<symbol id="fiver2">
  <g>
  <use xlink:href="#fiver" fill="#7f7f7f" stroke="#7f7f7f"/>
  <use xlink:href="#fiver" transform="translate(-100 -100) scale(1.5)" opacity="0.25" fill="#7f7f7f" stroke="#7f7f7f"/>
  <g opacity="0.8">
  <use xlink:href="#fiver" transform="scale(0.5)" fill="#7f7f7f"/>
  <use xlink:href="#fiver" transform="translate(200 0) scale(0.5)" fill="#7f7f7f" stroke="#7f7f7f"/>
  <use xlink:href="#fiver" transform="translate(200 200) scale(0.5)" fill="#7f7f7f" stroke="#7f7f7f"/>
  <use xlink:href="#fiver" transform="translate(0 200) scale(0.5)" fill="#7f7f7f" stroke="#7f7f7f"/>
  </g>
  <use xlink:href="#fiver" stroke="#ffffff" fill="#ffffff" transform="translate(150 150) scale(0.25)"/>
</symbol>
<symbol id="fiver3">
  <use xlink:href="#fiver2"/>
  <g opacity="0.8">
  <use xlink:href="#fiver2" transform="scale(0.5)"/>
  <use xlink:href="#fiver2" transform="translate(200 0) scale(0.5)"/>
  <use xlink:href="#fiver2" transform="translate(200 200) scale(0.5)"/>
  <use xlink:href="#fiver2" transform="translate(0 200) scale(0.5)"/>
  </g>
</symbol>
  <use xlink:href="#fiver3"/>
  <g opacity="0.8">
  <use xlink:href="#fiver3" transform="scale(0.5)"/>
  <use xlink:href="#fiver3" transform="translate(200 0) scale(0.5)"/>
  <use xlink:href="#fiver3" transform="translate(200 200) scale(0.5)"/>
  <use xlink:href="#fiver3" transform="translate(0 200) scale(0.5)"/>
  </g>
  <rect x="0" y="0" width="400" height="400" id="svg_278" opacity="0"/>

</svg>