<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 648 400" x="0px" y="0px"
	 width="648px" height="400px"  xml:space="preserve">
  <title>schaukel-wild</title>
  <g id="bg">
    <rect width="648" height="400" fill="#fff"/>
  </g>
  <g class="base" id="swinging-girl" transform="translate(9.000000, 0.000000)">
    
      <g id="legs">
        <polyline points="572.7 131 581.5 130.1 589.7 130.8 582.1 139.8 572.1 141.9Z" fill="red" stroke="red"/>
        <polyline points="529.1 142.3 556.7 137.8 570.9 132.3Z" fill="none" stroke="#f99"/>
        <path d="M523.6,138.1c-1.7,6.3,50.6-12,50.6-12" fill="none" stroke="#f99"/>
        <path d="M542,149.5s25.8-8.1,28.9-7.1,8.5-10.4,1.6-10.8c-1.4-.1-1.6.7-1.6.7" fill="#fff" stroke="#f99"/>
        <path d="M573.4,126l10.7-3.7,5.3,1-6.5,5.7-8,1S577.5,127.1,573.4,126Z" fill="red" stroke="red"/>
      </g>
	  
 
    <g id="body">
      <g>
        <path d="M490.9,104.5s-9.8-19.6-1.7-23.6,14.2,8.7,14.7,16.1-1.9,21.3-1.9,21.3" fill="#ccf" stroke="red"/>
        <line x1="259.9" y1="7.6" x2="396" y2="169.8" fill="none" stroke="#666" stroke-width="2"/>
        <polyline points="425.8 204 413.4 213.1 424.5 217.5 463.1 186.9" fill="none" stroke="#666" stroke-width="2"/>
        <path d="M331.9,212.9s21.1-2.4,33.9-4.9,17.9-8.1,26.6-9.2,6.3,3.1,27.3,4.8c6.6.5,35.4-6.6,42.3-17.2,1.9-3,12.6-23.3,34-20.1s60.8-24.2,50-16.8-60.6-48.8-54.4-44c4.4,3.3-28.2,35.4-35.3,39.8s-66.7,26.8-66.7,26.8-16-.2-21.8-2c-11.7-3.6-16.6,5.3-16.6,5.3s-1.3,6-2.8,15.3c-.1.9.2-.7,0,0-.4,2.5,7,2.1,3.3,8-2.2,3.7-11.4,8.3-11.7,7.5l-1.1,1.5Z" fill="red"/>
        <path d="M341.7,130.8l-2.3-14.6-.2-1.3s-2.5-4.3-1.1-8.4,2.6-7.4,5.3-7.3,3.5,5.8,3.5,5.8l-.7,5.8,1.1,8.4" fill="#fff" stroke="#f99"/>
        <line x1="355.6" y1="152.1" x2="356.8" y2="170" fill="#fff" stroke="#f99"/>
        <line x1="326.6" y1="193.6" x2="313.9" y2="196.6" fill="#fff" stroke="#f99"/>
        <path d="M331.9,212.9s-2-3.6-14.1-3.2" fill="none" stroke="#f99"/>
        <line x1="405.6" y1="154.6" x2="425.4" y2="218.7" fill="none" stroke="#666" stroke-width="2"/>
        <polyline points="259.9 7.6 404.4 152.9 463.5 187.6" fill="none" stroke="#666" stroke-width="2"/>
        <line x1="413.2" y1="213.6" x2="410" y2="202.6" fill="none" stroke="#666" stroke-width="2"/>
        <path d="M349.2,98.4c-.5,6.9,2.4,10,1.5,14.3s-9.1,18.5-10.7,25.8.1,18.4.1,18.4l-8.7,22.7s-9,23.6-2.5,28.6,13.8-5.3,16.9-11.6S351,168,351,168l3.5-15.4,1-18.9,1.2-17.1s-.9,1.4,1.9-5.5,3.7-5.4,5.2-9.6a9.3,9.3,0,0,0-1.1-7.7l-6.3-4.9S349.7,91.5,349.2,98.4Z" fill="#fff" stroke="#ff9766"/>
      </g>
    </g>
    <g id="head">
      <g>
        <path d="M302.9,224.5c11.5-5.4,17.9-16.2,14.2-24.1s-16-10.1-27.6-4.7-17.9,16.1-14.2,24.1S291.3,229.8,302.9,224.5Z" fill="none" stroke="#f99"/>
        <path d="M287.8,209.9a2.6,2.6,0,1,0,1-5.1,2.5,2.5,0,0,0-3,2A2.6,2.6,0,0,0,287.8,209.9Z" fill-rule="evenodd"/>
        <path d="M294.7,223.2a2.6,2.6,0,0,0,3.1-2.1,2.7,2.7,0,0,0-2.1-3,2.6,2.6,0,0,0-3.1,2.1A2.7,2.7,0,0,0,294.7,223.2Z" fill-rule="evenodd"/>
        <path d="M298.7,205.3a3.1,3.1,0,0,1,2.3,4" fill="none" stroke="#f90" fill-rule="evenodd"/>
        <g>
          <path d="M282.7,208c1.5,1.3,2.4,3.4,3.3,5.4l-1.9,2.3,4.6,3.8c-2.7,1.7-6.9,9.9-5.6,8.4" fill="#fc6" fill-rule="evenodd"/>
          <path d="M281.6,209a34.2,34.2,0,0,1,2.9,3.9c-.1.6-1.2,1.5-1.6,1.9a1.5,1.5,0,0,0,.4,2.1l4.6,3.9v-2.4c-2.6,1.9-6,6.3-6.4,9.5a1.5,1.5,0,0,0,1.7,1.6,1.1,1.1,0,0,0,.9-.5c1.4-1.4-.5-3.7-1.9-2.3h.5l1.7,1.6c.3-2.4,3.6-6.2,5.4-7.5a1.6,1.6,0,0,0-.1-2.4l-4.6-3.8.3,2.1,2-2.3a1.6,1.6,0,0,0,.1-1.5,16.8,16.8,0,0,0-3.6-5.7c-1.3-1.4-3.6.5-2.2,1.9Z" fill="#fc6"/>
        </g>
        <path d="M302.3,191.9s-24.5-10.1-33,.7c-4.1,5.3-4.1,5.3-26,11.6-13.9,4-22.6-.2-33.7,4.1l-35.4,31.4s35.6-7.5,44.7-6.4,30.7,4.5,45.4.9c17.2-4.3,28.1-5,25.6-7.7-4.6-5.1-10.9-19.7-10.9-19.7Z" fill="#fc6" stroke="#fc6" fill-rule="evenodd"/>
        <path d="M309.9,209.9c1.8-7.3-5.5-9.1-5.5-9.1" fill="none" stroke="#ea2d2d" stroke-linecap="round" stroke-width="2" fill-rule="evenodd"/>
        <path d="M304.4,200.8s17.3-4.7,5.5,9.1" fill="none" stroke="#ea2d2d" stroke-linecap="round" stroke-width="2" fill-rule="evenodd"/>
      </g>
    </g>
  </g>
