svg animation

Example

by jpeter06

HTML

<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" class="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>
<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" class="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"...

CSS

body {background:blue;margin:0;padding:0}
@keyframes rotaspas {
  from {
    transform:   rotate(0deg); 
  }
  to {
    transform:  rotate(360deg);
  }
}


.aspas {
  animation-duration: 5s;
  animation-name: rotaspas;
  animation-iteration-count: infinite;
  animation-direction: normal;
  transform-origin: center center;
  animation-timing-function:linear;
}