Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <svg id="demo1"  class="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" height="1000" viewBox="5000 0 2000 1000">
  <defs>
    <linearGradient id="linear-gradient" x1="5994.05" y1="1013.23" x2="6005.97" y2="-14.9" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#783288"/>
      <stop offset="0.23" stop-color="#b87ba5"/>
      <stop offset="0.33" stop-color="#c487b4"/>
      <stop offset="0.49" stop-color="#c080b0"/>
      <stop offset="0.77" stop-color="#9b2888"/>
      <stop offset="1" stop-color="#50164b"/>
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="3588.26" y1="425.67" x2="3530.32" y2="20.07" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#c080b0"/>
      <stop offset="0.47" stop-color="#9b2888"/>
      <stop offset="1" stop-color="#50164b"/>
    </linearGradient>
  </defs>
  <rect width="12000" height="1000" fill="url(#linear-gradient)"/>
  <path fill="#fff" opacity="0.15" d="M11807.93,460.66c-3.11,4.82-27,31.15-38,43.64s-52.42-1.82-58.18-4.29-17.29-24.07-25.57-20.87c-6.15,2.39-42.34,14-59.3,36a5.14,5.14,0,0,1-4.22,2.18c-13.84-.58-36.61-10.08-44-11.72-3.8-1.36-9.23,11.42-15.75,13.36s-52.14-42.16-60.06-72.75c-6.09-23.56-9.24-33.37-10.43-38.77-1-4.55-24.33-10.57-31.59-12.33a4.72,4.72,0,0,1-3.12-2.9c-3.39-8.17-15-34.9-24.57-42.45-11.33-9-41.28,5.91-48.37-.33-5.77-5.08-16.88-18.1-20.85-22.8a19.17,19.17,0,0,1-2.62-4.21c-4-8.5-16.94-36.33-19.81-44.63-3.39-9.83-31.71-27-35.94-21.21s-34.23,37.15-39.88,46.52-40.44,21.08-46.41,24.23c-5,2.67-7.74,29.13-8.47,37.34a7.48,7.48,0,0,1-1.71,4.18c-6.75,7.94-34,40.13-38.29,47.57-4.89,8.5-24,12.76-49.28,18.8-9.46,2.27-18,5.42-26.9-5.43s-23.84-21-26.18-23.7c-3.77-4.31-25.4,12.88-27.54,11.9s-20.56-12.35-27.91-7.19c-6.2,4.36-15.83,33-18.69,41.87a8.51,8.51,0,0,1-3,4.19c-7.53,5.57-32.39,24.74-42.09,42.07-11.5,20.55-47.69,15.35-50.37,23.47-2.18,6.6-4.13,23.78-4.79,30a11.25,11.25,0,0,1-1.46,4.44l-53.8,94.32a2.56,2.56,0,0,1-3.39,1.06l-89.15-44.73a10.13,10.13,0,0,1-3.61-3.09l-17.46-24a7.91,7.91,0,0,0-7.66-3.21l-45.94,7.53a2.86,2.86,0,0,1-3.15-2l-9.68-29.38a9.39,9.39,0,0,0-6.54-6c-12.1-3.24-42.4-12-47.46-19.29-2.58-3.73-24.53,1.81-29.43-14.33-3.83-12.61-18.78-33.05-25.14-41.39a26.3,26.3,0,0,0-7-6.31l-15.47-9.69a8.73,8.73,0,0,1-3.17-3.68c-2.07-4.4-6.54-13.59-9.16-16.89s-18.5,1.09-26.27,3.48a32.76,32.76,0,0,0-8.35,4.06l-24.27,16c-1.31.86-27.76,13.53-27.73,13.64s-37.64-1.77-37.64-1.77a8.28,8.28,0,0,1-4.33-1.48c-.76-.53-1.75-1.2-2.82-1.91-6.32-4.17-16.94-10.46-19.11-7.12-3.11,4.82-27,31.15-38,43.64s-52.43-1.82-58.19-4.29-17.29-24.07-25.56-20.87c-6.16,2.39-42.35,14-59.31,36a5.14,5.14,0,0,1-4.22,2.18c-13.84-.58-36.61-10.08-44.05-11.72-3.8-1.36-9.23,11.42-15.74,13.36s-52.15-42.16-60.06-72.75c-6.1-23.56-9.24-33.37-10.44-38.77-1-4.55-24.33-10.57-31.59-12.33a4.74,4.74,0,0,1-3.12-2.9c-3.39-8.17-15-34.9-24.56-42.45-11.34-9-41.29,5.91-48.38-.33-5.77-5.08-16.88-18.1-20.84-22.8a18.81,18.81,0,0,1-2.62-4.21c-4-8.5-17-36.33-19.82-44.63-3.39-9.83-31.71-27-35.94-21.21s-34.22,37.15-39.88,46.52-40.44,21.08-46.41,24.23c-5,2.67-7.74,29.13-8.47,37.34a7.41,7.41,0,0,1-1.71,4.18c-6.74,7.94-34,40.13-38.28,47.57-4.9,8.5-24,12.76-49.29,18.8-9.46,2.27-18,5.42-26.9-5.43s-23.83-21-26.18-23.7c-3.77-4.31-25.4,12.88-27.54,11.9s-20.56-12.35-27.91-7.19c-6.2,4.36-15.83,33-18.69,41.87a8.51,8.51,0,0,1-3,4.19c-7.53,5.57-32.39,24.74-42.09,42.07-11.5,20.55-47.69,15.35-50.37,23.47-2.18,6.6-4.13,23.78-4.79,30a11.25,11.25,0,0,1-1.46,4.44l-53.8,94.32a2.55,2.55,0,0,1-3.39,1.06L9303,607.5a10.07,10.07,0,0,1-3.62-3.09l-17.46-24a7.9,7.9,0,0,0-7.66-3.21l-45.93,7.53a2.86,2.86,0,0,1-3.16-2l-9.67-29.38a9.4,9.4,0,0,0-6.55-6c-12.1-3.24-42.39-12-47.46-19.29-2.58-3.73-24.53,1.81-29.43-14.33-3.82-12.61-18.78-33.05-25.14-41.39a26.3,26.3,0,0,0-7-6.31l-15.46-9.69a8.68,8.68,0,0,1-3.18-3.68c-2.07-4.4-6.54-13.59-9.16-16.89s-18.5,1.09-26.27,3.48a32.76,32.76,0,0,0-8.35,4.06l-24.27,16c-1.31.86-27.76,13.53-27.73,13.64s-37.63-1.77-37.63-1.77a8.31,8.31,0,0,1-4.34-1.48c-.76-.53-1.75-1.2-2.82-1.91-6.32-4.17-16.94-10.46-19.1-7.12-3.12,4.82-27,31.15-38,43.64s-52.42-1.82-58.18-4.29-17.3-24.07-25.57-20.87c-6.16,2.39-42.35,14-59.31,36a5.14,5.14,0,0,1-4.22,2.18c-13.84-.58-36.61-10.08-44.05-11.72-3.8-1.36-9.23,11.42-15.74,13.36s-52.15-42.16-60.06-72.75c-6.1-23.56-9.24-33.37-10.44-38.77-1-4.55-24.32-10.57-31.59-12.33a4.74,4.74,0,0,1-3.12-2.9c-3.39-8.17-15-34.9-24.56-42.45-11.34-9-41.29,5.91-48.38-.33-5.77-5.08-16.88-18.1-20.84-22.8a18.81,18.81,0,0,1-2.62-4.21c-4-8.5-16.95-36.33-19.82-44.63-3.39-9.83-31.71-27-35.94-21.21s-34.22,37.15-39.88,46.52-40.44,21.08-46.41,24.23c-5,2.67-7.74,29.13-8.46,37.34a7.55,7.55,0,0,1-1.71,4.18c-6.75,7.94-34,40.13-38.29,47.57-4.9,8.5-24,12.76-49.28,18.8-9.47,2.27-18,5.42-26.9-5.43s-23.84-21-26.18-23.7c-3.78-4.31-25.41,12.88-27.55,11.9s-20.56-12.35-27.91-7.19c-6.19,4.36-15.83,33-18.69,41.87a8.45,8.45,0,0,1-3,4.19c-7.53,5.57-32.39,24.74-42.09,42.07-11.5,20.55-47.69,15.35-50.37,23.47-2.17,6.6-4.13,23.78-4.78,30a11.58,11.58,0,0,1-1.46,4.44l-53.8,94.32a2.57,2.57,0,0,1-3.4,1.06l-89.14-44.73a10.16,10.16,0,0,1-3.62-3.09l-17.46-24a7.9,7.9,0,0,0-7.65-3.21l-45.94,7.53a2.87,2.87,0,0,1-3.16-2l-9.67-29.38a9.38,9.38,0,0,0-6.55-6c-12.09-3.24-42.39-12-47.46-19.29-2.58-3.73-24.53,1.81-29.43-14.33-3.82-12.61-18.78-33.05-25.13-41.39a26.49,26.49,0,0,0-7-6.31l-15.46-9.69a8.75,8.75,0,0,1-3.18-3.68c-2.07-4.4-6.54-13.59-9.16-16.89s-18.49,1.09-26.27,3.48a32.54,32.54,0,0,0-8.34,4.06l-24.28,16c-1.31.86-27.76,13.53-27.72,13.64s-37.64-1.77-37.64-1.77a8.31,8.31,0,0,1-4.34-1.48c-.76-.53-1.74-1.2-2.82-1.91-6.31-4.17-16.94-10.46-19.1-7.12-3.12,4.82-27,31.15-38,43.64s-52.42-1.82-58.18-4.29-17.3-24.07-25.57-20.87c-6.16,2.39-42.35,14-59.3,36a5.17,5.17,0,0,1-4.23,2.18c-13.84-.58-36.61-10.08-44.05-11.72-3.8-1.36-9.22,11.42-15.74,13.36s-52.14-42.16-60.06-72.75c-6.1-23.56-9.24-33.37-10.43-38.77-1-4.55-24.33-10.57-31.6-12.33a4.7,4.7,0,0,1-3.11-2.9c-3.4-8.17-15-34.9-24.57-42.45-11.34-9-41.29,5.91-48.38-.33-5.77-5.08-16.88-18.1-20.84-22.8a18.81,18.81,0,0,1-2.62-4.21c-4-8.5-17-36.33-19.81-44.63-3.4-9.83-31.72-27-35.95-21.21s-34.22,37.15-39.88,46.52-40.43,21.08-46.41,24.23c-5,2.67-7.74,29.13-8.46,37.34a7.48,7.48,0,0,1-1.71,4.18c-6.75,7.94-34,40.13-38.29,47.57-4.89,8.5-24,12.76-49.28,18.8-9.47,2.27-18,5.42-26.9-5.43s-23.84-21-26.18-23.7c-3.77-4.31-25.4,12.88-27.55,11.9s-20.56-12.35-27.9-7.19c-6.2,4.36-15.84,33-18.69,41.87a8.47,8.47,0,0,1-3,4.19c-7.53,5.57-32.39,24.74-42.09,42.07-11.5,20.55-47.69,15.35-50.36,23.47-2.18,6.6-4.14,23.78-4.79,30a11.58,11.58,0,0,1-1.46,4.44l-53.8,94.32a2.56,2.56,0,0,1-3.39,1.06l-89.15-44.73a10.16,10.16,0,0,1-3.62-3.09l-17.46-24a7.9,7.9,0,0,0-7.65-3.21l-45.94,7.53a2.87,2.87,0,0,1-3.16-2l-9.67-29.38a9.39,9.39,0,0,0-6.54-6c-12.1-3.24-42.4-12-47.47-19.29-2.57-3.73-24.52,1.81-29.42-14.33-3.83-12.61-18.78-33.05-25.14-41.39a26.19,26.19,0,0,0-7-6.31l-15.46-9.69a8.66,8.66,0,0,1-3.17-3.68c-2.07-4.4-6.55-13.59-9.16-16.89s-18.5,1.09-26.28,3.48a32.54,32.54,0,0,0-8.34,4.06l-24.28,16c-1.31.86-27.75,13.53-27.72,13.64s-37.64-1.77-37.64-1.77a8.31,8.31,0,0,1-4.34-1.48c-.76-.53-1.74-1.2-2.82-1.91-6.31-4.17-16.94-10.46-19.1-7.12-3.12,4.82-27,31.15-38,43.64s-52.42-1.82-58.18-4.29-17.3-24.07-25.57-20.87c-6.16,2.39-42.35,14-59.3,36a5.17,5.17,0,0,1-4.23,2.18c-13.84-.58-36.61-10.08-44-11.72-3.8-1.36-9.23,11.42-15.75,13.36s-52.14-42.16-60.06-72.75c-6.1-23.56-9.24-33.37-10.43-38.77-1-4.55-24.33-10.57-31.6-12.33a4.72,4.72,0,0,1-3.11-2.9c-3.4-8.17-15-34.9-24.57-42.45-11.33-9-41.28,5.91-48.38-.33-5.76-5.08-16.88-18.1-20.84-22.8a18.81,18.81,0,0,1-2.62-4.21c-4-8.5-16.95-36.33-19.81-44.63-3.4-9.83-31.71-27-35.94-21.21s-34.23,37.15-39.88,46.52-40.44,21.08-46.41,24.23c-5,2.67-7.75,29.13-8.47,37.34a7.48,7.48,0,0,1-1.71,4.18c-6.75,7.94-34,40.13-38.29,47.57-4.89,8.5-24,12.76-49.28,18.8-9.47,2.27-18,5.42-26.9-5.43s-23.84-21-26.18-23.7c-3.77-4.31-25.4,12.88-27.54,11.9s-20.57-12.35-27.91-7.19c-6.2,4.36-15.83,33-18.69,41.87a8.51,8.51,0,0,1-3,4.19c-7.54,5.57-32.4,24.74-42.1,42.07-11.5,20.55-47.68,15.35-50.36,23.47-2.18,6.6-4.13,23.78-4.79,30a11.58,11.58,0,0,1-1.46,4.44l-53.8,94.32a2.56,2.56,0,0,1-3.39,1.06l-89.15-44.73a10.13,10.13,0,0,1-3.61-3.09l-17.47-24a7.89,7.89,0,0,0-7.65-3.21l-45.94,7.53a2.86,2.86,0,0,1-3.15-2l-9.68-29.38a9.39,9.39,0,0,0-6.54-6c-12.1-3.24-42.4-12-47.47-19.29-2.57-3.73-24.52,1.81-29.42-14.33-3.83-12.61-18.78-33.05-25.14-41.39a26.19,26.19,0,0,0-7-6.31L4755,456.33a8.73,8.73,0,0,1-3.17-3.68c-2.07-4.4-6.54-13.59-9.16-16.89s-18.5,1.09-26.28,3.48a32.7,32.7,0,0,0-8.34,4.06l-24.28,16c-1.3.86-27.75,13.53-27.72,13.64s-37.64-1.77-37.64-1.77a8.31,8.31,0,0,1-4.34-1.48c-.76-.53-1.74-1.2-2.81-1.91-6.32-4.17-16.95-10.46-19.11-7.12-3.11,4.82-27,31.15-38,43.64s-52.42-1.82-58.18-4.29-17.29-24.07-25.57-20.87c-6.16,2.39-42.34,14-59.3,36a5.15,5.15,0,0,1-4.22,2.18c-13.84-.58-36.62-10.08-44.05-11.72-3.8-1.36-9.23,11.42-15.75,13.36s-52.14-42.16-60.06-72.75c-6.09-23.56-9.24-33.37-10.43-38.77-1-4.55-24.33-10.57-31.59-12.33a4.72,4.72,0,0,1-3.12-2.9c-3.39-8.17-15-34.9-24.57-42.45-11.33-9-41.28,5.91-48.38-.33-5.76-5.08-16.87-18.1-20.84-22.8a19.17,19.17,0,0,1-2.62-4.21c-4-8.5-16.95-36.33-19.81-44.63-3.39-9.83-31.71-27-35.94-21.21s-34.23,37.15-39.88,46.52-40.44,21.08-46.41,24.23c-5,2.67-7.75,29.13-8.47,37.34a7.48,7.48,0,0,1-1.71,4.18c-6.75,7.94-34,40.13-38.29,47.57-4.89,8.5-24,12.76-49.28,18.8-9.46,2.27-18,5.42-26.9-5.43s-23.84-21-26.18-23.7c-3.77-4.31-25.4,12.88-27.54,11.9s-20.56-12.35-27.91-7.19c-6.2,4.36-15.83,33-18.69,41.87a8.51,8.51,0,0,1-3,4.19c-7.53,5.57-32.39,24.74-42.1,42.07-11.49,20.55-47.68,15.35-50.36,23.47-2.18,6.6-4.13,23.78-4.79,30a11.25,11.25,0,0,1-1.46,4.44L3623,651.17a2.56,2.56,0,0,1-3.39,1.06l-89.15-44.73a10.13,10.13,0,0,1-3.61-3.09l-17.47-24a7.89,7.89,0,0,0-7.65-3.21l-45.94,7.53a2.86,2.86,0,0,1-3.15-2l-9.68-29.38a9.39,9.39,0,0,0-6.54-6c-12.1-3.24-42.4-12-47.46-19.29-2.58-3.73-24.53,1.81-29.43-14.33-3.83-12.61-18.78-33.05-25.14-41.39a26.19,26.19,0,0,0-7-6.31l-15.46-9.69a8.73,8.73,0,0,1-3.17-3.68c-2.07-4.4-6.54-13.59-9.16-16.89s-18.5,1.09-26.27,3.48a32.76,32.76,0,0,0-8.35,4.06l-24.27,16c-1.31.86-27.76,13.53-27.73,13.64s-37.64-1.77-37.64-1.77a8.31,8.31,0,0,1-4.34-1.48c-.76-.53-1.74-1.2-2.81-1.91-6.32-4.17-17-10.46-19.11-7.12-3.11,4.82-27,31.15-38,43.64s-52.43-1.82-58.19-4.29-17.29-24.07-25.57-20.87c-6.15,2.39-42.34,14-59.3,36a5.14,5.14,0,0,1-4.22,2.18c-13.84-.58-36.61-10.08-44.05-11.72-3.8-1.36-9.23,11.42-15.75,13.36s-52.14-42.16-60-72.75c-6.1-23.56-9.25-33.37-10.44-38.77-1-4.55-24.33-10.57-31.59-12.33a4.74,4.74,0,0,1-3.12-2.9c-3.39-8.17-15-34.9-24.57-42.45-11.33-9-41.28,5.91-48.37-.33-5.77-5.08-16.88-18.1-20.85-22.8a19.14,19.14,0,0,1-2.61-4.21c-4-8.5-16.95-36.33-19.82-44.63-3.39-9.83-31.71-27-35.94-21.21s-34.23,37.15-39.88,46.52-40.44,21.08-46.41,24.23c-5,2.67-7.74,29.13-8.47,37.34a7.48,7.48,0,0,1-1.71,4.18c-6.74,7.94-34,40.13-38.29,47.57-4.89,8.5-24,12.76-49.28,18.8-9.46,2.27-18,5.42-26.9-5.43s-23.83-21-26.18-23.7c-3.77-4.31-25.4,12.88-27.54,11.9s-20.56-12.35-27.91-7.19c-6.2,4.36-15.83,33-18.69,41.87a8.51,8.51,0,0,1-3,4.19c-7.53,5.57-32.39,24.74-42.09,42.07-11.5,20.55-47.69,15.35-50.37,23.47-2.18,6.6-4.13,23.78-4.79,30a11.25,11.25,0,0,1-1.46,4.44l-53.8,94.32a2.56,2.56,0,0,1-3.39,1.06l-89.15-44.73a10.13,10.13,0,0,1-3.61-3.09l-17.46-24a7.91,7.91,0,0,0-7.66-3.21l-45.93,7.53a2.86,2.86,0,0,1-3.16-2l-9.67-29.38a9.4,9.4,0,0,0-6.55-6c-12.1-3.24-42.4-12-47.46-19.29-2.58-3.73-24.53,1.81-29.43-14.33-3.82-12.61-18.78-33.05-25.14-41.39a26.3,26.3,0,0,0-7-6.31l-15.46-9.69a8.68,8.68,0,0,1-3.18-3.68c-2.07-4.4-6.54-13.59-9.16-16.89s-18.5,1.09-26.27,3.48a32.76,32.76,0,0,0-8.35,4.06l-24.27,16c-1.31.86-27.76,13.53-27.73,13.64s-37.64-1.77-37.64-1.77a8.31,8.31,0,0,1-4.33-1.48c-.76-.53-1.75-1.2-2.82-1.91V942H11759.69V467.78C11820.72,463.61,11810.09,457.32,11807.93,460.66Z" />

    <path d="M3763,263.71a197.88,197.88,0,0,1-395.27,13.86q-.48-6.87-.48-13.86a197.88,197.88,0,1,1,395.75,0Z" fill="url(#linear-gradient-2)"/>
    <path d="M3695.75,412.35a197.91,197.91,0,0,1-298.09-43.19c19.62,3.48,38.84,3.57,46.35-6.62,17.66-24,17.66-44,50.63-38s62.05-54.95,70.48-9,13.44,69.93,52.4,80.92C3642.52,403.56,3676.17,402,3695.75,412.35Z" fill="#50164b" opacity="0.1"/>
    <path d="M3763,263.71a197.29,197.29,0,0,1-16.15,78.43c-30.16,12.46-79.24-34.53-90.37-69.51-14-44-20-60.94-46.95-85.95s-96.33-30.2-88.92,3.77,1,92.17-31.23,73.26-32.7,17.91-58.68,43.7-28.94-8.49-63-29.84q-.48-6.87-.48-13.86A197.29,197.29,0,0,1,3383.52,185c22.69,1.34,57.44-12.33,60.49-24.25,2.46-9.62-18.58-14.4-29.29-25.61a198.26,198.26,0,0,1,202-62.5c9.72,13.17,14.29,29.94,32.75,31.17,9.5.63,19.31-1.15,28.15-2.88a198.59,198.59,0,0,1,29.23,24.73c-4.06,26.28-9,48.27,1.56,57.07,7.66,6.39,19.41-8.46,26.89-20A197,197,0,0,1,3763,263.71Z" fill="#50164b" opacity="0.1"/>
    <path d="M3403.23,194.45c8.76-5.44,25.47-8,37.46,10.14s-11.49,67.33-23.47,72.4S3364.9,218.28,3403.23,194.45Z" fill="#50164b" opacity="0.2"/>
    <path d="M3544.12,385.58c1.2,10.24-3.64,26.44-25.12,29.59s-56-39.05-55.53-52.06S3538.86,340.76,3544.12,385.58Z" fill="#50164b" opacity="0.2"/>
    <path d="M3540.27,97.74S3583,85,3604.71,102.23s34.47,23.23,55.45,24,26.23,3.75,26.23,12-6,36-36.72,26.23-27-28.48-49.46-28.48-119.89,12.74-110.15-15S3510.29,102.25,3540.27,97.74Z" fill="#50164b" opacity="0.2"/>
    <path d="M3748.16,220.46s-11.41-30-27-30-34.24,10.31-36.64,30,9,94.73,31.83,86.29S3754.17,265.48,3748.16,220.46Z" fill="#50164b" opacity="0.2"/>

  <g>
    <circle cx="8225.9" cy="269.44" r="202.12" transform="translate(2218.79 5895.51) rotate(-45)" fill="#fff" opacity="0.1"/>
    <circle cx="8225.9" cy="269.44" r="182.79" transform="translate(2218.79 5895.51) rotate(-45)" fill="#fff" opacity="0.1"/>
    <circle cx="8225.9" cy="269.44" r="164.98" transform="translate(2218.79 5895.51) rotate(-45)" fill="#fff"/>
  </g>

  <g id="ship2">
    <path d="M8718.25,256.37c2,4.27,41.11,6.18,73-5.44,32.19-11.71,53.42-35.09,51.79-39.56C8843,211.24,8759.88,245.35,8718.25,256.37Z" fill="#501649"/>
    <path d="M8842.33,193.68a1.29,1.29,0,0,0-.08-.28c-1.15-3.19-11.57-2.62-27,.86-5.31-5.75-24.82-4.6-46.4,3l-2.28-6.29a3.41,3.41,0,1,0-1.38.5l2.28,6.28c-22.53,8.2-39.07,20.5-38.85,28.48-12.35,6.61-19.53,12.25-18.45,15.21a1.31,1.31,0,0,0,.12.27c-18.62,8.43-29.85,14.89-29,17.22,1.61,4.43,46.41-7.81,100.06-27.34s95.84-38.95,94.23-43.37C8874.77,185.9,8862,188.17,8842.33,193.68Z" fill="#501649"/>
  </g>
    <g id="ship1">
    <path d="M7823.69,151.06c-60.8-18.15-111.24-29-112.66-24.26s46.72,23.33,107.52,41.48,111.24,29,112.66,24.25S7884.49,169.21,7823.69,151.06Z" fill="#501649"/>
    <path d="M7886.13,168.19c1.34-13.11-8.07-27.42-24-38.33,0-8.68-9.85-18.22-23.9-22.41-13.49-4-26.46-1.81-31.67,4.81-20.85-.38-38.05,6.52-44.46,18.89,17.83,4.71,39.28,10.76,62.29,17.63S7868.63,162.35,7886.13,168.19Z" fill="#501649"/>
    <path d="M7872.5,243,7853,197.53c6.1-2.29,10.74-5.81,13.19-10.41-14-3.74-30.95-8.52-49.08-13.93s-34.89-10.68-48.68-15.25c-.52,5.76,1.94,11.89,6.67,17.67L7735.23,202l0,0a3.27,3.27,0,1,0,3.61,5.46l0,0,40.83-27c7.38,6.79,17.92,12.72,30.29,16.41,13.31,4,26.26,4.63,36.55,2.47l19.87,46.21,0,0a3.27,3.27,0,1,0,6-2.59Z" fill="#501649"/>
  </g>
      <text transform="translate(6000 125)" text-anchor="middle" font-size="120" fill="#fff">Parallax SVG viewBoxes</text>
