Skip to content

Instantly share code, notes, and snippets.

@sdmg15

sdmg15/codepen-logo-drawing-animation.markdown

Created August 16, 2016 16:02
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
CodePen Logo Drawing Animation
Raw
index.html
<a href="http://codepen.io/smalinux/" target="_blank" title="Just say Hello!"><div class="FollowMe"></div></a>
<div class="container">
<svg version="1.1" id="OBJECTS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1400px" height="800px" viewBox="0 0 1400 800" enable-background="new 0 0 1400 800" xml:space="preserve">
<g id="logo">
<path id="c" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" d="M514.6,380.8
c-10.6-8.9-26.4-7.5-35.3,3.1c-8.9,10.6-7.5,26.4,3.1,35.3c9.3,7.8,22.9,7.8,32.2,0"/>
<g id="elO">
<polygon id="s6" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" points="
616.3,389.3 578.3,414.7 540.4,389.3 578.3,364 "/>
<polygon id="s5" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" points="
616.3,414.7 578.3,440 540.4,414.7 578.3,389.3 "/>
<line id="s4" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" x1="540.4" y1="389.3" x2="540.4" y2="414.7"/>
<line id="s3" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" x1="578.3" y1="364.3" x2="578.3" y2="389.3"/>
<line id="s2" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" x1="578.3" y1="414.7" x2="578.3" y2="440.1"/>
<line id="s1" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" x1="616.3" y1="414.7" x2="616.3" y2="389.3"/>
</g>
<path id="d" fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" d="M643.5,424v-47.5h15.3
c12.9,0,23.4,10.6,23.4,23.5c0,12.9-10.5,23.5-23.4,23.5H643"/>
<polyline id="e1" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" points="
743.6,376.6 711.1,376.6 711.1,423.4 743.6,423.4 "/>
<line id="e1_" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" x1="711.1" y1="400" x2="733.2" y2="400"/>
<path id="p" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" d="M771.2,427.3
v-50.7h16.9c6.5,0,11.7,5.2,11.7,11.7s-5.2,11.7-11.7,11.7h-16.9"/>
<polyline id="e2" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" points="
861.7,376.6 829.2,376.6 829.2,423.4 861.7,423.4 "/>
<line id="e2_" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" x1="829.2" y1="400" x2="851.3" y2="400"/>
<polyline id="n" fill="none" stroke="#000000" stroke-width="6.72" stroke-linecap="round" stroke-linejoin="round" points="
887.5,427.3 887.5,376.7 926.5,423.4 926.5,372.8 "/>
</g>
<g id="elHand">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E9B68C" d="M997.6,392.2l-4.4,0.5c-5.6,0.6-10.7-3.4-11.3-9v0
c-0.6-5.6,3.4-10.7,9-11.4l15.7-1.8l19-9.5l39.3,7.3l41.3,47.9l-28.5,26.4l-38.4-18.6c0,0-2-2-5-4.8l-15.8,1.8
c-5.6,0.6-10.7-3.4-11.3-9c-0.2-1.5,0-3,0.5-4.4c-5.6,0.6-10.7-3.4-11.3-9C996,396.2,996.5,394,997.6,392.2z"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFD6B6" points="1107.3,408.4 1051,437.4 1103.3,539.2 1174.3,539.2 "/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFD6B6" d="M1134.3,463.9l-10.8,2.5c0,20.7-60.8-6.6-77.1-20.2l0,0
l-50.9-55.4c-9.9-10.7,11.8-16,22.8-3.4l21.6,24.6c8.6,9.8,23.7,8.9,30.7-0.3c13.8-18.2-7.3-34.9-22.2-35.8l-45.3-3.6
c-16.6-1.3-21.1-17.6-6.6-18l52.2-1.4c8.6-0.2,11.1,1.3,14.4,2.6l36.3,14.7c8.7,3.5,11.6,8.1,15.5,15.4l12.2,62L1134.3,463.9z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFE8D6" d="M1004.7,362.2c-9.2,1.3-14.4-1.4-16.2-4.3
c1.1-2.1,3.8-3.6,8.1-3.7l10.9-0.3C1007.8,357.9,1007.4,361.8,1004.7,362.2z"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="1089.1,523.6 1155.2,489.6 1132.2,444.9 1066.1,478.8
"/>
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#23292A" points="1387.9,1121.5 1073,501.8 1146.8,463.9 1469.7,1100.2
"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#B9BDC0" cx="1078" cy="486.9" r="3.3"/>
<g>
<g id="elSen">
<path id="zen" fill="#B9BDC0" d="M934.4,372.3c0.7-0.2,1.4-0.6,1.8-1c3.5-1.7,8-5,8-5l21.5,3.3l-1.2,7.5l-1.2,7.5l-21.5-3.3
c0,0-3.4-4.8-6.3-7.4c0,0.1,0.1,0.2,0.1,0.2c-0.1-0.2-0.3-0.3-0.5-0.4c0-0.1-0.1-0.1-0.1-0.2c-0.3-0.3-0.6-0.5-0.9-0.7
C934.4,372.6,934.4,372.5,934.4,372.3z"/>
<rect x="954.4" y="366.1" transform="matrix(0.1513 -0.9885 0.9885 0.1513 439.4185 1262.9722)" fill="#4F5455" width="1.5" height="19"/>
<circle fill="#4F5455" cx="945.3" cy="374.1" r="1.5"/>
</g>
<path fill="#23292A" d="M970.2,366.1l150.2,23c4.7,0.7,7.9,5.1,7.2,9.8l-0.9,6.1c-0.7,4.7-5.1,7.9-9.8,7.2l-150.2-23L970.2,366.1z
"/>
<rect x="953.9" y="375" transform="matrix(0.1514 -0.9885 0.9885 0.1514 446.9003 1275.1072)" fill="#B9BDC0" width="24.4" height="4.6"/>
<rect x="949.8" y="374.7" transform="matrix(0.1515 -0.9885 0.9885 0.1515 443.9958 1270.4648)" fill="#23292A" width="24.4" height="3.8"/>
<rect x="1098.9" y="396.8" transform="matrix(0.1514 -0.9885 0.9885 0.1514 547.936 1437.2114)" fill="#B9BDC0" width="24.4" height="5.3"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFD6B6" d="M1029.7,427.9l-34.2-37.2c-9.9-10.7,11.8-16,22.8-3.4l21.6,24.6
c0.6,0.7,1.3,1.4,2,2L1029.7,427.9z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFE8D6" d="M1009.9,391.6c-7.4-9.3-14.7-7.8-15.8-4.9c0,1.4,0.6,3.1,2.3,4.8
l8.4,9.2C1008.6,398,1011.8,394.1,1009.9,391.6z"/>
</g>
</svg>
</div>
Raw
script.js
var c = MorphSVGPlugin.pathDataToBezier("#c", {align:"#zen", offsetX:-1, offsetY:-9}),
s1 = MorphSVGPlugin.pathDataToBezier("#s1", {align:"#zen", offsetX:-1, offsetY:-9}),
s2 = MorphSVGPlugin.pathDataToBezier("#s2", {align:"#zen", offsetX:-1, offsetY:-9}),
s3 = MorphSVGPlugin.pathDataToBezier("#s3", {align:"#zen", offsetX:-1, offsetY:-9}),
s4 = MorphSVGPlugin.pathDataToBezier("#s4", {align:"#zen", offsetX:-1, offsetY:-9}),
s5 = MorphSVGPlugin.pathDataToBezier("#s5", {align:"#zen", offsetX:-1, offsetY:-9}),
s6 = MorphSVGPlugin.pathDataToBezier("#s6", {align:"#zen", offsetX:-1, offsetY:-9}),
d = MorphSVGPlugin.pathDataToBezier("#d", {align:"#zen", offsetX:-1, offsetY:-9}),
e1 = MorphSVGPlugin.pathDataToBezier("#e1", {align:"#zen", offsetX:-1, offsetY:-9}),
e1_ = MorphSVGPlugin.pathDataToBezier("#e1_", {align:"#zen", offsetX:-1, offsetY:-9}),
p = MorphSVGPlugin.pathDataToBezier("#p", {align:"#zen", offsetX:-1, offsetY:-9}),
e2 = MorphSVGPlugin.pathDataToBezier("#e2", {align:"#zen", offsetX:-1, offsetY:-9}),
e2_ = MorphSVGPlugin.pathDataToBezier("#e2_", {align:"#zen", offsetX:-1, offsetY:-9}),
n = MorphSVGPlugin.pathDataToBezier("#n", {align:"#zen", offsetX:-1, offsetY:-9});
var screenHeight = window.innerHeight;
TweenMax.set("svg", {
visibility: "visible",
height: screenHeight
});
TweenMax.set(".container", {
position: 'absolute',
bottom: '0',
left: '50%',
xPercent: '-50'
})
var tl = new TimelineMax();
tl.from("#elHand", 1, {y: '100%', bezier:{values:c, type:"cubic"}, ease: Power1.easeOut})
.from("#c", 1, {drawSVG:"0", ease: Power1.easeOut}, "c")
.to("#elHand", 1, {bezier:{values:c, type:"cubic"}, ease: Power1.easeOut}, "c")
.from("#s6", 1, {drawSVG:"0", ease: Power1.easeOut}, "s6")
.to("#elHand", 1, {bezier:{values:s6, type:"cubic"}, ease: Power1.easeOut}, "s6")
.from("#s5", 1, {drawSVG:"0", ease: Power1.easeOut}, "s5")
.to("#elHand", 1, {bezier:{values:s5, type:"cubic"}, ease: Power1.easeOut}, "s5")
.from("#s4", 0.25, {drawSVG:"0", ease: Power1.easeOut}, "s4")
.to("#elHand", 0.25, {bezier:{values:s4, type:"cubic"}, ease: Power1.easeOut}, "s4")
.from("#s3", 0.25, {drawSVG:"0", ease: Power1.easeOut}, "s3")
.to("#elHand", 0.25, {bezier:{values:s3, type:"cubic"}, ease: Power1.easeOut}, "s3")
.from("#s2", 0.25, {drawSVG:"0", ease: Power1.easeOut}, "s2")
.to("#elHand", 0.25, {bezier:{values:s2, type:"cubic"}, ease: Power1.easeOut}, "s2")
.from("#s1", 0.25, {drawSVG:"0", ease: Power1.easeOut}, "s1")
.to("#elHand", 0.25, {bezier:{values:s1, type:"cubic"}, ease: Power1.easeOut}, "s1")
.from("#d", 1, {drawSVG:"0", ease: Power1.easeOut}, "d")
.to("#elHand", 1, {bezier:{values:d, type:"cubic"}, ease: Power1.easeOut}, "d")
.from("#e1", 1, {drawSVG:"0", ease: Power1.easeOut}, "e1")
.to("#elHand", 1, {bezier:{values:e1, type:"cubic"}, ease: Power1.easeOut}, "e1")
.from("#e1_", 0.25, {drawSVG:"0", ease: Power1.easeOut}, "e1_")
.to("#elHand", 0.25, {bezier:{values:e1_, type:"cubic"}, ease: Power1.easeOut}, "e1_")
.from("#p", 1, {drawSVG:"0", ease: Power1.easeOut}, "p")
.to("#elHand", 1, {bezier:{values:p, type:"cubic"}, ease: Power1.easeOut}, "p")
.from("#e2", 1, {drawSVG:"0", ease: Power1.easeOut}, "e2")
.to("#elHand", 1, {bezier:{values:e2, type:"cubic"}, ease: Power1.easeOut}, "e2")
.from("#e2_", 0.25, {drawSVG:"0", ease: Power1.easeOut}, "e2_")
.to("#elHand", 0.25, {bezier:{values:e2_, type:"cubic"}, ease: Power1.easeOut}, "e2_")
.from("#n", 1, {drawSVG:"0", ease: Power1.easeOut}, "n")
.to("#elHand", 1, {bezier:{values:n, type:"cubic"}, ease: Power1.easeOut}, "n")
.to("#elO", 1, {transformOrigin: "50% 50%", rotation: 360}, "elo")
.to("#elHand", 1, {x: '9'}, "elo");
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
Raw
style.css
* { margin: 0; padding: 0 }
body { overflow: hidden }
svg { visibility: hidden }
.FollowMe {
position: fixed;
top: 5%;
left: 5%;
background-image: url("https://smalinux.github.io/myImg.jpg");
height: 60px;
width: 60px;
border-radius: 50%;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
cursor: pointer;
z-index: 3
}
a { z-index: 3 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment