<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <defs>
  <filter height="200%" width="200%" y="-50%" x="-50%" id="svg_2_blur">
   <feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
  </filter>
 </defs>
 <title>Layer 1</title>
 <symbol id="12">
  <path stroke="none" id="path2985" filter="url(#svg_2_blur)">
  <animate attributename="d" dur="10s" begin="start.mousedown" repeatcount="1" values="
  m200,20l0,180l-180,0l180,0l0,180l0,-180l180,0l-180,0l0,-180z;
  m200,20l-100,80l-80,100l80,100l100,80l100,-80l80,-100l-80,-100l-100,-80z;
  m200,20l0,180l-180,0l180,0l0,180l0,-180l180,0l-180,0l0,-180z;
  m200,20l-100,80l-80,100l80,100l100,80l100,-80l80,-100l-80,-100l-100,-80z;
  m200,20l-180,0l0,180l0,180l180,0l180,0l0,-180l0,-180l-180,0z;
  m200,20l0,180l-180,0l180,0l0,180l0,-180l180,0l-180,0l0,-180z"/>
  </path>
 </symbol>
 <g>
  <use xlink:href="#12" fill="red"/>
  <use xlink:href="#12" fill="orange" transform="scale(0.8) translate(50,50)"/>
  <use xlink:href="#12" fill="yellow" transform="scale(0.6) translate(133.33,133.33)"/>
  <use xlink:href="#12" fill="white" transform="scale(0.4) translate(300,300)"/>
 <animatetransform attributename="transform" attributetype="xml" type="rotate" begin="start.mousedown" dur="10s" values="0 200 200;360 200 200" repeatcount="1"/>
 </g>
 <rect id="start" x="0" y="0" width="400" height="400" opacity="0"/>
</svg>