JSFiddle - React, Tailwind, and code Playground

by tara5

HTML

<svg id="legs" version="1.1" id="orange-legs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="500px" height="500px"   enable-background="new 0 0 150 150" xml:space="preserve">
               <path id="rightLeg" d="M100,100 C100,100 120,100 120,120 L120,230 C120,230 120,250 150,250"  stroke="black"
  stroke-width="3" fill="none"/>
  <path id="leftLeg" d="M100,100 C100,100 120,100 120,120 L120,230 C120,230 120,250 150,250"  stroke="black"
  stroke-width="3" fill="none"/>
              
               
                </svg>

CSS

#rightLeg {
  animation: step 1.6s linear infinite;
  animation-play-state: paused;
  transform: rotate(-15deg);
  transform-origin: 25% 25%;
}

#leftLeg {
  animation: step 1.6s linear infinite alternate;
  animation-play-state: paused;
  transform: rotate(15deg);
  transform-origin: 25% 25%;
}

@keyframes step {
    25%  {
      transform: rotate(0deg);
    }
    50%  {
      transform: rotate(15deg);
    }
    75%  {
      transform: rotate(0deg);
    }
    100%  {
     transform: rotate(-15deg);
    }
}