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

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 class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <clipPath id="clip-path">
      <circle id="e-mask" cx="395.95" cy="300.26" r="106" fill="none"/>
    </clipPath>
  </defs>
  <g id="Layer_3" data-name="Layer 3">
    <path fill="#555c69" d="M-460 0h1720v600H-460z"/>
    <g >
      <path id="sate-line" d="M396 140.22a160 160 0 11-160 160 160 160 0 01160-160m0-1a161 161 0 10113.88 47.17A160 160 0 00396 139.22z" fill="#e85348"/>
    </g>
    <g id="earth">
    <g id="earth-base">
      <circle cx="395.95" cy="300.26" r="108.5" fill="#e0f9fa"/>
      <path d="M396 194.26a106 106 0 11-106 106 106 106 0 01106-106m0-5a111 111 0 1078.49 32.51A110.3 110.3 0 00396 189.26z" fill="#83d6df"/>
    </g>
    <g id="earth-mask">
      <g clip-path="url(#clip-path)" fill="#83d6df">
        <g id="earth-inner">
          <path d="M629.48 397.42l-5.77-2.42-.82-6.59-.82-1.65 2.47-3.29v-3.29l-1.65-4.18 2.47-7.4-.82-3.3 3.29-14-6.58-3.3v-4.12l-4.94-7.4v-4.08l1.64-2.47 1.65-1.65v-4.93l-2.47-.83h-4.94l-1.64-4.94-4.94-1.64-4.12-2.47h-6.58l-6.59-4.94v-1.65l-6.58-8.23 1.64 6.59-5.76-4.94-2.47-6.58-4.15-1.65-3.3-6.59v-10.7h1.65l-1.65-4.11-3.25-1.67-2.45-2.45-1.64-2.47-3.3-1.64-4.93-3.29h-1.65l-1.65-2.47h-5.76l-4.13-1.68-1.65 1.65-2.47.82V255l-2.47.82 1.65 3.3-1.65 1.64-7.41 3.29 3.3-4.11 2.46-1.65-4.11-1.64-1.65-1.65-1.64 1.65-1.65-2.47v-3.3h2.47l1.65-3.29h-.83l-3.29 1.65-3.29-3.24 2.47-1.65h5.76l-3.29-2.47-2.47-1.65 4.94-3.29h2.47l3.29-1.64 2.47.82 15.64 3.29 4.93 1.65 2.47-1.65 5.77-1.65 2.46.83 12.35.82v2.47h5.76l3.3 4.12.82-2.47-1.65-2.53 3.29-.83 2.47 1.65h4.94v-1.65l.83.83 1.64 2.47 1.65-2.47 2.47-1.65-3.3-1.65.83-2.46h2.47l1.64 2.46 1.65 3.3 1.65-.83.82 1.65 2.47-1.65v-1.64l4.11.82 1.24 2.88-2.47 2.47h-4.12l-.82 2.47-3.31.83s-1.65-.82-1.65 0a34.14 34.14 0 01-1.64 4.94l-1.65 3.29 1.65 1.65 1.64 3.29h4.94l4.94 1.65 1.65 5.76 4.11 1.65-.82-4.94 1.64-2.47 2.47-1.65-3.28-4.08 1.65-3.29-1.65-2.47 6.6 1.67 3.29 4.94h2.47l2.47-1.65 3.29 3.3 3.29 1.64.82 2.47 1.65 2.47 1.65 2.47-7.41.82s-3.29 0-4.12.83a11.7 11.7 0 01-3.29 1.64l4.94.83-1.65 2.44 2.47 1.64s3.29 0 1.65 1.65a14.57 14.57 0 01-3.29 2.47l-2.47-1.65-3.3 1.65-3.29 3.29-3.29 1.65-2.48 5.76-3.29 2.47-.82 4.11.82 4.94h-1.65l-3.29-4.94s-2.47-1.64-3.29-.82-4.94 1.65-4.94 1.65h-4.94l.82 8.23.83 1.64 3.29.83 4.11-2.47 3.3.82-2.47 2.47.82 3.29h4.94V318l4.11 2.47h2.47l3.3-1.65 2.47-.82h4.93s2.47 1.64 3.3 1.64a35.77 35.77 0 004.11-.82l2.47 2.47 5.76 3.29s4.12 1.65 4.12 2.47-1.65 4.12-1.65 4.12l5.76 1.64 6.59 1.65 4.94 2.47a18.77 18.77 0 01.82 3.29c0 .82-2.47 3.29-2.47 3.29S662 346 662 347.63V355l-4.94 3.29s-2.47-1.65-3.29.82-2.47 5.76-2.47 6.59-2.47 4.11-2.47 4.11l-6.59.82a35.64 35.64 0 01.83 4.12c0 .82-3.3 1.65-4.12 2.47l-2.47 2.47S634 381.37 634 383s-2.47 4.94-2.47 5.76v7.41c0 .83-2.05 1.25-2.05 1.25z"/>
          <path d="M499.43 372.73l-2.43-1.64.82 3.29-1.64 2.47-2.47 4.94s-.83 1.64-1.65 1.64-1.65 2.47-1.65 2.47l2.47 1.65 1.65-3.29 3.29-3.3a11.76 11.76 0 002.47-1.64l2.47-2.47c.82-.83 1.65-2.47 0-2.47s-.82.82-1.65 0z"/>
          <path d="M466.5 375.2h-4.11s-1.65 1.65-1.65.82-.82-.82-1.64-1.64 0-2.47-.83-2.47h-1.64l-.83-2.47h-1.64s-1.65 1.65-1.65.82-3.29-2.47-3.29-2.47h-9.06s0 1.65-.82 1.65h-4.11a2.55 2.55 0 00-1.65.82c-.82.83-3.29.83-3.29.83v-4.94c0-.83 0-3.3-.83-4.12s-2.46-1.64-1.64-2.47a6.24 6.24 0 001.64-3.29 3.72 3.72 0 012.47-2.47c.83 0 4.94 0 4.94-.82s1.65-3.29 1.65-3.29l2.47-.83 1.64-2.47 3.3 1.65 1.64-1.65 4.94-3.29 1.65 2.47s-1.65 2.47-.83 2.47 2.47 1.65 3.3 1.65 2.47.82 2.47 0 1.64-6.59 1.64-6.59l1.65 3.29L464 348v2.47l2.5 2.53 4.12 4.11c.82.83 1.65 1.65 1.65 2.47s.82 4.94.82 4.94-2.47 2.47-2.47 3.29-.82 3.3-.82 4.12-3.3 3.27-3.3 3.27z"/>
          <path d="M469.8 342.28l-2.47-3.28s.82-1.65 0-1.65h-1.65l-1.68-2.48s-5.76-1.65-6.58-1.65a35.64 35.64 0 00-4.12.83l-.82-1.65-3.29-.82.82 2.47v.82l3.29.82s.83 2.47 1.65 2.47h2.47l-1.65 1.65a8.57 8.57 0 003.3.82c1.64 0 4.11 1.65 4.11 1.65s.82-2.47 1.65-2.47 1.64.82 2.47 1.64a4 4 0 002.5.83z"/>
          <path d="M445.93 339.81l-6.59-2.47s2.47-2.47 1.65-2.47-1.65-1.65-1.65-1.65l2.47-1.64.82-.83 1.65-.82h-8.23l-.82-3.29s2.47 0 1.64-.82-1.64-2.47-2.47-2.47-2.47 2.47-3.29 2.47-2.47 1.64-2.47 1.64l-1.64 1.65s-2.47-.83-2.47 0a35.77 35.77 0 00.82 4.11s-.82 1.65-1.65 1.65-4.11-2.47-4.11-2.47l-4.12-3.29-3.29-2.47-3.29-1.64-.83.83s3.3 3.29 3.3 4.11 2.47 4.12 2.47 4.12.82 2.47 2.47 3.29 5.76 2.47 7.4 2.47 1.65.82 4.12.82 4.94-.82 6.58 0 2.47.82 4.12 1.65 1.64 0 3.29 0 4.12-1.65 4.12-1.65z"/>
          <path d="M443.46 325c-.83 0-2.47.83-2.47 0s.82-.82 0-1.64-2.47-.83-1.65-1.65 2.47-3.29 0-2.47-1.64.82-3.29 1.65-1.65 3.29-1.65 1.64 3.3-5.76 3.3-5.76v-4.11l1.64-2.47a18.77 18.77 0 01.82 3.29c0 .82-.82 1.65 0 1.65s2.47 0 2.47.82a2.85 2.85 0 00.83 1.64s1.64 0 1.64.83v3.29a5.73 5.73 0 01-1.64 3.29z"/>
          <path d="M450 295.36s.82-1.64 1.65-1.64h4.11l.83-.83a2.86 2.86 0 011.64-.82h2.47l.83-.82s-.83-4.12 0-4.12.82-2.47.82-2.47V283s0 .83.82 0 1.65 0 2.47-.82 1.65-1.64.82-2.47-2.47-2.47-3.29-2.47a8.29 8.29 0 00-2.47.83v1.64l.83.83-2.43 2.46s1.64.83.82 1.65-1.65 1.65-1.65 2.47-1.64.82-2.47 1.65 0 1.64-1.64 1.64-2.47-.82-3.3 0l-2.46 2.47c-.83.83-1.65 1.65-.83 2.47s2.43.01 2.43.01z"/>
          <path d="M511.77 248.44L506 246.8s-2.47 1.64-3.29 1.64.82 2.47.82 2.47a52.52 52.52 0 01-5.76 1.65c-.82 0-3.29 2.47-4.11 3.29s-4.94 0-4.94 0l-2.47 2.47-1.65 3.29-.82 4.94-4.12 4.12-.82-10.7 3.29-2.47 3.29-4.12-2.46.83-2.47.82a2.91 2.91 0 00-1.65-.82c-.82 0-3.29 4.11-3.29 4.11h-1.65c-.82 0-2.47-.82-3.29-.82s-6.59.82-6.59.82l-3.29.83-7.41 4.93 3.3 1.65h4.11v2.47l-1.64 7.41-4.09 4.94-2.47 1.64-1.65-.82-2.46 3.29-.83.82v5.77l-2.47.82v-3.29l-2.47-1.65s1.65-2.47.83-2.47a35.57 35.57 0 00-4.12.82s1.65-2.47 0-1.64-2.47 3.29-2.47 3.29l2.47 1.65-.82 1.64-1.65 1.65 4.12 3.29-2.47 4.94-6.59 5.76a18.77 18.77 0 01-3.29.82c-.82 0-1.64 1.65-1.64 1.65h-2.47l-1.65-.82-1.65 2.47s2.47 2.47 2.47 3.29 1.65 1.65 1.65 3.29.82.82 0 1.65a26.52 26.52 0 01-4.12 2.47l-3.29-3.3-1.64-.82-1.65 3.29s2.47 2.47 2.47 3.3 2.47 1.64 2.47 2.47.82 1.64.82 2.46 0 1.65-.82 1.65-2.47-2.47-3.29-3.29-2.47-4.94-2.47-4.94a34.42 34.42 0 01-1.65-4.94 35.77 35.77 0 00-.82-4.11s0 1.64-1.65.82-2.47-3.29-2.47-4.12-1.65-2.47-1.65-2.47a4 4 0 00-3.29 0c-1.64.83-3.29 0-3.29.83s-3.29 3.29-3.29 3.29-2.47 4.12-2.47 5.76-1.65 4.12-2.47 4.94-3.29-.82-3.29-2.47-2.47-6.58-2.47-7.41a18.58 18.58 0 00-.83-3.29s-4.93-2.47-5.76-3.29 0-2.47-.82-2.47h-5.76a16.81 16.81 0 01-4.12-.82s.83-.83-.82-.83-1.65-.82-3.29-.82-4.12-1.65-4.12-1.65l-1.64-.82s2.46 3.29 2.46 4.12 3.3.82 3.3.82h2.47s-.83 0 0 .82 6.58 2.47 6.58 2.47l-3.29 4.12s-6.59 2.47-7.41 3.29-7.41 3.29-7.41 3.29l-3.29-1.64a31.52 31.52 0 00-1.65-4.94c-.82-1.65-1.64-2.47-1.64-4.12s-2.47-4.94-2.47-4.94-2.47-1.64-3.29-1.64h-2.47a32.6 32.6 0 001.64 4.94c.83 1.64 4.94 8.23 4.94 9.05s1.65 4.11 3.29 4.94 4.12 3.29 5.77 2.47 2.47-2.47 3.29-2.47 3.29 1.64 3.29 1.64l-4.99 6.59s-5.76 4.11-6.58 4.11-3.29 3.3-3.29 4.12-1.65 4.94-.83 4.94 2.47 4.11 2.47 4.11l.82 4.94s-5.76.83-5.76 1.65-3.29 4.11-2.47 4.11 1.65 2.47 1.65 2.47-3.29 3.3-3.29 4.12-2.47 5.76-2.47 5.76l-8.23 2.47h-8.23s-1.65-8.23-1.65-9.05-1.65-6.59-1.65-8.24-2.47-3.29-1.64-4.93l2.47-4.94-2.47-5.76-2.47-5.77v-4.11l-7.38-2.47-9 2.47-3.3-.82-5.76-3.3-2.47-6.58v-10.7c0-.82 4.12-4.12 4.12-4.12l2.47-5.76s2.47-2.47 2.47-3.29 1.64 0 4.94-.82 7.4-1.65 7.4-1.65h5.77l2.05.41 3.3 1.65 2.41 3.34 1.65.82 3.29-1.64 2.47.82s.83 1.65 3.29.82a14.47 14.47 0 014.12-.82H341c.83 0 1.65-3.29 1.65-3.29l-5.76-.83s-1.65-.82-1.65-1.64 0-4.12.82-4.12.83-.82 3.3-.82a63.83 63.83 0 007.4-.82l2.47-.83s-1.64-3.29-2.47-3.29-.82 0-1.64-.82.82-2.47 0-2.47a35.57 35.57 0 00-4.12.82l1.65 1.65h-4.12l-1.66-2.54s-1.65 0-1.65.82-.82 1.65-.82 2.47v3.29s-1.65 1.65-2.47 1.65h-3.29v1.65l1.64 1.64S327 290.83 327 290s-2.47-2.47-2.47-3.29v-3.29c0-.83-3.29-2.47-4.12-3.3s-2.46-1.64-2.46-.82 1.64 2.47 2.46 3.29 2.47.83 1.65 1.65 0 2.47-.82 2.47-2.47-1.65-3.29-2.47a34.05 34.05 0 00-3.3-2.47l-2.47-1.65-1.64.83a3.06 3.06 0 01-2.47 1.64 8.42 8.42 0 00-3.29.83l-2.47 2.47-1.65 1.64c-.82.82-3.29.82-3.29.82a4.07 4.07 0 01-2.47-.82c-.82-.82-1.65-5.76-1.65-5.76s2.47-1.65 3.29-1.65h8.24l-3.3-4.93a2.9 2.9 0 00.83-1.65c0-.82 2.47-2.47 2.47-2.47a15.09 15.09 0 013.29-2.47c1.64-.82 4.94-2.47 4.94-3.29s1.64-4.12 1.64-4.12l1.65 2.47h9c.83 0 3.3-.82 3.3-1.64s.82-1.65 1.64-2.47a34.05 34.05 0 002.47-3.3s-4.11 0-4.94-.82.83-4.94.83-4.94l.82-.82s1.64-3.29.82-3.29-2.47-.83-3.29 0l-4.12 4.11a8.35 8.35 0 00-.82 2.47c0 .83 0 0 .82 1.65s1.65.82.83 2.47a6.24 6.24 0 01-2.47 2.47s0 1.64-.83 1.64-1.64 0-2.46-1.64-1.65-4.94-2.47-4.12a12 12 0 01-3.3 1.65s-2.47.82-2.47 0-1.64-4.12 0-4.94 7.41-4.94 7.41-4.94l3.29-3.29 2.47-3.29 4.94-2.47 9.06-2.47s0 1.64 2.47 2.47 4.11.82 4.93 1.64 2.47 2.47 3.3 2.47a2.86 2.86 0 011.64.82s-3.29.83-4.11 1.65-4.12 0-4.12 0-4.11-1.65-.82.82l3.29 2.47 2.47.83 2.47-1.65 1.65-1.65s3.29 0 2.47-.82a2.48 2.48 0 010-3.29c.82-.82 1.64.82 1.64.82l3.29 1.65 3.3-1.65 13.17-2.47 5.76 1.65s.82-.82 0-2.47 0-4.12 0-4.12.82-2.47 2.47-2.47 1.64 2.47 1.64 2.47v3.3a8.35 8.35 0 01-.82 2.47l3.29-1.65s0-4.12.83-4.12 1.64-1.64 3.29-.82 2.47 0 3.29.82.82 1.65 1.65 1.65 0-3.29 0-3.29-2.47-.83-1.65-1.65 3.29-2.47 4.12-1.64 4.11 1.64 4.11 1.64v-4.11s3.29-1.65 4.12-1.65h6.58l2.47-.82a27 27 0 004.12-2.47c.82-.83 2.47 0 2.47 0l.82 1.64h3.29s1.65-.82 2.47 0a11.54 11.54 0 002.47 1.65s-3.29 4.12-4.94 4.12a5.73 5.73 0 00-3.29 1.64h3.29l6.59-.82 4.93.82s2.47 1.65 2.47.82 1.65-1.64 1.65-1.64l5.76 2.47v1.64l2.47 1.65s1.65-2.47 2.47-1.65 4.94 0 4.94 0l4.11-1.64s4.94.82 5.77.82h3.29a2.93 2.93 0 012.47 1.65c.82 1.64.82 1.64 1.64 1.64h4.12s1.64-1.64 1.64 0a5.76 5.76 0 001.65 3.3s0-.83 3.29-.83A12 12 0 00490 239l4.12 1.65 1.64-1.65 4.94 1.65 8.23 2.46h3.3z"/>
          <path d="M299.83 261.2s-.83-2.47-1.65-2.47a18.58 18.58 0 00-3.29.83s1.64.82 1.64 1.64v2.47c0 .83 1.65 0 1.65.83s.82.82 0 1.64-1.65 1.65-1.65 2.47 0 2.47.83 2.47 1.64.82 3.29 0 2.47 0 3.29-.82 1.65-1.65 0-3.3-2.47-2.46-2.47-3.29a3 3 0 00-.82-2.47c-.82-.82-.82 0-.82 0z"/>
          <path d="M293.24 263.67s-2.47.83-2.47 1.65 1.65.82 1.65 1.64-1.65 1.65-.82 2.47 2.47.83 2.47 0 1.64-3.29 1.64-4.11-1.64-1.65-1.64-1.65z"/>
          <path d="M289.13 249.68l-5.76 1.65-2.47-1.65-1.65-2.47 4.94-1.65a2.85 2.85 0 001.64.83 8.18 8.18 0 002.47-.83 2.54 2.54 0 00.83 1.65c.82.82 1.64 2.47.82 2.47z"/>
          <path d="M216.48 397.42l-5.77-2.42-.82-6.59-.82-1.65 2.47-3.29v-3.29l-1.65-4.18 2.47-7.4-.82-3.3 3.29-14-6.58-3.3v-4.12l-4.94-7.4v-4.08l1.64-2.47 1.65-1.65v-4.93l-2.47-.83h-4.94l-1.64-4.94-4.94-1.64-4.12-2.47h-6.58l-6.59-4.94v-1.65l-6.58-8.23 1.64 6.59-5.76-4.94-2.47-6.58-4.15-1.65-3.3-6.59v-10.7h1.65l-1.65-4.11-3.25-1.67-2.45-2.45-1.64-2.47-3.3-1.64-4.93-3.29h-1.65l-1.65-2.47h-5.76l-4.13-1.68-1.65 1.65-2.47.82V255l-2.47.82 1.65 3.3-1.65 1.64-7.41 3.29 3.3-4.11 2.46-1.65-4.11-1.64-1.65-1.65-1.64 1.65-1.65-2.47v-3.3h2.47l1.65-3.29h-.83l-3.29 1.65-3.29-3.24 2.47-1.65h5.76l-3.29-2.47-2.47-1.65 4.94-3.29h2.47l3.29-1.64 2.47.82 15.64 3.29 4.93 1.65 2.47-1.65 5.77-1.65 2.46.83 12.35.82v2.47h5.76l3.3 4.12.82-2.47-1.65-2.53 3.29-.83 2.47 1.65h4.94v-1.65l.83.83 1.64 2.47 1.65-2.47 2.47-1.65-3.3-1.65.83-2.46h2.47l1.64 2.46 1.65 3.3 1.65-.83.82 1.65 2.47-1.65v-1.64l4.11.82 1.24 2.88-2.47 2.47h-4.12l-.82 2.47-3.31.83s-1.65-.82-1.65 0a34.14 34.14 0 01-1.64 4.94l-1.65 3.29 1.65 1.65 1.64 3.29h4.94l4.94 1.65 1.65 5.76 4.11 1.65-.82-4.94 1.64-2.47 2.47-1.65-3.28-4.08 1.65-3.29-1.65-2.47 6.6 1.67 3.29 4.94h2.47l2.47-1.65 3.29 3.3 3.29 1.64.82 2.47 1.65 2.47 1.65 2.47-7.41.82s-3.29 0-4.12.83a11.7 11.7 0 01-3.29 1.64l4.94.83-1.65 2.44 2.47 1.64s3.29 0 1.65 1.65a14.57 14.57 0 01-3.29 2.47l-2.47-1.65-3.3 1.65-3.29 3.29-3.29 1.65-2.48 5.76-3.29 2.47-.82 4.11.82 4.94h-1.65l-3.29-4.94s-2.47-1.64-3.29-.82-4.94 1.65-4.94 1.65h-4.94l.82 8.23.83 1.64 3.29.83 4.11-2.47 3.3.82-2.47 2.47.82 3.29h4.94V318l4.11 2.47h2.47l3.3-1.65 2.47-.82h4.93s2.47 1.64 3.3 1.64a35.77 35.77 0 004.11-.82l2.47 2.47 5.76 3.29s4.12 1.65 4.12 2.47-1.65 4.12-1.65 4.12l5.76 1.64 6.59 1.65 4.94 2.47a18.77 18.77 0 01.82 3.29c0 .82-2.47 3.29-2.47 3.29S249 346 249 347.63V355l-4.94 3.29s-2.47-1.65-3.29.82-2.47 5.76-2.47 6.59-2.47 4.11-2.47 4.11l-6.59.82a35.64 35.64 0 01.83 4.12c0 .82-3.3 1.65-4.12 2.47l-2.47 2.47S221 381.37 221 383s-2.47 4.94-2.47 5.76v7.41c0 .83-2.05 1.25-2.05 1.25z"/>
          <path d="M86.43 372.73L84 371.09l.82 3.29-1.64 2.47-2.47 4.94s-.83 1.64-1.65 1.64-1.65 2.47-1.65 2.47l2.47 1.65 1.65-3.29 3.29-3.3a11.76 11.76 0 002.47-1.64l2.47-2.47c.82-.83 1.65-2.47 0-2.47s-.82.82-1.65 0z"/>
          <path d="M53.5 375.2h-4.11s-1.65 1.65-1.65.82-.82-.82-1.64-1.64 0-2.47-.83-2.47h-1.64l-.83-2.47h-1.64s-1.65 1.65-1.65.82-3.29-2.47-3.29-2.47h-9.06s0 1.65-.82 1.65h-4.11a2.55 2.55 0 00-1.65.82c-.82.83-3.29.83-3.29.83v-4.94c0-.83 0-3.3-.83-4.12s-2.46-1.64-1.64-2.47a6.24 6.24 0 001.64-3.29 3.72 3.72 0 012.47-2.47c.83 0 4.94 0 4.94-.82s1.65-3.29 1.65-3.29l2.47-.83 1.64-2.47 3.3 1.65 1.64-1.65 4.94-3.29 1.65 2.47s-1.65 2.43-.83 2.43 2.47 1.65 3.3 1.65 2.47.82 2.47 0 1.64-6.59 1.64-6.59l1.65 3.29L51 348v2.47l2.5 2.53 4.12 4.11c.82.83 1.65 1.65 1.65 2.47s.82 4.94.82 4.94-2.47 2.47-2.47 3.29-.82 3.3-.82 4.12-3.3 3.27-3.3 3.27z"/>
          <path d="M56.8 342.28L54.33 339s.82-1.65 0-1.65h-1.65L51 334.87s-5.76-1.65-6.58-1.65a35.64 35.64 0 00-4.12.83l-.82-1.65-3.29-.82.82 2.47v.82l3.29.82s.83 2.47 1.65 2.47h2.47l-1.65 1.65a8.57 8.57 0 003.3.82c1.64 0 4.11 1.65 4.11 1.65s.82-2.47 1.65-2.47 1.64.82 2.47 1.64a4 4 0 002.5.83z"/>
          <path d="M32.93 339.81l-6.59-2.47s2.47-2.47 1.65-2.47-1.65-1.65-1.65-1.65l2.47-1.64.82-.83 1.65-.82h-8.23l-.82-3.29s2.47 0 1.64-.82-1.64-2.47-2.47-2.47-2.47 2.47-3.29 2.47-2.47 1.64-2.47 1.64L14 329.11s-2.47-.83-2.47 0a35.77 35.77 0 00.82 4.11s-.82 1.65-1.65 1.65-4.11-2.47-4.11-2.47l-4.12-3.29-3.29-2.47-3.29-1.64-.83.83s3.3 3.29 3.3 4.11 2.47 4.12 2.47 4.12.82 2.47 2.47 3.29 5.76 2.47 7.4 2.47 1.65.82 4.12.82 4.94-.82 6.58 0 2.47.82 4.12 1.65 1.64 0 3.29 0 4.12-1.65 4.12-1.65z"/>
          <path d="M30.46 325c-.83 0-2.47.83-2.47 0s.82-.82 0-1.64-2.47-.83-1.65-1.65 2.47-3.29 0-2.47-1.64.82-3.29 1.65-1.65 3.29-1.65 1.64 3.3-5.76 3.3-5.76v-4.11l1.64-2.47a18.77 18.77 0 01.82 3.29c0 .82-.82 1.65 0 1.65s2.47 0 2.47.82a2.85 2.85 0 00.83 1.64s1.64 0 1.64.83v3.29a5.73 5.73 0 01-1.64 3.29z"/>
          <path d="M37 295.36s.82-1.64 1.65-1.64h4.15l.83-.83a2.86 2.86 0 011.64-.82h2.47l.83-.82s-.83-4.12 0-4.12.82-2.47.82-2.47V283s0 .83.82 0 1.65 0 2.47-.82 1.65-1.64.82-2.47-2.47-2.47-3.29-2.47a8.29 8.29 0 00-2.47.83v1.64l.83.83L46.1 283s1.64.83.82 1.65-1.65 1.65-1.65 2.47-1.64.82-2.47 1.65 0 1.64-1.64 1.64-2.47-.82-3.3 0l-2.46 2.47c-.83.83-1.65 1.65-.83 2.47s2.43.01 2.43.01z"/>
          <path d="M98.77 248.44L93 246.8s-2.47 1.64-3.29 1.64.82 2.47.82 2.47a52.52 52.52 0 01-5.76 1.65c-.82 0-3.29 2.47-4.11 3.29s-4.94 0-4.94 0l-2.47 2.47-1.65 3.29-.82 4.94-4.12 4.12-.81-10.67 3.29-2.47 3.29-4.12-2.46.83-2.47.76a2.91 2.91 0 00-1.65-.82c-.82 0-3.29 4.11-3.29 4.11h-1.65c-.82 0-2.47-.82-3.29-.82s-6.59.82-6.59.82l-3.29.83-7.41 4.93 3.3 1.65h4.11v2.47l-1.64 7.41-4.1 4.97-2.47 1.64-1.65-.82-2.46 3.29-.83.82v5.77l-2.47.82v-3.29l-2.47-1.65s1.65-2.47.83-2.47a35.57 35.57 0 00-4.12.82s1.65-2.47 0-1.64-2.47 3.29-2.47 3.29l2.47 1.65-.82 1.64-1.65 1.65 4.11 3.29-2.47 4.94-6.59 5.76a18.77 18.77 0 01-3.29.82c-.82 0-1.64 1.65-1.64 1.65h-2.48l-1.65-.82-1.65 2.47s2.47 2.47 2.47 3.29 1.65 1.65 1.65 3.29.82.82 0 1.65a26.52 26.52 0 01-4.12 2.47l-3.29-3.3-1.64-.82-1.65 3.29s2.47 2.47 2.47 3.3 2.47 1.64 2.47 2.47.82 1.64.82 2.46 0 1.65-.82 1.65-2.47-2.47-3.29-3.29S.83 321.7.83 321.7a34.42 34.42 0 01-1.65-4.94 35.77 35.77 0 00-.82-4.11s0 1.64-1.65.82-2.47-3.29-2.47-4.12-1.65-2.47-1.65-2.47a4 4 0 00-3.29 0c-1.64.83-3.29 0-3.29.83s-3.29 3.29-3.29 3.29-2.47 4.12-2.47 5.76-1.65 4.12-2.47 4.94-3.29-.82-3.29-2.47-2.49-6.58-2.49-7.41a18.58 18.58 0 00-.83-3.29s-4.93-2.47-5.76-3.29 0-2.47-.82-2.47h-5.76a16.81 16.81 0 01-4.12-.82s.83-.83-.82-.83-1.65-.82-3.29-.82-4.12-1.65-4.12-1.65l-1.64-.82s2.46 3.29 2.46 4.12 3.3.82 3.3.82h2.47s-.83 0 0 .82 6.58 2.47 6.58 2.47l-3.29 4.12s-6.59 2.47-7.41 3.29-7.41 3.29-7.41 3.29l-3.29-1.64a31.52 31.52 0 00-1.65-4.94c-.82-1.65-1.64-2.47-1.64-4.12s-2.47-4.94-2.47-4.94-2.47-1.64-3.29-1.64h-2.47a32.6 32.6 0 001.64 4.94c.83 1.64 4.94 8.23 4.94 9.05s1.65 4.11 3.29 4.94 4.12 3.29 5.77 2.47 2.47-2.47 3.29-2.47 3.29 1.64 3.29 1.64l-4.95 6.59s-5.76 4.11-6.58 4.11-3.29 3.3-3.29 4.12-1.65 4.94-.83 4.94 2.47 4.11 2.47 4.11l.82 4.94s-5.76.83-5.76 1.65-3.29 4.11-2.47 4.11 1.65 2.47 1.65 2.47-3.29 3.3-3.29 4.12-2.44 5.79-2.44 5.79l-8.23 2.47h-8.23s-1.65-8.23-1.65-9.05-1.65-6.59-1.65-8.24-2.47-3.29-1.64-4.93l2.47-4.94-2.47-5.76-2.47-5.77v-4.11l-7.41-2.47-9 2.47-3.3-.82-5.76-3.3-2.47-6.58v-10.7c0-.82 4.12-4.12 4.12-4.12l2.47-5.76s2.47-2.47 2.47-3.29 1.64 0 4.94-.82 7.4-1.65 7.4-1.65h5.77l2 .41 3.3 1.65 2.46 3.31 1.65.82 3.29-1.64 2.47.82s.83 1.65 3.29.82a14.47 14.47 0 014.12-.82H-72c.83 0 1.65-3.29 1.65-3.29l-5.76-.83s-1.65-.82-1.65-1.64 0-4.12.82-4.12.83-.82 3.3-.82a63.83 63.83 0 007.4-.82l2.47-.83s-1.64-3.29-2.47-3.29-.82 0-1.64-.82.82-2.47 0-2.47a35.57 35.57 0 00-4.12.82l1.65 1.65h-4.12l-1.66-2.54s-1.65 0-1.65.82-.82 1.65-.82 2.47v3.29s-1.65 1.65-2.47 1.65h-3.29v1.65l1.64 1.64S-86 290.83-86 290s-2.47-2.47-2.47-3.29v-3.29c0-.83-3.29-2.47-4.12-3.3s-2.46-1.64-2.46-.82 1.64 2.47 2.46 3.29 2.47.83 1.65 1.65 0 2.47-.82 2.47-2.47-1.65-3.29-2.47a34.05 34.05 0 00-3.3-2.47l-2.47-1.65-1.64.83a3.06 3.06 0 01-2.47 1.64 8.42 8.42 0 00-3.29.83l-2.47 2.47-1.65 1.64c-.82.82-3.29.82-3.29.82a4.07 4.07 0 01-2.47-.82c-.82-.82-1.65-5.76-1.65-5.76s2.47-1.65 3.29-1.65h8.24l-3.3-4.93a2.9 2.9 0 00.83-1.65c0-.82 2.47-2.47 2.47-2.47a15.09 15.09 0 013.29-2.47c1.64-.82 4.94-2.47 4.94-3.29s1.64-4.12 1.64-4.12l1.65 2.47h9c.83 0 3.3-.82 3.3-1.64s.82-1.65 1.64-2.47a34.05 34.05 0 002.47-3.3s-4.11 0-4.94-.82.83-4.94.83-4.94l.82-.82s1.64-3.29.82-3.29-2.47-.83-3.29 0l-4.12 4.11a8.35 8.35 0 00-.82 2.47c0 .83 0 0 .82 1.65s1.65.82.83 2.47a6.24 6.24 0 01-2.47 2.47s0 1.64-.83 1.64-1.64 0-2.46-1.64-1.65-4.94-2.47-4.12a12 12 0 01-3.3 1.65s-2.47.82-2.47 0-1.64-4.12 0-4.94 7.41-4.94 7.41-4.94l3.29-3.29 2.47-3.29 4.94-2.47 9.06-2.47s0 1.64 2.47 2.47 4.11.82 4.93 1.64 2.47 2.47 3.3 2.47a2.86 2.86 0 011.64.82s-3.29.83-4.11 1.65-4.12 0-4.12 0-4.11-1.65-.82.82l3.29 2.47 2.47.83 2.47-1.65 1.65-1.65s3.29 0 2.47-.82a2.48 2.48 0 010-3.29c.82-.82 1.64.82 1.64.82l3.29 1.65 3.3-1.65 13.17-2.47 5.76 1.65s.82-.82 0-2.47 0-4.12 0-4.12.82-2.47 2.47-2.47 1.64 2.47 1.64 2.47v3.3a8.35 8.35 0 01-.82 2.47l3.29-1.65s0-4.12.83-4.12 1.64-1.64 3.29-.82 2.47 0 3.29.82.82 1.65 1.65 1.65 0-3.29 0-3.29-2.47-.83-1.65-1.65 3.29-2.47 4.12-1.64 4.11 1.64 4.11 1.64v-4.11s3.29-1.65 4.12-1.65h6.62l2.47-.8a27 27 0 004.12-2.47c.82-.83 2.47 0 2.47 0l.82 1.64h3.29s1.65-.82 2.47 0a11.54 11.54 0 002.47 1.65s-3.29 4.12-4.94 4.12a5.73 5.73 0 00-3.29 1.64h3.29l6.59-.82 4.93.82s2.47 1.65 2.47.82 1.65-1.64 1.65-1.64l5.76 2.47v1.64l2.47 1.65s1.65-2.47 2.47-1.65 4.94 0 4.94 0l4.11-1.64s4.94.82 5.77.82h3.29a2.93 2.93 0 012.47 1.65c.82 1.64.82 1.64 1.64 1.64h4.12s1.64-1.64 1.64 0a5.76 5.76 0 001.65 3.3s0-.83 3.29-.83A12 12 0 0077 239l4.12 1.65 1.6-1.65 4.94 1.65 8.23 2.46h3.3z"/>
        </g>
        <path d="M518.83 317.77h30.67v34.68h-30.67z"/>
      </g>
    </g>
    </g>

    <g id="sate">
      <path fill="#97afc0" d="M356.81 132.05h29v17h-29z"/>
      <path fill="#e0f9fa" d="M360.16 133.81h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M360.16 141.25h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M368.29 133.81h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M368.29 141.25h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M376.42 133.81h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M376.42 141.25h6.03v6.03h-6.03z"/>
      <path fill="#97afc0" d="M414.19 132.05h29v17h-29z"/>
      <path fill="#e0f9fa" d="M417.54 133.81h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M417.54 141.25h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M425.67 133.81h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M425.67 141.25h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M433.81 133.81h6.03v6.03h-6.03z"/>
      <path fill="#e0f9fa" d="M433.81 141.25h6.03v6.03h-6.03z"/>
      <ellipse cx="400" cy="153.02" rx="8.5" ry="2.5" fill="#f3e38d"/>
      <path fill="#f3e38d" d="M391.67 152.52l8.33-7.11 8.36 7.16-16.69-.05z"/>
      <path fill="#e0f9fa" d="M391.5 131.99h17v17h-17z"/>
      <path fill="#97afc0" d="M393.82 134.78h4.33v4.33h-4.33z"/>
      <path fill="#97afc0" d="M401.78 134.78h4.33v10.63h-4.33z"/>
          <g id="sate-waves" fill="none" stroke="#f3e38d" stroke-linecap="round" stroke-miterlimit="10">
      <path class="sate-wave" d="M431.71 202.52c0 10.38-14.21 18.79-31.73 18.79s-31.73-8.41-31.73-18.79" stroke-width="3"/>
      <path class="sate-wave" d="M425.75 189.69c0 8.43-11.54 15.27-25.77 15.27s-25.78-6.84-25.78-15.27" stroke-width="2.6667"/>
      <path class="sate-wave" d="M419.8 176.87c0 6.48-8.87 11.74-19.82 11.74s-19.82-5.26-19.82-11.74" stroke-width="2.3333"/>
      <path class="sate-wave" d="M413.85 164c0 4.54-6.21 8.22-13.87 8.22s-13.87-3.68-13.87-8.22" stroke-width="2"/>
    </g>
    </g>

  </g>
