Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                
<div id="moon">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1383.37 1362.86"><defs><style>.cls-1{fill:#b8c6df;}.cls-2{fill:#f7f5fa;}.cls-3{fill:#909cc2;}</style></defs><title>moon</title><path class="cls-1" d="M35.77,549c-84.71,354.68,134.16,710.9,488.83,795.62a657.64,657.64,0,0,0,443.74-49.19q15.18-7.41,29.92-15.62,21.27-11.77,41.63-25.16a649.75,649.75,0,0,0,53.87-39.25q22.41-18.11,43.25-38.25,2.67-2.55,5.26-5.11A657.43,657.43,0,0,0,1320.2,855.83c84.72-354.71-134.12-710.89-488.82-795.61C632.77,12.78,433.73,60.51,282.11,174A657.55,657.55,0,0,0,35.77,549Z" transform="translate(0)"/><path class="cls-2" d="M104.15,490.22C19.43,844.91,238.3,1201.11,593,1285.82c198.62,47.44,397.7-.29,549.31-113.75A657.29,657.29,0,0,0,1320.2,855.83c84.72-354.71-134.12-710.89-488.82-795.61C632.77,12.78,433.73,60.51,282.11,174A657,657,0,0,0,104.15,490.22Z" transform="translate(0)"/><path class="cls-2" d="M904,44.23s9.65,42.21,46.31,56.56c0,0-58.32,43.09-138,24.07S728.66,44,728.66,44s35-13,45.69-33Z" transform="translate(0)"/><path class="cls-1" d="M773.82,13.13a11.42,11.42,0,0,0,1.31,8c6,11.74,28.94,24.68,58,31.63s55.4,5.77,66-2a11.34,11.34,0,0,0,4.8-6.56c3.18-13.32-23.39-31.07-59.33-39.64S777-.18,773.82,13.13Z" transform="translate(0)"/><path class="cls-3" d="M775.13,21.14c6,11.74,28.94,24.68,58,31.63s55.4,5.77,66-2c-6-11.74-28.91-24.68-58-31.63S785.79,13.39,775.13,21.14Z" transform="translate(0)"/><path class="cls-2" d="M116.67,277.42a49.66,49.66,0,0,1,4.69,11.37c7.43,25.84.28,60.91.28,60.91s22.78,12.21,56.27,9.05h0c25.27-2.42,56.54-13.58,88.72-45.32,1.14-1.1,2.22-2.18,3.28-3.3,71.38-73.31,64.31-163.45,64.31-163.45-40.58,30.17-93.14,12-93.14,12l-13.18,12.57L133.5,261.39l-16.56,15.82Z" transform="translate(0)"/><path class="cls-1" d="M118.69,279.46a14.69,14.69,0,0,0,9.63,4c16.86,1.43,46.57-14.76,73.94-41.77S246.2,185.27,245,168.38a14.63,14.63,0,0,0-3.87-9.69c-12.35-12.51-49.78,4.39-83.56,37.71S106.32,266.94,118.69,279.46Z" transform="translate(0)"/><path class="cls-3" d="M128.32,283.49c16.86,1.43,46.57-14.76,73.94-41.77S246.2,185.27,245,168.38c-16.86-1.43-46.55,14.76-73.91,41.73S127.11,266.6,128.32,283.49Z" transform="translate(0)"/><path class="cls-2" d="M976.71,1262.46c-2.43,17.71-1.81,28.94-1.81,28.94a83.46,83.46,0,0,1,23.36-11.56c29.86-9.49,59.44-1.64,67.73,1,1.5.48,2.29.78,2.29.78l13.35-12.19s0,0,.06,0l96.66-87.92,16.87-15.34.3-.29c-6.8-12.47-7.74-29.91-6.92-44.53a186.76,186.76,0,0,1,3.68-27.82s-69.26-39.29-145.87,32.8C996.39,1173.3,981.22,1229.27,976.71,1262.46Z" transform="translate(0)"/><path class="cls-1" d="M1064.66,1271.8a14.4,14.4,0,0,0,3.62,9.79,10,10,0,0,0,2.31,1.85,15.29,15.29,0,0,0,6.23,2.27l.06,0c16.66,2.51,47.35-13.07,75.83-39.88,32.69-30.71,50.84-65.18,42.51-79.73a9.49,9.49,0,0,0-1.66-2.37,14.76,14.76,0,0,0-9.54-4.24c-11.25-1.23-28.46,5.27-47,17.66a216.57,216.57,0,0,0-27.9,22.34c-5.56,5.24-10.7,10.57-15.35,15.91C1075,1236.89,1064,1258.28,1064.66,1271.8Z" transform="translate(0)"/><path class="cls-3" d="M1184,1159.51c-16.82-1.83-46.9,13.65-74.92,40s-45.26,55.39-44.46,72.3c16.83,1.83,46.89-13.64,74.89-40S1184.83,1176.42,1184,1159.51Z" transform="translate(0)"/><path class="cls-2" d="M1362.59,594.75s-63.31,65.83-46.27,147.09c0,0-143.44-53.1-201.92-215.61s45.94-241.14,45.94-241.14,63.35,46.71,111.1,42.44Z" transform="translate(0)"/><path class="cls-1" d="M1267,329.12c-5.17,1.85-9.42,5.78-12.64,11.56-13.75,24.16-10.11,79.57,11.28,139s53.84,104.38,79.83,114.22c6.17,2.41,12,2.73,17.11.87,27.16-9.77,27.77-77.17,1.39-150.47S1294.17,319.34,1267,329.12Z" transform="translate(0)"/><path class="cls-3" d="M1254.37,340.68c-13.75,24.16-10.11,79.57,11.28,139s53.84,104.38,79.83,114.22c13.77-24.15,10.11-79.57-11.25-138.91S1280.37,350.53,1254.37,340.68Z" transform="translate(0)"/><path class="cls-1" d="M12.21,928S58,861.83,31.68,793.56c0,0,132.29,25.93,206.11,159s-5.9,216.24-5.9,216.24-61.7-31.68-102.64-21.23Z" transform="translate(0)"/><path class="cls-1" d="M132.89,1145.6c4.22-2.34,7.36-6.36,9.35-11.85,8.56-23-2.46-70.64-29.45-119.3s-61.56-83.18-85.57-88.07c-5.71-1.22-10.79-.69-15,1.66C-10,940.38-1,999.09,32.25,1059.12S110.64,1158,132.89,1145.6Z" transform="translate(0)"/><path class="cls-3" d="M142.24,1133.75c8.56-23-2.46-70.64-29.45-119.3s-61.56-83.18-85.57-88.07c-8.57,23,2.46,70.64,29.41,119.24S118.25,1128.87,142.24,1133.75Z" transform="translate(0)"/><path class="cls-1" d="M751.1,532.86c-9.88,41.39,21.43,84.34,69.92,95.92s95.83-12.58,105.71-54-21.42-84.34-69.92-95.92S761,491.47,751.1,532.86Z" transform="translate(0)"/><path class="cls-3" d="M765.49,540.33c-8.18,34.19,17.68,69.66,57.73,79.23s79.16-10.39,87.32-44.58-17.68-69.66-57.74-79.23S773.64,506.14,765.49,540.33Z" transform="translate(0)"/><path class="cls-1" d="M346.6,469.19c-11.9-16.42-37.18-18.42-56.41-4.46s-25.18,38.59-13.27,55,37.18,18.42,56.42,4.46S358.51,485.61,346.6,469.19Z" transform="translate(0)"/><path class="cls-1" d="M334,554.36c-13.43-3-27.18,7.25-30.71,23s4.42,30.9,17.84,33.94,27.16-7.26,30.71-23S347.42,557.39,334,554.36Z" transform="translate(0)"/><path class="cls-1" d="M239.24,573.57c-9.76-2.21-19.77,5.27-22.35,16.71s3.24,22.49,13,24.7,19.76-5.28,22.35-16.71S249,575.78,239.24,573.57Z" transform="translate(0)"/><path class="cls-1" d="M626.3,185.31c-20.86-4.92-40.41,3.63-43.67,19.06s11,31.94,31.89,36.86,40.41-3.62,43.66-19.06S647.17,190.22,626.3,185.31Z" transform="translate(0)"/><path class="cls-1" d="M702.73,932.71c-18.3-25.22-57.1-28.3-86.65-6.85s-38.68,59.28-20.39,84.51,57.1,28.3,86.66,6.85S721,958,702.73,932.71Z" transform="translate(0)"/><path class="cls-1" d="M578.21,882.29c-7.68-10.59-24-11.87-36.35-2.88s-16.23,24.87-8.56,35.46,24,11.87,36.37,2.87S585.89,892.87,578.21,882.29Z" transform="translate(0)"/><path class="cls-1" d="M554.36,956.57c-10.43-14.39-32.57-16.14-49.43-3.91s-22.07,33.82-11.63,48.21,32.57,16.14,49.45,3.91S564.81,971,554.36,956.57Z" transform="translate(0)"/><path class="cls-3" d="M691.72,937.14c-15.11-20.83-47.15-23.37-71.57-5.66s-31.95,49-16.83,69.81,47.15,23.36,71.58,5.65S706.85,958,691.72,937.14Z" transform="translate(0)"/><path class="cls-1" d="M121.36,288.79c7.43,25.84.28,60.91.28,60.91s22.78,12.21,56.27,9.05h0c22.55-2.87,56.46-13.72,92-48.62C270,310.14,187.68,332,121.36,288.79Z" transform="translate(0)"/><path class="cls-1" d="M1076.82,1285.71c-2.64-.86-4.66-1.62-6.23-2.27A15.29,15.29,0,0,0,1076.82,1285.71Z" transform="translate(0)"/><path class="cls-1" d="M964.51,1266.91l3.83,28.55q15.18-7.41,29.92-15.62c29.86-9.49,59.44-1.64,67.73,1-3.48-3.22.93-6.5-17.87-20.62a77.18,77.18,0,0,0-8.23-5.51c-19.35-11.06-32.16-3.91-63.18,7.78C973,1263.89,968.9,1265.36,964.51,1266.91Z" transform="translate(0)"/><path class="cls-1" d="M1164.46,883.61c-13.21-3.89-27.59,5.49-32.13,20.94s2.43,31.12,15.62,35,27.58-5.49,32.14-20.94S1177.63,887.49,1164.46,883.61Z" transform="translate(0)"/></svg>
</div>






