<svg id="demo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152.18 469.03">
  <title>miniForPost</title>
  <g id="background">
    <rect id="bgBase" width="1152.18" height="469.03"/>
  </g>
  <g id="handwriting" stroke-linejoin="round">
    <path id="hPipe" d="M70,99.35c-3.55-1.68-8,.46-10.13,3.73s-2.66,7.34-3.09,11.24l-8.29,75c-4,36-7.93,72.65-1.11,108.22" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
    <path id="hBody" d="M198,86.61c-10.74,20.86-12.65,45-14.36,68.4-2.67,36.51-5.33,73-6.58,109.62-.37,10.82-1.14,22.88-9.07,30.26-5.67,5.28-14,6.9-21.69,6s-14.9-4.1-21.9-7.41c-14.49-6.85-28.74-14.53-41-24.84S60.86,245.15,56,229.87c-1.08-3.43-1.88-7.19-.66-10.57,2.15-6,9.3-8.14,15.5-9.43a685.2,685.2,0,0,1,141.5-14.29" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
    <path id="tCross" d="M770.76,178l126.7.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
    <path id="mainPath" d="M264.6,239.29c-.14-17.07-11.85-15.24-19.57-12.45-9.24,3.33-15,11.36-20.07,19.79-5.88,9.83-6.93,27.7-4.74,36.25,1.47,5.74,2,14.62,18.85,11.58,12.56-2.26,24.65-29.75,26.79-40.5.28-1.41-2.19-2.77-3.23-.29-4,9.64-2.92,37.15,12.84,39.65C292,296,299.7,285.5,308,276.47c7.68-8.38,15.36-25.09,19.87-35.55a3.26,3.26,0,0,1,1.41-1.35,2,2,0,0,1,3,1.65l2.31,45.08c1.81,5.21,4.9,5.71,7.06,4,9.62-7.77,22.94-41.78,29-55.92.88-2,5.33-.89,5.25,1.33-.23,6.13-5.25,26.5-4.85,36.35.43,10.45,10.62,19.45,21,21,16.73,2.52,29-14.82,36.71-29.9,7.1-13.93,17.7-34.07,32.52-35.25,2.54-.2,3.65,1,.61,1.86-12.76,3.64-22.57,18.79-28.57,30.47-4.18,8.14-10.46,33.39,12.41,36.22,13,1.61,23.54-14.43,29.6-26,21.26-40.64,38.68-90.91,40.18-136.72a4,4,0,0,0-3.27-4c-6.59-1.16-12.72,5.94-17.07,12.35-4.52,6.66-8.36,16.89-10.19,24.72-6.47,27.59-13.52,54.09-12,82.39,1,18.52,7.07,40.91,25.1,45.26,11.57,2.8,24.74-3.09,31.13-13.13,6.09-9.55,16.65-34.29,19.66-44.43.78-2.62,0-3-1.71-.9-9.69,12.2-8.24,57.4,7.87,59.84,15,2.26,35.28-32.75,32.41-48.23-1.8-9.68-3.74-7.47-4.54,2.34s1.67,40.69,11.55,42.88c13,2.86,21.49-10.74,26.08-22.68,4.2-10.94,8.74-38.81,6.93-45.29-.69-2.46-2.11-3.44-3.47-1.28-7.07,11.29-7.29,32-.38,42.1a9.86,9.86,0,0,0,5.21,3.81c13.14,4.12,24.61,2.69,34.39-9.18,9.63-11.7,22.93-48.6,14.49-44.34-5.17,2.79,5.18,34,21.65,15.61,1.47-1.64,8.54,3.8,6.9,6.73-14.56,26.06-13.79,49.36,5.78,54.18,20,4.91,50.24-28.82,49.09-49.15a1,1,0,0,0-1.92-.36c-6.07,13.62-.64,50.56,14.69,53,16.39,2.57,32.33-15.23,40.63-29.59s10.35-30.64,12.42-47.1c1.6-12.72,3.53-39.19,8.39-54.48,2.68-8.45,4.48-8.08,3.83.76-3,41.73-11.71,63.65-13.69,93.66-.81,12.26,0,12.19,3.45,18.55,9.75,17.77,27.08,13.16,38,5.44,11.2-7.89,24.9-25.72,24.84-38.85,0-.52-1.06-2.94-3-1.86-11.19,6.25-4.39,42,8.06,50.8,12,8.44,29-1.39,37.94-13.06a102.11,102.11,0,0,0,10.19-15.19c3.9-7.18,13.18-29.34,18.25-24.37,5.78,5.66,2,29.55.83,41.08-.42,4.13-.42,6.42,3.58,7.79,5.4,1.85,13.12-6.36,15.25-12.21,2.62-7.2,4.9-12.58,7-19.33,2.21-7,9.68-23,11.65-23.83.9-.4,3-.19,3.4.83,4,10.37-8.26,27.83.49,47.91,2.52,5.79,5,11.34,19.75,10.5,10.29-.58,16.59-7.64,21.53-11.83,9.75-8.29,13.91-21.23,21.66-31.42,5.09-6.69,13.58-23.94,23.6-23.86,18.89.16,15.56,15.64,12.41,11-7.56-11.14-16.88-8.77-31.05,10.95-7.35,10.23-14.42,33-7.13,43.27,9.09,12.83,24.2,2.83,32.6-10.46,3.53-5.59,11.09-27,12.36-33.42,2.72-13.69,15.12-24.92,8.61-12.57-23,43.61-9.36,98.77-12,148-.66,12.51,1.75,19.5-10.58,46.33-5.28,11.49-18.3,22.54-28.53,17.4-10.67-5.37-6.58-29.85-4.77-41.11,6.29-39,44.46-101,60.67-99.79" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="10"/>
    <ellipse id="dot2" cx="760.44" cy="214.64" rx="9.68" ry="8.1" transform="translate(448.29 940.52) rotate(-82.49)" fill="#fff"/>
    <ellipse id="dot1" cx="890.33" cy="214.64" rx="9.68" ry="8.1" transform="translate(561.21 1069.3) rotate(-82.49)" fill="#fff"/>
  </g>
</svg>
body, html {
	width:100%;
	height:100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background: #000;
		
}

#demo {
	opacity: 0;
	visibility: hidden;
	overflow: hidden;

	
}
var demo = document.getElementById("demo");
var tl = new TimelineMax({repeat:-1});
var ease = Linear.easeNone;

TweenMax.set(demo, {autoAlpha:1});
TweenMax.set("path", {drawSVG:0, stroke:"#42a6e0"});
TweenMax.set("ellipse", {autoAlpha:0, fill:"#42a6e0"});

tl.to("#hPipe", 0.35, {drawSVG:true, ease:ease});
tl.to("#hBody", 0.75, {drawSVG:true, ease:ease});
tl.to("#mainPath", 5, {drawSVG:true, ease:ease});
tl.to("#dot2", 0.15, {autoAlpha:1});
tl.to("#dot1", 0.15, {autoAlpha:1});
tl.to("#tCross", 0.25, {drawSVG:true, ease:ease});
tl.to("path, ellipse", 0.75, {autoAlpha:0}, "+=1");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js