</svg>

</div>
              
            
!

CSS

              
                body,html{
  margin: 0;
  padding: 0;
  background: #555C69;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;  
}


.box{
  width: 800px;
  height: 600px;
}

svg{
  visibility:visible; /* viewboxの外でに出ても表示される*/
}

#sate-line{
  display:none;
}
              
            
!

JS

              
                console.clear();

gsap.registerPlugin(MotionPathPlugin);

gsap.to("#earth-inner", {
  x: 413, //x方向に移動
  repeat: -1, //無限に繰り返す
  ease: "linear",
  duration: 5 //アニメーションに5秒かける
});

gsap.to("#sate", {
  motionPath: {
    path: "#sate-line", //pathの取得
    align: "#sate-line", //path上を移動を可能に
    alignOrigin: [0.5, 0], //path上に乗るポイント
    autoRotate: true, //自動回転
    start: 1, //開始ポイント
    end: 1 //終点ポイント
  },
  repeat: -1,
  ease: "none", //Linearと同じ
  duration: 10
});

gsap.from(".sate-wave", {
  opacity: 0, //0%から100%
  stagger: {
    each: 0.3, //0.3秒おきにアニメーション
    from: "end" //最後の要素から
  },
  repeat: -1
});

const tl = gsap.timeline();

tl
  .set("#earth",{
  scale: 0,
transformOrigin: "65% center",
},0)
  .set("#sate",{
  scale: 0,
  transformOrigin: "center top",
},0)
  .to("#earth",{
  scale: 1,
  duration: 2,
  ease: "back.out(1.7)"
},'show')  //前のアニメーション後に再生
  .to("#sate",{
  scale: 1,
  duration: 2,
  ease: "back.out(1.7)"
},'show') //showのタイミングでともに再生


              
            
!
999px

Console