<div id="ollie_in_space">
  <svg version="1.1" id="space_cadet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
             y="0px" viewBox="0 0 2313.8 987.2" style="enable-background:new 0 0 2313.8 987.2;" xml:space="preserve">
<g id="rocket_ollie">
        <g id="exhaust">
        <g style="opacity:0.8;">
        <g>
        <path style="fill:#FFFFFF;" d="M100.9,16.8c4.9,9,1.5,20.3-7.5,25.1c-9,4.9-20.3,1.5-25.1-7.5c-4.9-9-1.5-20.3,7.5-25.2
					C84.7,4.4,96,7.7,100.9,16.8z" />
        <path style="fill:#FFFFFF;" d="M67.7,18.8c4.7,8.7,1.4,19.6-7.2,24.3c-8.7,4.7-19.6,1.5-24.3-7.2c-4.7-8.7-1.4-19.6,7.2-24.3
					C52.1,6.9,63,10.1,67.7,18.8z" />
        <path style="fill:#FFFFFF;" d="M86.7,34.6c4.3,7.9,1.3,17.7-6.6,22c-7.9,4.3-17.7,1.3-22-6.6c-4.3-7.9-1.3-17.7,6.6-22
					C72.6,23.7,82.5,26.7,86.7,34.6z" />
        <path style="fill:#FFFFFF;" d="M47.6,56.9c4.3,7.9,1.3,17.7-6.6,22c-7.9,4.3-17.7,1.3-22-6.6c-4.3-7.9-1.3-17.7,6.6-22
					C33.5,46.1,43.3,49,47.6,56.9z" />
        <path style="fill:#FFFFFF;" d="M88.1,77c4.6,8.5,1.4,19.1-7.1,23.6c-8.5,4.6-19.1,1.4-23.6-7.1C52.8,85.1,56,74.5,64.5,70
					C72.9,65.4,83.5,68.6,88.1,77z" />
        <path style="fill:#FFFFFF;" d="M55.8,77.4c2.3,4.3,0.7,9.6-3.6,12c-4.3,2.3-9.6,0.7-12-3.6c-2.3-4.3-0.7-9.6,3.6-12
					C48.1,71.5,53.4,73.1,55.8,77.4z" />
        <path style="fill:#FFFFFF;" d="M24.3,32.3c2.3,4.3,0.7,9.6-3.6,12c-4.3,2.3-9.6,0.7-12-3.6c-2.3-4.3-0.7-9.6,3.6-12
					C16.6,26.4,22,28,24.3,32.3z" />
        <path style="fill:#FFFFFF;" d="M101.8,52.6c3.7,6.9,1.2,15.5-5.8,19.2c-6.9,3.7-15.5,1.1-19.2-5.8c-3.7-6.9-1.2-15.5,5.8-19.2
					C89.5,43.1,98.1,45.7,101.8,52.6z" />
        <path style="fill:#FFFFFF;" d="M87.2,40.9c7.7,14.3,2.4,32.1-11.9,39.7C61,88.4,43.2,83.1,35.5,68.8
					c-7.7-14.3-2.4-32.1,11.9-39.7C61.7,21.4,79.5,26.7,87.2,40.9z" />
			</g>
        <polygon style="fill:#FFFFFF;" points="140.3,44.1 84.9,32.4 82.7,48.8 140.1,48.3 			" />
        <polygon style="fill:#FFFFFF;" points="140.8,64.7 83.4,52.7 81.3,69.2 140.6,68.7 			" />
		</g>
        <g style="opacity:0.8;">
        <path style="fill:#FFFFFF;" d="M7.1,42.9c1,1.8,0.3,4.2-1.5,5.1c-1.8,1-4.1,0.3-5.1-1.5c-1-1.8-0.3-4.2,1.5-5.1
				C3.8,40.3,6.1,41,7.1,42.9z" />
        <g>
        <path style="fill:#FFFFFF;" d="M95.2,27.2c3.5,6.4,1.1,14.5-5.4,17.9c-6.4,3.5-14.5,1.1-17.9-5.4c-3.5-6.4-1.1-14.5,5.4-17.9
					C83.7,18.4,91.8,20.8,95.2,27.2z" />
        <path style="fill:#FFFFFF;" d="M71.6,28.7c3.3,6.2,1,13.9-5.2,17.3c-6.2,3.3-13.9,1-17.3-5.2c-3.4-6.2-1-13.9,5.2-17.3
					C60.5,20.2,68.2,22.5,71.6,28.7z" />
        <path style="fill:#FFFFFF;" d="M85.2,39.9c3,5.6,0.9,12.7-4.7,15.7c-5.6,3-12.7,0.9-15.7-4.7c-3-5.6-0.9-12.7,4.7-15.7
					C75.1,32.2,82.1,34.3,85.2,39.9z" />
        <path style="fill:#FFFFFF;" d="M57.2,55.9c3,5.6,0.9,12.7-4.7,15.7c-5.6,3-12.7,0.9-15.7-4.7c-3-5.6-0.9-12.7,4.7-15.7
					C47.2,48.2,54.2,50.3,57.2,55.9z" />
        <path style="fill:#FFFFFF;" d="M86.1,70.2c3.3,6,1,13.6-5,16.9c-6,3.3-13.6,1-16.9-5c-3.3-6-1-13.6,5-16.9
					C75.3,61.9,82.9,64.2,86.1,70.2z" />
        <path style="fill:#FFFFFF;" d="M63.1,70.5c1.6,3.1,0.5,6.9-2.5,8.5c-3.1,1.7-6.9,0.5-8.5-2.5c-1.7-3.1-0.5-6.9,2.5-8.5
					C57.6,66.3,61.4,67.5,63.1,70.5z" />
        <path style="fill:#FFFFFF;" d="M95.9,52.8c2.7,4.9,0.8,11.1-4.1,13.7c-4.9,2.7-11.1,0.8-13.7-4.1c-2.7-4.9-0.8-11.1,4.1-13.7
					C87.1,46,93.3,47.9,95.9,52.8z" />
        <path style="fill:#FFFFFF;" d="M85.5,44.5C91,54.6,87.2,67.3,77,72.8c-10.2,5.5-22.9,1.7-28.3-8.5C43.2,54.2,47,41.5,57.1,36
					C67.3,30.5,80,34.3,85.5,44.5z" />
			</g>
		</g>
	</g>
        <g id="rocket">
        <path style="fill:#F7F5FA;" d="M349.4,32.5c-0.2,0.5-0.4,1.1-0.6,1.6c-2.5,6.7-4,14.2-4.4,22.1c0,0,0,0.1,0,0.1
			c0,0.8-0.1,1.6-0.1,2.4c0,0,0,0.1,0,0.1c0,0.1,0,0.2,0,0.3c-0.1,5.6,0.5,11.1,1.5,16.3c0.1,0.6,0.3,1.3,0.4,1.9
			c0.3,1.4,0.7,2.7,1.1,4.1c0.2,0.6,0.3,1.1,0.5,1.7c-17.8,7.1-54.5,15.5-77.2,17.1c-11.4,0.8-44.7-1.2-55.2-2.5
			c-0.2-1-0.4-2-0.6-3.1c-0.3-1.7-0.6-3.5-0.9-5.2c-1.6-9.8-2.3-20-2.2-30.3c0-0.4,0-0.7,0-1.1l0,0l0-1c0,0,0,0,0,0
			c0.3-12.6,1.9-24.9,4.6-36.6c0.2-1,0.5-2.1,0.7-3.1c10.4-1,51.8-2.2,62.8-1.2C303,18.3,331.5,24.9,349.4,32.5z" />
        <path style="fill:#909CC2;" d="M153.9,79.2c-3.6-1.4-5.6-2.3-5.6-2.3s-0.4-1.9-0.9-4.9c-0.4-2.7-0.9-6.3-1.1-10.3
			c-0.1-1.6-0.1-3.4-0.1-5.1c0-1.8,0.1-3.5,0.2-5.1c0.3-4.1,0.9-7.7,1.4-10.3c0.5-2.7,0.9-4.3,0.9-4.3s2.1-0.9,5.9-2.3
			c-0.7,7.3-1.1,14.8-1.2,22.3l0,0c0,0,0,0.1,0,0.1l0,0c0,0.5,0,1,0,1.6C153.3,65.5,153.5,72.4,153.9,79.2z" />
        <path style="fill:#F7F5FA;" d="M208.6,18.3c-0.2,1-0.4,2-0.6,3c-2.3,11.5-3.6,23.4-3.8,35.7l0,0c0,0.3,0,0.6,0,0.9l0,0
			c0,0.4,0,0.8,0,1.2c-0.1,10.1,0.5,20.1,1.8,29.8c0.2,1.6,0.4,3.2,0.7,4.7c0,0,0,0,0,0c0.2,1,0.3,2,0.5,3
			c-14.5-2.4-27.5-6.1-37.5-9.6c-6.6-2.3-11.9-4.4-15.6-6c0-0.1,0-0.1,0-0.2c0-0.6-0.1-1.1-0.1-1.7c-0.4-6.8-0.6-13.7-0.5-20.6
			c0-0.5,0-1,0-1.6l0,0c0,0,0-0.1,0-0.1l0,0c0.1-7.5,0.5-14.9,1.2-22.3c0.1-0.6,0.1-1.2,0.2-1.9c4.2-1.7,10.4-4,18-6.3
			c7.9-2.4,17.3-4.9,27.7-6.8l0,0C203.1,19.1,205.8,18.7,208.6,18.3z" />
        <path style="fill:#909CC2;" d="M216.3,20.4c-2.7,11.7-4.3,24-4.6,36.6c0,0,0,0,0,0c0,0.3,0,0.7,0,1l0,0c0,0.4,0,0.7,0,1.1
			c-0.1,10.4,0.7,20.5,2.2,30.3c0.3,1.8,0.6,3.5,0.9,5.2c-2.8-0.3-5.5-0.7-8.1-1.1c-0.2-1.6-0.5-3.2-0.7-4.7
			c-1.3-9.7-1.9-19.6-1.8-29.7c0-0.4,0-0.8,0-1.2l0,0c0-0.3,0-0.6,0-0.9l0,0c0.3-12.2,1.6-24.2,3.8-35.7
			C210.7,20.9,213.5,20.6,216.3,20.4z" />
        <path style="fill:#F1646A;" d="M385.6,58c0,0.7-0.5,1.6-0.5,1.6c-3.8,6.6-18,15.8-37.3,23.5c-0.2-0.6-0.4-1.1-0.5-1.7
			c-0.4-1.3-0.7-2.7-1.1-4.1c-0.2-0.6-0.3-1.3-0.4-1.9c-1-5.2-1.6-10.6-1.5-16.3c0-0.1,0-0.2,0-0.3c0,0,0-0.1,0-0.1
			c0-0.8,0-1.6,0.1-2.4c0,0,0-0.1,0-0.1c0.4-7.9,1.9-15.4,4.4-22.1c0.2-0.5,0.4-1.1,0.6-1.6c9,3.9,16.7,8,22.8,12
			c0.4,0.3,0.8,0.6,1.3,0.8c0,0,0,0,0,0c5.9,4,10,7.8,11.7,11C385.2,56.4,385.6,57.2,385.6,58z" />
        <path style="fill:#909CC2;" d="M312.4,58.7c-0.1,11.7-5.8,22-14.4,28.5l0,0c-6.2,4.6-13.8,7.4-22.2,7.3
			c-5.9-0.1-11.4-1.5-16.3-4.1C247.8,84.3,239.9,72,240,58c0.2-20,16.6-36,36.6-35.8C296.6,22.4,312.6,38.8,312.4,58.7z" />

		
        <radialGradient id="SVGID_1_" cx="1020.454" cy="-851.1051" r="31.6793" gradientTransform="matrix(0.9374 -0.3484 0.3519 0.9467 -380.8554 1219.6122)" gradientUnits="userSpaceOnUse">
        <stop offset="4.591840e-02" style="stop-color:#7A88B2" />
        <stop offset="0.3659" style="stop-color:#7784AF" />
        <stop offset="0.5369" style="stop-color:#707CA5" />
        <stop offset="0.6728" style="stop-color:#657097" />
        <stop offset="0.7901" style="stop-color:#555F85" />
        <stop offset="0.895" style="stop-color:#424B71" />
        <stop offset="0.9905" style="stop-color:#2B355A" />
        <stop offset="1" style="stop-color:#283357" />
		</radialGradient>
        <path style="fill:url(#SVGID_1_);" d="M275.9,90c-17.5-0.2-31.5-14.5-31.3-32c0.2-17.5,14.5-31.5,32-31.3
			c17.5,0.2,31.5,14.5,31.3,32C307.7,76.2,293.4,90.2,275.9,90z" />
        <path style="fill:#F1646A;" d="M200.5,19.6L200.5,19.6c-10.4,1.9-19.8,4.3-27.7,6.8c4.9-4.9-33.1,2.1-38.6,1.2
			c-0.4-0.1-0.7-0.2-0.7-0.4C133.7,24.7,188.4,0.5,195,0C201.7-0.5,200.5,19.6,200.5,19.6z" />
        <path style="fill:#F1646A;" d="M199.5,95.1l0.2,0c0,0,0.7,20.6-5.9,19.9c-6.3-0.6-55.3-23.5-60.5-27.9c-0.3-0.2-0.4-0.4-0.4-0.6
			c0-0.3,0.5-0.4,1.4-0.4c7.5-0.2,42.2,6.4,37.7,1.6C179.7,90.3,189.1,93,199.5,95.1z" />
        <path style="fill:#F1646A;" d="M146.4,51.4l-6.6-0.1c-2.7-2.8,0.1-10.3,0.1-10.3l7.9,0.1C147.3,43.7,146.7,47.3,146.4,51.4z" />
        <path style="fill:#F1646A;" d="M147.4,72l-7.8-0.1c0,0-2.7-7.6,0.1-10.3l6.6,0.1C146.5,65.6,147,69.2,147.4,72z" />
        <path style="opacity:0.1;fill:#231F20;" d="M199.7,95.2l0,0.4c0,0,0.7,20.1-5.9,19.5c-6.3-0.6-55.3-23.5-60.5-27.9
			c0,0,51.7,22.4,56.8,22.9c4.7,0.5,5.7-9.8,5.9-15.6C197.2,94.7,198.4,94.9,199.7,95.2z" />
        <path style="opacity:0.1;fill:#231F20;" d="M200.5,19.6L200.5,19.6c-10.4,1.9-19.8,4.3-27.7,6.8c4.9-4.9-33.1,2.1-38.6,1.2
			l-0.7-0.4C133.5,27.2,193.9,12.9,200.5,19.6z" />
        <path style="opacity:0.1;fill:#231F20;" d="M169.6,87c9.3,2.1,21.3,4.3,37,6.6c0,0,0,0,0,0c0.2,1,0.3,2,0.5,3
			C192.6,94.1,179.6,90.4,169.6,87z" />
        <path style="opacity:0.1;fill:#231F20;" d="M385.6,58c0,0.7-0.5,1.6-0.5,1.6c-3.8,6.6-18,15.8-37.3,23.5
			c-17.8,7.1-54.5,15.5-77.2,17.1c-11.4,0.8-44.7-1.2-55.2-2.5c-0.2-1-0.4-2-0.6-3.1c53.1,7.2,102.6-5.7,131.5-17.3
			c10.6-4.2,18.4-8.3,22.5-11.2c15.2-10.4,5.1-20.5,4.7-20.9c5.9,4,10,7.8,11.7,11C385.2,56.4,385.6,57.2,385.6,58z" />
	</g>
        <g id="ollie">
        <g>
        <path style="fill:#573838;" d="M262.3,70.9c0,0,0.5,0.1,0.4,1.2c-0.1,1.1,0.7,2.1,0.7,2.1s-2.7,1.9-3.2,1.7
				C260,75.8,258.9,73.7,262.3,70.9z" />
        <path style="fill:#573838;" d="M293.9,58.8c0,0-0.2,0.5,0.7,1.1c0.9,0.6,1.4,1.6,1.4,1.6s3-0.6,3.2-1.1
				C299.2,60.2,298.2,58,293.9,58.8z" />
        <path style="fill:#EC8A23;" d="M275.1,79.8c-0.7,0.2-0.9,1.3-0.9,1.8c0,0.5,0.3,0.4,0.5,0.4c0.2-0.1,0.1-0.9,0.5-0.9
				c0.4,0,0.6,1.4,1.1,1c0.6-0.4-0.5-0.9-0.3-1.3c0.2-0.4,0.4-0.3,0.7-0.2c0.3,0.1,0.8,0.4,0.8,0C277.7,80.2,276.6,79.3,275.1,79.8z
				" />
        <path style="fill:#EC8A23;" d="M291.5,73.7c-0.8,0-1.3,0.9-1.4,1.4c-0.1,0.5,0.2,0.5,0.3,0.5c0.2,0,0.4-0.8,0.8-0.7
				c0.4,0.1,0.1,1.5,0.8,1.3c0.7-0.2-0.2-1,0.2-1.3c0.4-0.3,0.5-0.2,0.7,0.1c0.2,0.2,0.6,0.6,0.8,0.3
				C293.7,74.9,293,73.7,291.5,73.7z" />
        <path style="fill:#91817A;" d="M272.9,50.7c-8.9,3.3-12.7,7.5-12.7,7.5s-5.9-1.8-6.2,0.7c-0.3,2.5,3.7,3.2,3.7,3.2
				s-2.1,1.2-1.3,2.3c0.8,1.1,2.5-0.4,2.5-0.4s0.5,5.9,2.7,8.3c2.3,2.4,10.6,9.4,13.4,7.8c2.8-1.6,1.3-3,7-5.1c5.8-2.2,6.7,0,9.3-1
				c2.5-1,3.7-5.9,4.1-8.5c0.4-2.6,1.4-10.5-2.4-14.7c0,0,2-2.5,1-3.5c-0.9-0.9-3,1.2-3,1.2s3.4-3.9,1.3-5.1
				c-2.2-1.1-4.1,4.3-4.1,4.3S282.7,47.1,272.9,50.7z" />
        <path style="fill:#EC8A23;" d="M281.3,65.9c-0.7,0.6-1.2,2.3-1.5,2.4c-0.2,0.1-1.8-0.9-2.7-0.9c-0.6,0,0.8-2.5,1.4-2.7
				C279,64.5,281.7,65.5,281.3,65.9z" />
        <path style="fill:#FFFFFF;" d="M294.6,56.3c1.6,4.4-0.6,9.2-4.9,10.8c-4.4,1.6-9.2-0.6-10.8-4.9c-1.6-4.4,0.6-9.2,4.9-10.8
				C288.2,49.7,293,51.9,294.6,56.3z" />
        <path style="fill:#FFFFFF;" d="M260.2,69.2c1.6,4.4,6.5,6.6,10.8,4.9c4.4-1.6,6.6-6.5,4.9-10.8c-1.6-4.4-6.5-6.6-10.8-4.9
				C260.8,60,258.6,64.8,260.2,69.2z" />
        <path style="fill:#424143;" d="M290.3,55.4c1.1,2.9-0.4,6-3.2,7.1c-2.9,1.1-6-0.4-7.1-3.2c-1.1-2.9,0.4-6,3.2-7.1
				C286,51.1,289.2,52.5,290.3,55.4z" />
        <path style="fill:#424143;" d="M271.6,62.4c1.1,2.9-0.4,6-3.2,7.1c-2.9,1.1-6-0.4-7.1-3.2c-1.1-2.9,0.4-6,3.2-7.1
				C267.4,58.1,270.6,59.5,271.6,62.4z" />
        <path style="fill:#FFFFFF;" d="M263.1,65.7c-0.3,0.1-1.2-1-0.9-2.4c0.3-1.4,1.2-2.1,1.9-1.6c0.7,0.5-0.6,0.9-0.8,1.6
				C263.2,63.9,263.6,65.5,263.1,65.7z" />
        <path style="fill:#FFFFFF;" d="M282,58.5c-0.3,0.1-1.2-1-0.9-2.4c0.3-1.4,1.2-2.1,1.9-1.6c0.7,0.5-0.6,0.9-0.8,1.6
				C282.1,56.8,282.5,58.3,282,58.5z" />
        <path style="fill:#CA7929;" d="M277.2,67.2c0,0,0-0.4,0.2-0.7c0.2-0.3,1.9,0.9,2.1,1.2c0.2,0.3-0.1,0.1-0.1,0.1
				S277.9,67.1,277.2,67.2z" />
        <path style="fill:#573838;" d="M274.6,73.8c0.3-0.2,0.4,0.2,0.6,0.5c0.2,0.3,0.6,0.8,0.5,0.9c-0.1,0.1-1-0.4-1-0.9
				C274.5,73.8,274.6,73.8,274.6,73.8z" />
        <path style="fill:#573838;" d="M278.4,73.8c0.3-0.2,0.4,0.2,0.6,0.5c0.2,0.3,0.6,0.8,0.5,0.9c-0.1,0.1-1-0.4-1-0.9
				C278.3,73.8,278.4,73.8,278.4,73.8z" />
        <path style="fill:#573838;" d="M276.5,72.6c0.3-0.1,0.5,0.4,0.5,0.6c0,0.3,0.4,0.9,0.2,0.9c-0.1,0.1-0.7-0.5-0.8-0.8
				C276.3,73.1,276.2,72.7,276.5,72.6z" />
        <path style="fill:#573838;" d="M280.5,72.6c0.3-0.1,0.5,0.4,0.5,0.6c0,0.3,0.4,0.9,0.2,0.9c-0.1,0.1-0.7-0.5-0.8-0.8
				C280.4,73.1,280.3,72.7,280.5,72.6z" />
        <path style="fill:#573838;" d="M278.7,71.3c0.6-0.2,0.6,0.3,0.6,0.6c0.1,0.3,0.3,1,0.1,1.1c-0.1,0.1-0.7-0.7-0.8-1
				C278.6,71.7,278.5,71.4,278.7,71.3z" />
        <path style="fill:#573838;" d="M287.3,69c-0.4,0.1-0.2,0.4-0.1,0.7c0.1,0.4,0,1,0.2,1c0.2,0,0.5-1,0.2-1.3
				C287.4,69,287.3,69,287.3,69z" />
        <path style="fill:#573838;" d="M284.4,71.5c-0.4,0.1-0.2,0.4-0.1,0.7c0.1,0.4,0,1,0.2,1c0.2,0,0.5-1,0.2-1.3
				C284.5,71.5,284.4,71.5,284.4,71.5z" />
        <path style="fill:#573838;" d="M285.1,69.4c-0.3,0.1-0.1,0.6,0,0.8c0.1,0.2,0.3,0.9,0.4,0.8c0.1-0.1,0.2-0.8,0.1-1.1
				C285.5,69.7,285.4,69.3,285.1,69.4z" />
        <path style="fill:#573838;" d="M282,72.1c-0.3,0.1-0.1,0.6,0,0.8c0.1,0.2,0.3,0.9,0.4,0.8c0.1-0.1,0.2-0.8,0.1-1.1
				C282.5,72.3,282.3,72,282,72.1z" />
        <path style="fill:#573838;" d="M282.6,69.9c-0.6,0.2-0.3,0.6-0.1,0.9c0.2,0.3,0.5,1,0.6,0.9c0.1-0.1,0-1-0.1-1.3
				C282.9,70.1,282.8,69.8,282.6,69.9z" />
        <path style="fill:#573838;" d="M280.5,70.3c0.2-0.1,0.7,0.3,0.8,1.2c0.1,0.9-0.1,0.7-0.1,0.7c-0.1,0-0.6-0.8-0.7-1
				C280.5,70.9,280.3,70.5,280.5,70.3z" />
        <g>
        <g>
        <path style="fill:#573838;" d="M295.8,48.8c0,0-0.1,0-0.1,0c-0.6-0.6-2.3,0.2-2.9,0.5c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.1,0-0.2
						c0.1-0.1,2.3-1.3,3.1-0.5C295.9,48.6,295.9,48.7,295.8,48.8C295.9,48.7,295.9,48.8,295.8,48.8z" />
				</g>
        <g>
        <path style="fill:#573838;" d="M294.7,49.6C294.7,49.6,294.7,49.6,294.7,49.6c-0.7-0.3-1.5,0.1-1.5,0.1c-0.1,0-0.1,0-0.1-0.1
						c0-0.1,0-0.1,0-0.1c0,0,0.9-0.5,1.6-0.2C294.8,49.4,294.8,49.5,294.7,49.6C294.8,49.6,294.7,49.6,294.7,49.6z" />
				</g>
			</g>
        <g>
        <g>
        <path style="fill:#573838;" d="M254.8,64.1C254.9,64.1,254.9,64.1,254.8,64.1c0.2-0.9,1.9-1.5,2.6-1.6c0.1,0,0.1-0.1,0.1-0.1
						c0-0.1-0.1-0.1-0.1-0.1c-0.1,0-2.6,0.6-2.7,1.7C254.7,64.1,254.7,64.1,254.8,64.1C254.8,64.1,254.8,64.1,254.8,64.1z" />
				</g>
        <g>
        <path style="fill:#573838;" d="M256.2,64C256.3,64,256.3,64,256.2,64c0.3-0.6,1.2-0.9,1.2-0.9c0.1,0,0.1-0.1,0.1-0.1
						c0-0.1-0.1-0.1-0.1-0.1c0,0-1,0.3-1.3,1C256.1,63.9,256.1,64,256.2,64C256.2,64,256.2,64,256.2,64z" />
				</g>
			</g>
		</g>
        <path style="fill:#F3F2F3;" d="M272,80.5c0,0,1.1,0.9,3.4,0c2.3-1,2.2-2,2.2-2L272,80.5z" />
        <path style="fill:#F3F2F3;" d="M293.6,72.5c0,0-0.2,1.4-2.6,2.2c-2.3,0.7-3-0.1-3-0.1L293.6,72.5z" />
        <path style="fill:#3694B9;" d="M279.1,75.8c0.1,0.4,0.1,0.7,0,1.1c-0.3,1-1.2,1.7-1.2,1.7s-4.1,1.6-5.7,2.1
			c-1.1,0.4-2.2-0.7-2.8-1.4c-0.4-0.4-0.6-0.7-0.6-0.7L279.1,75.8z" />
        <path style="fill:#3694B9;" d="M294.8,68.9c0,0,0,0.3,0,0.8c0,1-0.1,2.6-1.2,3.1c-1.6,0.6-5.7,2.1-5.7,2.1s-1.2,0-2-0.6
			c-0.3-0.2-0.5-0.5-0.7-0.8L294.8,68.9z" />
        <g>
        <path style="fill:#59C8E3;" d="M269.4,79.3c2.8-0.4,6-1.2,9.7-2.4c0.1-0.3,0.1-0.7,0-1.1l-10.3,2.8
				C268.8,78.6,269.1,78.9,269.4,79.3z" />
        <path style="fill:#59C8E3;" d="M285.9,74.4c3.6-1.5,6.6-3,9-4.6c0-0.5,0-0.8,0-0.8l-9.6,4.6C285.3,73.9,285.6,74.2,285.9,74.4z" />
		</g>
        <g>
        <polygon style="fill:#F3F2F3;" points="269.1,42.2 266.6,33.8 267.3,33.6 270.9,41.5 			" />
        <path style="fill:#F1646A;" d="M268.6,33.1c0.3,0.9-0.1,1.9-1,2.3c-0.9,0.3-1.9-0.1-2.3-1c-0.3-0.9,0.1-1.9,1-2.3
				C267.2,31.7,268.3,32.2,268.6,33.1z" />
        <path style="fill:#F3F2F3;" d="M269.5,40.8c-12,4.5-19.3,14.7-15.2,25.9c4.1,11.1,10.3,15.5,27.8,9c17.9-6.7,19.9-14.1,15.8-25.2
				C293.8,39.3,281.5,36.3,269.5,40.8z M295.8,65.2c-0.2,0.8-1,1.7-2.1,2.5c-2.5,2.1-7.3,4.3-11.1,5.8c-0.3,0.1-0.5,0.2-0.8,0.3
				l-0.2,0.1c-0.2,0.1-0.5,0.2-0.8,0.3c-3.8,1.3-8.9,2.8-12.1,2.9c-1.4,0.1-2.5-0.1-3.2-0.5c-2.8-1.8-11.1-9.8-10.7-16.6
				c0.4-6.8,10.3-11.7,16.6-14c6.2-2.3,17-5.1,21.7-0.2C297.8,50.6,296.7,62.1,295.8,65.2z" />
        <path style="opacity:0.2;fill:#F3F2F3;" d="M295.3,65.7c-0.2,0.7-0.7,1.3-1.5,2c-2.5,2.1-7.3,4.3-11.1,5.8
				c-0.3,0.1-0.5,0.2-0.8,0.3l-0.2,0.1c-0.2,0.1-0.5,0.2-0.8,0.3c-3.8,1.3-8.9,2.8-12.1,2.9c-1.1,0-1.9-0.2-2.5-0.5
				c-2.7-1.7-10.6-9.4-10.3-15.9c0.4-6.5,9.9-11.2,15.9-13.4c6-2.2,16.3-4.9,20.8-0.2C297.2,51.6,296.2,62.7,295.3,65.7z" />
        <path style="fill:#3694B9;" d="M295.8,65.2c-0.2,0.8-1,1.7-2.1,2.5c0.8-0.7,1.4-1.4,1.5-2c0.9-3,1.9-14.1-2.6-18.8
				c-4.5-4.7-14.8-2-20.8,0.2c-6,2.2-15.5,6.9-15.9,13.4c-0.4,6.5,7.6,14.2,10.3,15.9c0.6,0.4,1.5,0.5,2.5,0.5
				c-1.4,0.1-2.5-0.1-3.2-0.5c-2.8-1.8-11.1-9.8-10.7-16.6c0.4-6.8,10.3-11.7,16.6-14c6.2-2.3,17-5.1,21.7-0.2
				C297.8,50.6,296.7,62.1,295.8,65.2z" />
        <path style="opacity:0.3;fill:#FFFFFF;" d="M258.4,64.9c0,0-3.9-7,6.2-12l1,2.1C265.6,55,258.1,57.8,258.4,64.9z" />
		</g>
        <g>
        <path style="fill:#F3F2F3;" d="M299.8,61.4c0.1,0.2,0.1,0.3,0.2,0.4c-0.2,0-0.4,0-0.5,0c-0.1-0.1-0.3-0.3-0.4-0.5
				c-0.1-0.1-0.1-0.2-0.1-0.3c-0.3-0.8-0.2-1.6,0.3-2.3c0-0.1,0.1-0.2,0.2-0.2c0.4,0,0.8,0,1.1,0C299.7,59.3,299.4,60.4,299.8,61.4z
				" />
        <path style="fill:#F3F2F3;" d="M301.6,58.7c-0.3-0.1-0.7-0.1-1.1-0.2c-0.8,0.7-1.2,1.8-0.8,2.8c0.1,0.2,0.1,0.3,0.2,0.4
				c0.2,0,0.4,0,0.6,0c0.2,0,0.5,0,0.7,0c-0.2-1.1,0.3-2.2,1.2-2.8C302.2,58.9,301.9,58.8,301.6,58.7z" />
        <path style="fill:#3694B9;" d="M303.3,59.4c-0.8,0.5-1.3,1.4-1.3,2.4c-0.3,0-0.5,0-0.8,0c-0.2-1.1,0.3-2.2,1.2-2.8
				C302.8,59.1,303.1,59.2,303.3,59.4z" />
        <path style="fill:#F3F2F3;" d="M304.7,61.3c-0.1,0.1-0.5,0.2-1.1,0.3c-0.5,0.1-1,0.1-1.6,0.2c-0.1-0.9,0.4-1.9,1.3-2.4
				c0.4,0.2,0.7,0.5,0.9,0.7C304.7,60.6,304.8,61.2,304.7,61.3z" />
		</g>
        <g>
        <path style="fill:#F3F2F3;" d="M260.1,76.1c0.1,0.2,0.1,0.3,0.1,0.5c0.2-0.1,0.3-0.2,0.4-0.3c0-0.2,0-0.4-0.1-0.6
				c0-0.1-0.1-0.2-0.1-0.3c-0.3-0.8-1-1.3-1.7-1.5c-0.1,0-0.2,0-0.3-0.1c-0.3,0.3-0.6,0.5-0.8,0.8C258.8,74.5,259.8,75.1,260.1,76.1
				z" />
        <path style="fill:#F3F2F3;" d="M257,75.3c0.2-0.3,0.4-0.5,0.7-0.8c1.1,0,2.1,0.6,2.4,1.6c0.1,0.2,0.1,0.3,0.1,0.5
				c-0.1,0.1-0.3,0.2-0.5,0.4c-0.2,0.1-0.4,0.3-0.5,0.4c-0.5-1-1.6-1.5-2.7-1.3C256.6,75.8,256.8,75.6,257,75.3z" />
        <path style="fill:#3694B9;" d="M256.1,76.9c1-0.1,1.9,0.2,2.5,1c0.2-0.2,0.4-0.3,0.6-0.5c-0.5-1-1.6-1.5-2.7-1.3
				C256.3,76.4,256.2,76.7,256.1,76.9z" />
        <path style="fill:#F3F2F3;" d="M256.3,79.2c0.1,0,0.5-0.1,1-0.4c0.4-0.3,0.8-0.6,1.3-0.9c-0.6-0.7-1.5-1.1-2.5-1
				c-0.1,0.4-0.2,0.8-0.2,1.1C255.9,78.8,256.2,79.2,256.3,79.2z" />
		</g>
	</g>
