Eddie Rocket's SVG GSAP Prototype

HTML

              
                <!-- <div id="slider"></div> -->

<div class="card-wrapper">
	
	<div class="use-code">Use the code XXXXXXX to enter</div>

	<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/logo.png" alt="Eddie Rocket's Logo" />

	<div class="card">

		<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136 163">
			<title>Preloader</title>
			<defs>
				<radialGradient id="radial-gradient" cx="68" cy="94.5" r="42.5" gradientUnits="userSpaceOnUse">
					<stop offset="0" stop-color="#028dc4" />
					<stop offset="1" stop-color="#08222e" />
				</radialGradient>
				<clipPath id="clip-path">
					<path id="clipping_mask" data-name="clipping mask" d="M110.5,2.5h-85V94h0c0,.16,0,.32,0,.48a42.5,42.5,0,0,0,85,0c0-.16,0-.32,0-.48h0Z" fill="none" />
				</clipPath>
				<linearGradient id="linear-gradient" x1="86.21" y1="156.32" x2="86.21" y2="100.99" gradientUnits="userSpaceOnUse">
					<stop offset="0.5" stop-color="#ffc9f9" stop-opacity="0" />
					<stop offset="1" stop-color="#ffc9f9" />
				</linearGradient>
			</defs>
			<g class="base">
	<!-- 			<g class="stage">
					<rect width="136" height="163" fill="#0099ce" />
				</g> -->
				<circle class="outer-circle" cx="68" cy="94.5" r="52.5" fill="#d81f44" />
				<circle class="inner-circle" cx="68" cy="94.5" r="42.5" fill="url(#radial-gradient)" />
				<g class="stars" fill="#00a9ea">
					<polygon points="101.52 75.26 102.17 76.3 103.35 76 102.57 76.94 103.22 77.97 102.08 77.52 101.3 78.45 101.38 77.23 100.25 76.78 101.43 76.48 101.52 75.26" />
					<polygon points="90.27 84.54 90.92 85.58 92.1 85.28 91.32 86.22 91.97 87.25 90.83 86.8 90.05 87.73 90.13 86.51 89 86.06 90.18 85.76 90.27 84.54" />
					<polygon points="81.58 73.21 82.23 74.25 83.42 73.95 82.63 74.88 83.28 75.92 82.15 75.46 81.36 76.4 81.45 75.18 80.31 74.73 81.5 74.43 81.58 73.21" />
					<polygon points="64.61 54.05 65.27 55.09 66.45 54.79 65.67 55.73 66.31 56.76 65.18 56.3 64.4 57.24 64.48 56.02 63.35 55.57 64.53 55.27 64.61 54.05" />
					<polygon points="67.72 69.2 68.37 70.24 69.55 69.94 68.77 70.88 69.42 71.91 68.28 71.46 67.5 72.39 67.58 71.17 66.45 70.72 67.63 70.42 67.72 69.2" />
					<polygon points="87.17 63.25 87.81 64.28 89 63.98 88.22 64.92 88.86 65.96 87.73 65.5 86.95 66.44 87.03 65.22 85.9 64.76 87.08 64.47 87.17 63.25" />
					<polygon points="37.17 70.8 37.81 71.83 39 71.54 38.22 72.47 38.87 73.51 37.73 73.05 36.95 73.99 37.03 72.77 35.9 72.31 37.08 72.02 37.17 70.8" />
					<polygon points="104.62 91.31 105.27 92.34 106.45 92.05 105.67 92.98 106.32 94.02 105.19 93.56 104.4 94.5 104.48 93.28 103.35 92.83 104.54 92.53 104.62 91.31" />
					<polygon points="32.3 87.73 32.95 88.77 34.13 88.47 33.35 89.41 34 90.44 32.87 89.99 32.08 90.92 32.17 89.7 31.03 89.25 32.22 88.95 32.3 87.73" />
					<polygon points="54.19 66.01 54.83 67.05 56.02 66.75 55.23 67.69 55.88 68.72 54.75 68.27 53.97 69.2 54.05 67.98 52.92 67.53 54.1 67.23 54.19 66.01" />
					<polygon points="58.03 86.14 58.68 87.17 59.87 86.88 59.08 87.81 59.73 88.85 58.6 88.39 57.81 89.33 57.9 88.11 56.77 87.65 57.95 87.36 58.03 86.14" />
				</g>
			</g>
			<g class="inner">
				<g class="mask">
					<g clip-path="url(#clip-path)">
							<g class="launchpad">
								<g class="frame">
									<g class="ladder">
										<rect x="82.72" y="59.56" width="1.2" height="6.4" fill="#969799" />
										<rect x="77.21" y="59.56" width="1.2" height="6.4" fill="#969799" />
										<rect x="71.69" y="59.56" width="1.2" height="6.4" fill="#969799" />
										<rect x="66.18" y="59.56" width="1.2" height="6.4" fill="#969799" />
										<rect x="58.07" y="62.16" width="6.4" height="1.2" transform="translate(124.02 1.49) rotate(90)" fill="#969799" />
										<rect x="71.55" y="48.22" width="1.49" height="23.25" transform="translate(132.14 -12.44) rotate(90)" fill="#a6a8ab" />
										<rect x="71.55" y="54.33" width="1.49" height="23.25" transform="translate(138.25 -6.33) rotate(90)" fill="#a6a8ab" />
									</g>
									<g class="cross-beams">
										<g>
											<rect x="46.07" y="38.15" width="17.37" height="1.14" transform="translate(-11.34 50.06) rotate(-45)" fill="#e6e7e8" />
											<rect x="46.07" y="50.6" width="17.37" height="1.14" transform="translate(-20.15 53.71) rotate(-45)" fill="#e6e7e8" />
											<rect x="46.07" y="63.06" width="17.37" height="1.14" transform="translate(-28.95 57.36) rotate(-45)" fill="#e6e7e8" />
											<rect x="46.07" y="75.51" width="17.37" height="1.14" transform="translate(-37.76 61) rotate(-45)" fill="#e6e7e8" />
											<rect x="46.07" y="87.97" width="17.37" height="1.14" transform="translate(-46.57 64.65) rotate(-45)" fill="#e6e7e8" />
											<rect x="46.07" y="100.42" width="17.37" height="1.14" transform="translate(-55.37 68.3) rotate(-45)" fill="#e6e7e8" />
										</g>
										<g>
											<rect x="57.08" y="24.98" width="1.14" height="8.39" transform="translate(-3.75 49.31) rotate(-45)" fill="#e6e6e6" />
											<rect x="54.19" y="30.04" width="1.14" height="17.37" transform="translate(-11.34 50.06) rotate(-45)" fill="#e6e7e8" />
											<rect x="54.19" y="42.49" width="1.14" height="17.37" transform="translate(-20.15 53.71) rotate(-45)" fill="#e6e7e8" />
											<rect x="54.19" y="54.94" width="1.14" height="17.37" transform="translate(-28.95 57.36) rotate(-45)" fill="#e6e7e8" />
											<rect x="54.19" y="67.4" width="1.14" height="17.37" transform="translate(-37.76 61) rotate(-45)" fill="#e6e7e8" />
											<rect x="54.19" y="79.85" width="1.14" height="17.37" transform="translate(-46.57 64.65) rotate(-45)" fill="#e6e7e8" />
											<rect x="54.19" y="92.3" width="1.14" height="17.37" transform="translate(-55.37 68.3) rotate(-45)" fill="#e6e7e8" />
										</g>
										<g>
											<rect x="41.27" y="79.85" width="1.14" height="17.37" transform="translate(-50.35 55.52) rotate(-45)" fill="#e6e7e8" />
											<rect x="41.27" y="92.3" width="1.14" height="17.37" transform="translate(-59.15 59.17) rotate(-45)" fill="#e6e7e8" />
											<rect x="33.16" y="87.97" width="17.37" height="1.14" transform="translate(-50.35 55.52) rotate(-45)" fill="#e6e7e8" />
											<rect x="33.16" y="100.42" width="17.37" height="1.14" transform="translate(-59.15 59.17) rotate(-45)" fill="#e6e7e8" />
											<rect x="44.55" y="75.3" width="1.14" height="8.12" transform="translate(-42.9 55.14) rotate(-45)" fill="#e6e7e8" />
										</g>
										<polygon points="60.5 19 47.62 31.81 48.74 32.43 61.3 19.95 60.5 19" fill="#d0d2d3" />
									</g>
									<g class="lateral-beams">
										<g>
											<rect x="48.14" y="31.86" width="13.24" height="1.38" fill="#bbbdbf" />
											<rect x="48.14" y="44.29" width="13.24" height="1.38" fill="#bbbdbf" />
											<rect x="48.14" y="56.72" width="13.24" height="1.38" fill="#bbbdbf" />
											<rect x="48.14" y="69.16" width="13.24" height="1.38" fill="#bbbdbf" />
											<polygon points="48.47 81.59 48.14 81.59 35.22 81.59 35.22 82.96 48.14 82.96 48.47 82.96 61.38 82.96 61.38 81.59 48.47 81.59" fill="#bbbdbf" />
											<polygon points="48.47 94.02 48.14 94.02 35.22 94.02 35.22 95.39 48.14 95.39 48.47 95.39 61.38 95.39 61.38 94.02 48.47 94.02" fill="#bbbdbf" />
											<polygon points="48.14 106.45 35.22 106.45 35.22 107.83 48.14 107.83 48.47 107.83 61.38 107.83 61.38 106.45 48.47 106.45 48.14 106.45" fill="#bbbdbf" />
										</g>
										<g class="outer-frame">
											<rect x="47.62" y="31.81" width="1.71" height="78.59" fill="#d0d2d3" />
											<rect x="60.53" y="19" width="1.71" height="91.4" fill="#d0d2d3" />
											<polygon points="35.64 81.48 34.7 81.48 34.7 110.4 36.41 110.4 36.41 82.32 36.41 81.48 35.64 81.48" fill="#d0d2d3" />
											<polygon points="48.39 70.34 47.62 68.53 34.7 81.48 36.41 81.48 36.41 82.32 48.39 70.34" fill="#d0d2d3" />
										</g>
									</g>
								</g>
								<g class="platform">
									<g>
										<rect x="93.26" y="119.41" width="8.47" height="6.46" transform="translate(220.13 25.14) rotate(90)" fill="#929497" />
										<rect x="82.27" y="118.4" width="6.46" height="8.47" fill="#929497" />
										<rect x="70.27" y="118.4" width="6.46" height="8.47" fill="#929497" />
										<rect x="58.27" y="118.4" width="6.46" height="8.47" fill="#929497" />
										<rect x="46.27" y="118.4" width="6.46" height="8.47" fill="#929497" />
										<rect x="33.26" y="119.41" width="8.47" height="6.46" transform="translate(160.14 85.13) rotate(90)" fill="#929497" />
									</g>
									<rect x="32.42" y="113.14" width="70.16" height="5.28" fill="#bbbdbf" />
									<rect x="16.5" y="126.15" width="102" height="1.94" fill="#808184" />
									<rect x="32.42" y="110.2" width="32.11" height="3.1" fill="#a6a8ab" />
								</g>

	<!-- 							<g class="thrust">
									<path d="M86.5,151.85c0-36.6,7.5-41.92,4.58-47.75A5.14,5.14,0,0,0,86,101h0c-.3,0-3.06-.29-4.57,3.1-2.92,5.83,4.13,11.15,5.13,47.75v4.47c0-1.08,0-2.13,0-3.15,0,1,0,2.08,0,3.15Z" fill="url(#linear-gradient)" />
									<path d="M86.5,149.31c0-34.15,6.39-39,3.89-44.49A4.26,4.26,0,0,0,86,102h0c-.26,0-2.59-.34-3.88,2.82-2.5,5.44,3.43,10.33,4.43,44.47Z" fill="#ff8500" />
									<path d="M86.5,133c0-22.07,4.81-24.71,2.91-28.23A3.45,3.45,0,0,0,86,103h0a2.84,2.84,0,0,0-2.9,1.81C81.15,108.33,85.5,111,86.5,133v2.7c0-.65,0-1.28,0-1.9,0,.62,0,1.25,0,1.9Z" fill="#ffce00" />
									<path d="M86.5,116.5c0-4.54,2.76-11,1.62-12.6A2.71,2.71,0,0,0,86,103h0a1.92,1.92,0,0,0-1.62.9c-1.13,1.56,2.15,8.05,2.15,12.58Z" fill="#fff7ca" />
								</g> -->
								<g class="rocket">
									<path class="thruster" d="M92,101.84c0-.15-1-3.73-1-3.73-.67.49-2.56.86-4.8.89s-4.14-.29-4.82-.76c0,0-.84,3.65-.84,3.81s0,0,0,0h0c.09,1.18,2.64,2.08,5.75,2s5.62-1.05,5.67-2.24h0S92,101.86,92,101.84Z" fill="#a3b8c1" fill-rule="evenodd" />
									<g class="fin-left">
										<path d="M77.19,75.42h0a20.71,20.71,0,0,0-8.1,20.11l3,17.67h1V100.64a9.55,9.55,0,0,1,6.93-9.17h0Z" fill="#a3b8c1" fill-rule="evenodd" />
									</g>
									<g class="fin-right">
										<path d="M94.79,75.48h0a20.71,20.71,0,0,1,8,20.16l-3.1,17.65h-1l.07-12.57a9.54,9.54,0,0,0-6.87-9.21h0Z" fill="#a3b8c1" fill-rule="evenodd" />
									</g>
									<path class="cockpit" d="M90.72,93.64c4.14-3.23,9.69-29,7.58-42.66A34.4,34.4,0,0,0,94.15,39L78,39A34.41,34.41,0,0,0,73.83,50.9c-2.2,13.68,3.26,39.67,7.38,42.75a14.64,14.64,0,0,0,5,.81A11.71,11.71,0,0,0,90.72,93.64Z" fill="#e8edef" fill-rule="evenodd" />
									<path class="fuel-tank" d="M98.08,68.3A25.68,25.68,0,0,1,86.39,71c-5.68,0-10.79-1.59-12.43-2.62C75.3,80,78.5,91.55,81.17,93.62c0,0-.8,3.47-.79,3.62s0-.12,0-.1V97h0c.09,1,2.64,2.19,5.75,2.13S91.74,98,91.79,97h0s0,0,0,0-.92-3.52-.92-3.52C93.53,91,96.72,79.68,98.08,68.3Z" fill="#c01d3f" fill-rule="evenodd" />
									<path class="check-base" d="M95.45,71.32c-.72.24-1.53.48-2.42.68-.74.17-1.52.32-2.36.44s-1.52.19-2.33.24c-.57,0-1.15.06-1.75.07H86c-.78,0-1.56,0-2.32-.11s-1.58-.15-2.33-.27S79.75,72.12,79,72s-1.69-.4-2.41-.62a18,18,0,0,1-2.37-.88q.14,1.07.31,2.14t.35,2.16q.19,1.1.4,2.18t.45,2.21a16,16,0,0,0,2.13.89c.64.22,1.35.43,2.12.62s1.33.3,2,.42,1.31.2,2,.26,1.3.1,2,.11h.49c.51,0,1,0,1.47,0,.69,0,1.36-.11,2-.2s1.4-.23,2-.38a20.37,20.37,0,0,0,2.11-.61,15,15,0,0,0,2.13-.93q.25-1.12.48-2.28t.43-2.25q.2-1.1.37-2.22t.33-2.2A19.23,19.23,0,0,1,95.45,71.32Z" fill="#dce5e9" />
									<g class="check">
										<path d="M83.85,77q0,1.11.09,2.17c.68.06,1.37.1,2.07.11V77.11C85.28,77.1,84.56,77.06,83.85,77Z" fill="#313a42" />
										<path d="M79.44,76.3q.12,1.11.26,2.18c.67.16,1.39.31,2.14.43q-.09-1.07-.17-2.18C80.89,76.61,80.14,76.46,79.44,76.3Z" fill="#313a42" />
										<path d="M95.17,73.53q.15-1.09.28-2.2c-.72.24-1.53.48-2.42.68q-.1,1.11-.22,2.2A24.47,24.47,0,0,0,95.17,73.53Z" fill="#313a42" />
										<path d="M88.17,77.05q0,1.11-.1,2.18c.73,0,1.43-.12,2.09-.21q.1-1.08.19-2.19C89.66,76.93,88.93,77,88.17,77.05Z" fill="#313a42" />
										<path d="M90.52,74.64q.08-1.08.15-2.19c-.74.11-1.52.19-2.33.24q0,1.1-.08,2.18C89,74.82,89.8,74.74,90.52,74.64Z" fill="#313a42" />
										<path d="M81.51,74.56q.07,1.1.16,2.17c.7.11,1.43.2,2.18.27q0-1.07-.08-2.17C83,74.76,82.24,74.67,81.51,74.56Z" fill="#313a42" />
										<path d="M86.57,74.94H86q0,1.1,0,2.17h.53c.56,0,1.1,0,1.63-.06q0-1.08.09-2.18C87.71,74.91,87.15,74.93,86.57,74.94Z" fill="#313a42" />
										<path d="M76.86,73.5q.14,1.09.3,2.17c.68.22,1.45.44,2.29.63q-.12-1.07-.23-2.17C78.35,73.93,77.56,73.72,76.86,73.5Z" fill="#313a42" />
										<path d="M81.51,74.56q-.07-1.08-.14-2.17c-.83-.12-1.62-.27-2.37-.43q.1,1.09.21,2.17C79.93,74.29,80.7,74.43,81.51,74.56Z" fill="#313a42" />
										<path d="M86,74.93q0-1.08,0-2.17c-.78,0-1.56,0-2.32-.11q0,1.1.07,2.17C84.51,74.89,85.26,74.93,86,74.93Z" fill="#313a42" />
										<path d="M90.52,74.64q-.08,1.11-.17,2.19c.79-.11,1.53-.26,2.22-.42q.13-1.09.25-2.2C92.1,74.37,91.33,74.52,90.52,74.64Z" fill="#313a42" />
										<path d="M92.56,76.41q-.13,1.12-.27,2.21a21.67,21.67,0,0,0,2.2-.64q.19-1.1.36-2.23A23,23,0,0,1,92.56,76.41Z" fill="#313a42" />
										<path d="M90.16,79q-.1,1.12-.21,2.19c.72-.1,1.4-.23,2-.38q.16-1.08.31-2.22C91.63,78.77,90.92,78.91,90.16,79Z" fill="#313a42" />
										<path d="M94.85,75.74a16.64,16.64,0,0,0,2.28-1q.2-1.1.37-2.22a17.82,17.82,0,0,1-2.33,1Q95,74.65,94.85,75.74Z" fill="#313a42" />
										<path d="M86.52,79.29H86v2.17h.49c.51,0,1,0,1.47,0q.05-1.06.11-2.18C87.57,79.27,87.05,79.28,86.52,79.29Z" fill="#313a42" />
										<path d="M94.49,78q-.19,1.14-.4,2.25a15,15,0,0,0,2.13-.93q.25-1.12.48-2.28A15.68,15.68,0,0,1,94.49,78Z" fill="#313a42" />
										<path d="M76.59,71.34a18,18,0,0,1-2.37-.88q.14,1.07.31,2.14a17,17,0,0,0,2.33.9Q76.72,72.42,76.59,71.34Z" fill="#313a42" />
										<path d="M81.84,78.91q.09,1.11.19,2.18c.64.11,1.31.2,2,.26q0-1.06-.1-2.18C83.22,79.11,82.52,79,81.84,78.91Z" fill="#313a42" />
										<path d="M74.88,74.76q.19,1.1.4,2.18a16,16,0,0,0,2.21.9q-.17-1.07-.34-2.18A16.31,16.31,0,0,1,74.88,74.76Z" fill="#313a42" />
										<path d="M77.49,77.84q.18,1.12.38,2.2c.64.22,1.35.43,2.12.62q-.15-1.07-.29-2.19C78.9,78.28,78.15,78.07,77.49,77.84Z" fill="#313a42" />
									</g>
									<path class="nose" d="M93,37.19a39.18,39.18,0,0,0-6.9-7.8,39.17,39.17,0,0,0-6.94,7.75C82.46,38.75,90.21,38.88,93,37.19Z" fill="#c01d3f" fill-rule="evenodd" />
									<path class="top-rivets-base" d="M95.09,40.32A35,35,0,0,0,93.16,37C90.62,38.73,82.52,38.71,79,37a35,35,0,0,0-1.95,3.26C81,42.82,91.38,42.92,95.09,40.32Z" fill="#a3b8c1" fill-rule="evenodd" />
									<g class="top-rivets">
											<circle cx="79.97" cy="39.48" r="0.97" transform="translate(39.23 118.82) rotate(-89.1)" fill="#748591" />
											<circle cx="80.05" cy="39.32" r="0.97" transform="translate(39.47 118.74) rotate(-89.1)" fill="#a3b8c1" />
											<circle cx="79.94" cy="38.88" r="0.37" transform="translate(39.8 118.2) rotate(-89.1)" fill="#fff" />
											<circle cx="83.99" cy="40.1" r="0.97" transform="matrix(0.51, -0.86, 0.86, 0.51, 6.45, 91.57)" fill="#748591" />
											<circle cx="84.14" cy="39.99" r="0.97" transform="translate(6.61 91.65) rotate(-59.1)" fill="#a3b8c1" />
											<circle cx="84.26" cy="39.56" r="0.37" transform="translate(7.04 91.55) rotate(-59.1)" fill="#fff" />
											<circle cx="88.05" cy="40.19" r="0.97" transform="translate(46.48 127.6) rotate(-89.1)" fill="#748591" />
											<circle cx="88.13" cy="40.03" r="0.97" transform="translate(46.72 127.52) rotate(-89.1)" fill="#a3b8c1" />
											<circle cx="88.02" cy="39.59" r="0.37" transform="translate(47.05 126.98) rotate(-89.1)" fill="#fff" />
											<circle cx="92.05" cy="39.67" r="0.97" transform="translate(50.93 131.09) rotate(-89.1)" fill="#748591" />
											<circle cx="92.13" cy="39.51" r="0.97" transform="translate(51.17 131) rotate(-89.1)" fill="#a3b8c1" />
											<circle cx="92.02" cy="39.07" r="0.37" transform="translate(51.5 130.46) rotate(-89.1)" fill="#fff" />
										</g>
									<path d="M91.31,99.19,91,98.12a5.09,5.09,0,0,1-1.92.64,12.43,12.43,0,0,1-2.8.36V95.27a15.38,15.38,0,0,0,4.86-.75l-.28-1h0v0a14.16,14.16,0,0,1-4.59.71L86.12,29.4a39.22,39.22,0,0,0-6.89,7.69L79,37a35,35,0,0,0-1.95,3.26l.18.11A34.58,34.58,0,0,0,73.83,50.9c-.78,4.82-.6,11.16.13,17.5h0v0l.05.44L74,69l0,.38,0,.14.06.48v0l.07.5,0,.12.05.38,0,.14.06.4v.1l.07.5v.06l.07.43,0,.13.06.38,0,.12.16,1,0,.11.07.39,0,.13.07.42v.06l.09.5v0l.08.44,0,.11.08.39,0,.09v0a20.67,20.67,0,0,0-2.09,2.3A39.36,39.36,0,0,0,78.53,92a9.55,9.55,0,0,1,1.14-.46,6.46,6.46,0,0,0,1.5,2l0,.2v0l-.05.22,0,.11v.07l0,.07,0,.09v.15c-.22,1-.53,2.34-.57,2.63a1.67,1.67,0,0,0,1,1.17c-.14.6-.81,3.57-.81,3.7s0,0,0,0v0h0c.09,1,2.64,2.14,5.75,2.09V100.2A13.66,13.66,0,0,0,91.31,99.19Z" fill-rule="evenodd" opacity="0.25" />
									<path class="fin-shadow" d="M92.21,91.62a9.59,9.59,0,0,1,1.05.43,36.66,36.66,0,0,0,5.39-12.8,20.68,20.68,0,0,0-2-2.17C95.44,83.27,93.8,88.68,92.21,91.62Z" fill="#00485b" fill-rule="evenodd" opacity="0.12" />
									<g class="window">
										<g opacity="0.24">
											<path d="M86.22,47.18a9.93,9.93,0,1,1-10,9.9,9.93,9.93,0,0,1,10-9.9Z" fill-rule="evenodd" />
										</g>
										<path d="M86.33,47.29a9.82,9.82,0,1,1-9.84,9.79,9.82,9.82,0,0,1,9.84-9.79Z" fill="#a3b8c1" fill-rule="evenodd" />
										<circle class="window-base" cx="86.3" cy="57.1" r="6.83" transform="translate(28.95 143.24) rotate(-89.83)" fill="#052e4c" />
										<g class="rivets">
											<circle cx="81.44" cy="64.15" r="0.83" transform="translate(-17.85 93.99) rotate(-54.95)" fill="#748591" />
											<circle cx="91.11" cy="50.37" r="0.83" transform="translate(-2.45 96.03) rotate(-54.95)" fill="#748591" />
											<circle cx="85.53" cy="65.65" r="0.83" transform="translate(12.62 145.07) rotate(-84.95)" fill="#748591" />
											<circle cx="87.02" cy="48.88" r="0.83" transform="translate(30.67 131.25) rotate(-84.95)" fill="#748591" />
											<circle cx="89.83" cy="64.89" r="0.83" transform="translate(-18.99 43.95) rotate(-24.95)" fill="#748591" />
											<circle cx="82.72" cy="49.63" r="0.83" transform="translate(-13.21 39.53) rotate(-24.95)" fill="#748591" />
											<circle cx="93.17" cy="62.09" r="0.83" transform="translate(-11.17 102.71) rotate(-54.95)" fill="#748591" />
											<circle cx="79.38" cy="52.43" r="0.83" transform="translate(-9.12 87.31) rotate(-54.95)" fill="#748591" />
											<circle cx="94.66" cy="58" r="0.83" transform="translate(28.56 147.19) rotate(-84.95)" fill="#748591" />
											<circle cx="77.89" cy="56.52" r="0.83" transform="translate(14.74 129.14) rotate(-84.95)" fill="#748591" />
											<circle cx="93.91" cy="53.71" r="0.83" transform="translate(-13.89 44.63) rotate(-24.95)" fill="#748591" />
											<circle cx="78.64" cy="60.81" r="0.83" transform="translate(-18.31 38.85) rotate(-24.95)" fill="#748591" />
											<circle cx="81.52" cy="64.01" r="0.83" transform="translate(-17.7 93.99) rotate(-54.95)" fill="#a3b8c1" />
											<circle cx="91.19" cy="50.23" r="0.83" transform="translate(-2.3 96.04) rotate(-54.95)" fill="#a3b8c1" />
											<circle cx="85.61" cy="65.51" r="0.83" transform="translate(12.83 145.02) rotate(-84.95)" fill="#a3b8c1" />
											<circle cx="87.09" cy="48.74" r="0.83" transform="matrix(0.09, -1, 1, 0.09, 30.88, 131.21)" fill="#a3b8c1" />
											<circle cx="89.9" cy="64.76" r="0.83" transform="translate(-18.93 43.97) rotate(-24.95)" fill="#a3b8c1" />
											<circle cx="82.8" cy="49.49" r="0.83" transform="translate(-13.15 39.55) rotate(-24.95)" fill="#a3b8c1" />
											<circle cx="93.24" cy="61.96" r="0.83" transform="translate(-11.02 102.71) rotate(-54.95)" fill="#a3b8c1" />
											<circle cx="79.46" cy="52.29" r="0.83" transform="translate(-8.98 87.32) rotate(-54.95)" fill="#a3b8c1" />
											<circle cx="94.74" cy="57.86" r="0.83" transform="translate(28.76 147.14) rotate(-84.95)" fill="#a3b8c1" />
											<circle cx="77.97" cy="56.38" r="0.83" transform="translate(14.94 129.09) rotate(-84.95)" fill="#a3b8c1" />
											<circle cx="93.98" cy="53.57" r="0.83" transform="translate(-13.83 44.65) rotate(-24.95)" fill="#a3b8c1" />
											<circle cx="78.72" cy="60.67" r="0.83" transform="translate(-18.25 38.87) rotate(-24.95)" fill="#a3b8c1" />
											<circle cx="81.44" cy="63.66" r="0.32" transform="translate(-17.45 93.78) rotate(-54.95)" fill="#fff" />
											<circle cx="91.13" cy="49.85" r="0.32" transform="translate(-2.02 95.83) rotate(-54.95)" fill="#fff" />
											<circle cx="85.54" cy="65.16" r="0.32" transform="translate(13.11 144.64) rotate(-84.95)" fill="#fff" />
											<circle cx="87.03" cy="48.36" r="0.32" transform="translate(31.2 130.79) rotate(-84.95)" fill="#fff" />
											<circle cx="89.84" cy="64.4" r="0.32" transform="translate(-18.78 43.91) rotate(-24.95)" fill="#fff" />
											<circle cx="82.73" cy="49.11" r="0.32" transform="translate(-13 39.48) rotate(-24.95)" fill="#fff" />
											<circle cx="93.19" cy="61.6" r="0.32" transform="translate(-10.76 102.52) rotate(-54.95)" fill="#fff" />
											<circle cx="79.38" cy="51.92" r="0.32" transform="translate(-8.71 87.09) rotate(-54.95)" fill="#fff" />
											<circle cx="94.69" cy="57.5" r="0.32" transform="translate(29.08 146.76) rotate(-84.95)" fill="#fff" />
											<circle cx="77.88" cy="56.02" r="0.32" transform="translate(15.23 128.67) rotate(-84.95)" fill="#fff" />
											<circle cx="93.93" cy="53.2" r="0.32" transform="translate(-13.68 44.59) rotate(-24.95)" fill="#fff" />
											<circle cx="78.64" cy="60.32" r="0.32" transform="translate(-18.11 38.81) rotate(-24.95)" fill="#fff" />
										</g>
									</g>
									<path class="nose-shine" d="M86.19,30.05a12.87,12.87,0,0,1,1.18,4.34c.06,1.66,1,3.28,2.39,2.87,1.77-.53.27-2.83.27-2.83A43.21,43.21,0,0,0,86.19,30.05Z" fill="#fff" opacity="0.3" />
									<g class="window-shine" opacity="0.8">
										<path d="M83.93,51.51a6,6,0,0,0-1.7,1.09,7.91,7.91,0,0,0,1.31,2.19A9.71,9.71,0,0,0,87,57.1a6.79,6.79,0,0,1,4,3.78l.24-.31a6,6,0,0,0,.87-1.81,8.76,8.76,0,0,0-4.3-3.46A7.85,7.85,0,0,1,85,53.45,6.53,6.53,0,0,1,83.93,51.51Z" fill="#07638c" fill-rule="evenodd" />
										<path d="M90.13,61.78a8.73,8.73,0,0,0-4.36-3.56A7.85,7.85,0,0,1,83,56.38a8.55,8.55,0,0,1-1.45-3l-.18.24a6,6,0,0,0-1,2.31,7.31,7.31,0,0,0,1.14,1.8A9.71,9.71,0,0,0,84.94,60a6.87,6.87,0,0,1,3.47,2.74A6,6,0,0,0,90.13,61.78Z" fill="#07638c" fill-rule="evenodd" />
									</g>
									<g class="right-shine">
										<path d="M99.27,81.36a25.74,25.74,0,0,1,2.62,14.95l-.39,3.23.63-3.58A20.71,20.71,0,0,0,99.27,81.36Z" fill="#e8edef" fill-rule="evenodd" />
									</g>
									<g class="left-shine">
										<path d="M72.47,81.36a25.74,25.74,0,0,0-2.62,14.95l.39,3.23L69.61,96A20.71,20.71,0,0,1,72.47,81.36Z" fill="#e8edef" fill-rule="evenodd" />
									</g>
								</g>
						</g>
					</g>
				</g>
		</svg>

		<div class="preload-text-wrap">
			<p class="preload-text">Preparing to launch</p>
		</div>


		<div class="code-wrapper">

			<div class="code-inner">
				<div class="code-content">
					<h1 class="code-title">Got your code?</h1>
					<p class="code-intro">Enter it here to launch your rocket!</p>
				</div>
				<form class="code-form" action="">
					<input class="code-input" type="text" placeholder="CODE" />
					<button class="code-btn">
						<span class="code-btn-txt">Submit</span>
						<div class="code-btn-icons">
							<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
								<path class="tick" d="M26.75,7.5l-15,15L3.25,14" transform="translate(-1 -1)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="6"/>
<!-- 								<g class="cross">
									<path class="cross-1" d="M6.89,6.89,23.11,23.11" transform="translate(-1 -1)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="6"/>
									<path class="cross-2" d="M6.89,23.11,23.11,6.89" transform="translate(-1 -1)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="6"/>
								</g> -->
							</svg>
						</div>
					</button>
					<div class="code-base"></div>
					<p class="error"></p>
				</form>
			</div>

		</div>
			
		<svg class="background" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 528">
			<defs>
<!-- 				<radialGradient id="radial-gradient" cx="-.04" cy="543.25" fx="43.332" fy="505.229" r="832.16" gradientTransform="matrix(.38 0 0 -.44 165.74 510.43)" gradientUnits="userSpaceOnUse">
					<stop offset=".04" stop-color="#00a9ea" />
					<stop offset="1" stop-color="#08222e" />
				</radialGradient> -->
				<linearGradient id="linear-gradient" x1="154.59" y1="446.7" x2="154.59" y2="486.79" gradientTransform="matrix(1 0 0 -1 0 527)" gradientUnits="userSpaceOnUse">
					<stop offset=".2" stop-color="#00a9ea" stop-opacity="0" />
					<stop offset="1" stop-color="#00a9ea" />
				</linearGradient>
				<linearGradient id="linear-gradient-2" x1="183.94" y1="3.57" x2="183.94" y2="64.01" gradientTransform="matrix(1 0 0 -1 0 527)" gradientUnits="userSpaceOnUse">
					<stop offset=".5" stop-color="#ffc9f9" stop-opacity="0" />
					<stop offset="1" stop-color="#ffc9f9" />
				</linearGradient>
				<filter id="blurMe">
					<feGaussianBlur in="SourceGraphic" stdDeviation="0.9" />
				</filter>
				<filter id="goo" color-interpolation-filters="sRGB">
					<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
					<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -11" result="goo" />
					<feBlend in="SourceGraphic" in2="goo" />
				</filter>
				<radialGradient id="radial-gradient-2" cx="447" cy="329.99" r="255.62" gradientTransform="translate(294.96 -12.82) rotate(82.63) scale(0.5 0.5)" gradientUnits="userSpaceOnUse">
					<stop offset="0.4" stop-color="#00aeef"/>
					<stop offset="0.94" stop-color="#145068"/>
					<stop offset="1" stop-color="#002c37"/>
				</radialGradient>
			</defs>
			<title>Background Images</title>