</svg>
<svg id="demo2" class="demo" xmlns="http://www.w3.org/2000/svg" width="2000" height="1000" viewBox="5000 0 2000 1000">



    <path d="M5639.28,632.17c-48.38-63.56-27.94-127.38-71.76-82.27s-56.44,142.4-96.92,103.35-61.06-92.28-88-81.26S5268.2,696.82,5222,659.11s-25.78,81.42-25.78,81.42,197.6,72.75,206.16,71.6S5758,767.73,5758,767.73l45.56-85.7S5687.66,695.72,5639.28,632.17Z" fill="#802774"/>
    <path d="M6369.72,632.17c48.38-63.56,27.94-127.38,71.76-82.27s56.44,142.4,96.92,103.35,61.06-92.28,88-81.26S6740.8,696.82,6787,659.11s25.78,81.42,25.78,81.42-197.6,72.75-206.16,71.6S6251,767.73,6251,767.73L6205.44,682S6321.34,695.72,6369.72,632.17Z" fill="#802774"/>
    <path d="M7638.72,527.17c48.38-63.56,27.94-127.38,71.76-82.27s56.44,142.4,96.92,103.35,61.06-92.28,88-81.26S8009.8,591.82,8056,554.11s25.78,81.42,25.78,81.42-197.6,72.75-206.16,71.6S7520,662.73,7520,662.73L7474.44,577S7590.34,590.72,7638.72,527.17Z" fill="#802774"/>
    <path d="M9573.28,695.17c-48.38-63.56-27.94-127.38-71.76-82.27s-56.44,142.4-96.92,103.35-61.06-92.28-88-81.26S9202.2,759.82,9156,722.11s-25.78,81.42-25.78,81.42,197.6,72.75,206.16,71.6S9692,830.73,9692,830.73l45.56-85.7S9621.66,758.72,9573.28,695.17Z" fill="#802774"/>
    <path d="M10426.72,695.17c48.38-63.56,27.94-127.38,71.76-82.27s56.44,142.4,96.92,103.35,61.06-92.28,88-81.26,114.43,124.83,160.65,87.12,25.78,81.42,25.78,81.42-197.6,72.75-206.16,71.6-355.64-44.4-355.64-44.4l-45.56-85.7S10378.34,758.72,10426.72,695.17Z" fill="#802774"/>
    <path d="M11903.88,550.36c-23.2,27.13-52.08,53.9-93.53,64.73-14.67,3.84-29.1,7.31-43.29,10.3-61,12.88-117.81,17-172.15,3.11a260.06,260.06,0,0,1-58.4-22.68c-32.76-17.46-64.79-43.12-96.51-79.16-113.31-128.71-235.52,45.51-302.72,0-51.68-35-82.55,10.75-117.34,46.79-10.44,10.83-21.25,20.78-33.07,27.41-15.3,8.56-27.74,6.6-39.06-1.91-26.58-20-47-76-83.75-116.38-42.11-46.29-46.77-18.18-101.79,84.67-8.72,16.32-18.73,34.53-30.35,54.62q-9.39,16.26-20.27,34.16c-47,77.17-144,84.91-243.32,64.33-13-2.7-26-5.88-39-9.46-110.69-30.49-216.45-89.62-250.78-120.13-36-32-113-48.06-178.52-56.09-65.52,8-142.53,24.09-178.52,56.09-34.33,30.51-140.09,89.64-250.78,120.13-13,3.58-26,6.76-39,9.46-99.32,20.58-196.33,12.84-243.32-64.33q-10.91-17.89-20.27-34.16c-11.62-20.09-21.63-38.3-30.35-54.62-55-102.85-59.68-131-101.79-84.67C9099.19,523,9078.77,579,9052.19,599c-11.32,8.51-23.76,10.47-39.06,1.91-11.82-6.63-22.63-16.58-33.07-27.41-34.79-36-65.66-81.78-117.34-46.79-67.2,45.51-189.41-128.71-302.72,0-31.72,36-63.75,61.7-96.51,79.16a260.06,260.06,0,0,1-58.4,22.68c-54.34,13.85-111.15,9.77-172.15-3.11-14.19-3-28.62-6.46-43.29-10.3-41.45-10.83-70.33-37.6-93.53-64.73-37.14-43.43-59.75-87.78-96.12-69.12-36.37-18.66-59,25.69-96.12,69.12-23.2,27.13-52.08,53.9-93.53,64.73-14.67,3.84-29.1,7.31-43.29,10.3-61,12.88-117.81,17-172.15,3.11a260.06,260.06,0,0,1-58.4-22.68c-32.75-17.46-64.79-43.12-96.51-79.16-113.31-128.71-235.52,45.51-302.73,0-51.67-35-82.54,10.75-117.33,46.79-10.45,10.83-21.25,20.78-33.07,27.41-15.3,8.56-27.74,6.6-39.06-1.91-26.58-20-47-76-83.75-116.38-42.11-46.29-46.77-18.18-101.79,84.67-8.72,16.32-18.73,34.53-30.35,54.62q-9.39,16.26-20.27,34.16c-47,77.17-144,84.91-243.32,64.33-13-2.7-26.05-5.88-39-9.46-110.69-30.49-216.45-89.62-250.78-120.13-36-32-113-48.06-178.52-56.09-65.52,8-142.53,24.09-178.52,56.09-34.33,30.51-140.09,89.64-250.78,120.13-13,3.58-26,6.76-39,9.46-99.32,20.58-196.33,12.84-243.32-64.33q-10.91-17.89-20.27-34.16c-11.62-20.09-21.63-38.3-30.35-54.62-55-102.85-59.68-131-101.79-84.67C5099.19,523,5078.77,579,5052.19,599c-11.32,8.51-23.76,10.47-39.06,1.91-11.82-6.63-22.62-16.58-33.07-27.41-34.79-36-65.66-81.78-117.33-46.79-67.21,45.51-189.42-128.71-302.73,0-31.72,36-63.76,61.7-96.51,79.16a260.06,260.06,0,0,1-58.4,22.68c-54.34,13.85-111.15,9.77-172.15-3.11-14.19-3-28.62-6.46-43.29-10.3-41.45-10.83-70.33-37.6-93.53-64.73-37.14-43.43-59.75-87.78-96.12-69.12-36.37-18.66-59,25.69-96.12,69.12-23.2,27.13-52.08,53.9-93.53,64.73-14.67,3.84-29.1,7.31-43.29,10.3-61,12.88-117.81,17-172.15,3.11a260.06,260.06,0,0,1-58.4-22.68c-32.75-17.46-64.79-43.12-96.51-79.16-113.31-128.71-235.52,45.51-302.72,0-51.68-35-82.55,10.75-117.34,46.79-10.45,10.83-21.25,20.78-33.07,27.41-15.3,8.56-27.74,6.6-39.06-1.91-26.58-20-47-76-83.75-116.38-42.11-46.29-46.77-18.18-101.79,84.67-8.72,16.32-18.72,34.53-30.35,54.62q-9.39,16.26-20.27,34.16c-47,77.17-144,84.91-243.32,64.33-13-2.7-26-5.88-39-9.46-110.69-30.49-216.45-89.62-250.78-120.13-36-32-113-48.06-178.52-56.09-65.52,8-142.53,24.09-178.52,56.09-34.33,30.51-140.09,89.64-250.78,120.13-13,3.58-26,6.76-39,9.46-99.32,20.58-196.33,12.84-243.32-64.33q-10.9-17.89-20.27-34.16c-11.63-20.09-21.63-38.3-30.35-54.62-55-102.85-59.68-131-101.79-84.67C1099.19,523,1078.77,579,1052.19,599c-11.32,8.51-23.76,10.47-39.06,1.91-11.82-6.63-22.62-16.58-33.07-27.41-34.79-36-65.66-81.78-117.34-46.79-67.2,45.51-189.41-128.71-302.72,0-31.72,36-63.76,61.7-96.51,79.16a260.06,260.06,0,0,1-58.4,22.68c-54.34,13.85-111.15,9.77-172.15-3.11-14.19-3-28.62-6.46-43.29-10.3-41.45-10.83-70.33-37.6-93.53-64.73C59,506.93,36.37,462.58,0,481.24V900H12000V481.24C11963.63,462.58,11941,506.93,11903.88,550.36Z" fill="#621d58"/>

      <path d="M1238.49,628.78c8.73,16.33,18.73,34.54,30.35,54.62-31.5,34.6,11.53,83.68-72.38,72.34s-90.33-73.81-143.51-60.58-38.45-26.55-80.61-19.85-68.76,33-96.25,19.85S742.42,662.7,676.73,680.75c-58.45,16.06-217.3,41.42-270.88,9.29a260.32,260.32,0,0,0,58.41-22.68c32.75-17.46,64.79-43.12,96.51-79.15,113.3-128.72,235.52,45.51,302.72,0C915.17,553.21,946,599,980.82,635c10.45,10.83,21.25,20.78,33.08,27.41,15.3,8.57,27.73,6.6,39.05-1.91,26.59-20,47-76,83.75-116.38C1178.82,497.82,1183.47,525.93,1238.49,628.78Z" fill="#6b2161"/>
      <path d="M1238.49,628.78c-51.7,43.54-32.36,95.43-75.63,65.76-46.42-31.82-44.21-77.68-64.52-59.55-12.12,10.82-30.68,24.13-45.39,25.5,26.59-20,47-76,83.75-116.38C1178.82,497.82,1183.47,525.93,1238.49,628.78Z" fill="#732469"/>


      <path d="M2771.51,628.78c-8.73,16.33-18.73,34.54-30.35,54.62,31.5,34.6-11.53,83.68,72.38,72.34s90.33-73.81,143.51-60.58,38.45-26.55,80.61-19.85,68.76,33,96.25,19.85,133.67-32.46,199.36-14.41c58.45,16.06,217.3,41.42,270.88,9.29a260.32,260.32,0,0,1-58.41-22.68c-32.75-17.46-64.79-43.12-96.51-79.15-113.3-128.72-235.52,45.51-302.72,0-51.68-35-82.55,10.74-117.33,46.78-10.45,10.83-21.25,20.78-33.08,27.41-15.3,8.57-27.73,6.6-39-1.91-26.59-20-47-76-83.75-116.38C2831.18,497.82,2826.53,525.93,2771.51,628.78Z" fill="#6b2161"/>
      <path d="M2771.51,628.78c51.7,43.54,32.36,95.43,75.63,65.76,46.42-31.82,44.21-77.68,64.52-59.55,12.12,10.82,30.68,24.13,45.39,25.5-26.59-20-47-76-83.75-116.38C2831.18,497.82,2826.53,525.93,2771.51,628.78Z" fill="#732469"/>


      <path d="M5238.49,628.78c8.73,16.33,18.73,34.54,30.35,54.62-31.5,34.6,11.53,83.68-72.38,72.34s-90.33-73.81-143.51-60.58-38.45-26.55-80.61-19.85-68.76,33-96.25,19.85-133.67-32.46-199.36-14.41c-58.45,16.06-217.3,41.42-270.88,9.29a260.32,260.32,0,0,0,58.41-22.68c32.75-17.46,64.79-43.12,96.51-79.15,113.3-128.72,235.52,45.51,302.72,0,51.68-35,82.55,10.74,117.33,46.78,10.45,10.83,21.25,20.78,33.08,27.41,15.3,8.57,27.73,6.6,39.05-1.91,26.59-20,47-76,83.75-116.38C5178.82,497.82,5183.47,525.93,5238.49,628.78Z" fill="#6b2161"/>
      <path d="M5238.49,628.78c-51.7,43.54-32.36,95.43-75.63,65.76-46.42-31.82-44.21-77.68-64.52-59.55-12.12,10.82-30.68,24.13-45.39,25.5,26.59-20,47-76,83.75-116.38C5178.82,497.82,5183.47,525.93,5238.49,628.78Z" fill="#732469"/>


      <path d="M6771.51,628.78c-8.73,16.33-18.73,34.54-30.35,54.62,31.5,34.6-11.53,83.68,72.38,72.34s90.33-73.81,143.51-60.58,38.45-26.55,80.61-19.85,68.76,33,96.25,19.85,133.67-32.46,199.36-14.41c58.45,16.06,217.3,41.42,270.88,9.29a260.32,260.32,0,0,1-58.41-22.68c-32.75-17.46-64.79-43.12-96.51-79.15-113.3-128.72-235.52,45.51-302.72,0-51.68-35-82.55,10.74-117.33,46.78-10.45,10.83-21.25,20.78-33.08,27.41-15.3,8.57-27.73,6.6-39.05-1.91-26.59-20-47-76-83.75-116.38C6831.18,497.82,6826.53,525.93,6771.51,628.78Z" fill="#6b2161"/>
      <path d="M6771.51,628.78c51.7,43.54,32.36,95.43,75.63,65.76,46.42-31.82,44.21-77.68,64.52-59.55,12.12,10.82,30.68,24.13,45.39,25.5-26.59-20-47-76-83.75-116.38C6831.18,497.82,6826.53,525.93,6771.51,628.78Z" fill="#732469"/>


      <path d="M9218.49,628.78c8.73,16.33,18.73,34.54,30.35,54.62-31.5,34.6,11.53,83.68-72.38,72.34s-90.33-73.81-143.51-60.58-38.45-26.55-80.61-19.85-68.76,33-96.25,19.85-133.67-32.46-199.36-14.41c-58.45,16.06-217.3,41.42-270.88,9.29a260.32,260.32,0,0,0,58.41-22.68c32.75-17.46,64.79-43.12,96.51-79.15,113.3-128.72,235.52,45.51,302.72,0,51.68-35,82.55,10.74,117.33,46.78,10.45,10.83,21.25,20.78,33.08,27.41,15.3,8.57,27.73,6.6,39.05-1.91,26.59-20,47-76,83.75-116.38C9158.82,497.82,9163.47,525.93,9218.49,628.78Z" fill="#6b2161"/>
      <path d="M9218.49,628.78c-51.7,43.54-32.36,95.43-75.63,65.76-46.42-31.82-44.21-77.68-64.52-59.55-12.12,10.82-30.68,24.13-45.39,25.5,26.59-20,47-76,83.75-116.38C9158.82,497.82,9163.47,525.93,9218.49,628.78Z" fill="#732469"/>


      <path d="M10771.51,628.78c-8.73,16.33-18.73,34.54-30.35,54.62,31.5,34.6-11.53,83.68,72.38,72.34s90.33-73.81,143.51-60.58,38.45-26.55,80.61-19.85,68.76,33,96.25,19.85,133.67-32.46,199.36-14.41c58.45,16.06,217.3,41.42,270.88,9.29a260.32,260.32,0,0,1-58.41-22.68c-32.75-17.46-64.79-43.12-96.51-79.15-113.3-128.72-235.52,45.51-302.72,0-51.68-35-82.55,10.74-117.33,46.78-10.45,10.83-21.25,20.78-33.08,27.41-15.3,8.57-27.73,6.6-39.05-1.91-26.59-20-47-76-83.75-116.38C10831.18,497.82,10826.53,525.93,10771.51,628.78Z" fill="#6b2161"/>
      <path d="M10771.51,628.78c51.7,43.54,32.36,95.43,75.63,65.76,46.42-31.82,44.21-77.68,64.52-59.55,12.12,10.82,30.68,24.13,45.39,25.5-26.59-20-47-76-83.75-116.38C10831.18,497.82,10826.53,525.93,10771.51,628.78Z" fill="#732469"/>

    <text transform="translate(1800 840)" text-anchor="start" font-size="260" fill="#fff">THE SCARY</text>
    <text transform="translate(6000 865)" text-anchor="middle" font-size="260" fill="#fff">ALIENS</text>
    <text transform="translate(9800 825)" text-anchor="end" font-size="260" fill="#fff">ARE HERE!</text>
    <image  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/textAlienMiddle.png" x="5975" y="500" width="128" height="197" />
    <image  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/textAlienRight.png" x="8908" y="590" width="184" height="206" />
    <image  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/textAlienLeft.png" x="2925" y="467" width="121" height="191" />
    
  <g id="dish1" transform="translate(-160,-15)">
        <path d="M4758.31,819c24.44-25.44,67.58-42.36,116.77-42.36,48.92,0,91.86,16.74,116.37,42Z"/>
      <g class="dishMainPivot">
        <rect x="4862.76" y="633.81" width="24.25" height="167.53"/>
        <g class="dishTop">
          <path d="M4682,604.37c40.44,49.18,111.83,81.88,193.21,81.88,80.94,0,152-32.35,192.55-81.1Z"/>
         <rect id="stalk" x="4868.27" y="536.82" width="13.23" height="96.99"/>
          <circle id="nubb" cx="4874.88" cy="526.9" r="20.94"/>
        </g>
      </g>
    </g>
    
  <g id="dish2" transform="translate(0,18)">
        <path d="M7901,791.19c19-19.75,52.46-32.88,90.64-32.88,38,0,71.31,13,90.34,32.57Z"/>
      <g class="dishMainPivot" >
        <rect id="baseArm-2"  x="7982.04" y="647.42" width="18.82" height="130.05"/>
        <g class="dishTop" >
            <path d="M7841.72,624.57c31.4,38.18,86.81,63.56,150,63.56,62.84,0,118-25.12,149.48-63Z"/>
          <rect id="stalk-2"  x="7986.32" y="572.13" width="10.27" height="75.29"/>
          <circle id="nubb-2" cx="7991.45" cy="564.43" r="16.26"/>
        </g>
      </g>
    </g>
