Skip to content

Instantly share code, notes, and snippets.

@MuttakinHasib

MuttakinHasib/index.html

Created October 17, 2019 12:52
Show Gist options
  • Save MuttakinHasib/5ae3d8c43592a54417453f39ae6a27e2 to your computer and use it in GitHub Desktop.
Save MuttakinHasib/5ae3d8c43592a54417453f39ae6a27e2 to your computer and use it in GitHub Desktop.
Download ZIP
SVG bicycal
Raw
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
Raw
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
});
}
Raw
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>
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment