kaleidonon

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <defs>
 <clipPath id="myCircle">
  <circle cx="200" cy="200" r="200"/>
 </clipPath>
 <symbol id="cinco">
 <g>
  <circle id="svg_1" r="4" cy="200" cx="200" fill="#F8AC00">
   <animate attributename="r" begin="0s" dur="4s" repeatcount="indefinite" values="3;30"/>
   <animate attributename="cx" begin="0s" dur="4s" repeatcount="indefinite" values="200;150;200"/>
  </circle>
  <circle id="svg_2" r="4" cy="200" cx="200" fill="#3E2C83">
   <animate attributename="r" begin="0s" dur="4s" repeatcount="indefinite" values="3;30"/>
   <animate attributename="cx" begin="0s" dur="4s" repeatcount="indefinite" values="200;250;200"/>
  </circle>
  <circle id="svg_3" r="4" cy="200" cx="200" fill="#28AB42">
   <animate attributename="r" begin="0s" dur="4s" repeatcount="indefinite" values="3;30"/>
   <animate attributename="cy" begin="0s" dur="4s" repeatcount="indefinite" values="200;150;200"/>
  </circle>
  <circle id="svg_3" r="4" cy="200" cx="200" fill="#CC1B24">
   <animate attributename="r" begin="0s" dur="4s" repeatcount="indefinite" values="3;30"/>
   <animate attributename="cy" begin="0s" dur="4s" repeatcount="indefinite" values="200;250;200"/>
  </circle>
  <circle id="svg_4" r="40" cy="200" cx="200" stroke-width="0" fill="#00000">
   <animate attributename="r" begin="0s" dur="2s" repeatcount="indefinite" values="40;4;40"/>
  </circle>
 </g>
 </symbol>
 <symbol id="veinteycinco">
  <use xlink:href="#cinco" x="-50"/>
  <use xlink:href="#cinco" x="50"/>
  <use xlink:href="#cinco" y="50"/>
  <use xlink:href="#cinco" y="-50"/>
  <use xlink:href="#cinco"/>
 </symbol>
 <symbol id="multi">

 <use xlink:href="#veinteycinco"/>
 <use xlink:href="#veinteycinco">
  <animatetransform attributename="transform" attributetype="xml" dur="12s" repeatcount="indefinite" type="rotate" values="0 200 200; -360 200 200"/>
  <animate attributename="x" begin="0s" dur="12s" repeatcount="indefinite" values="-200;-100;-200"/>
 </use>
 <use xlink:href="#veinteycinco">
  <animatetransform attributename="transform" attributetype="xml" dur="12s" repeatcount="indefinite" type="rotate" values="0 200 200; 360 200 200"/>
  <animate attributename="x" begin="0s" dur="12s" repeatcount="indefinite" values="-200;-100;-200"/>
 </use>
 <use xlink:href="#veinteycinco">
  <animatetransform attributename="transform" attributetype="xml" dur="12s" repeatcount="indefinite" type="rotate" values="0 200 200; 360 200 200"/>
  <animate attributename="x" begin="0s" dur="12s" repeatcount="indefinite" values="200;100;200"/>
 </use>
 <use xlink:href="#veinteycinco">
  <animatetransform attributename="transform" attributetype="xml" dur="12s" repeatcount="indefinite" type="rotate" values="0 200 200; -360 200 200"/>
  <animate attributename="x" begin="0s" dur="12s" repeatcount="indefinite" values="200;100;200"/>
 </use>
 </symbol>
 </defs>

<g clip-path="url(#myCircle)">
 <use xlink:href="#multi" transform="rotate(0 200 200)" opacity="0.70"/>
 <use xlink:href="#multi" transform="rotate(90 200 200)" opacity="0.70"/>
</g>

</svg>