svg js animation

Example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<svg width="100px" viewBox="0 0 100 100">
  <rect width="100" height="100"  style="fill:none;stroke-width:0;stroke:white" /> 
<defs>
    <polygon  id="aspa" points="50,49,51,51,60,54,95,50,95,49"/>
    <polygon  id="torreta" points="49,50,51,50,53,120,48,120"  fill="none" stroke="white" stroke-width="2" fill="none"/>
    <g id="aspas" class="aspas" style="fill:white;stroke:white;stroke-width:0">
      <!-- para centrar la rotación -->
      <circle cx="50" cy="50" r="50" stroke="none" stroke-width="1" fill="none" />
      <circle cx="50" cy="50" r="3" stroke="none" stroke-width="1" fill="white" />
      <use xlink:href="#aspa" />
      <use xlink:href="#aspa" transform="rotate(120 50 50)" />
      <use xlink:href="#aspa" transform="rotate(240 50 50)"/>
    </g>
    <g id="molino" >
      <use xlink:href="#torreta" />
      <use xlink:href="#aspas" />
    </g>
 </defs>
 <use xlink:href="#molino" x="86" y="33" transform="scale( 0.5 0.5)"/>
 <use xlink:href="#molino" x="0" y="4" transform="scale( 0.7 0.7)"/>
</svg>

CSS

body {background:black;margin:0;padding:0}

JavaScript

window.addEventListener("load", function load(event){
	window.removeEventListener("load", load, false);
  console.log("asds");
  var element=document.getElementById("aspas");
		//Velocity(element, { rotateZ: 360 }, {duration:4000,easing: "linear",loop:true}); 
    TweenMax.to("#aspas", 5, {rotation:360, ease:"linear",  transformOrigin:"center center",
    	onComplete:function() {    this.restart()}});
}, false);