</g>
                        <!--stroke="black"-->

<path id="flight_plan" style="fill:none;" d="M2018.9,134.3c14.4-78.1,125.5-104.8,192-61.3c66.5,43.5,93.1,128,100.3,207.2
	c17.2,189.3-54,384.8-188.8,518.8c-134.9,134-330.8,203.8-520,185.3c-219.5-21.4-410.5-151-606.2-252.6
	c-102.5-53.2-208.7-99.6-308.1-158.5c-155.3-92.2-291-213.4-425.5-333.9C174.5,160.5,86.1,81.3,0,0" />
</svg>
    </div>
              
            
!

CSS

              
                #body,html {
  background-color:#222;
}

#ollie_in_space {
    position: fixed;
    right: 0px;
    top: 60px;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 2;
}

#moon {
    position: fixed;
    background-size: 220px auto;
    width: 220px;
    height: 240px;
    top: 100px;
    right: 5%;
    z-index: 1;
}
              
            
!

JS

              
                var bezierData = MorphSVGPlugin.pathDataToBezier("#flight_plan");

var ollie_tween = new TimelineMax({
        repeat: -1,
        repeatDelay: 1
    })
    .add(TweenMax.to("#rocket_ollie", 5, {
        bezier: {
            values: bezierData,
            type: "cubic",
            curviness: 1,
            autoRotate: true
        },
        scaleX: 1, scaleY: 1,
        delay: 1,
        visibility: "visible",
        startAt: {scaleX: 0.1, scaleY: 0.1},
        orientToBezier: true,
        ease: Power4.easeIn,
        yoyo: false
    }))
    .to("#rocket_ollie", 0, {visibility: "hidden"});

ollie_tween.play();

var rotationSnap = 360;
Draggable.create("#moon", {
    type: "rotation",
    throwProps: true, 
    snap: function (endValue) {
        return Math.round(endValue / rotationSnap) * rotationSnap;
    },
    ease: Elastic.easeOut.config(1, 0.5)
});
TweenMax.fromTo("#moon", 2, { rotation: -30 }, { rotation: 0, ease: Elastic.easeOut.config(5, 0.2) });
TweenMax.to("#moon", 2, { y: 15, yoyo: true, repeat: -1, ease: Sine.easeInOut });
              
            
!
999px

Console