<!-- 			<path fill="url(#radial-gradient)" d="M0 0h320v528H0z" class="stage" /> -->
			<g class="stars-1" opacity=".3" fill="#00a9ea">
				<path d="M304.29 14.41l2.51 4.01 4.59-1.15-3.03 3.63 2.51 4.01-4.39-1.77-3.03 3.63.32-4.72-4.39-1.76 4.59-1.16.32-4.72zM65.09 5.89l.44 3.08 3.06.53-2.79 1.37.44 3.08-2.16-2.23-2.79 1.37 1.45-2.75-2.17-2.23 3.07.53 1.45-2.75zM63.82 36.58l1.42 2.27 2.6-.65-1.72 2.06 1.43 2.27-2.49-1-1.72 2.06.18-2.68-2.49-1 2.6-.65.19-2.68zM88.62 46.43l1.43 2.27 2.6-.65-1.72 2.05 1.43 2.28-2.49-1-1.72 2.05.18-2.67-2.49-1 2.6-.66.18-2.67zM33.76 46.47l3.27 5.22 5.98-1.5-3.95 4.72 3.27 5.22-5.71-2.3-3.95 4.73.42-6.15-5.72-2.29 5.97-1.5.42-6.15zM238.1 10.78l-.41 6.15 5.72 2.29-5.97 1.5-.42 6.15-3.27-5.22-5.97 1.51 3.94-4.73-3.28-5.21 5.72 2.29 3.94-4.73zM299.13 58.09l-.41 6.14 5.71 2.3-5.97 1.5-.41 6.14-3.28-5.21-5.97 1.51 3.95-4.73-3.28-5.21 5.71 2.29 3.95-4.73zM7.5 33.08l1.06 1.69 1.93-.49-1.28 1.53 1.07 1.69-1.85-.74-1.29 1.53.14-1.99-1.85-.74 1.94-.49.13-1.99zM312.12 47.33l1.06 1.68 1.93-.48-1.28 1.53 1.06 1.69-1.85-.75-1.28 1.53.14-1.99-1.85-.74 1.93-.49.14-1.98zM255.33 27.82l1.06 1.69 1.93-.49-1.28 1.53 1.06 1.69-1.85-.74-1.28 1.53.14-1.99-1.85-.74 1.93-.49.14-1.99zM287.38 37.16l1.06 1.69 1.93-.49-1.28 1.53 1.06 1.69-1.85-.74-1.28 1.53.14-1.99-1.85-.75 1.93-.48.14-1.99zM310.93 75.67l1.06 1.69 1.93-.49-1.28 1.53 1.06 1.69-1.85-.74-1.28 1.53.14-1.99-1.85-.74 1.93-.49.14-1.99zM236.2 39.76l1.06 1.69 1.94-.48-1.28 1.53 1.06 1.69-1.85-.75-1.28 1.53.13-1.99-1.85-.74 1.94-.49.13-1.99zM278.03 16.22l1.06 1.69 1.94-.49-1.28 1.53 1.06 1.69-1.85-.74-1.28 1.53.13-1.99-1.85-.74 1.94-.49.13-1.99zM121.37 8.13l1.06 1.69 1.93-.48-1.28 1.53 1.06 1.69-1.85-.75-1.28 1.53.14-1.99-1.85-.74 1.93-.49.14-1.99zM251.62 55.66l1.06 1.69 1.94-.48-1.28 1.53 1.06 1.69-1.85-.75-1.28 1.53.13-1.99-1.85-.74 1.94-.49.13-1.99zM30.12 10.74l1.19 3.68h3.88l-3.14 2.28 1.2 3.69-3.13-2.28-3.14 2.28 1.2-3.69-3.14-2.28h3.88l1.2-3.68zM272.98 45.1l1.2 3.69h3.88l-3.14 2.28 1.2 3.68-3.14-2.27-3.13 2.27 1.2-3.68-3.14-2.28h3.88l1.19-3.69zM210.25 33.47l1.19 3.68h3.88l-3.13 2.28 1.19 3.69-3.13-2.28-3.14 2.28 1.2-3.69-3.14-2.28h3.88l1.2-3.68zM114.22 33.47l1.2 3.68h3.88l-3.14 2.28 1.2 3.69-3.14-2.28-3.13 2.28 1.2-3.69-3.14-2.28h3.88l1.19-3.68z" />
			</g>
			<g class="planet">
				<circle cx="63.4" cy="52.63" r="29.63" fill="#394e56" />
				<path class="planet-shine" d="M75 25.37c12.5 7.63 15.71 25.1 7.19 39.06-7.81 12.8-22.76 18.16-34.8 13.1A29.62 29.62 0 1 0 75 25.37z" fill="#fffdb0" opacity=".2" style="isolation:isolate" />
				<g class="planet-moon">
					<circle cx="37.16" cy="72.96" r="8.16" transform="rotate(-87.72 37.16 72.96)" fill="#00a9ea" />
					<g opacity=".5">
						<path d="M31 67.63l.18-.21zM30.51 68.23l.17-.23z" fill="#00a9ea" />
						<path d="M39.2 65.05a5.59 5.59 0 0 1 2 1.24c2.55 2.47 2.58 7.23-.31 10.22s-7.62 3.08-10.18.6A5.75 5.75 0 0 1 29 73.83a8.16 8.16 0 1 0 10.2-8.78z" fill="#33cfff" />
						<path d="M30.13 68.8z" fill="#00a9ea" />
					</g>
				</g>
				<g class="planet-pattern" fill="#00a9ea">
					<path d="M38.33 36.85h50.14a29.78 29.78 0 0 0-7.4-8H45.73a29.78 29.78 0 0 0-7.4 8zM33.77 52.63v.22H93v-.22a29.52 29.52 0 0 0-2.44-11.78H36.21a29.52 29.52 0 0 0-2.44 11.78zM90.39 64.85h-8.31a22.93 22.93 0 0 0-8.65-1.49 22.93 22.93 0 0 0-8.65 1.49H36.41a29.73 29.73 0 0 0 9.93 12h19.09a20.18 20.18 0 0 0 8 1.25 25.13 25.13 0 0 0 6.07-.6 29.73 29.73 0 0 0 10.89-12.65zm-17 10.34c-4.38 0-7.92-1.83-7.92-4.09s3.58-4.1 8-4.1 7.92 1.83 7.92 4.09-3.54 4.1-7.92 4.1zM76.67 73c-1.83 0-3.31-.77-3.31-1.71s1.48-1.71 3.31-1.71 3.33.73 3.33 1.68S78.5 73 76.67 73zM34.24 57.85a29.43 29.43 0 0 0 .7 3h56.92a29.42 29.42 0 0 0 .7-3z" opacity=".2" style="isolation:isolate" />
				</g>
			</g>
			<g class="moon">
				<circle cx="258.09" cy="151.69" r="26.54" fill="#f1db9f" />
				<path d="M274.2 130.6a26.42 26.42 0 0 1 5.45 16.11c0 22.07-25.35 34.32-42.65 21.09a26.54 26.54 0 1 0 37.2-37.2z" fill="#d3c08e" />
				<circle cx="261.4" cy="168.28" r="6.64" fill="#f1db9f" />
				<circle cx="261.4" cy="168.28" r="5.81" fill="#d3c08e" />
				<path d="M262.23 163.3a5.78 5.78 0 0 1 3.67 1.31 5.81 5.81 0 1 0-8.17 8.17 5.81 5.81 0 0 1 4.5-9.48z" fill="#545657" opacity=".15" style="isolation:isolate" />
				<circle cx="250.62" cy="172.42" r="3.32" fill="#f1db9f" />
				<circle cx="250.62" cy="172.42" r="2.49" fill="#d3c08e" />
				<path d="M251 170.35a2.48 2.48 0 0 1 1.54.54 2.49 2.49 0 1 0-3.49 3.49 2.49 2.49 0 0 1 2-4z" fill="#545657" opacity=".15" style="isolation:isolate" />
				<circle cx="250.21" cy="163.71" r="4.15" fill="#d3c08e" />
				<path d="M251 160.4a4.12 4.12 0 0 1 2.49.83 4.14 4.14 0 1 0-5.8 5.8 4.15 4.15 0 0 1 3.31-6.63z" fill="#545657" opacity=".15" style="isolation:isolate" />
				<g>
					<circle cx="276.75" cy="151.27" r="4.98" fill="#f1db9f" />
					<circle cx="276.75" cy="151.27" r="4.15" fill="#d3c08e" />
					<path d="M277.58 148a4.12 4.12 0 0 1 2.49.83 4.14 4.14 0 1 0-5.8 5.8 4.15 4.15 0 0 1 3.31-6.63z" fill="#545657" opacity=".15" style="isolation:isolate" />
				</g>
				<g>
					<circle cx="277.99" cy="142.98" r="3.32" fill="#f1db9f" />
					<circle cx="277.99" cy="142.98" r="2.49" fill="#d3c08e" />
					<path d="M278.41 140.9a2.48 2.48 0 0 1 1.54.54 2.49 2.49 0 1 0-3.49 3.49 2.49 2.49 0 0 1 1.95-4z" fill="#545657" opacity=".15" style="isolation:isolate" />
				</g>
				<g>
					<circle cx="251.45" cy="145.05" r="5.81" fill="#d3c08e" />
					<path d="M252.28 140.08a5.78 5.78 0 0 1 3.67 1.31 5.81 5.81 0 1 0-8.17 8.17 5.81 5.81 0 0 1 4.5-9.48z" fill="#545657" opacity=".15" style="isolation:isolate" />
				</g>
				<circle cx="266.79" cy="130.95" r="1.66" fill="#d3c08e" />
				<path d="M268.16 130a1.66 1.66 0 1 0-2.31 2.31 1.66 1.66 0 0 1 2.31-2.31z" fill="#545657" opacity=".15" style="isolation:isolate" />
			</g>
			<g class="comet">
				<path d="M224.74 60.44c-5.46-4.54-11.39-6.36-13.38-4s.7 7.91 6 12.62l73.76 56z" fill="#00a9ea" />
				<circle cx="218.13" cy="61.26" r="7.24" transform="rotate(-49.37 218.14 61.26)" fill="#fff7ca" />
				<path d="M225.52 55.82a8.76 8.76 0 0 0-1.87-1.51 9.77 9.77 0 0 0-14.16 5.4 9.64 9.64 0 0 0 4.87 11.39L267.49 99z" fill="#00a9ea" />
				<path d="M212.92 70.49a8.76 8.76 0 0 1-1.77-1.62A9.77 9.77 0 0 1 214.34 54a9.64 9.64 0 0 1 12 3.08L262 105.42z" fill="#00a9ea" />
				<path d="M222.68 59.82c-3-2.48-6.85-2.85-8.62-.79s-.82 5.77 2.09 8.4l41.93 29.5z" fill="#33cfff" />
				<path d="M222.53 58.12a6.21 6.21 0 0 0-8.08 9.41l34.44 17.85z" fill="#33cfff" />
				<path d="M214.45 67.53a6.21 6.21 0 0 1 8.08-9.41l22.87 31.33z" fill="#33cfff" />
				<circle cx="218.85" cy="62.79" r="8.63" transform="rotate(-87.72 218.85 62.79)" fill="#394e56" />
				<path d="M221 54.45a5.91 5.91 0 0 1 2.12 1.31c2.7 2.61 2.73 7.65-.33 10.8s-8.05 3.25-10.75.64a6.08 6.08 0 0 1-1.76-3.47A8.62 8.62 0 1 0 221 54.45z" fill="#fffdb0" opacity=".1" style="isolation:isolate" />
			</g>
			<g class="ufo">
				<path d="M194.32 38.33c-.51-1.24-8.55-4.65-18.41-8-2.75-5.9-12.32-8.68-17.41-9.22a19.42 19.42 0 0 0-15.75 5.13c-19.37.93-18.7 3.51-18.7 3.51-.14 1.37 2.43 2.45 5.12 3.44 1.86.68 11.32 4.17 19.89 6.66 0 .92 4.23 2.26 9.51 3s9.86.67 10-.26c9.48-.2 20.81-1.43 22-1.6 1.58-.24 4.3-.73 3.75-2.66z" fill="#394e56" />
				<g class="ufo-lights" fill="#00a9ea">
					<circle cx="160.24" cy="23.31" r="1.07" transform="rotate(-73.26 160.23 23.31)" />
					<circle cx="151.85" cy="23.37" r=".64" transform="rotate(-73.26 151.85 23.36)" />
					<circle cx="148.15" cy="24.33" r=".43" transform="rotate(-73.26 148.15 24.33)" />
					<circle cx="171.56" cy="28.04" r=".43" transform="rotate(-73.26 171.56 28.04)" />
					<circle cx="168.55" cy="26.02" r=".64" transform="rotate(-73.26 168.55 26.02)" />
					<circle cx="164.78" cy="24.45" r=".84" transform="rotate(-73.26 164.78 24.44)" />
					<circle cx="155.63" cy="23.04" r=".84" transform="rotate(-73.26 155.63 23.04)" />
				</g>
				<path d="M158.9 39.32c4.65.64 8.47 1.75 9.56 2.7-.2-.93-4.31-2.21-9.47-2.91-5-.68-9.15-.59-9.87.16 1.48-.55 5.34-.56 9.78.05z" fill="#00a9ea" />
				<path d="M194.32 38.33c-.51-1.24-8.55-4.65-18.41-8-1.89-4-7-6.63-11.65-8a5.94 5.94 0 0 1 3.14 5.92C174.58 30 180.57 32 180.57 32s.37 4.1-12.61 9.48a1.06 1.06 0 0 1 .61 1.08c9.49-.19 20.8-1.42 22-1.59 1.58-.22 4.3-.71 3.75-2.64z" fill="#fffdb0" opacity=".2" style="isolation:isolate" />
				<path d="M124 29.82a.9.9 0 0 1 .45-.66 7.06 7.06 0 0 1 2.12-1 28.87 28.87 0 0 1 3.52-.83c1.37-.24 2.93-.48 4.64-.66s3.56-.35 5.52-.48 4-.29 6.18-.32a96 96 0 0 1 13.44.78 99.16 99.16 0 0 1 13.2 2.64c1 .27 2 .58 3 .89l2.85 1c1.85.67 3.59 1.33 5.19 2a82 82 0 0 1 7.58 3.37 14.16 14.16 0 0 1 2 1.21 2.51 2.51 0 0 1 .45.42 1 1 0 0 1 .11.18 1 1 0 0 0-.12-.17 2.49 2.49 0 0 0-.46-.4 15.29 15.29 0 0 0-2-1.14 79.32 79.32 0 0 0-7.67-3.16c-1.6-.6-3.35-1.23-5.21-1.86l-2.86-1c-1-.28-2-.6-3-.86a99 99 0 0 0-13.14-2.56 95.42 95.42 0 0 0-13.36-.86c-2.13 0-4.21.16-6.16.24s-3.81.22-5.52.39-3.26.34-4.64.55a28.72 28.72 0 0 0-3.52.73 7.27 7.27 0 0 0-2.13.87c-.46.36-.46.7-.46.69z" fill="#00a9ea" />
				<path d="M164.94 79.79L166.38 43c.1-.75-3.23-1.83-7.41-2.42s-7.67-.45-7.77.3l-8.3 35.84-.1-.44c-.07 1 4.75 2.51 10.79 3.35a70.26 70.26 0 0 0 11.17.65h.14z" fill="url(#linear-gradient)" />
				<ellipse cx="158.92" cy="41.44" rx="1.2" ry="8.13" transform="rotate(-82.6 158.93 41.44)" fill="#33cfff" />
			</g>
			<g class="saturn">
				<circle cx="156.36" cy="120.29" r="21.29" fill="#394e56" />
				<path d="M164.72 100.71c9 5.47 11.27 18 5.15 28.07-5.61 9.2-16.35 13.05-25 9.42a21.29 21.29 0 1 0 19.86-37.49z" fill="#fffdb0" opacity=".2" style="isolation:isolate" />
				<path d="M177.52 117.95a21.47 21.47 0 0 1 .14 2.34v.08c13 5.93 19.65 11.38 18.69 14.12-1.48 4.24-21 1.29-43.55-6.59s-39.67-17.71-38.19-22c1-2.89 11.56-2.36 25.18 1q.57-.71 1.2-1.37c-21.52-5.73-39.46-7.64-40.88-3.46s12.82 13.11 34 21.75c5.66 2.31 11.8 4.61 18.28 6.8 6.85 2.32 13.47 4.32 19.66 6 21.54 5.75 37.76 7.26 39.18 3.07s-13.81-13.39-33.71-21.74z" fill="#00a9ea" />
				<path d="M117.08 106.86c-1.39 4 14.67 13.22 35.87 20.62s39.52 10.18 40.91 6.19c.91-2.61-5.66-7.46-16.25-12.58v.66c7.78 3.72 12.53 7 11.94 8.79s-6.19 1.52-14.4-.17a179.66 179.66 0 0 1-20.72-5.77 183.64 183.64 0 0 1-19.09-7.6c-8.08-3.81-13-7.25-12.45-9s6.81-1.5 15.76.45c.22-.32.45-.63.68-.94-12.33-2.93-21.33-3.38-22.25-.65z" fill="#33cfff" />
			</g>
			<g class="rocket-launchpad-1">
				<g class="launchpad-1">
					<g class="ladder-1">
						<path fill="#969799" d="M180.06 418.13h1.31v6.96h-1.31zM174.06 418.14h1.31v6.96h-1.31zM168.06 418.14h1.31v6.96h-1.31zM162.06 418.14h1.31v6.96h-1.31zM156.06 418.14h1.31v6.96h-1.31z" />
						<path fill="#a6a8ab" d="M156.07 417.64h25.3v1.62h-25.3zM156.07 424.29h25.3v1.62h-25.3z" />
					</g>
					<g class="platform-1">
						<g fill="#929497">
							<path d="M192.63 482.18h7.03v9.22h-7.03zM179.57 482.17h7.03v9.22h-7.03zM166.51 482.17h7.03v9.22h-7.03zM153.46 482.17h7.03v9.22h-7.03zM140.4 482.17h7.03v9.22h-7.03zM127.34 482.17h7.03v9.22h-7.03z" />
						</g>
						<path fill="#bbbdbf" d="M125.32 476.44h76.35v5.75h-76.35z" />
						<path fill="#808184" d="M108 490.61h111v2.11H108z" />
						<path fill="#a6a8ab" d="M125.32 473.25h34.94v3.37h-34.94z" />
					</g>
					<g class="frame-1">
						<g class="cross-beams-1">
							<g fill="#e6e7e8">
								<path d="M142.513 401.71l13.365-13.365.876.876-13.364 13.366zM142.505 415.26l13.364-13.364.876.877-13.365 13.364zM142.523 428.814l13.364-13.364.877.877L143.4 429.69zM142.524 442.366L155.89 429l.875.878-13.364 13.365zM142.51 455.914l13.363-13.364.877.877-13.365 13.364zM142.51 469.465l13.364-13.364.877.878-13.363 13.364z" />
							</g>
							<path fill="#e6e6e6" d="M149.115 382.288l.876-.877 6.457 6.457-.877.877z" />
							<path fill="#e6e7e8" d="M142.506 389.214l.877-.877 13.364 13.365-.876.877zM142.515 402.76l.876-.878 13.366 13.364-.877.877zM142.52 416.303l.876-.877 13.364 13.364-.877.877zM142.517 429.87l.877-.876 13.364 13.365-.876.875zM142.52 443.412l.875-.876L156.76 455.9l-.877.877zM142.52 456.964l.877-.877 13.364 13.364-.876.878z" />
							<g fill="#e6e7e8">
								<path d="M128.46 443.438l.878-.876 13.364 13.364-.877.877zM128.465 456.973l.877-.877 13.364 13.364-.877.877z" />
								<path d="M128.46 455.926l13.365-13.364.877.876-13.364 13.365zM128.465 469.46l13.364-13.364.876.877-13.364 13.364z" />
								<path d="M135.574 437l.877-.876 6.244 6.244-.877.877z" />
							</g>
							<path fill="#d0d2d3" d="M155.88 374l-14.02 13.94 1.23.68 13.67-13.58-.88-1.04z" />
						</g>
						<g class="lateral-beams-1" fill="#bbbdbf">
							<path d="M142.43 388h14.41v1.5h-14.41zM142.43 401.52h14.41v1.5h-14.41zM142.43 415.05h14.41v1.5h-14.41zM142.43 428.58h14.41v1.5h-14.41z" />
							<g>
								<path d="M142.79 442.11h-14.42v1.5h28.47v-1.5h-14.05zM142.79 455.64h-14.42v1.49h28.47v-1.49h-14.05zM142.43 469.16h-14.06v1.5h28.47v-1.5h-14.41z" />
							</g>
						</g>
						<g class="outer-frame-1" fill="#d0d2d3">
							<path d="M141.86 387.94h1.86v85.52h-1.86zM155.92 374h1.86v99.46h-1.86zM128.83 441.99h-1.02v31.47h1.86V441.99h-.84z" />
							<path d="M142.7 429.87l-.83-1.97-14.06 14.09h1.86v.92l13.03-13.04z" />
						</g>
					</g>
				</g>
				<g class="rocket-1">
					<g class="thrust-1">
						<path d="M183.7 518.57c0-39.83 8.75-45.74 5.58-52.08-1.64-3.69-4.65-3.49-5-3.49a5.76 5.76 0 0 0-5.57 3.49c-3.18 6.34 4 12.25 5 52.08z" fill="url(#linear-gradient-2)" />
						<path d="M183.7 515.81c0-37.16 7.55-42.65 4.82-48.57-1.41-3.45-3.94-3.23-4.23-3.23a4.87 4.87 0 0 0-4.81 3.23c-2.72 5.92 3.23 11.4 4.23 48.56z" fill="#ff8500" />
						<path d="M183.7 498.1c0-24 5.83-27.1 3.75-30.92a3.42 3.42 0 0 0-3.15-2.18 4.08 4.08 0 0 0-3.74 2.17c-2.08 3.83 2.15 6.9 3.15 30.92z" fill="#ffce00" />
						<path d="M183.7 480.1c0-5 3.59-12.22 2.36-13.91a2.58 2.58 0 0 0-1.74-1.18 3.45 3.45 0 0 0-2.35 1.18c-1.23 1.69 1.75 9 1.75 13.9z" fill="#fff7ca" />
					</g>
					<path class="thruster-1" d="M190.15 464.15c0-.16-1.05-4.06-1.05-4.06-.72.53-2.79.94-5.22 1s-4.51-.31-5.25-.83c0 0-.91 4-.91 4.14.1 1.28 2.87 2.27 6.25 2.21s6.12-1.15 6.17-2.43l.01-.03z" fill="#a3b8c1" />
					<path d="M174 435.4a22.54 22.54 0 0 0-8.81 21.89l3.26 19.23h1.12v-13.68a10.39 10.39 0 0 1 7.54-10z" fill="#a3b8c1" class="fin-left-1" />
					<path d="M193.2 435.46a22.54 22.54 0 0 1 8.68 21.94l-3.38 19.21h-1.12l.07-13.68a10.39 10.39 0 0 0-7.48-10z" fill="#a3b8c1" class="fin-right-1" />
					<path class="cockpit-1" d="M188.76 455.22c4.5-3.52 10.55-31.59 8.25-46.43a37.43 37.43 0 0 0-4.51-13H175a37.45 37.45 0 0 0-4.59 13c-2.4 14.89 3.55 43.17 8 46.52.8.51 4 .9 5.39.89a12.74 12.74 0 0 0 4.96-.98z" fill="#e8edef" />
					<path class="fuel-tank-1" d="M196.78 427.65a28 28 0 0 1-12.72 3c-6.18 0-11.74-1.73-13.53-2.85 1.46 12.62 4.95 25.2 7.85 27.45 0 0-.87 3.77-.86 3.94s0-.07 0 0V459c.1 1 2.87 2.38 6.26 2.32s6.12-1.32 6.17-2.32v-.07l-1-3.86c2.88-2.64 6.34-15.07 7.83-27.42z" fill="#c01d3f" />
					<path class="check-base-1" d="M193.91 430.94c-.78.26-1.67.52-2.63.74-.8.19-1.66.35-2.57.48s-1.65.21-2.54.27c-.62 0-1.25.07-1.9.07h-.62c-.85 0-1.7 0-2.52-.12s-1.72-.17-2.54-.29-1.76-.29-2.57-.47-1.84-.44-2.63-.68a19.61 19.61 0 0 1-2.58-1q.16 1.17.33 2.33t.38 2.35q.21 1.2.43 2.38t.49 2.41a17.38 17.38 0 0 0 2.32 1c.7.24 1.47.47 2.31.68s1.45.33 2.23.46 1.43.22 2.17.29 1.42.11 2.14.12h2.14a14.76 14.76 0 0 0 2.16-.22c.68-.1 1.52-.25 2.21-.41a22.15 22.15 0 0 0 2.29-.67 16.35 16.35 0 0 0 2.32-1q.27-1.22.52-2.48t.46-2.44q.21-1.2.41-2.42t.36-2.39a20.92 20.92 0 0 1-2.57 1.01z" fill="#dce5e9" />
					<g class="check-1" fill="#313a42">
						<path d="M181.29 437.12q0 1.2.09 2.37 1.11.11 2.25.12v-2.37c-.78-.01-1.57-.06-2.34-.12zM176.5 436.35q.14 1.2.28 2.37c.73.18 1.51.34 2.33.47q-.1-1.16-.19-2.37c-.85-.13-1.66-.29-2.42-.47zM193.61 433.34q.16-1.19.31-2.4c-.78.26-1.67.52-2.63.74q-.11 1.2-.24 2.39 1.3-.3 2.56-.73zM186 437.18q0 1.21-.1 2.37a16.3 16.3 0 0 0 2.27-.23q.11-1.17.2-2.39c-.76.07-1.55.19-2.37.25zM188.55 434.55q.09-1.18.16-2.38c-.81.12-1.65.21-2.54.27q0 1.2-.09 2.37c.87-.06 1.69-.15 2.47-.26zM178.75 434.46q.08 1.2.17 2.36c.77.12 1.56.22 2.38.29q0-1.17-.08-2.36c-.86-.07-1.68-.17-2.47-.29z" />
						<path d="M184.25 434.87h-.6v2.37h.58a17.06 17.06 0 0 0 1.77-.06q0-1.17.09-2.37c-.6.03-1.21.06-1.84.06zM173.68 433.3q.16 1.19.33 2.36c.75.24 1.58.48 2.49.69q-.13-1.17-.25-2.36c-.94-.21-1.8-.45-2.57-.69zM178.75 434.46q-.08-1.17-.15-2.36c-.9-.13-1.76-.29-2.57-.47l.22 2.36c.75.18 1.62.34 2.5.47zM183.65 434.87v-2.37c-.85 0-1.7 0-2.52-.12q0 1.19.07 2.36c.8.08 1.62.12 2.45.13zM188.55 434.55q-.09 1.21-.18 2.38c.86-.12 1.66-.28 2.41-.46q.14-1.18.27-2.4c-.78.19-1.62.35-2.5.48z" />
						<path d="M190.77 436.47q-.14 1.22-.3 2.41a23.58 23.58 0 0 0 2.4-.7q.2-1.2.39-2.43a25 25 0 0 1-2.49.72zM188.16 439.32q-.11 1.22-.23 2.39c.78-.11 1.52-.25 2.21-.41q.17-1.18.33-2.41c-.71.11-1.47.31-2.31.43zM193.26 435.75a18.11 18.11 0 0 0 2.48-1.06q.21-1.2.41-2.42a19.39 19.39 0 0 1-2.54 1.06q-.17 1.23-.35 2.42zM184.2 439.61h-.56V442h2.14q.06-1.16.12-2.37z" />
						<path d="M192.87 438.18q-.21 1.25-.43 2.44a16.35 16.35 0 0 0 2.32-1q.27-1.22.52-2.48a17.07 17.07 0 0 1-2.41 1.04zM173.39 431a19.6 19.6 0 0 1-2.58-1q.16 1.17.33 2.33a18.47 18.47 0 0 0 2.53 1q-.14-1.19-.28-2.33zM179.11 439.19q.1 1.21.21 2.37c.7.12 1.43.22 2.17.29q-.05-1.16-.1-2.37c-.79-.07-1.55-.17-2.28-.29zM171.53 434.68q.21 1.2.43 2.38a17.44 17.44 0 0 0 2.4 1q-.19-1.17-.37-2.37a17.75 17.75 0 0 1-2.46-1.01zM174.37 438q.2 1.22.41 2.39c.7.24 1.47.47 2.31.68q-.16-1.16-.31-2.38a15.25 15.25 0 0 1-2.41-.69z" />
					</g>
					<path class="nose-1" d="M191.27 393.8a42.64 42.64 0 0 0-7.5-8.48 42.63 42.63 0 0 0-7.55 8.44c3.56 1.73 12 1.88 15.05.04z" fill="#c01d3f" />
					<path class="top-rivets-base-1" d="M193.52 397.2a38.1 38.1 0 0 0-2.1-3.56c-2.77 1.84-11.58 1.81-15.36 0a38.09 38.09 0 0 0-2.12 3.55c4.27 2.74 15.54 2.81 19.58.01z" fill="#a3b8c1" />
					<g class="top-rivets-1">
						<circle cx="177.06" cy="396.28" r="1.05" transform="translate(-221.95 567.09) rotate(-89.1)" fill="#748591" />
						<circle cx="177.14" cy="396.1" r="1.05" transform="translate(-221.69 567) rotate(-89.1)" fill="#a3b8c1" />
						<circle cx="177.04" cy="395.7" r="0.4" transform="matrix(0.02, -1, 1, 0.02, -222.13, 564.77)" fill="#fff" />
						<circle cx="181.45" cy="396.94" r="1.05" transform="translate(-252.33 348.79) rotate(-59.1)" fill="#748591" />
						<circle cx="181.63" cy="396.84" r="1.05" transform="translate(-252.16 348.89) rotate(-59.1)" fill="#a3b8c1" />
						<circle cx="181.54" cy="396.36" r="0.4" transform="translate(-251.79 348.59) rotate(-59.1)" fill="#fff" />
						<g>
							<circle cx="185.86" cy="397.05" r="1.05" transform="translate(-214.06 576.65) rotate(-89.1)" fill="#748591" />
							<circle cx="185.94" cy="396.87" r="1.05" transform="translate(-213.8 576.55) rotate(-89.1)" fill="#a3b8c1" />
							<circle cx="185.83" cy="396.4" r="0.4" transform="translate(-213.44 575.98) rotate(-89.1)" fill="#fff" />
						</g>
						<g>
							<circle cx="190.21" cy="396.49" r="1.05" transform="translate(-209.22 580.45) rotate(-89.1)" fill="#748591" />
							<circle cx="190.3" cy="396.31" r="1.05" transform="translate(-208.95 580.36) rotate(-89.1)" fill="#a3b8c1" />
							<circle cx="190.17" cy="395.83" r="0.4" transform="translate(-208.6 579.76) rotate(-89.1)" fill="#fff" />
						</g>
					</g>
					<path d="M189.41 461.26l-.31-1.17a5.54 5.54 0 0 1-2.09.69 13.53 13.53 0 0 1-3 .39V457a16.73 16.73 0 0 0 5.29-.81l-.3-1.12a15.41 15.41 0 0 1-5 .77l-.19-70.48a42.68 42.68 0 0 0-7.5 8.37l-.2-.09a38.09 38.09 0 0 0-2.12 3.55l.19.12a37.63 37.63 0 0 0-3.76 11.45c-.84 5.24-.65 12.15.14 19l.06.48v.15l.05.41v.2l.07.52.07.55v.13l.06.42v.15l.06.43v.11l.08.54v.07l.07.47v.14l.07.42v.13l.18 1.08v.12l.07.42v.14l.08.46v.07l.1.54.09.47v.12l.08.43v.1a22.5 22.5 0 0 0-2.28 2.5 42.83 42.83 0 0 0 5.8 13.86 10.39 10.39 0 0 1 1.24-.5 7 7 0 0 0 1.63 2.21l-.05.22-.06.24v.53c-.24 1-.57 2.54-.63 2.86a1.82 1.82 0 0 0 1.09 1.27c-.15.65-.89 3.88-.88 4s0-.19 0-.17c.1 1 2.87 2.49 6.25 2.43v-4.15a14.63 14.63 0 0 0 5.55-1.07z" opacity=".25" style="isolation:isolate" />
					<path class="fin-shadow-1" d="M190.39 453a10.43 10.43 0 0 1 1.15.47 39.9 39.9 0 0 0 5.86-13.93 22.5 22.5 0 0 0-2.15-2.37c-1.35 6.77-3.13 12.66-4.86 15.83z" fill="#00485b" opacity=".12" style="isolation:isolate" />
					<g class="window-1">
						<path d="M183.88 404.66a10.86 10.86 0 1 1-.05 0h.05z" class="window-shadow-1" opacity=".24" />
						<path d="M184 404.78a10.68 10.68 0 1 1-10.71 10.65A10.68 10.68 0 0 1 184 404.78z" fill="#a3b8c1" class="wind-frame-1" />
						<circle class="window-base-1" cx="183.97" cy="415.47" r="7.43" transform="rotate(-89.83 183.97 415.47)" fill="#052e4c" />
						<g class="rivets-1">
							<circle cx="178.67" cy="423.16" r=".91" transform="rotate(-54.95 178.67 423.16)" fill="#748591" />
							<circle cx="189.19" cy="408.16" r=".91" transform="rotate(-54.95 189.19 408.16)" fill="#748591" />
							<circle cx="183.06" cy="424.86" r=".91" transform="rotate(-84.95 183.06 424.86)" fill="#748591" />
							<circle cx="184.74" cy="406.53" r=".91" transform="rotate(-84.95 184.74 406.53)" fill="#748591" />
							<circle cx="187.78" cy="423.96" r=".91" transform="rotate(-24.95 187.79 423.95)" fill="#748591" />
							<circle cx="180.06" cy="407.35" r=".91" transform="rotate(-24.95 180.06 407.36)" fill="#748591" />
							<circle cx="191.43" cy="420.92" r=".91" transform="rotate(-54.95 191.42 420.93)" fill="#748591" />
							<circle cx="176.43" cy="410.4" r=".91" transform="rotate(-54.95 176.43 410.4)" fill="#748591" />
							<circle cx="193.06" cy="416.46" r=".91" transform="rotate(-84.86 193.05 416.46)" fill="#748591" />
							<circle cx="174.82" cy="414.84" r=".91" transform="rotate(-84.95 174.82 414.84)" fill="#748591" />
							<circle cx="192.23" cy="411.79" r=".91" transform="rotate(-24.95 192.23 411.8)" fill="#748591" />
							<circle cx="175.62" cy="419.52" r=".91" transform="rotate(-24.95 175.62 419.51)" fill="#748591" />
							<circle cx="178.75" cy="423.01" r=".91" transform="rotate(-54.95 178.75 423.01)" fill="#a3b8c1" />
							<circle cx="189.27" cy="408.01" r=".91" transform="rotate(-54.95 189.27 408.01)" fill="#a3b8c1" />
							<circle cx="183.13" cy="424.72" r=".91" transform="rotate(-84.86 183.12 424.71)" fill="#a3b8c1" />
							<circle cx="184.82" cy="406.39" r=".91" transform="rotate(-84.95 184.82 406.39)" fill="#a3b8c1" />
							<circle cx="187.86" cy="423.81" r=".91" transform="rotate(-24.95 187.87 423.81)" fill="#a3b8c1" />
							<circle cx="180.14" cy="407.2" r=".91" transform="rotate(-24.95 180.14 407.21)" fill="#a3b8c1" />
							<circle cx="191.52" cy="420.76" r=".91" transform="rotate(-54.95 191.52 420.77)" fill="#a3b8c1" />
							<circle cx="176.52" cy="410.24" r=".91" transform="rotate(-54.95 176.52 410.24)" fill="#a3b8c1" />
							<circle cx="193.15" cy="416.31" r=".91" transform="rotate(-84.95 193.15 416.31)" fill="#a3b8c1" />
							<circle cx="174.9" cy="414.7" r=".91" transform="rotate(-84.95 174.89 414.7)" fill="#a3b8c1" />
							<circle cx="192.3" cy="411.64" r=".91" transform="rotate(-24.95 192.32 411.63)" fill="#a3b8c1" />
							<circle cx="175.7" cy="419.37" r=".91" transform="rotate(-24.95 175.7 419.36)" fill="#a3b8c1" />
							<circle cx="178.66" cy="422.63" r=".34" transform="rotate(-54.95 178.66 422.63)" fill="#fff" />
							<circle cx="189.21" cy="407.6" r=".34" transform="rotate(-54.95 189.2 407.6)" fill="#fff" />
							<circle cx="183.14" cy="424.25" r=".34" transform="rotate(-84.95 183.15 424.25)" fill="#fff" />
							<circle cx="184.76" cy="405.97" r=".34" transform="rotate(-84.95 184.75 405.97)" fill="#fff" />
							<circle cx="187.8" cy="423.43" r=".34" transform="rotate(-24.95 187.79 423.43)" fill="#fff" />
							<circle cx="180.05" cy="406.79" r=".34" transform="rotate(-24.95 180.04 406.78)" fill="#fff" />
							<circle cx="191.45" cy="420.38" r=".34" transform="rotate(-54.95 191.45 420.38)" fill="#fff" />
							<circle cx="176.42" cy="409.84" r=".34" transform="rotate(-54.95 176.42 409.84)" fill="#fff" />
							<circle cx="193.09" cy="415.92" r=".34" transform="rotate(-84.95 193.09 415.92)" fill="#fff" />
							<circle cx="174.8" cy="414.31" r=".34" transform="rotate(-84.95 174.8 414.31)" fill="#fff" />
							<circle cx="192.25" cy="411.23" r=".34" transform="rotate(-24.95 192.24 411.24)" fill="#fff" />
							<circle cx="175.61" cy="418.98" r=".34" transform="rotate(-24.95 175.61 418.98)" fill="#fff" />
						</g>
					</g>
					<path class="nose-shine-1" d="M183.84 386a14 14 0 0 1 1.29 4.72c.06 1.81 1.1 3.57 2.6 3.12 1.93-.58.29-3.08.29-3.08a47 47 0 0 0-4.18-4.76z" fill="#fff" opacity=".3" style="isolation:isolate" />
					<g class="window-shine-1" opacity=".8" fill="#07638c">
						<path d="M181.38 409.37a6.55 6.55 0 0 0-1.85 1.18 8.6 8.6 0 0 0 1.43 2.39 10.57 10.57 0 0 0 3.75 2.51 7.39 7.39 0 0 1 4.39 4.11l.26-.34a6.58 6.58 0 0 0 .94-2 9.53 9.53 0 0 0-4.68-3.77 8.55 8.55 0 0 1-3.05-2 7.11 7.11 0 0 1-1.19-2.08zM188.13 420.55a9.5 9.5 0 0 0-4.75-3.87 8.55 8.55 0 0 1-3.05-2 9.3 9.3 0 0 1-1.57-3.28l-.19.26a6.57 6.57 0 0 0-1.07 2.51 8 8 0 0 0 1.24 2 10.57 10.57 0 0 0 3.75 2.51 7.47 7.47 0 0 1 3.78 3 6.56 6.56 0 0 0 1.86-1.13z" />
					</g>
					<path d="M198.07 441.87a28 28 0 0 1 2.85 16.27l-.43 3.51.68-3.89a22.54 22.54 0 0 0-3.1-15.89z" fill="#e8edef" class="right-shine-1" />
					<path d="M168.91 441.87a28 28 0 0 0-2.85 16.27l.43 3.51-.68-3.89a22.54 22.54 0 0 1 3.1-15.89z" fill="#e8edef" class="left-shine-1" />
				</g>
				<g class="clouds-wrapper" filter="url(#goo)" fill="#eef2f3">
					<g class="clouds" filter="url(#blurMe)">