</svg>
<svg id="demo3" class="demo" xmlns="http://www.w3.org/2000/svg" width="2000" height="1000" viewBox="5000 0 2000 1000">
    <path d="M11832.76,735c-100.67-85.58-662.85,131.67-864.53,57s-312.12,2.22-595,48.3c-123.66,20.14-259.49,2.55-373.23-23.64-113.74,26.19-249.57,43.78-373.23,23.64-282.88-46.08-393.32-122.93-595-48.3s-763.86-142.61-864.53-57c-40.54,34.47-102.15,45.45-167.24,50.13-65.09-4.68-126.7-15.66-167.24-50.13-100.67-85.58-662.85,131.67-864.53,57s-312.12,2.22-595,48.3c-123.66,20.14-259.49,2.55-373.23-23.64-113.74,26.19-249.57,43.78-373.23,23.64-282.88-46.08-393.32-122.93-595-48.3s-763.86-142.61-864.53-57c-40.54,34.47-102.15,45.45-167.24,50.13-65.09-4.68-126.7-15.66-167.24-50.13-100.67-85.58-662.85,131.67-864.53,57s-312.12,2.22-595,48.3c-123.66,20.14-259.49,2.55-373.23-23.64-113.74,26.19-249.57,43.78-373.23,23.64-282.88-46.08-393.32-122.93-595-48.3S267.91,649.38,167.24,735C126.7,769.43,65.09,780.41,0,785.09V1000H12000V785.09C11934.91,780.41,11873.3,769.43,11832.76,735Z" fill="#50164b"/>
    <path d="M11848.55,913.75c-132.15,23.19-32.07,20.48-260.72,7.68s-123.92-65.81-301.67-31.73-342.07-14.74-451.92,47.78S10638,918.35,10558,918.87c-61.6.4-388.83,10.25-558,44-169.17-33.8-496.4-43.65-558-44-80-.52-166.4,81.13-276.24,18.61s-274.16-13.7-451.92-47.78-73,18.93-301.67,31.73-128.57,15.51-260.72-7.68c-65.93-11.57-116.92-7-151.45.56-34.53-7.52-85.52-12.13-151.45-.56-132.15,23.19-32.07,20.48-260.72,7.68s-123.92-65.81-301.67-31.73S6944.09,875,6834.24,937.48,6638,918.35,6558,918.87c-61.6.4-388.83,10.25-558,44-169.17-33.8-496.4-43.65-558-44-80-.52-166.4,81.13-276.24,18.61s-274.16-13.7-451.92-47.78-73,18.93-301.67,31.73-128.57,15.51-260.72-7.68c-65.93-11.57-116.92-7-151.45.56-34.53-7.52-85.52-12.13-151.45-.56-132.15,23.19-32.07,20.48-260.72,7.68s-123.92-65.81-301.67-31.73S2944.09,875,2834.24,937.48,2638,918.35,2558,918.87c-61.6.4-388.83,10.25-558,44-169.17-33.8-496.4-43.65-558-44-80-.52-166.4,81.13-276.24,18.61S891.6,923.78,713.84,889.7s-73,18.93-301.67,31.73-128.57,15.51-260.72-7.68c-65.93-11.57-116.92-7-151.45.56V1000H12000V914.31C11965.47,906.79,11914.48,902.18,11848.55,913.75Z" fill="#42123d"/>
    <g id="dots">
      <ellipse cx="260.4" cy="760.36" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="1203.27" cy="822.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="2007.27" cy="872.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="3712.27" cy="823.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="4324.27" cy="839.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="5285.27" cy="860.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="6907.27" cy="822.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="7713.27" cy="803.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="11553.27" cy="804.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="9999.27" cy="873.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="9195.27" cy="805.88" rx="74.4" ry="20.84" fill="#702469"/>
      <ellipse cx="376.08" cy="792.72" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="1079.12" cy="811.36" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="1352.49" cy="820.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="2424.49" cy="892.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="2692.49" cy="844.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="2933.49" cy="840.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="3569.49" cy="780.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="3931.49" cy="819.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="5744.49" cy="892.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="6805.49" cy="860.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="9073.49" cy="836.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="10765.49" cy="820.68" rx="33.28" ry="9.32" fill="#702469"/>
      <ellipse cx="6307.49" cy="896.68" rx="33.28" ry="9.32" fill="#702469"/>
    </g>

      <path id="landscapeOutline" d="M12000,785.09c-65.09-4.68-126.7-15.66-167.24-50.13-100.67-85.58-662.85,131.67-864.53,57s-312.12,2.22-595,48.3c-123.66,20.14-259.49,2.55-373.23-23.64-113.74,26.19-249.57,43.78-373.23,23.64-282.88-46.08-393.32-122.93-595-48.3s-763.86-142.61-864.53-57c-40.54,34.47-102.15,45.45-167.24,50.13-65.09-4.68-126.7-15.66-167.24-50.13-100.67-85.58-662.85,131.67-864.53,57s-312.12,2.22-595,48.3c-123.66,20.14-259.49,2.55-373.23-23.64-113.74,26.19-249.57,43.78-373.23,23.64-282.88-46.08-393.32-122.93-595-48.3s-763.86-142.61-864.53-57c-40.54,34.47-102.15,45.45-167.24,50.13-65.09-4.68-126.7-15.66-167.24-50.13-100.67-85.58-662.85,131.67-864.53,57s-312.12,2.22-595,48.3c-123.66,20.14-259.49,2.55-373.23-23.64-113.74,26.19-249.57,43.78-373.23,23.64-282.88-46.08-393.32-122.93-595-48.3S267.91,649.38,167.24,735C126.7,769.43,65.09,780.41,0,785.09" transform="translate(0.14)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" opacity="0.15"/>
