HTML CODE
<div class=”container”>
<svg version=”1.1″ class=”rocketManSVG” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:a=”http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/” x=”0px” y=”0px” viewBox=”0 0 600 600″ xml:space=”preserve”>
<defs>
<path id=”rocketClip” d=”M300,465.7L300,465.7c-13.8,0-25-11.3-25-25V249.4c0-13.7,11.3-25,25-25h0c13.7,0,25,11.2,25,25v191.3
C325,454.5,313.8,465.7,300,465.7z” />
<clipPath id=”rainbowClip”>
<use xlink:href=”#rocketClip” overflow=”visible” />
</clipPath>
<symbol id=”badge”>
<circle fill=”#1668B2″ stroke=”#EF3D43″ stroke-width=”1.4389″ stroke-miterlimit=”10″ cx=”319.6″ cy=”288.9″ r=”8.7″ />
<g>
<g>
<path fill=”#FFFFFF” d=”M319.6,294.7L319.6,294.7c-1.7,0-2.8-0.9-2.6-1.9c0.5-2.6,0.9-5.2,1.4-7.8c0.2-1,0.4-2.8,1.2-2.8
c0,0,0,0,0,0c0.8,0,1,1.8,1.2,2.8c0.5,2.6,0.9,5.2,1.4,7.8C322.5,293.8,321.3,294.6,319.6,294.7z” />
</g>
<path fill=”#FFFFFF” d=”M316.4,294.2L316.4,294.2c-0.4,0-0.8-0.3-0.8-0.8v-3.3c0-0.4,0.3-0.8,0.8-0.8l0,0c0.4,0,0.8,0.3,0.8,0.8
v3.3C317.2,293.9,316.9,294.2,316.4,294.2z” />
<path fill=”#FFFFFF” d=”M322.8,294.2L322.8,294.2c-0.4,0-0.7-0.3-0.7-0.7v-3.3c0-0.4,0.3-0.7,0.7-0.7l0,0c0.4,0,0.7,0.3,0.7,0.7
v3.3C323.6,293.9,323.2,294.2,322.8,294.2z” />
</g>
<g>
<circle fill=”#FFFFFF” cx=”314″ cy=”288.3″ r=”0.7″ />
<ellipse fill=”#FFFFFF” cx=”314″ cy=”288.3″ rx=”0.1″ ry=”1.2″ />
<ellipse fill=”#FFFFFF” cx=”314″ cy=”288.3″ rx=”1.3″ ry=”0.1″ />
</g>
<g>
<circle fill=”#FFFFFF” cx=”324.8″ cy=”286.4″ r=”0.7″ />
<ellipse fill=”#FFFFFF” cx=”324.8″ cy=”286.4″ rx=”0.1″ ry=”1.2″ />
<ellipse fill=”#FFFFFF” cx=”324.8″ cy=”286.4″ rx=”1.3″ ry=”0.1″ />
</g>
</symbol>
</defs>
<polygon class=”star” opacity=”0.5″ fill=”#ECB447″ points=”1.2,0 1.6,0.8 2.4,0.9 1.8,1.5 1.9,2.3 1.2,1.9 0.5,2.3 0.6,1.5 0,0.9 0.8,0.8 ” />
<g class=”starContainer”></g>
<g class=”satellite”>
<g class=”satellitePulses” stroke=”#2d2d2d”>
<path class=”satellitePulse1″ fill=”none” stroke-width=”1.5814″ stroke-linejoin=”round” stroke-miterlimit=”10″ d=”M156.3,131.8
c-2.8,2.8-7.2,2.8-10,0″ />
<path class=”satellitePulse2″ fill=”none” stroke-width=”1.5814″ stroke-linejoin=”round” stroke-miterlimit=”10″ d=”M158.6,134
c-4,4-10.5,4-14.4,0″ />
<path class=”satellitePulse3″ fill=”none” stroke-width=”1.5814″ stroke-linejoin=”round” stroke-miterlimit=”10″ d=”M160.8,136.3
c-5.2,5.2-13.7,5.2-18.9,0″ />
</g>
<path fill=”#2d2d2d” d=”M106.7,91.3h-8.2v-8.2h8.2V91.3z M116.8,83.1h-8.2v8.2h8.2V83.1z M126.8,83.1h-8.2v8.2h8.2V83.1z
M136.9,83.1h-8.2v8.2h8.2V83.1z M106.7,93.2h-8.2v8.2h8.2V93.2z M116.8,93.2h-8.2v8.2h8.2V93.2z M126.8,93.2h-8.2v8.2h8.2V93.2z
M136.9,93.2h-8.2v8.2h8.2V93.2z M106.7,103.3h-8.2v8.2h8.2V103.3z M116.8,103.3h-8.2v8.2h8.2V103.3z M126.8,103.3h-8.2v8.2h8.2
V103.3z M136.9,103.3h-8.2v8.2h8.2V103.3z M173.7,83.1h-8.2v8.2h8.2V83.1z M183.8,83.1h-8.2v8.2h8.2V83.1z M193.8,83.1h-8.2v8.2h8.2
V83.1z M203.9,83.1h-8.2v8.2h8.2V83.1z M173.7,93.2h-8.2v8.2h8.2V93.2z M183.8,93.2h-8.2v8.2h8.2V93.2z M193.8,93.2h-8.2v8.2h8.2
V93.2z M203.9,93.2h-8.2v8.2h8.2V93.2z M173.7,103.3h-8.2v8.2h8.2V103.3z M183.8,103.3h-8.2v8.2h8.2V103.3z M193.8,103.3h-8.2v8.2
h8.2V103.3z M203.9,103.3h-8.2v8.2h8.2V103.3z M161.8,113.1V81c0-2.6-2.1-4.7-4.7-4.7h-11.7c-2.6,0-4.7,2.1-4.7,4.7v32.1
c0,2.6,2.1,4.7,4.7,4.7h11.7C159.7,117.8,161.8,115.7,161.8,113.1z M165.6,96.3h-28.7v2.1h28.7V96.3z M152.3,117.8h-2.2v12.1h2.2
V117.8z” />
</g>
<g class=”speedLines” stroke=”#3e3e3e” stroke-width=”2″ stroke-linejoin=”round”>
<line id=”speedLine0″ fill=”none” stroke-miterlimit=”10″ x1=”252.5″ y1=”324″ x2=”252.5″ y2=”566″ />
<line id=”speedLine1″ fill=”none” stroke-miterlimit=”10″ x1=”299.5″ y1=”500″ x2=”299.5″ y2=”557″ />
<line id=”speedLine2″ fill=”none” stroke-miterlimit=”10″ x1=”347.5″ y1=”324″ x2=”347.5″ y2=”529″ />
<line id=”speedLine3″ fill=”none” stroke-miterlimit=”10″ x1=”74.5″ y1=”45″ x2=”74.5″ y2=”500″ />
<line id=”speedLine4″ fill=”none” stroke-miterlimit=”10″ x1=”544.5″ y1=”29″ x2=”544.5″ y2=”574″ />
<line id=”speedLine5″ fill=”none” stroke-miterlimit=”10″ x1=”415.5″ y1=”8″ x2=”415.5″ y2=”440″ />
<line id=”speedLine6″ fill=”none” stroke-miterlimit=”10″ x1=”165.5″ y1=”142″ x2=”165.5″ y2=”574″ />
</g>
<rect x=”275″ y=”263.3″ clip-path=”url(#rainbowClip)” fill=”#CC583F” width=”10″ height=”212.7″ />
<rect x=”285″ y=”263.3″ clip-path=”url(#rainbowClip)” fill=”#ECB447″ width=”10″ height=”212.7″ />
<rect x=”295″ y=”263.3″ clip-path=”url(#rainbowClip)” fill=”#75C095″ width=”10″ height=”212.7″ />
<rect x=”305″ y=”263.3″ clip-path=”url(#rainbowClip)” fill=”#5991AA” width=”10″ height=”212.7″ />
<rect x=”315″ y=”263.3″ clip-path=”url(#rainbowClip)” fill=”#7D6AAD” width=”10″ height=”212.7″ />
<g class=”astronaut”>
<g class=”pulseSVG” opacity=”0.2″ stroke=”#ededed”>
<path class=”pulse1″ fill=”none” stroke-width=”3″ stroke-linejoin=”round” stroke-miterlimit=”10″ d=”M289.9,188.7
c5.2-5.2,13.7-5.2,18.9,0″ />
<path class=”pulse2″ fill=”none” stroke-width=”3″ stroke-linejoin=”round” stroke-miterlimit=”10″ d=”M285.6,184.5
c7.6-7.6,19.8-7.6,27.4,0″ />
<path class=”pulse3″ fill=”none” stroke-width=”3″ stroke-linejoin=”round” stroke-miterlimit=”10″ d=”M281.4,180.3
c9.9-9.9,26-9.9,35.9,0″ />
</g>
<g class=”astronaut1″>
<g>
<g>
<path fill=”#CCCCCC” d=”M265,320.7c0,0,0.1,0,0.1,0h0.2c0,0,0,0,0,0l0.2,0c0,0,0,0,0,0v-16.1h-21.4c0.9,3.7,2.8,6.9,5.6,9.8
C254,318.6,259.1,320.7,265,320.7 M334.9,320.7c0,0,0.1,0,0.1,0c5.9,0,11-2.1,15.2-6.3c2.9-2.9,4.7-6.1,5.6-9.8h-21.4v16.1
l0.2,0c0,0,0,0,0,0h0h0H334.9 M271.8,224.4c-4.3,0.9-8.1,2.9-11.4,6.2c-4.5,4.5-6.7,9.9-6.7,16.2v13.6c3.3-2.1,7.1-3.2,11.3-3.2
h0c0.9,0,1.7,0,2.6,0.1c-1.5-3.9-2.3-8.2-2.3-12.7C265.3,237,267.5,230.3,271.8,224.4 M346.3,260.4v-13.6
c0-6.3-2.2-11.7-6.7-16.2c-3-3-6.5-5.1-10.4-6l-0.2,0.8c3.9,5.6,5.8,12,5.8,19.2c0,4.2-0.7,8.1-2,11.8l0.1,0.8
c0.7-0.1,1.4-0.1,2.2-0.1h0C339.2,257.2,342.9,258.3,346.3,260.4z” />
<path fill=”#FFFFFF” d=”M299.9,210.1c0,0-0.1,0-0.1,0c-9.5,0-17.6,3.4-24.3,10.1c-1.3,1.3-2.5,2.7-3.6,4.2
c-4.3,5.9-6.5,12.6-6.5,20.3c0,4.6,0.8,8.8,2.3,12.7c0.2,0.6,0.5,1.2,0.8,1.8c1.7,3.6,4,6.9,7.1,9.9c3.3,3.3,6.8,5.7,10.7,7.4
c0.1,0,0.2,0.1,0.2,0.1c0.8,0.3,1.6,0.7,2.5,0.9c3.4,1.1,7.1,1.7,11,1.7c9.5,0,17.7-3.4,24.4-10.1c3.6-3.6,6.2-7.5,7.9-11.8
c0.1-0.3,0.2-0.6,0.3-0.9c1.3-3.6,1.9-7.6,1.9-11.7c0-7.2-1.9-13.5-5.7-19.1l-0.2-0.2c0,0,0-0.1-0.1-0.1l0,0l-0.1-0.1l-0.1-0.1
c0,0,0,0,0,0l-0.1-0.1c0-0.1-0.1-0.1-0.1-0.2c0,0,0-0.1-0.1-0.1c-1.1-1.5-2.3-2.9-3.7-4.3C317.5,213.5,309.4,210.1,299.9,210.1
M350.1,263.5c-1.2-1.2-2.5-2.3-3.9-3.1c-3.3-2.1-7.1-3.2-11.3-3.2h0c-0.7,0-1.5,0-2.2,0.1c-0.1,0-0.2,0-0.3,0c0,0-0.1,0-0.1,0
l-0.3-0.1c-1.7,4.3-4.3,8.3-7.9,11.8c-6.7,6.7-14.9,10.1-24.4,10.1c-3.9,0-7.6-0.6-11-1.7c-0.8-0.3-1.7-0.6-2.5-0.9
c-0.1,0-0.2-0.1-0.2-0.1c-3.9-1.7-7.5-4.2-10.7-7.4c-3-3-5.4-6.3-7.1-9.9c-0.3-0.6-0.5-1.2-0.8-1.8c-0.8-0.1-1.7-0.1-2.6-0.1h0
c-4.2,0-8,1.1-11.3,3.2c-1.4,0.9-2.7,1.9-3.9,3.1c-4.2,4.2-6.3,9.2-6.3,15.2v20.6c0,1.9,0.2,3.7,0.6,5.4h21.4v-22.6v22.6v16.1
V338c0.6,3.3,2.2,6.2,4.7,8.7c3.3,3.4,7.3,5,12,5c4.7,0,8.9-1.8,12.7-5.3c2.8-2.6,4.5-5.5,5-8.7v-15.9h-12.7H300h13h-13v15.9
c0.5,3.2,2.2,6.1,5,8.7c3.8,3.5,8,5.3,12.7,5.3c4.7,0,8.7-1.7,12-5c2.5-2.5,4-5.4,4.7-8.7v-17.3v-16.1v-22.6v22.6h21.4
c0.4-1.7,0.6-3.5,0.6-5.4v-20.6C356.4,272.8,354.3,267.7,350.1,263.5 M300,311.1v-30.1V311.1z” />
<path fill=”#2D2D2D” d=”M299.7,195.5c-1.1,0-2,0.4-2.7,1.1c-0.7,0.7-1.1,1.6-1.1,2.7c0,1.1,0.4,2,1.1,2.7
c0.7,0.7,1.6,1.1,2.7,1.1c1.1,0,2-0.4,2.7-1.1c0.7-0.7,1.1-1.6,1.1-2.7c0-1.1-0.4-2-1.1-2.7
C301.7,195.8,300.8,195.5,299.7,195.5z” />
</g>
</g>
<path fill=”none” stroke=”#2D2D2D” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” d=”M355.8,304.6
c0.4-1.7,0.6-3.5,0.6-5.4v-20.6c0-5.9-2.1-11-6.3-15.2c-1.2-1.2-2.5-2.3-3.9-3.1c-3.3-2.1-7.1-3.2-11.3-3.2h0
c-0.7,0-1.5,0-2.2,0.1c-0.1,0-0.2,0-0.3,0c0,0-0.1,0-0.1,0 M332.1,257.3c-1.7,4.3-4.3,8.3-7.9,11.8c-6.7,6.7-14.9,10.1-24.4,10.1
c-3.9,0-7.6-0.6-11-1.7c-0.8-0.3-1.7-0.6-2.5-0.9c-0.1,0-0.2-0.1-0.2-0.1c-3.9-1.7-7.5-4.2-10.7-7.4c-3-3-5.4-6.3-7.1-9.9
c-0.3-0.6-0.5-1.2-0.8-1.8c-0.8-0.1-1.7-0.1-2.6-0.1h0c-4.2,0-8,1.1-11.3,3.2c-1.4,0.9-2.7,1.9-3.9,3.1c-4.2,4.2-6.3,9.2-6.3,15.2
v20.6c0,1.9,0.2,3.7,0.6,5.4h21.4v-22.6 M346.3,260.4v-13.6c0-6.3-2.2-11.7-6.7-16.2c-3-3-6.5-5.1-10.4-6 M328.9,225.4
c3.9,5.6,5.8,12,5.8,19.2c0,4.2-0.7,8.1-2,11.8 M299.7,203.1c-1.1,0-2-0.4-2.7-1.1c-0.7-0.7-1.1-1.6-1.1-2.7c0-1.1,0.4-2,1.1-2.7
c0.7-0.7,1.6-1.1,2.7-1.1c1.1,0,2,0.4,2.7,1.1c0.7,0.7,1.1,1.6,1.1,2.7c0,1.1-0.4,2-1.1,2.7C301.7,202.7,300.8,203.1,299.7,203.1
v7.1c0,0,0.1,0,0.1,0c9.5,0,17.7,3.4,24.4,10.1c1.4,1.4,2.6,2.8,3.7,4.3c0,0,0,0.1,0.1,0.1c0,0.1,0.1,0.1,0.1,0.2l0.1,0.1
c0,0,0,0,0,0c0,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0l0.1,0.1l0,0c0,0,0,0,0.1,0.1l0.2,0.2c3.8,5.6,5.7,12,5.7,19.1
c0,4.2-0.6,8.1-1.9,11.7c-0.1,0.3-0.2,0.6-0.3,0.9 M329.2,224.6L329.2,224.6C329.1,224.6,329.1,224.6,329.2,224.6
C329.1,224.6,329.1,224.6,329.2,224.6c-0.3-0.1-0.6-0.1-0.8-0.2c0,0-0.1,0-0.2,0c0,0,0,0.1,0.1,0.1c0,0,0,0.1,0,0.1
c0.1,0.1,0.2,0.3,0.3,0.4c0,0,0,0,0,0l0,0c0.1,0.1,0.2,0.3,0.3,0.4c0,0,0,0,0,0 M271.8,224.4c1.1-1.4,2.3-2.8,3.6-4.2
c6.7-6.7,14.8-10.1,24.3-10.1 M253.7,260.4v-13.6c0-6.3,2.2-11.7,6.7-16.2c3.3-3.3,7.1-5.4,11.4-6.2c-4.3,5.9-6.5,12.6-6.5,20.3
c0,4.6,0.8,8.8,2.3,12.7 M332.7,256.5C332.7,256.5,332.7,256.5,332.7,256.5L332.7,256.5c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1l-0.2,0.5
c0,0.1-0.1,0.1-0.1,0.2 M334.7,320.7h0.2c0,0,0.1,0,0.1,0c5.9,0,11-2.1,15.2-6.3c2.9-2.9,4.7-6.1,5.6-9.8h-21.4v16.1l0.2,0
M334.6,320.7L334.6,320.7 M287.3,321.8H300h13 M300,337.8c0.5,3.2,2.2,6.1,5,8.7c3.8,3.5,8,5.3,12.7,5.3c4.7,0,8.7-1.7,12-5
c2.5-2.5,4-5.4,4.7-8.7v-17.3 M265.6,320.7V338c0.6,3.3,2.2,6.2,4.7,8.7c3.3,3.4,7.3,5,12,5c4.7,0,8.9-1.8,12.7-5.3
c2.8-2.6,4.5-5.5,5-8.7v-15.9 M265.6,320.7C265.6,320.7,265.6,320.7,265.6,320.7l-0.3,0c0,0,0,0,0,0h-0.2c0,0-0.1,0-0.1,0
c-5.9,0-11-2.1-15.2-6.3c-2.9-2.9-4.7-6.1-5.6-9.8 M265.6,304.6v16.1 M334.4,282.1v22.6 M300,311.1v-30.1″ />
</g>
<g class=”astronautglass”>
<path fill=”#7592A0″ d=”M324.5,261.6c6.8-4.3,10.2-9.5,10.2-15.5c0-5.1-2.4-9.6-7.2-13.4H272c-4.8,3.8-7.3,8.3-7.3,13.4
c0,6.1,3.4,11.2,10.2,15.5c6.8,4.3,15.1,6.4,24.7,6.4C309.4,268,317.6,265.9,324.5,261.6z” />
</g>
<path class=”astronautglass” fill=”none” stroke=”#2D2D2D” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” d=”M334.7,246.1
c0,6.1-3.4,11.2-10.2,15.5c-6.8,4.3-15.1,6.4-24.7,6.4c-9.7,0-17.9-2.1-24.7-6.4c-6.8-4.3-10.2-9.5-10.2-15.5
c0-5.1,2.4-9.6,7.3-13.4h55.5C332.3,236.5,334.7,241,334.7,246.1z” />
<path class=”astronautglass” fill=”none” stroke=”#E6E6E6″ stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” d=”
M323.5,240.6c2.4,3.5,2.4,7.8,0,12.7 M275.8,240.6c-2.4,3.5-2.4,7.8,0,12.7″ />
<g class=”jetBubbles”>
<g id=”greyJets” fill=”#2d2d2d”>
<circle class=”jetBubble1″ cx=”289″ cy=”489″ r=”23″ />
<circle class=”jetBubble1″ cx=”270″ cy=”470″ r=”20″ />
<circle class=”jetBubble1″ cx=”319″ cy=”483″ r=”21″ />
</g>
<g id=”colorJets” stroke-width=”0″ stroke=”#3d3d3d”>
<circle class=”jetBubble2″ fill=”#ECB447″ cx=”312″ cy=”449″ r=”8″ />
<circle class=”jetBubble2″ fill=”#7D6AAD” cx=”320″ cy=”480″ r=”10″ />
<circle class=”jetBubble2″ fill=”#7D6AAD” cx=”290″ cy=”460″ r=”10″ />
<circle class=”jetBubble2″ fill=”#ECB447″ cx=”329″ cy=”453″ r=”11″ />
<circle class=”jetBubble” fill=”#CC583F” cx=”286″ cy=”463″ r=”7″ />
<circle class=”jetBubble2″ fill=”#ECB447″ cx=”289″ cy=”469″ r=”24″ />
<circle class=”jetBubble2″ fill=”#7D6AAD” cx=”260″ cy=”450″ r=”20″ />
<circle class=”jetBubble3″ fill=”#5991AA” cx=”319″ cy=”463″ r=”10″ />
<circle class=”jetBubble1″ fill=”#CC583F” cx=”290″ cy=”463″ r=”18″ />
<circle class=”jetBubble3″ fill=”#75C095″ cx=”312″ cy=”443″ r=”21″ />
<circle class=”jetBubble3″ fill=”#5991AA” cx=”275″ cy=”443.4″ r=”12″ />
</g>
<g class=”badge1″>
<use xlink:href=”#badge” x=”0″ y=”0″ />
</g>
</g>
</g>
</svg>
</div>
CSS CODE
body{
background-color:#00000;
overflow:hidden;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
width:600px;
height:600px;
margin: -5% auto;
}
text{
fill:pink;
}
.astronaut1, .astronautglass, .badge1 {
animation: dance 0.05s infinite alternate;
}
.satellite {
transform-origin: 50% 40%;
animation: rotate 30s infinite linear;
}
.jetBubble1 {
transform-origin: 50% 40%;
animation: scale 1s infinite ease-in-out;
}
.jetBubble3 {
transform-origin: 50% 40%;
animation: scale2 0.8s infinite ease-in-out;
}
.jetBubble2 {
transform-origin: 50% 40%;
animation: scale3 1.3s infinite ease-in-out;
}
.pulse1, .satellitePulse1 {
animation: opacity 1.1s 1.6s infinite ease-in-out;
}
.pulse2, .satellitePulse2 {
animation: opacity 1.1s 1.7s infinite ease-in-out;
}
.pulse3, .satellitePulse3 {
animation: opacity 1.1s 1.8s infinite ease-in-out;
}
#speedLine0 {
animation: line-animation1 0.4s infinite ease-in-out;
}
#speedLine1 {
animation: line-animation2 0.4s infinite ease-in-out;
}
#speedLine2 {
animation: line-animation3 0.4s infinite ease-in-out;
}
#speedLine3 {
animation: line-animation1 0.4s infinite ease-in-out;
}
#speedLine4 {
animation: line-animation1 0.7s infinite ease-in-out;
}
#speedLine5 {
animation: line-animation1 0.4s infinite ease-in-out;
}
#speedLine6 {
animation: line-animation1 0.5s infinite ease-in-out;
}
@keyframes dance {
0% {transform: translateY(0px);
}
100% {transform: translateY(4px);
}
}
@keyframes rotate {
100% {transform: rotate(360deg);
}
}
@keyframes scale {
0% {transform: scale(1,1);
}
50% {transform: scale(1.2,1.2);
}
100% {transform: scale(1,1);
}
}
@keyframes scale2 {
0% {transform: scale(1,1);
}
50% {transform: scale(1.2,1.2);
}
100% {transform: scale(1,1);
}
}
@keyframes scale3 {
0% {transform: scale(1,1);
}
60% {transform: scale(1.3,1.3);
}
100% {transform: scale(1,1);
}
}
@keyframes line-animation1 {
0% {stroke-dasharray: 5%,90%;}
50% {stroke-dasharray: 20%,100%;}
100% {stroke-dasharray: 5%,200%;
stroke-dashoffset: -80%;}
}
@keyframes line-animation2 {
0% {stroke-dasharray: 5%,95%;}
50% {stroke-dasharray: 20%,95%;}
100% {stroke-dasharray: 5%,100%;
stroke-dashoffset: -74%;}
}
@keyframes line-animation3 {
0% {stroke-dasharray: 5%,41%;}
50% {stroke-dasharray: 20%,50%;}
100% {stroke-dasharray: 5%,80%;
stroke-dashoffset: -30%;}
}
@keyframes opacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
Credit to Codepen.io with a little alterations
LINK TO ANIMATION: https://codepen.io/anon/pen/NVwRWE
