SVG bicycal

index.html

<div class="bicycal">
<div class="wheel wheel-1">
 <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 66.7 66.7" style="enable-background:new 0 0 66.7 66.7;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#414547;stroke-width:3;stroke-miterlimit:10;}
	.st2{fill:none;stroke:#A0A29E;stroke-width:2;stroke-miterlimit:10;}
	.st3{fill:none;stroke:#414547;stroke-width:0.75;stroke-miterlimit:10;}
	.st4{fill:#2E3436;}
	.st5{fill:#2E3436;stroke:#FFFFFF;stroke-width:0.75;stroke-miterlimit:10;}
</style>
<title>Asset 2</title>
<circle class="st0" cx="33.4" cy="33.4" r="28.6"/>
<g>
	<circle class="st1" cx="33.4" cy="33.4" r="31.5"/>
	<circle class="st2" cx="33.4" cy="33.4" r="29.2"/>
</g>
<line class="st3" x1="33.4" y1="33.4" x2="33.4" y2="4.2"/>
<line class="st3" x1="33.4" y1="33.4" x2="27.6" y2="4.7"/>
<line class="st3" x1="33.4" y1="33.4" x2="22.1" y2="6.4"/>
<line class="st3" x1="33.4" y1="33.4" x2="17" y2="9.2"/>
<line class="st3" x1="33.4" y1="33.4" x2="12.6" y2="12.8"/>
<line class="st3" x1="33.4" y1="33.4" x2="9" y2="17.3"/>
<line class="st3" x1="33.4" y1="33.4" x2="6.3" y2="22.4"/>
<line class="st3" x1="33.4" y1="33.4" x2="4.7" y2="28"/>
<line class="st3" x1="33.4" y1="33.4" x2="4.2" y2="33.7"/>
<line class="st3" x1="33.4" y1="33.4" x2="4.8" y2="39.5"/>
<line class="st3" x1="33.4" y1="33.4" x2="6.6" y2="44.9"/>
<line class="st3" x1="33.4" y1="33.4" x2="9.4" y2="50"/>
<line class="st3" x1="33.4" y1="33.4" x2="13.1" y2="54.4"/>
<line class="st3" x1="33.4" y1="33.4" x2="17.6" y2="58"/>
<line class="st3" x1="33.4" y1="33.4" x2="22.8" y2="60.6"/>
<line class="st3" x1="33.4" y1="33.4" x2="28.3" y2="62.1"/>
<line class="st3" x1="33.4" y1="33.4" x2="34.1" y2="62.5"/>
<line class="st3" x1="33.4" y1="33.4" x2="39.8" y2="61.8"/>
<line class="st3" x1="33.4" y1="33.4" x2="45.3" y2="60"/>
<line class="st3" x1="33.4" y1="33.4" x2="50.3" y2="57.1"/>
<line class="st3" x1="33.4" y1="33.4" x2="54.6" y2="53.3"/>
<line class="st3" x1="33.4" y1="33.4" x2="58.1" y2="48.8"/>
<line class="st3" x1="33.4" y1="33.4" x2="60.7" y2="43.6"/>
<line class="st3" x1="33.4" y1="33.4" x2="62.2" y2="38"/>
<line class="st3" x1="33.4" y1="33.4" x2="62.5" y2="32.3"/>
<line class="st3" x1="33.4" y1="33.4" x2="61.7" y2="26.6"/>
<line class="st3" x1="33.4" y1="33.4" x2="59.9" y2="21.1"/>
<line class="st3" x1="33.4" y1="33.4" x2="56.9" y2="16.1"/>
<line class="st3" x1="33.4" y1="33.4" x2="53.1" y2="11.8"/>
<line class="st3" x1="33.4" y1="33.4" x2="48.5" y2="8.4"/>
<line class="st3" x1="33.4" y1="33.4" x2="43.3" y2="5.9"/>
<line class="st3" x1="33.4" y1="33.4" x2="37.7" y2="4.5"/>
<circle class="st4" cx="33.4" cy="33.4" r="5.7"/>
<circle class="st5" cx="33.4" cy="33.4" r="4.4"/>
</svg>

  </div> 
  <div class="man">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.09 111.83"><defs><style>.cls-1{fill:transparent;}</style></defs><title>Man</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="17.04" cy="11.33" r="11.33"/><path class="cls-1" d="M0,50.47,22.85,47.1s3.74.12,4.55-5.06l4-15.85s2.25-3.37,6.3-.94L84.09,52s2.49,2.06-.38,3.5l-36.14,19s-2.87,1.12,5,12.42l14,19.41s.13,2.19-5.24,2.94l-17.54,2.49H42.55L56.37,105s1.25-.56-1-3.56L35,75.38s-1.31-2.06,1.62-3.44L64.14,52.81s1.37-1.25-2.12-3L37.11,36.49s-2.21-1.13-2.68,2.84L32.15,52.87a2.28,2.28,0,0,1-1.47,1.25c-1,.22-10.64-1.06-10.64-1.06Z"/></g></g></svg>
  </div>
  <div class="wheel wheel-2"><?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 66.7 66.7" style="enable-background:new 0 0 66.7 66.7;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:none;stroke:#414547;stroke-width:3;stroke-miterlimit:10;}
	.st2{fill:none;stroke:#A0A29E;stroke-width:2;stroke-miterlimit:10;}
	.st3{fill:none;stroke:#414547;stroke-width:0.75;stroke-miterlimit:10;}
	.st4{fill:#2E3436;}
	.st5{fill:#2E3436;stroke:#FFFFFF;stroke-width:0.75;stroke-miterlimit:10;}
</style>
<title>Asset 2</title>
<circle class="st0" cx="33.4" cy="33.4" r="28.6"/>
<g>
	<circle class="st1" cx="33.4" cy="33.4" r="31.5"/>
	<circle class="st2" cx="33.4" cy="33.4" r="29.2"/>
</g>
<line class="st3" x1="33.4" y1="33.4" x2="33.4" y2="4.2"/>
<line class="st3" x1="33.4" y1="33.4" x2="27.6" y2="4.7"/>
<line class="st3" x1="33.4" y1="33.4" x2="22.1" y2="6.4"/>
<line class="st3" x1="33.4" y1="33.4" x2="17" y2="9.2"/>
<line class="st3" x1="33.4" y1="33.4" x2="12.6" y2="12.8"/>
<line class="st3" x1="33.4" y1="33.4" x2="9" y2="17.3"/>
<line class="st3" x1="33.4" y1="33.4" x2="6.3" y2="22.4"/>
<line class="st3" x1="33.4" y1="33.4" x2="4.7" y2="28"/>
<line class="st3" x1="33.4" y1="33.4" x2="4.2" y2="33.7"/>
<line class="st3" x1="33.4" y1="33.4" x2="4.8" y2="39.5"/>
<line class="st3" x1="33.4" y1="33.4" x2="6.6" y2="44.9"/>
<line class="st3" x1="33.4" y1="33.4" x2="9.4" y2="50"/>
<line class="st3" x1="33.4" y1="33.4" x2="13.1" y2="54.4"/>
<line class="st3" x1="33.4" y1="33.4" x2="17.6" y2="58"/>
<line class="st3" x1="33.4" y1="33.4" x2="22.8" y2="60.6"/>
<line class="st3" x1="33.4" y1="33.4" x2="28.3" y2="62.1"/>
<line class="st3" x1="33.4" y1="33.4" x2="34.1" y2="62.5"/>
<line class="st3" x1="33.4" y1="33.4" x2="39.8" y2="61.8"/>
<line class="st3" x1="33.4" y1="33.4" x2="45.3" y2="60"/>
<line class="st3" x1="33.4" y1="33.4" x2="50.3" y2="57.1"/>
<line class="st3" x1="33.4" y1="33.4" x2="54.6" y2="53.3"/>
<line class="st3" x1="33.4" y1="33.4" x2="58.1" y2="48.8"/>
<line class="st3" x1="33.4" y1="33.4" x2="60.7" y2="43.6"/>
<line class="st3" x1="33.4" y1="33.4" x2="62.2" y2="38"/>
<line class="st3" x1="33.4" y1="33.4" x2="62.5" y2="32.3"/>
<line class="st3" x1="33.4" y1="33.4" x2="61.7" y2="26.6"/>
<line class="st3" x1="33.4" y1="33.4" x2="59.9" y2="21.1"/>
<line class="st3" x1="33.4" y1="33.4" x2="56.9" y2="16.1"/>
<line class="st3" x1="33.4" y1="33.4" x2="53.1" y2="11.8"/>
<line class="st3" x1="33.4" y1="33.4" x2="48.5" y2="8.4"/>
<line class="st3" x1="33.4" y1="33.4" x2="43.3" y2="5.9"/>
<line class="st3" x1="33.4" y1="33.4" x2="37.7" y2="4.5"/>
<circle class="st4" cx="33.4" cy="33.4" r="5.7"/>
<circle class="st5" cx="33.4" cy="33.4" r="4.4"/>
</svg>
  </div>
</div

script.js

const tl = new TimelineMax();
TweenMax.staggerFrom('.wheel-1 svg circle',1.5,{
  drawSVG:0
},0.2);
TweenMax.staggerFrom('.wheel-2 svg circle',1.5,{
  drawSVG:0
},0.2);
TweenMax.staggerFrom('.wheel-1 line',1,{
  drawSVG:0,
  delay:1.5
},.03);
TweenMax.staggerFrom('.wheel-2 line',1,{
  drawSVG:0,
  delay:1.5
},.03);
TweenMax.from('.wheel-1',2,{
  x:-550,
  ease:Expo.easeInOut,
});
TweenMax.from('.wheel-2',2,{
  y:150,
  ease:Expo.easeInOut,
});

TweenMax.from('.man circle,.man path',3,{
  drawSVG:0,
  delay:2,
  ease:Power3.easeInOut
});
TweenMax.to('.man circle,.man path',1,{
  fill: "#f56",
  // strokeWidth: 0,
  stroke:'transparent',
  delay:4.4,
  ease:Power3.easeInOut
});
if(window.innerWidth >= 525){
  TweenMax.to('.bicycal',2,{
  x:'-80%',
  delay:4.6,
  ease:Power3.easeInOut
});
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>

style.scss

body{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  overflow:hidden;
}
.bicycal{
  display:flex;
  transform: translateX(-10%);
  
  .wheel{
    margin-top:8rem;
    width:160px;
    height:160px;
            animation: wheel 5s linear infinite;
    animation-delay:2.2s;

    svg{
      width:100%;
      height:100%;
    }
  }
  .wheel-1{
    margin-right:-2rem;
  }
  .man{
    width:195px;
    
    svg{
      width:100%;
      stroke:#f36;
    }
  }
}

@keyframes wheel {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@media screen and (max-width:755px){
  .wheel{
    width:110px !important;
    height:110px !important;
    margin-top:7rem !important;
  }
  .man{
    width:145px !important;
  }
}
@media screen and (max-width:525px){
  .bicycale{
    transform:translateX(-45%) !important;
  }
  .wheel{
    width:100px !important;
    height:100px !important;
    margin-top:6.5rem !important;
  }
  .man{
    width:140px !important;
  }
}

svg-bicycal.markdown

SVG bicycal

A Pen by Hasib Molla on CodePen.

License.