</svg>
<svg class="draggerBounds" xmlns="http://www.w3.org/2000/svg" width="550" height="100" viewBox="0 0 550 100">
<text transform="translate(275 92)" text-anchor="middle" font-size="14" fill="#fff">Drag or throw the alien head to navigate the landscape viewBoxes.</text>
<line x1="20" y1="45" x2="530" y2="45" fill="none" stroke="#c487b4" stroke-miterlimit="10" stroke-linecap="round" stroke-width="12" opacity="0.65"/>
<line x1="20" y1="45" x2="530" y2="45" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-linecap="round" stroke-width="6" />
    <g id="dragger">
      <path d="M296.5,38c0,11.87-9.63,31.5-21.5,31.5S253.5,49.87,253.5,38a21.5,21.5,0,0,1,43,0Z" fill="#621d58"/>
      <path d="M261.72,31.69a2,2,0,0,1-1.66-3.12,16.51,16.51,0,0,1,13.7-7.28,2,2,0,0,1,0,4,12.49,12.49,0,0,0-10.38,5.52A2,2,0,0,1,261.72,31.69Z" fill="#fff" opacity="0.29"/>
      <path d="M292,41.07s.55,6.35-3,9.92S279,54,279,54s-.55-6.35,3-9.92S292,41.07,292,41.07Z" fill="#fff"/>
      <path d="M259,41.07s-.55,6.35,3,9.92S272,54,272,54s.55-6.35-3-9.92S259,41.07,259,41.07Z" fill="#fff"/>
      <path d="M278.86,63a1.5,1.5,0,0,1-1.5,1.5h-4a1.5,1.5,0,0,1-1.5-1.5h0a1.5,1.5,0,0,1,1.5-1.5h4a1.5,1.5,0,0,1,1.5,1.5Z" fill="#fff"/>
    </g>