<!-- 						<ellipse class="cloud" cx="180.21" cy="467.48" rx="7" ry="7" fill="#eef2f3"/>
						<ellipse class="cloud" cx="147.43" cy="489.38" rx="7" ry="7" fill="#eef2f3"/>
						<ellipse class="cloud" cx="213.22" cy="483.22" rx="7" ry="7" fill="#eef2f3"/>
						<ellipse class="cloud" cx="171.53" cy="480.1" rx="14" ry="14" fill="#eef2f3"/>
						<ellipse class="cloud" cx="187.48" cy="477.82" rx="14" ry="14" fill="#eef2f3"/>
						<ellipse class="cloud" cx="219" cy="503.69" rx="16" ry="16" fill="#eef2f3"/>
						<ellipse class="cloud" cx="196.09" cy="502.78" rx="16" ry="16" fill="#eef2f3"/>
						<ellipse class="cloud" cx="142.64" cy="502.3" rx="16" ry="16" fill="#eef2f3"/>
						<ellipse class="cloud" cx="160.49" cy="499.38" rx="16" ry="16" fill="#eef2f3"/>
						<ellipse class="cloud" cx="204.83" cy="483.62" rx="12" ry="12" fill="#eef2f3"/>
						<ellipse class="cloud" cx="157.94" cy="487.69" rx="12" ry="12" fill="#eef2f3"/>
						<ellipse class="cloud" cx="177.15" cy="499.38" rx="16" ry="16" fill="#eef2f3"/>
						<ellipse class="cloud" cx="219.04" cy="489.9" rx="7" ry="7" fill="#eef2f3"/> -->
						<ellipse class="cloud" cx="180.21" cy="475.48" rx="7" ry="7"/>
						<ellipse class="cloud" cx="146.43" cy="494.38" rx="7" ry="7" fill="#eef2f3"/>
						<ellipse class="cloud" cx="213.22" cy="491.22" rx="7" ry="7" fill="#eef2f3"/>
						<ellipse class="cloud" cx="219.04" cy="497.9" rx="7" ry="7" fill="#eef2f3"/>
						<ellipse class="cloud" cx="171.53" cy="488.1" rx="14" ry="14" fill="#eef2f3"/>
						<ellipse class="cloud" cx="187.48" cy="485.82" rx="14" ry="14" fill="#eef2f3"/>
						<ellipse class="cloud" cx="137.03" cy="507.38" rx="16" ry="16" fill="#eef2f3"/>
						<ellipse class="cloud" cx="228.53" cy="507.82" rx="16" ry="16" fill="#eef2f3"/>
						<ellipse class="cloud" cx="204.83" cy="491.62" rx="12" ry="12" fill="#eef2f3"/>
						<ellipse class="cloud" cx="160" cy="493.84" rx="12" ry="12" fill="#eef2f3"/>
					</g>
				</g>
			</g>
			
			
			<g class="ring-group">
				<g class="ring-base">
					<g>
						<path d="M160.2,388a160.05,160.05,0,0,1-20.47-1.32A158,158,0,0,1,3.33,209.73C13.49,131.21,80.76,72,159.8,72a160.12,160.12,0,0,1,20.47,1.32,158,158,0,0,1,136.4,176.94C306.51,328.79,239.25,388,160.21,388Zm-.36-284.81c-63.44,0-117.44,47.52-125.59,110.55a126.8,126.8,0,0,0,109.48,142,128.48,128.48,0,0,0,16.43,1.06c63.45,0,117.44-47.52,125.59-110.55a126.8,126.8,0,0,0-109.48-142A128.56,128.56,0,0,0,159.84,103.18Z" transform="translate(0)" fill="#d81f44" />
						<path d="M159.8,73a157,157,0,0,1,.4,314,158.56,158.56,0,0,1-20.34-1.32A157,157,0,0,1,159.8,73m.36,284.81a127.9,127.9,0,1,0-16.56-1.07,127.82,127.82,0,0,0,16.56,1.07M159.8,71a159,159,0,0,0-20.2,316.64A161.11,161.11,0,0,0,160.2,389,159,159,0,0,0,180.4,72.34,161.1,161.1,0,0,0,159.8,71Zm.36,284.81a127.52,127.52,0,0,1-16.3-1.05,125.82,125.82,0,0,1,16-250.59,127.5,127.5,0,0,1,16.3,1.05,125.82,125.82,0,0,1-16,250.59Z" transform="translate(0)" fill="#75001c" />
					</g>
					<circle id="ring-grad" cx="160" cy="230" r="127.8" transform="translate(-88.63 359.17) rotate(-82.63)" fill="url(#radial-gradient-2)" />
				</g>
				<g class="ring-stars">
					<polygon points="305.14 211.88 305.94 220.6 314.26 223.31 306.22 226.76 306.22 235.51 300.45 228.93 292.13 231.64 296.6 224.12 291.45 217.03 299.99 218.97 305.14 211.88" fill="#fff" />
					<polygon points="287.58 171.49 289.99 163.07 293.72 170.99 302.48 170.68 296.1 176.68 299.09 184.91 291.42 180.7 284.52 186.09 286.16 177.49 278.89 172.59 287.58 171.49" fill="#fff" />
					<polygon points="259.07 122.38 265.28 128.55 273.4 125.27 269.46 133.09 275.09 139.79 266.44 138.46 261.8 145.89 260.39 137.24 251.89 135.13 259.68 131.12 259.07 122.38" fill="#fff" />
					<polygon points="216.09 94.73 224.04 98.39 230.55 92.53 229.52 101.23 237.1 105.61 228.51 107.31 226.69 115.88 222.42 108.24 213.71 109.16 219.65 102.72 216.09 94.73" fill="#fff" />
					<polygon points="174.97 84.16 179.08 76.43 181.09 84.95 189.71 86.47 182.22 91.02 183.44 99.69 176.81 93.97 168.94 97.81 172.33 89.74 166.25 83.44 174.97 84.16" fill="#fff" />
					<polygon points="123.99 87.58 125.21 78.91 130.01 86.23 138.63 84.71 133.15 91.53 137.27 99.26 129.07 96.16 122.99 102.46 123.41 93.72 115.54 89.88 123.99 87.58" fill="#fff" />
					<polygon points="75.43 99.65 82.45 104.89 90.03 100.51 87.22 108.8 93.72 114.66 84.97 114.55 81.41 122.55 78.81 114.19 70.1 113.27 77.26 108.22 75.43 99.65" fill="#fff" />
					<polygon points="44.14 138.7 49.77 131.99 49.96 140.75 58.08 144.02 49.81 146.91 49.2 155.64 43.9 148.67 35.41 150.79 40.4 143.6 35.76 136.17 44.14 138.7" fill="#fff" />
					<polygon points="19.7 183.57 22.7 175.34 25.87 183.5 34.62 183.8 27.84 189.34 30.26 197.76 22.89 193.02 15.63 197.92 17.86 189.45 10.96 184.06 19.7 183.57" fill="#fff" />
					<polygon points="13.17 248.97 12.37 240.25 4.04 237.54 12.09 234.09 12.09 225.33 17.86 231.91 26.19 229.21 21.71 236.73 26.86 243.81 18.32 241.88 13.17 248.97" fill="#fff" />
					<polygon points="30.73 289.36 28.32 297.78 24.59 289.86 15.83 290.16 22.21 284.17 19.22 275.94 26.89 280.15 33.79 274.76 32.16 283.36 39.42 288.25 30.73 289.36" fill="#fff" />
					<polygon points="59.25 338.46 53.03 332.3 44.91 335.58 48.85 327.76 43.22 321.06 51.87 322.39 56.51 314.96 57.92 323.61 66.42 325.72 58.63 329.73 59.25 338.46" fill="#fff" />
					<polygon points="102.22 366.12 94.27 362.45 87.77 368.31 88.8 359.62 81.21 355.24 89.8 353.53 91.62 344.97 95.89 352.61 104.6 351.69 98.66 358.12 102.22 366.12" fill="#fff" />
					<polygon points="143.34 376.69 139.23 384.42 137.23 375.89 128.6 374.37 136.09 369.83 134.87 361.16 141.5 366.88 149.37 363.04 145.99 371.11 152.07 377.41 143.34 376.69" fill="#fff" />
					<polygon points="194.32 373.27 193.1 381.94 188.3 374.62 179.68 376.14 185.16 369.31 181.05 361.58 189.24 364.69 195.31 358.38 194.9 367.13 202.77 370.97 194.32 373.27" fill="#fff" />
					<polygon points="242.88 361.19 235.86 355.95 228.28 360.33 231.09 352.05 224.59 346.19 233.34 346.3 236.9 338.3 239.5 346.66 248.21 347.58 241.06 352.63 242.88 361.19" fill="#fff" />
					<polygon points="274.17 322.15 268.54 328.86 268.35 320.11 260.23 316.83 268.5 313.94 269.11 305.2 274.41 312.18 282.9 310.06 277.91 317.25 282.55 324.67 274.17 322.15" fill="#fff" />
					<polygon points="295.61 285.51 292.44 277.35 283.69 277.04 290.47 271.5 288.06 263.09 295.42 267.82 302.68 262.93 300.45 271.39 307.35 276.79 298.61 277.28 295.61 285.51" fill="#fff" />
				</g>
			</g>
			
			
			
		</svg>

		<div class="upload">
			
			<div class="panel-inner">
				
				<button class="btn upload-btn">
					<span class="btn-text upload-btn-text">Upload your profile image</span>
				</button>
				<p class="upload-intro">Choose one of your images for your Eddie Rocket’s astronaut profile.</p>
				<a href="#" class="link use-default">Or use the default image
					<svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 34">
						<title>Arrow</title>
						<path d="M31,16.88A2.54,2.54,0,0,0,30.25,15L17,1.77A2.64,2.64,0,0,0,15.12,1a2.59,2.59,0,0,0-1.83.77L11.76,3.3a2.56,2.56,0,0,0,0,3.67l6,6H3.38A2.44,2.44,0,0,0,1,15.57v2.61a2.44,2.44,0,0,0,2.38,2.61H17.73l-6,6a2.61,2.61,0,0,0,0,3.71L13.29,32a2.66,2.66,0,0,0,1.83.75A2.71,2.71,0,0,0,17,32L30.25,18.73A2.62,2.62,0,0,0,31,16.88Z" fill="#fff"/>
					</svg>
				</a>
			</div>
			<div class="upload-base"></div>
		</div>
			
	</div>
		
	<div class="suit">
		<img class="suit-left" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/suit-left-arm-optim.png" alt="" />
		<img class="suit-right" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/suit-right-arm-optim.png" alt="" />
		<img class="suit-face" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/face-optim.png" alt="" />
		<img class="suit-body" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/suit-body-optim.png" alt="" />
	</div>
	
</div>

CSS

              
                /* ==========================================================================
   Variables
   ========================================================================== */

$dark: #061a26;
$red: #d81f44;

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
	height: 100%;
}

body {
	position: relative;
	background-color: #08222e;
	font-family: "din-condensed-web";
	// letter-spacing: 1px;
}

.use-code {
	color: white;
	text-align: center;
	margin-top: -40px;
}

#slider{
  width:300px;
  position:relative;
  margin: 30px auto;
}

.logo {
	position: absolute;
	top: 5px;
	left: calc(50% - 32px);
	z-index: 100;
	width: 80px;
	height: auto;
	visibility: hidden;
}

.card-wrapper {
	width: 600px;
	// margin: 0 auto;
	height: 558px;
	position: absolute;
	top: calc(50% - 350px);
	left: 50%;
	transform: /*scale(1.4)*/ translateX(-50%);
}


.card {
	position: absolute;
	left: calc(50% - 160px);
	top: calc(50% - 264px);
	width: 320px;
	height: 528px;
	background-color: #08222e;
	background-image: radial-gradient( circle 260px at 160px 90px , #00a9ea 0%, #08222e 90%);
	overflow: hidden;
	border-radius: 15px;
	box-shadow: 2px 3.464px 55.3px 14.7px rgba(0, 0, 0, 0.26);
}

/* ==========================================================================
   Loader
   ========================================================================== */

.loader {
	position: absolute;
	z-index: 2;
	width: 136px;
	left: calc(50% - 68px);
	top: calc(50% - 100px);
	visibility: hidden;
}

.preload-text-wrap {
	position: absolute;
	top: 330px;
	width: 100%;
	visibility: hidden;
}

.preload-text {
	text-transform: uppercase;
	color: white;
	font-size: 15px;
	margin: 0;
	text-align: center;
}

/* ==========================================================================
   iOS Form Styling
   ========================================================================== */

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
	-webkit-appearance: none;
	border-radius: 0;
	font-family: "din-condensed-web";
}

