<svg id="man-svg" width="100" height="164.166" viewBox="-10 -10 80 180">
  <path id="man-foot-1" d="M34.934,111.051c-.4,7.938-3.874,43.114-4.067,45.93,3.145.26,5.741.348,8.293.735a2.77,2.77,0,0,1,2.57,3,3.093,3.093,0,0,1-2.987,3.14c-.709.084-6.6-.107-9.062.163-4.791.535-6.014-.239-6.565-5.037-1.287-11.2-5.228-48.8-5.288-49.659-.4-5.742,17.412-4.346,17.106,1.727" fill="#00A3D6"/>
  <path id="man-foot-2" d="M34.934,111.051c-.4,7.938-3.874,43.114-4.067,45.93,3.145.26,5.741.348,8.293.735a2.77,2.77,0,0,1,2.57,3,3.093,3.093,0,0,1-2.987,3.14c-.709.084-6.6-.107-9.062.163-4.791.535-6.014-.239-6.565-5.037-1.287-11.2-5.228-48.8-5.288-49.659-.4-5.742,17.412-4.346,17.106,1.727" fill="#00A3D6"/>
  <path id="man-body" d="M36.735,42.614C43.546,41.1,53.295,32.2,53.295,21.345A21.823,21.823,0,0,0,31.272,0C16.128,0,9.332,10.97,9.332,20.987c0,8.347,4.832,13.751,13.028,21.174C15.457,51.612,4.467,68.2.111,108.759-1.518,126,15.23,129.12,25.724,129c8.56.118,27.572.015,27.571-21.416,0-37.33-10.95-55.357-16.56-64.972" fill="#00A3D6"/>

    <style>
        #man-foot-1 {
            transform-origin: 20% 30%;
            animation: walkAnim-1 2s linear infinite 0s;
        }
        @keyframes walkAnim-1{
            0% {
                transform: rotate(-15deg)
            }
            50% {
                transform: rotate(18deg)
            }
            100% {
                transform: rotate(-15deg)
            }
        }
        #man-foot-2 {
            transform-origin: 20% 30%;
            animation: walkAnim-2 2s linear infinite 0s;
        }
        @keyframes walkAnim-2{
            0% {
                transform: rotate(18deg)
            }
            50% {
                transform: rotate(-15deg)
            }
            100% {
                transform: rotate(18deg)
            }
        }
        #man-body {
            transform-origin: 0% 100%;
            animation: walkAnim-body 2s linear infinite 0s;
        }
        @keyframes walkAnim-body{
            0% {
                transform: scaleY(1)
            }
            25% {
                transform: scaleY(1.05)
            }
            50% {
                transform: scaleY(1)
            }
            75% {
                transform: scaleY(1.05)
            }
            100% {
                transform: scaleY(1)
            }
        }
    </style>
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.