</svg>

              
            
!

CSS

              
                body {
  padding: 0;
  margin: 0;
  background: #000;
  overflow: hidden;
  height: 100vh;
  width: 100%;
}

* {
  box-sizing: border-box;
}

.demo {
  position: absolute;
  left: 50%;
  top: calc(50% - 45px);
  width: auto;
  height: auto;
  max-height: calc(100% - 120px);
  max-width: 96%;
  font-family: "Titan One", cursive;
  overflow: hidden;
}

.draggerBounds {
  position: absolute;
  left: 50%;
  font-family: "Roboto", sans-serif;
}

              
            
!

JS

              
                console.clear();
gsap.config({ trialWarn: false });
gsap.registerPlugin(Draggable, InertiaPlugin);
const sizer = document.querySelector("#demo1");
const factor = [8, 14, 20];
const travel = 250;

gsap.set (".demo", {xPercent:-50, yPercent:-50});
gsap.set (".draggerBounds", {xPercent:-50});
gsap.set("#ship1", {rotation:-17, transformOrigin:"center center"});

Draggable.create("#dragger", {
  type: "x",
  bounds: {
    minX:-travel,
    maxX: travel
  },
  inertia: true,
  edgeResistance: 1,
  onDrag: onDrag,
  onThrowUpdate: onDrag
});

