SOURCE

<svg width="500px" height="500px" >
    <circle id="cir"  cx="100" cy="100" r="80px"></circle>
<rect id="rect1" width="100" height="20" x="80" y="90"  ></rect>
<rect id="rect2" width="70" height="30" x="90" y="85"  ></rect>

<circle  cx="100" cy="100" r="5px" fill="white"></circle>

  <defs>
    <g id="zuhe">
        <path d="M24,40 A25,25 0 1 1 60 22 " stroke="black"
            stroke-width="10" fill="white"/>
        <path d="M55,40 L31,16 " stroke="black" stroke-width="10px"/>
    </g>
    <g id="zuhe1">
        <path d="M24,40 A25,25 0 1 1 60 22 " stroke="black"
            stroke-width="10" fill="white"/>
        <path d="M55,40 L31,16 " stroke="black" stroke-width="10px"/>
    </g>
    <g id="zuhe2">
        <path d="M24,40 A25,25 0 1 1 60 22 " stroke="black"
            stroke-width="10" fill="white"/>
        <path d="M55,40 L31,16 " stroke="black" stroke-width="10px"/>
    </g>
    <g id="zuhe3">
        <path d="M24,40 A25,25 0 1 1 60 22 " stroke="black"
            stroke-width="10" fill="white"/>
        <path d="M55,40 L31,16 " stroke="black" stroke-width="10px"/>
    </g>
  </defs>

    <use xlink:href="#zuhe" x="200" y="200"  stroke-width="2"></use>
    <use xlink:href="#zuhe1" x="300" y="200" stroke-width="5"></use>
    <use xlink:href="#zuhe2" x="300" y="300" ></use>
     <use xlink:href="#zuhe3" x="200" y="300" ></use>

     <rect id="rect11" x="255" y="236" width="63" height="60"></rect>
</svg>

@keyframes bianse{

    0%{
        fill:gold;
    }
    33%{
        fill:#f60;
    }
    66%{
        fill:#F30;
    }
    100%{
        fill:gold;
    }
}
#cir{
    animation: bianse 45s infinite;
}
@keyframes xuanzhuan{

    0%{
        fill:gold;
        transform:  rotate(90deg);
    }
    33%{
        fill:#f60;
         transform: rotate(180deg);
    }
    66%{
        fill:#F30;
         transform: rotate(270deg);
    }
    100%{
        fill:gold;
         transform: rotate(360deg);
    }
}
#rect1{
    transform-box: fill-box;
    transform-origin:20% 50%;
    animation: xuanzhuan 14s infinite linear;
}
@keyframes xuanzhuan2{

    0%{
       
        transform:  rotate(90deg);
    }
    33%{
        
         transform: rotate(180deg);
    }
    66%{
      
         transform: rotate(270deg);
    }
    100%{
       
         transform: rotate(360deg);
    }
}
#rect2{
    transform-box: fill-box;
    transform-origin:14% 50%;
    animation: xuanzhuan2 12s infinite linear;
}
#zuhe{
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin:center;
    /* animation: xuanzhuan2 1s infinite linear; */
    transform: rotate(-14deg);

}
#zuhe1{
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin:center;
    /* animation: xuanzhuan2 1s infinite linear; */
    transform: rotate(75deg);
}
#zuhe2{
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin:center;
    /* animation: xuanzhuan2 1s infinite linear; */
    transform: rotate(175deg);
}
#zuhe3{
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin:center;
    /* animation: xuanzhuan2 1s infinite linear; */
    transform: rotate(260deg);
}
#rect11{
  
    fill:white;
    stroke: black;
    stroke-width: 12px;
    stroke-linejoin: round;
   
}