</svg>
@keyframes swinging {
  0% {transform: rotate(55deg);}
  10%{transform: rotate(-55deg);}
  20%{transform: rotate(55deg);}
  30%{transform: rotate(-65deg);}
  40%{transform: rotate(65deg);}
  50%{transform: rotate(-85deg);}
  60%{transform: rotate(85deg);}
  70%{transform: rotate(-410deg);}
  80% {transform: rotate(-300deg);}
  90%{transform: rotate(-410deg);}
  100%{transform: rotate(-300deg);}
  
  }

@keyframes swinging-legs{
  
  0% {transform: rotate(8deg);}
  10%{transform: rotate(-70deg);}
  20%{transform: rotate(10deg);}
  30%{transform: rotate(-80deg);}
  40%{transform: rotate(12deg);}
  50%{transform: rotate(-85deg);}
  60%{transform: rotate(16deg);}
  70%{transform: rotate(-88deg);}
  80% {transform: rotate(20deg);}
  90%{transform: rotate(-92deg);}
  100%{transform: rotate(24deg);}

}




@keyframes swinging-body{
  0% {transform: rotate(-20deg);}
  50%{transform: rotate(20deg);}
  100%{transform: rotate(-20deg);}
}



@keyframes swinging-ponytail{
  0%, 20%, 40%, 60%, 80%, 100% {transform: rotate(-50deg);}
  10%, 30%, 50%, 70%, 90% {transform: rotate(140deg);}
  
}



.base{
  transition: transform 2s;
  transform-origin: 259px 7px;
  animation: swinging 10s infinite; 
  
}



#legs{
  transform-origin: top;
  animation: swinging-legs 10s infinite;   
}

#ponytail{
  transition: transform 2s;
  transform-origin: top;
  animation: swinging-ponytail 10s infinite;
   
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://www.diewebdesignerin.de/animate.css