function onDrag() {
  for (i=1; i<4; i++) {
    gsap.set("#demo" + i, {attr:{viewBox:5000 + this.x * factor[i-1] + " 0 2000 1000"}});
  }
}

const dishAnim = gsap.timeline({repeat:-1, yoyo:true, defaults:{ease:"power2.inOut"}});
const ships = gsap.timeline({repeat:-1, defaults:{ease:"power2.inOut"}});

dishAnim.to(".dishMainPivot", {duration: 4, rotation: 12, transformOrigin:"center bottom"});
dishAnim.to(".dishTop", {duration: 4, rotation: 30, transformOrigin:"center bottom"}, 0);
dishAnim.to(".dishTop", {duration: 6, rotation: -30});

gsap.to("#ship1", {duration: 5, y:700, yoyo:true, delay:1.5, repeat:-1, repeatDelay:1});

ships.to("#ship2", {duration: 10, x:-5500, transformOrigin:"center center"});
ships.add("comeBack");
ships.to("#ship2", {duration: 1, rotation: 45}, "comeBack");
ships.to("#ship2", {duration: 10, x:0}, "comeBack");
ships.to("#ship2", {duration: 1, rotation: 0});

function newSize() {
  let data = sizer.getBoundingClientRect();
  gsap.set(".draggerBounds", {top:data.bottom-5});
}

newSize();
window.addEventListener("resize", newSize);


              
            
!
999px

Console