/* ==========================================================================
   Code View
   ========================================================================== */

.code-wrapper {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
}

.code-inner {
	position: relative;
	color: white;
	text-align: center;
}

.code-content {
	position: absolute;
	top: 160px;
	width: 100%;
}

.code-title {
	font-size: 24px;
	text-transform: uppercase;
	margin: 0 0 5px 0;
	visibility: hidden;
}

.code-intro {
	font-size: 18px;
	margin: 0;
	visibility: hidden;
}

.code-form {
	position: absolute;;
	top: 231px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	height: 105px;
	width: 270px;
	margin: 0 auto;
	// opacity: 0.5;
}

.code-input {
	position: absolute;
    top: 4px;
    left: 30px;
    width: 125px;
    height: 47px;
    z-index: 1;
	background-color: transparent;
	border: none;
	color: white;
	text-transform: uppercase;
	line-height: 47px;
	font-size: 24px;
	outline: none;
	opacity: 0;
}

.code-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	width: 107px;
	height: 47px;
	border: none;
	background-color: $red;
	border-radius: 24px;
	color: white;
	font-family: "din-condensed-web";
	text-transform: uppercase;
	font-size: 18px;
	line-height: 47px;
	outline: none;
	opacity: 0;
}

.code-btn-txt {
	opacity: 0;
}

