rotation cercles carrés

<svg width="430" height="430" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<symbol id="duo">
  <circle id="svg_9" r="2" cy="100" cx="100" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ffffff">
     <animateMotion path="m0,0l20,0l0,20" begin="0s" dur="2s" repeatcount="indefinite"/>
     <animate attributeName="r" values="2;10;2" begin="mouv.mousedown" dur="2s" fill="freeze"/>
  </circle>
  <circle id="svg_10" r="2" cy="120" cx="120" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ffffff">
     <animateMotion path="m0,0l-20,0l0,-20" begin="0s" dur="2s" repeatcount="indefinite"/>
     <animate attributeName="r" values="2;10;2" begin="mouv.mousedown" dur="2s" fill="freeze"/>
  </circle>
</symbol>
  <rect id="mouv" height="500" width="500" y="0" x="0" stroke-width="0" fill="#7f7f7f"/>
<symbol id="pdc">
<g>
  <use xlink:href="#duo"/>
  <use xlink:href="#duo" x="40"/>
  <use xlink:href="#duo" x="80"/>
  <use xlink:href="#duo" x="120"/>
  <use xlink:href="#duo" x="160"/>
  <use xlink:href="#duo" x="200"/>
  <use xlink:href="#duo" y="40"/>
  <use xlink:href="#duo" x="200" y="40"/>
  <use xlink:href="#duo" y="80"/>
  <use xlink:href="#duo" x="200" y="80"/>
  <use xlink:href="#duo" y="120"/>
  <use xlink:href="#duo" x="200" y="120"/>
  <use xlink:href="#duo" y="160"/>
  <use xlink:href="#duo" x="200" y="160"/>
  <use xlink:href="#duo" y="200"/>
  <use xlink:href="#duo" x="40" y="200"/>
  <use xlink:href="#duo" x="80" y="200"/>
  <use xlink:href="#duo" x="120" y="200"/>
  <use xlink:href="#duo" x="160" y="200"/>
  <use xlink:href="#duo" x="200" y="200"/>
</g>
</symbol>
  <use xlink:href="#pdc">
  <animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200; 360 200 200" dur="20s" repeatCount="indefinite"/>
  </use>

  <use xlink:href="#pdc" opacity="0.25">
  <animateTransform attributeName="transform" attributetype="xml" type="rotate" values="0 200 200; -360 200 200" dur="20s" repeatCount="indefinite"/>
  </use>

  <use xlink:href="#pdc" opacity="0.05">
  <animateTransform attributeName="transform" attributetype="xml" type="rotate" values="180 200 200; -180 200 200" dur="20s" repeatCount="indefinite"/>
  </use>


</svg>