CodePen Logo Drawing Animation

codepen-logo-drawing-animation.markdown

CodePen Logo Drawing Animation

A Pen by sonkeng maldini on CodePen.

License.

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>

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");

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>

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 }