.code-btn-icons {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 28px;
	height: 28px;
	visibility: hidden;
}

.button-icon {
	width: 28px;
}

.tick/*, .cross*/ {
	// visibility: hidden;
	opacity: 0;
}

.code-base {
	position: absolute;
	top: 0;
	left: 0;
	width: 270px;
	height: 55px;
	border-radius: 28px;
	background-color: $dark;
	z-index: 0;
}

.error {
	position: absolute;
	top: 55px;
	left: 50%;
	width: 90%;
	transform: translateX(-50%);
	text-transform: uppercase;
	color: $red;
	visibility: hidden;
}


/* ==========================================================================
   Suit
   ========================================================================== */

.suit {
	position: absolute;
	z-index: 1;
	width: 401px;
	height: 384px;
	top: 74px;
	left: calc(50% + 5px);
	transform: translateX(-50%);
	visibility: hidden;
}

.suit-body {
	position: absolute;
	top: 0;
	left: 83px;
	width: 227px;
	height: 384px;
	z-index: 2;
}

.suit-left {
	position: absolute;
	left: 0;
	top: 130px;
	width: 157px;
	height: 109px;
	z-index: 1;
}

.suit-right {
	position: absolute;
	top: 125px;
	right: 0;
	width: 157px;
	height: 109px;
	z-index: 1;
}

.suit-face {
	position: absolute;
	top: 33px;
	left: 134px;
	width: 125px;
	height: 142px;
	z-index: 1;
}

.ring-group {
	visibility: hidden;
}

/* ==========================================================================
   Button
   ========================================================================== */

.btn {
	width: 270px;
	height: 55px;
	border: none;
	border-radius: 28px;
	background-color: white;
	text-align: center;
	font-family: "din-condensed-web";
	color: $red;
	font-size: 18px;
	text-transform: uppercase;
}

.btn-text {
	line-height: 54px;
}

/* ==========================================================================
   Upload View
   ========================================================================== */

.upload {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 320px;
	text-align: center;
	height: 185px;
	font-size: 18px;
}

.upload-intro {
	position: relative;
	z-index: 1;
	margin-top: 24px;
	padding: 0 25px;
	color: #789aa9;
	visibility: hidden;
}

.upload-btn {
	position: relative;
	z-index: 1;
	margin: -10px auto 0; // shift up to remove background overlap
	visibility: hidden;
}

.upload-btn-text {
	visibility: hidden;
}

.upload-base {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #09222d 0%, $dark 100%);
	visibility: hidden;
}

.panel-inner {
	width: 100%;
	height: 100%;
}

.use-default {
	position: relative;
	z-index: 1;
	visibility: hidden; 
}


/* ==========================================================================
   Links
   ========================================================================== */

.link {
	position: absolute;
	bottom: 15px;
	display: block;
	width: 100%;
	height: 40px;
	padding-top: 9px;
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 18px;
}

.arrow {
	transform: translate(5px, 2px);
	width: 16px;
	height: 17px;
}

/* ==========================================================================
   Main background
   ========================================================================== */

.background,
.stars-1,
.planet,
.moon,
.comet,
.ufo,
.saturn,
.rocket-launchpad-1,
.clouds {
	visibility: hidden;
}

JS

              
                /*  ==========================================================================
    START ANIMATION
    ========================================================================== */  

	console.clear();

	var tl = new TimelineMax();

	TweenMax.set(['.outer-circle', '.inner-circle'], { transformOrigin: 'center center' });
	TweenMax.fromTo('.preload-text', 0.6, { alpha: 0 }, { alpha: 1, ease: Linear.none, yoyo: true, repeat: -1, delay: 0.9 });	

	function loaderIn() {
		
        var tl = new TimelineMax({ delay: 0.4 });

		tl.set('.loader', { autoAlpha: 1, immediateRender:false })
			.set('.preload-text-wrap', { autoAlpha: 0, immediateRender:false })
			.from('.outer-circle', 0.8, { scale: 0, ease: Elastic.easeOut.config(0.25, 0.3) })
			.from('.inner-circle', 0.8, { scale: 0, ease: Elastic.easeOut.config(0.25, 0.3) }, "-=0.7")
			.from('.stars', 0.8, { alpha: 0, ease: Linear.none }, "-=0.7")
			.from('.frame', 0.5, { y:120, ease: Back.easeOut }, "-=0.7")
			.from('.platform', 0.4, { y:120, ease: Back.easeOut }, "-=0.6")
			.from('.rocket', 0.4, { y:120, ease: Back.easeOut }, "-=0.5")
			.from('.ladder', 0.6, { x:-26, ease: Cubic.easeInOut }, "-=0.2")
			.to('.preload-text-wrap', 0.5, { autoAlpha: 1 }, "-=0.5");
		
		return tl;
	}

	function loaderOut() {
        var tl = new TimelineMax();

		tl.to('.preload-text-wrap', 0.6, { alpha: 0, ease: Linear.none })
			.to('.preload-text-wrap', 0.6, { y: 20, ease: Circ.easeIn }, "-=0.6")
			.to('.platform', 0.5, { y: 120, ease: Circ.easeIn }, "-=0.5")
			.to('.frame', 0.5, { y: 120, ease: Circ.easeIn }, "-=0.4")
			.to('.rocket', 0.5, { y: 120, ease: Circ.easeIn }, "-=0.4")
			.to('.stars', 0.8, { alpha: 0, ease: Linear.none }, "-=0.7")
			.to('.inner-circle', 0.8, { scale: 0, ease: Elastic.easeIn.config(0.25, 0.3), onComplete: function() {  } }, "-=0.5")
			.to('.outer-circle', 0.8, { scale: 0/*attr: { r: 24 }*/, ease: Elastic.easeIn.config(0.25, 0.3) }, "-=0.7")
			.set('.loader', { autoAlpha: 0, immediateRender:false })
		
		return tl;
	}

	function codeIn() {
		
		TweenMax.set('.clouds', { y: 5, autoAlpha: 0 });
		TweenMax.staggerTo('.cloud', 0.4, { 
			cycle: {
				delay: function(i) { return i/10; }
			},
			scale: 1.2, 
			yoyo: true, 
			repeat: -1, 
			transformOrigin: 'center' 
		} );
		TweenMax.to('.thrust-1', 0.02, { scale: 1.1, yoyo: true, repeat: -1 } )
	
		var tl = new TimelineMax();
		
		tl.set('.code-wrapper', { autoAlpha: 1, immediateRender: false })
			.set('.background', { autoAlpha: 1, immediateRender: false })
			.set('.rocket-launchpad-1', { autoAlpha: 1, x: -4, y: 157, immediateRender:false } )
			.set('.thrust-1', { autoAlpha: 0 })
			.set('.code-inner', { y:0 }) // reset positions from codeOut
			.set('.launchpad-1', { y: 0 }) // reset positions from codeOut
			.set('.rocket-1', { y: 0, x: 0, rotation: 0 })
			.set('.clouds', { y: 5 })
			.set('.code-btn', { backgroundColor: '#d81f44' })
			.set('.error', { autoAlpha: 0 })
			.set('.code-btn-icons', { autoAlpha: 0 })
			.from('.code-base', 0.5, { width: '55px', x: 108, ease: Elastic.easeOut.config(0.5, 0.3), transformOrigin: 'center' } )
			.from('.logo', 0.5, { autoAlpha: 0, y: 80, ease: Elastic.easeOut.config(0.4, 0.3) }, "-=0.6")
			.set('.code-btn', { autoAlpha: 1, immediateRender:false }, "-=0.3")
			.from('.code-btn', 0.5, { width: '50px', ease: Elastic.easeOut.config(0.5, 0.3) }, "-=0.3" )
			.to('.code-btn-txt', 0.5, { autoAlpha: 1, immediateRender:false }, "-=0.5")
			.to('.code-input', 0.4, { opacity: 1, ease: Linear.none }, "-=0.45" )
			.from('.code-title', 0.5, { autoAlpha: 0, scale: 0, y: 40, ease: Elastic.easeOut.config(0.4, 0.3) }, "-=0.6")
			.from('.code-intro', 0.5, { autoAlpha: 0, scale: 0, y: 40, ease: Elastic.easeOut.config(0.4, 0.3) }, "-=0.5")
			.fromTo('.stars-1', 1, { autoAlpha: 0 }, { autoAlpha: 0.4, ease: Linear.none })
			.set('.moon', { autoAlpha: 0, y: -50, immediateRender: false })
			.from('.moon', 1, { autoAlpha: 0, ease: Linear.none })
			.fromTo('.rocket-launchpad-1', 1.5, { y: 157 }, { y: 38, ease: Circ.easeOut }, "-=1" )
			.set('.thrust-1', { autoAlpha: 1, x: -0.5, immediateRender:false })
			.to('.clouds', 0.8, { autoAlpha: 1, ease: Linear.none } )
			
		return tl;
	}

	function codeOut() {
		
		var tl = new TimelineMax();
		
		tl.to('.rocket-1', 1.5, { y: -550, x: -50, rotation: -10 , ease:Power4.easeIn }, "-=0.0")
			.to('.code-form', 1.0, { y: 300, opacity: 0, ease: Power4.easeIn }, "-=1.0")
			.to('.code-content', 0.5, { autoAlpha: 0, ease: Linear.none }, "-=1.0")
			.to('.launchpad-1', 1.3, { y: 140, ease:Power4.easeIn }, "-=1.5")
			.to('.clouds', 1.3, { y: 140, ease:Power4.easeIn, onCompelete: function() { tl.add(uploadIn(), "-=1.5"); } }, "-=1.5")
			.set('.code-wrapper', { autoAlpha: 0 })
		
		return tl;
		
	}

	function uploadIn() {
		
		var upTL = new TimelineMax({ delay: 0.5 });

		upTL.set('.ring-group', { scale: 0, transformOrigin: '50% 50%' })
			.set('.suit', { scale: 0, y: 0, autoAlpha: 1, immediateRender:false })
			.set('.suit-left', { rotation: 35, transformOrigin: '125px 80px' })
			.set('.suit-right', { rotation: -35, transformOrigin: '32px 80px' })
			.to('.ring-group', 2, { autoAlpha: 1, scale: 1, rotation: 720, ease: Power4.easeInOut })
			.to('.suit', 1.0, { scale: 1, y: 0, autoAlpha: 1, ease: Elastic.easeOut.config(0.6, 0.3)}, "-=1.0" )
			.to('.suit-left', 0.5, { rotation: -10, ease: Sine.easeInOut, yoyo: true }, "-=1.0")
			.to('.suit-right', 0.5, { rotation: 10, ease: Sine.easeInOut, yoyo: true }, "-=1.0")
			.set('.upload-btn', { autoAlpha: 1, immediateRender:false }, "-=0.8")
			.from('.upload-btn', 0.5, { width: '55px', ease: Elastic.easeOut.config(0.5, 0.3), transformOrigin: 'center' }, "-=0.8")
			.from('.upload-btn-text', 0.5, { autoAlpha: 0 }, "-=0.7")
			.from('.upload-base', 0.3, { autoAlpha: 0, ease: Linear.none }, "-=0.75")
		  	.to('.suit-left', 0.2, { rotation: 0, ease: Sine.easeInOut, yoyo: true }) 
			.to('.suit-left', 0.2, { rotation: -20, ease: Sine.easeInOut, yoyo: true, repeat: 2 })
			.to('.suit-left', 0.3, { rotation: -10, ease: Sine.easeInOut })
			.from('.upload-intro', 0.7, { autoAlpha: 0, ease: Linear.none }, "-=1.4")
			.from('.use-default', 0.7, { autoAlpha: 0, ease: Linear.none }, "-=1.2")
			
		
		return upTL;
		
	}

	/* Add entry frame timelines to main Timeline
    ========================================================================== */  

    tl.add(loaderIn())
      .add(loaderOut(), "+=2")
	  .add(codeIn(), "-=0.2")

	/* code check button animations
    ========================================================================== */  

	$( ".code-btn" ).click(function(e) {
		TweenMax.set( ['.tick', '.cross'], { alpha: 0 } );
		e.preventDefault();
		var tl = new TimelineMax();

		if($('.code-input').val().toLowerCase()=='xxxxxxx'){
			tl.add(validEntry());
		}

		else {
			tl.add(invalidEntry());
		}

	});

	/* validation animations
    ========================================================================== */  

	function validEntry() {
		var successTL = new TimelineMax();
		successTL.set('.code-btn-txt', { autoAlpha: 0, immediateRender:false })
			.set('.code-btn-icons', { autoAlpha: 1, immediateRender:false })
			.set('.tick', { drawSVG:"100% 100%" })	
			.set('.tick', { alpha: 1 })
			.set('.error', { autoAlpha: 0 })
			.to('.code-btn', 0.7, { width: '47px', backgroundColor: '#00bf4c', ease: Elastic.easeInOut.config(0.4, 0.3), onComplete: codeOut })
			.fromTo('.code-btn-icons', 1, { rotation: 90 }, { rotation: 0, ease: Elastic.easeOut.config(0.5, 0.3) }, "-=0.6")
			.to(".tick", 0.5, { drawSVG:"0% 100%", ease: Power4.easeInOut}, "-=1.1" );
		return successTL;
	}

	function invalidEntry() {
		
		var errorTxt = "This code has already been used";
		$('.error').text(errorTxt);
		
		var errorTL = new TimelineMax();
		errorTL.fromTo('.error', 0.5, { autoAlpha: 0}, { autoAlpha: 1, ease: Linear.none })
		
		return errorTL;
		
	}

	

	



/*  ==========================================================================
    SLIDER
    ========================================================================== */  

	var $slider = $('#slider'),
		sliderValue = { value: 0 };

	$slider.slider({
	  range: false,
	  min: 0,
	  max: 100,
	  step: .1,
	  start: function() {
		tl.pause();
	  },
	  slide: function(event, ui) {
		tl.progress(ui.value / 100);
	  },
	  stop: function() {
		tl.play();
	  }
	});

	tl.eventCallback("onUpdate", function() {
	  sliderValue.value = tl.progress() * 100;
	  $slider.slider(sliderValue);
	});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions