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

              
                <svg class="image01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 683 412" enable-background="new 0 0 683 412" xml:space="preserve">
    <g id="people">
      <g id="blue1">
        <circle fill="#49BDC5" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="282.3" cy="223.8" r="31.2"/><path fill="#49BDC5" stroke="#000000" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M248.6 412V296.9c0-15.5 12.5-28 28-28H288c15.5 0 28 12.5 28 28V412"/>
        <polygon fill="#298F91" points="282.3 298.5 275.1 314.7 282.3 323 289.5 315.7 "/>
        <rect x="277.2" y="281.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -120.1148 283.6188)" fill="#298F91" width="10.2" height="10.2"/>
      </g>
      <g id="orange1">
        <circle fill="#F86D00" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="487.3" cy="253.8" r="31.2"/>
        <path fill="#F86D00" stroke="#000000" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M444.4 412l3.4-78.1c0.9-19.8 17.2-35.4 37-35.4h5c19.8 0 36.1 15.6 37 35.4l3.4 78.1"/>
        <circle fill="#C45C16" cx="487.3" cy="323" r="4.8"/><circle fill="#C45C16" cx="487.3" cy="341" r="4.8"/>
      </g>
      <g id="green1">
        <circle fill="#74A041" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="185" cy="249.8" r="31.2"/><path fill="#74A041" stroke="#000000" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M220.4 412.5l-4.9-46.7v-12l2.1-25.5c1.1-15.2-7.9-28.5-21.7-32.8 -1 3.9-5.4 6.8-11.2 6.8s-10.4-2.9-11.4-6.8c-13.8 4.3-25 17.6-23.9 32.8l1.1 25.5v12l-3.9 46.7"/>
        <rect x="157" y="354" fill="#5A7C2E" width="51" height="11"/>
      </g>
      <g id="orange-background1">
        <circle fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="101.3" cy="306.8" r="21.7"/><path fill="none" stroke="#F86D00" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M72.4 412l5.3-58c0.2-2.4 1.3-8.4 4.4-11 2.1-1.8 7.4-3.7 10-4.8 1.3-0.6 2.7-0.9 4.2-0.9 2.6 0 7.8 0 10.4 0 1.6 0 3.1 0.4 4.4 1 2.3 1.1 7.2 3.1 9.2 4.7 3.3 2.7 4.3 8.6 4.5 11.1l5.3 57.9"/>
      </g>
      <g id="orange-background2">
        <circle fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="396.7" cy="291.4" r="23.4"/><path fill="none" stroke="#F86D00" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M431.5 412.5l-11.3-36.2 2-25.1c0.8-11.4-6.5-21.9-16.8-25.1 -0.7 2.9-8.7 12.9-8.7 12.9s-7.9-10.3-8.7-13.2c-10.3 3.2-17.6 13.1-16.8 24.5l2 26.1 -11.3 36.1"/>
      </g>
      <g id="blue2">
        <circle fill="#49BDC5" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="579.3" cy="284.8" r="27.8"/><path fill="#49BDC5" stroke="#000000" stroke-width="5" stroke-linejoin="round" stroke-miterlimit="10" d="M548.1 412l5.9-73.2c0.6-7.8 7.1-13.8 15-13.8h4.2l6.3 15.5 5.8-15.5h4.7c7.8 0 14.3 6 15 13.8l5.9 73.2"/>      
      </g>
    </g>
        <g id="clouds">
          <g id="clouds-top">
            <g class="clouds1">
          <path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M295.4 50.5c7.8-19.5 26.9-33.2 49.1-33.2 24.6 0 45.2 16.7 51.2 39.4"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M300.6 129c-5.4 3.9-11.9 6.2-19.1 6.2 -17.9 0-32.5-14.5-32.5-32.5 0-16 11.6-29.3 26.8-32"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M388.5 58.8c3.9-1.7 8.2-2.6 12.7-2.6 18.1 0 32.8 14.7 32.8 32.8s-14.7 32.8-32.8 32.8c-4.2 0-8.3-0.8-12-2.3"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M338.2 132c-5.5 5.3-12.9 8.6-21.1 8.6 -8.3 0-15.8-3.3-21.3-8.7"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M398.5 121.8c-7.4 11.4-20.2 18.9-34.8 18.9 -12.1 0-23-5.2-30.6-13.5"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M268.5 73c-0.1-0.6-0.1-1.3-0.1-1.9 0-11.8 9.5-21.3 21.3-21.3 4.5 0 8.7 1.4 12.2 3.8"/>
          </g>
            <g class="clouds2">
          <path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M339.3 178.1c0-9.3 7.6-16.9 16.9-16.9 7.5 0 13.8 4.9 16.1 11.6"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M347 200.8c-2.3 2.1-5.3 3.3-8.6 3.3 -7.1 0-12.8-5.7-12.8-12.8 0-7.1 5.7-12.8 12.8-12.8 1.7 0 3.4 0.3 4.9 1"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M365.1 203c-2.7 2.2-6.1 3.5-9.8 3.5 -4 0-7.7-1.5-10.5-4.1"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M367.3 173.3c1.3-0.3 2.7-0.5 4.1-0.5 8.7 0 15.8 7.1 15.8 15.8s-7.1 15.8-15.8 15.8c-3.8 0-7.2-1.3-9.9-3.5"/>
          </g>
          </g>
          <g class="clouds3">
            <path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M193 161.7c0-10.5 8.5-19 19-19 9.5 0 18.8 7.5 18.8 18"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M202.2 186.6c-2.6 2.6-6.2 4.3-10.2 4.3 -7.9 0-14.3-6.4-14.3-14.3s6.4-14.3 14.3-14.3c1.6 0 3.2 0.3 4.7 0.8"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M221.9 189.6c-3 2.4-6.8 3.9-11 3.9 -4.5 0-8.7-1.7-11.8-4.6"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M230 155.7c9.3 0.6 16.6 8.3 16.6 17.7 0 9.8-7.9 17.7-17.7 17.7 -4.4 0-8.4-1.6-11.4-4.2"/>
          </g>
          <g class="clouds4">
            <path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M448 160.7c0-10.5 8.5-19 19-19 9.5 0 18.8 7.5 18.8 18"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M457.2 185.6c-2.6 2.6-6.2 4.3-10.2 4.3 -7.9 0-14.3-6.4-14.3-14.3s6.4-14.3 14.3-14.3c1.6 0 3.2 0.3 4.7 0.8"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M476.9 188.6c-3 2.4-6.8 3.9-11 3.9 -4.5 0-8.7-1.7-11.8-4.6"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M485 154.7c9.3 0.6 16.6 8.3 16.6 17.7 0 9.8-7.9 17.7-17.7 17.7 -4.4 0-8.4-1.6-11.4-4.2"/>
          </g>
          <g class="clouds5">
            <path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M543.1 213.9c0-7.1 5.8-12.9 12.9-12.9 5.7 0 10.6 3.7 12.3 8.8"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M548.9 231.2c-1.7 1.6-4 2.5-6.5 2.5 -5.4 0-9.7-4.4-9.7-9.7 0-5.4 4.4-9.7 9.7-9.7 1.3 0 2.6 0.3 3.7 0.7"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M562.7 232.9c-2 1.7-4.6 2.6-7.5 2.6 -3.1 0-5.9-1.2-8-3.1"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M564.4 210.2c1-0.3 2-0.4 3.1-0.4 6.6 0 12 5.4 12 12s-5.4 12-12 12c-2.9 0-5.5-1-7.6-2.7"/>
          </g>
          <g class="clouds6">
            <path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M382.8 236.5c0-6.2 5.1-11.3 11.3-11.3 5 0 9.3 3.3 10.7 7.8"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M387.9 251.7c-1.5 1.4-3.5 2.2-5.7 2.2 -4.7 0-8.5-3.8-8.5-8.5 0-4.7 3.8-8.5 8.5-8.5 1.2 0 2.3 0.2 3.3 0.7"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M400 253.2c-1.8 1.4-4.1 2.3-6.5 2.3 -2.7 0-5.2-1-7-2.7"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M401.5 233.3c0.9-0.2 1.8-0.4 2.7-0.4 5.8 0 10.5 4.7 10.5 10.5 0 5.8-4.7 10.5-10.5 10.5 -2.5 0-4.8-0.9-6.6-2.3"/>
          </g>
          <g class="clouds7">
            <path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M88.1 234.9c0-7.1 5.8-12.9 12.9-12.9 5.7 0 10.6 3.7 12.3 8.8"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M93.9 252.2c-1.7 1.6-4 2.5-6.5 2.5 -5.4 0-9.7-4.4-9.7-9.7 0-5.4 4.4-9.7 9.7-9.7 1.3 0 2.6 0.3 3.7 0.7"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M107.7 253.9c-2 1.7-4.6 2.6-7.5 2.6 -3.1 0-5.9-1.2-8-3.1"/><path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M109.4 231.2c1-0.3 2-0.4 3.1-0.4 6.6 0 12 5.4 12 12s-5.4 12-12 12c-2.9 0-5.5-1-7.6-2.7"/>
          </g>
          </g>
  <g id="planes-all">
    <g id="plane">
      <polygon fill="#74A041" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 344.1 142.8 322.9 113.4 308.4 111.5 306.2 96.6 277.1 75.8 388.4 31.5 "/><polygon fill="#5A7C2E" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 388.4 31.5 322.9 113.4 308.4 111.5 306.2 96.6 "/><line fill="none" stroke="#000000" stroke-width="3" stroke-linejoin="round" stroke-miterlimit="10" x1="388.4" y1="31.5" x2="309.1" y2="110.8"/><line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="245.6" y1="164.5" x2="291.5" y2="118.6"/><line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="280.2" y1="149.7" x2="300.7" y2="129.2"/>
  </g>
  <g id="plane-orange">
    <polygon fill="#F86D00" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 88.3 98.9 69.9 73.3 57.2 71.7 55.3 58.7 30 40.6 126.9 2 "/><polygon fill="#C45C16" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 126.9 2 69.9 73.3 57.2 71.7 55.3 58.7 "/><line fill="none" stroke="#000000" stroke-width="3" stroke-linejoin="round" stroke-miterlimit="10" x1="126.9" y1="2" x2="57.9" y2="71"/><line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="2.5" y1="117.9" x2="42.5" y2="77.8"/><line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="32.7" y1="104.9" x2="50.5" y2="87.1"/>
  </g>
  <g id="plane-blue">
    <polygon fill="#49BDC5" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 101 113.3 79.8 83.9 65.3 82 63.1 67.1 34.1 46.3 145.3 2 "/><polygon fill="#298F91" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 145.3 2 79.8 83.9 65.3 82 63.1 67.1 "/><line fill="none" stroke="#000000" stroke-width="3" stroke-linejoin="round" stroke-miterlimit="10" x1="145.3" y1="2" x2="66.1" y2="81.3"/><line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="2.5" y1="135" x2="48.5" y2="89.1"/><line fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="37.1" y1="120.2" x2="57.7" y2="99.7"/>
  </g>
  </g>
  <g id="phone-group">
    <g id="phone-lines">
    <line fill="none" stroke="#FFFFFF" stroke-width="7" stroke-miterlimit="10" stroke-dasharray="12" x1="0.8" y1="198.3" x2="521" y2="323.5"/>
    <line fill="none" stroke="#FFFFFF" stroke-width="7" stroke-miterlimit="10" stroke-dasharray="12" x1="198.3" y1="521" x2="323.5" y2="0.8"/>
    <line fill="none" stroke="#FFFFFF" stroke-width="7" stroke-miterlimit="10" stroke-dasharray="12" x1="33" y1="400.4" x2="488.8" y2="121.4"/>
    <line fill="none" stroke="#FFFFFF" stroke-width="7" stroke-miterlimit="10" stroke-dasharray="12" x1="400.4" y1="488.8" x2="121.4" y2="33"/>
  </g>
  <g id="phone">
    <path id="hand" fill="#49BDC5" stroke="#231F20" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M278.3 229.9l110.5 42.5c2.6 1 5.1 2.4 7.3 4.1 2.9 2.2 7 5.6 10.6 9.3 0.5 0.6 1 1.1 1.5 1.7l33.4 42.7 131.1 175 -189.7-1.3L286 455.4c-9.7-4.9-18.5-11.4-25.8-19.4l-85.8-92.9c-15.6-19.2-18.1-48.8-5-58.7 24-18 43.4 2.3 55.2 18.9l18 31.7c16.4 28.4 43.7 52.9 32.9 63"/>
    <g id="phone_1_">
      <path fill="#F86D00" stroke="#231F20" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M405.8 359l-118.9 73.3c-7.1 4.3-16.3 2.2-20.6-4.9L133.8 212.4c-4.3-7.1-2.2-16.3 4.9-20.6l118.9-73.3c7.1-4.3 16.3-2.2 20.6 4.9l132.4 214.9C415 345.4 412.8 354.6 405.8 359z"/>
      <rect x="206.4" y="166" transform="matrix(0.8514 -0.5246 0.5246 0.8514 -103.3273 183.0031)" fill="#FFFFFF" stroke="#231F20" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="129.7" height="215.8"/>
      <line fill="none" stroke="#C45C16" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="196.7" y1="176.6" x2="217.9" y2="163.5"/>
      <path fill="none" stroke="#C45C16" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M341.1 385.3l-1.6 1c-2.1 1.3-4.9 0.6-6.2-1.5l-1-1.6c-1.3-2.1-0.6-4.9 1.5-6.2l1.6-1c2.1-1.3 4.9-0.6 6.2 1.5l1 1.6C343.8 381.2 343.2 384 341.1 385.3z"/>
    </g>
    <g id="plane-mobile">
      <polygon fill="#74A041" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 331 265.9 295.5 281.1 290.2 295.8 274.2 294.6 245.7 319.9 225.7 193.9 "/>
      <polygon fill="#5A7C2E" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 225.7 193.9 295.5 281.1 290.2 295.8 274.2 294.6 "/>
      <line fill="none" stroke="#000000" stroke-width="3" stroke-linejoin="round" stroke-miterlimit="10" x1="225.7" y1="193.9" x2="289.6" y2="294.8"/>
      <line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="324.5" y1="353.8" x2="307.7" y2="327.4"/>
      <line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.5" y1="319.1" x2="304.2" y2="304.4"/>
      <line fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="303.7" y1="320.1" x2="294.2" y2="305.2"/>
    </g>
    <circle id="phone-circle" opacity="0.7" fill="#F86D00" cx="308.8" cy="282.5" r="32.5"/>
    <path id="thumb" fill="#49BDC5" stroke="#231F20" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M447.4 338c-4.6-5.7-16.4-11.7-22.5-15.8l-83.1-55.3c-13.4-8.9-29.8-7.8-36.7 2.6 -6.9 10.3-1.6 25.9 11.8 34.8 30.7 20.4 45.7 39.7 44.5 57.4 -7.3 32.1-1.9 52.4 32.1 75.1"/>
  </g>
  </g>
  <g id="earth-all">
  <g id="earth"><circle fill="#49BDC5" cx="341.5" cy="206" r="114"/><path fill="#74A041" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M384.1 225.4c12 5.9 9.5 15 21.3 18.6 5.9 1.8 12.3 0 13.8 6.3 1.4 6-9.2 13.7-11.4 21.7 -4.3 15.2-22.1 19.6-35 28.2 -6.6 4.4-15.9 2.7-20.1 9.3 -4.4 6.9-12 11-16.5 10.2 2.8 0.5 17-37 13.1-43.8 -3-5.2-5.9-1.5-12.2-9.2 -4.3-5.3-12.6-16.3-12.6-18.1 0.2-10.8 20.2-16 3.1-24.8 -7.4-3.8-9.7-2.3-15.7-8.7 -6.2-6.7-7.5-9.7-16.6-13.4 -22.6-9-12.9-20.4-18.7-25.5 -0.7-0.6-6.2-0.6-7.8-2.6 -3.1-3.9 0.3-8.9-0.4-13.3 -1.3-8.6-0.5-14.1 2.8-21.4 3.1-6.9 8.9-19.6 12.4-26.2 4.2-7.8 23.1-17.8 42.9-19.9 0.4 1.2 6.6-1.4 5.4-1.5 6.8-1 17.8 14.8 15.5 19.2 -1.9 3.8-13.5 0.7-16.4 3.4 -3.7 3.5-2.2 5.5 1.8 7.8 5.6 3.2 7.3-2.1 11.8-3.6 7.9-2.8 17 0.4 22.7 6.8 6.7 7.5-1.4 4.1-1.8 12.6 -0.3 7.2-10 11.2-12.1 12.9 -3.2 2.8-6.5 0-9.1 2.2 -4.1 3.4 3.2 4.4 0.3 7.7 -2.5 3-6.8 2.7-9 5.5 -2 2.4-2.6 5.6-2.8 8 -1.2 13-3.9 7-10.1 0.5 -11.6-12.2-35.8 13.5-16 21.7 8.7 3.6 0.5-8.9 10.7-3.2 6.2 3.5 1.2 18.3 5.7 23.5 5.4 6.3 22.2-1.2 28.6-0.6 6.2 0.6 7.6 5.3 13.2 4.3C373.2 218.5 377 221.9 384.1 225.4z"/><path fill="#74A041" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M438.6 146.2c0 0-5.6-0.7-6.1 4.8s3 11.9 9 12.5 0 4 0 10.5 -2.1 26 2.7 35.5 11.3 9 11.3 9 -1.6-34.5-3.8-41.8C449.5 169.4 438.6 146.2 438.6 146.2z"/><path fill="#74A041" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M355.5 92c-1.7 0-6.5 5-5 8s13.5 2 17 5 7 7.5 9.5 11.5 7-0.5 6.5-4.5 8-8.6 11-7C394.5 105 365.5 91.9 355.5 92z"/><circle fill="none" stroke="#000000" stroke-width="7" stroke-miterlimit="10" cx="341.5" cy="206" r="114"/></g>
    <g id="earth-lines2"><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="190.5" y1="172" x2="257.5" y2="70.6"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="298" y1="54.5" x2="368" y2="50.5"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="407.8" y1="61.5" x2="503.3" y2="206"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="493.5" y1="253.6" x2="436.3" y2="330.9"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="397" y1="350.8" x2="306.1" y2="356.9"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="264.9" y1="341.2" x2="186.7" y2="215.2"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="212.3" y1="172" x2="359" y2="77.5"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="372.3" y1="110" x2="306.1" y2="300"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="312" y1="330.9" x2="464.9" y2="245.6"/></g>
      <g id="earth-lines1"><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="271.1" y1="335.8" x2="262.3" y2="80.8"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="301.7" y1="63.2" x2="501.4" y2="211"/><line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12" x1="309.3" y1="350.8" x2="496.2" y2="254.8"/></g>
    <g id="people2"><g id="person3"><circle cx="269.4" cy="46.4" r="7"/><polygon points="290.4 77.8 280 82.6 276.1 74.3 269.2 64 266.9 59 280.4 52.7 282.8 57.7 286.5 69.5 "/><rect x="283.5" y="77.3" transform="matrix(0.9063 -0.4226 0.4226 0.9063 -11.125 129.1474)" width="4.4" height="24.8"/><rect x="289.9" y="74.3" transform="matrix(0.9063 -0.4226 0.4226 0.9063 -9.2597 131.5781)" width="4.4" height="24.8"/><path d="M277.4 81.5l-4 1.9 -8.5-18.2c-1.1-2.4-0.1-5.2 2.3-6.3l2-0.9 0 6.1L277.4 81.5z"/><path d="M294.9 73.3l-4 1.9 -8.1-17.5 -4.3-4.1 1.7-0.8c2.4-1.1 5.2-0.1 6.3 2.3L294.9 73.3z"/></g><g id="person2"><circle cx="278.1" cy="369.7" r="7"/><polygon points="285.9 332.8 296.6 336.9 293.4 345.4 290.8 357.6 288.9 362.8 274.9 357.5 276.8 352.3 282.6 341.4 "/><rect x="295.4" y="315.5" transform="matrix(-0.936 -0.3519 0.3519 -0.936 460.8632 739.4913)" width="4.4" height="24.8"/><rect x="288.8" y="313" transform="matrix(-0.936 -0.3519 0.3519 -0.936 448.9135 732.3375)" width="4.4" height="24.8"/><path d="M297.6 339.6l4.1 1.5 -7.1 18.8c-0.9 2.4-3.6 3.7-6.1 2.8l-2.1-0.8 4.3-4.3L297.6 339.6z"/><path d="M279.5 332.8l4.1 1.5 -6.8 18 0.1 5.9 -1.8-0.7c-2.4-0.9-3.7-3.6-2.8-6.1L279.5 332.8z"/></g><g id="person1"><circle cx="514.4" cy="236.4" r="7"/><polygon points="478.8 223.9 476.7 235.2 485.7 236.9 497.5 241 502.9 242 505.6 227.3 500.2 226.3 487.8 225.6 "/><rect x="466.3" y="219" transform="matrix(0.184 -0.9829 0.9829 0.184 154.8077 649.3285)" width="4.4" height="24.8"/><rect x="467.6" y="212.1" transform="matrix(0.184 -0.9829 0.9829 0.184 162.7086 644.9323)" width="4.4" height="24.8"/><path d="M478.5 237.5l-0.8 4.3 19.7 3.7c2.6 0.5 5-1.2 5.5-3.8l0.4-2.2 -5.9 1.5L478.5 237.5z"/><path d="M482.1 218.4l-0.8 4.3 18.9 3.5 5 3.2 0.3-1.9c0.5-2.6-1.2-5-3.8-5.5L482.1 218.4z"/></g></g>
  <g id="people1"><g id="person6"><circle cx="427.3" cy="358.7" r="7"/><polygon points="403.8 329.3 413.7 323.6 418.3 331.5 426.1 341.2 428.8 346 415.9 353.4 413.1 348.7 408.3 337.2 "/><rect x="405.2" y="304.7" transform="matrix(-0.8664 0.4994 -0.4994 -0.8664 918.7119 388.2491)" width="4.4" height="24.8"/><rect x="399.1" y="308.2" transform="matrix(-0.8664 0.4994 -0.4994 -0.8664 909.0329 397.9087)" width="4.4" height="24.8"/><path d="M416.4 324.5l3.8-2.2 10 17.4c1.3 2.3 0.5 5.1-1.7 6.4l-1.9 1.1 -0.6-6L416.4 324.5z"/><path d="M399.7 334.2l3.8-2.2 9.6 16.7 4.7 3.7 -1.6 0.9c-2.3 1.3-5.1 0.5-6.4-1.7L399.7 334.2z"/></g><g id="person5"><circle cx="390.7" cy="37.4" r="7"/><polygon points="386.2 74.8 375.2 71.7 377.6 62.9 379.1 50.6 380.6 45.2 395 49.3 393.5 54.6 388.7 66 "/><rect x="372.7" y="68.4" transform="matrix(0.963 0.2697 -0.2697 0.963 35.6703 -98.1077)" width="4.4" height="24.8"/><rect x="379.5" y="70.3" transform="matrix(0.963 0.2697 -0.2697 0.963 36.4375 -99.8749)" width="4.4" height="24.8"/><path d="M373.9 69.1l-4.2-1.2 5.4-19.3c0.7-2.5 3.3-4 5.8-3.3l2.1 0.6 -3.9 4.6L373.9 69.1z"/><path d="M392.6 74.3l-4.2-1.2 5.2-18.6 -0.6-5.9 1.8 0.5c2.5 0.7 4 3.3 3.3 5.8L392.6 74.3z"/></g><g id="person4"><circle cx="166.9" cy="190.6" r="7"/><polygon points="203.4 200 204.5 188.6 195.4 187.7 183.3 184.6 177.9 184 176.4 198.9 181.9 199.4 194.3 199.1 "/><rect x="210.8" y="179.2" transform="matrix(-9.834996e-02 0.9952 -0.9952 -9.834996e-02 424.6833 -1.5344)" width="4.4" height="24.8"/><rect x="210.1" y="186.3" transform="matrix(-9.834996e-02 0.9952 -0.9952 -9.834996e-02 430.928 6.8946)" width="4.4" height="24.8"/><path d="M202.5 186.5l0.4-4.4 -20-2c-2.6-0.3-4.9 1.6-5.2 4.2l-0.2 2.2 5.7-2L202.5 186.5z"/><path d="M200.6 205.7l0.4-4.4 -19.2-1.9 -5.3-2.7 -0.2 1.9c-0.3 2.6 1.6 4.9 4.2 5.2L200.6 205.7z"/></g></g>
    
  <g id="stars"><g id="star4"><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="101.4" y1="223.5" x2="109.6" y2="261.6"/><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="87.3" y1="236.5" x2="124.3" y2="248.5"/><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="91.3" y1="255.6" x2="120.3" y2="229.5"/></g><g id="star3"><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="148.1" y1="271.1" x2="144.9" y2="299.9"/><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="134.8" y1="277" x2="158.1" y2="294.1"/><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="133.2" y1="291.4" x2="159.7" y2="279.7"/></g><g id="star2"><line fill="none" stroke="#F86D00" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="549.7" y1="112.2" x2="542.7" y2="159"/><line fill="none" stroke="#F86D00" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="527.9" y1="120.9" x2="564.8" y2="150.4"/><line fill="none" stroke="#F86D00" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="524.4" y1="144.3" x2="568.4" y2="127"/></g><g id="star1"><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="516.1" y1="43.1" x2="512.9" y2="71.9"/><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="502.8" y1="49" x2="526.1" y2="66.1"/><line fill="none" stroke="#F86D00" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="501.2" y1="63.4" x2="527.7" y2="51.7"/></g>
  </g></g>
  </g>
<g id="bubbles">
  <path id="bubble-orange" fill="#F86D00" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M169.8 2.5C112.7 2.5 66.4 40.8 66.4 88c0 27.6 15.5 52.2 40.5 67.8v41.7l43.6-25.5c6.3 1 12.8 1.5 19.4 1.5 57.2 0 103.5-38.3 103.5-85.5S227 2.5 169.8 2.5z"/>
  <path id="bubble-black" fill="none" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M336.7 142.5c41.6 0 75.5 27.9 75.5 62.3 0 20.1-11.3 38-29.3 49.4v30.3L351 265.9c-4.6 0.7-9.4 1.1-14.2 1.1 -41.6 0-75.4-27.9-75.4-62.3S295.1 142.5 336.7 142.5z"/>
  <path id="bubble-s1" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M176.9 208c-28.6 0-51.8 19.1-51.8 42.7 0 13.8 7.2 26.1 20.2 33.9v20.8l21.8-12.8c3.1 0.5 6.4 0.8 9.7 0.8 28.6 0 51.8-19.1 51.8-42.7S205.5 208 176.9 208z"/>
  <path id="bubble-s2" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M458.5 102.5c-17.3 0-31.3 11.6-31.3 25.9 0 8.4 4.2 15.8 12.2 20.5v12.6l13.2-7.7c1.9 0.3 3.9 0.5 5.9 0.5 17.3 0 31.3-11.6 31.3-25.9S475.8 102.5 458.5 102.5z"/>
  <path id="bubble-s3" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M351.6 27.5c26.8 0 47.2 18 47.2 40.1 0 13-8.4 24.5-20.4 31.8V119l-19-12c-3 0.5-5.3 0.7-8.4 0.7 -26.8 0-48.2-18-48.2-40.1S324.8 27.5 351.6 27.5z"/>
  <path id="bubble-s4" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M34.8 166.4c18.1 0 32.6 12.1 32.6 27 0 8.7-4 16.5-13 21.5V228L40.8 220c-2 0.3-4 0.5-6.1 0.5 -18.1 0-32.7-12.1-32.7-27S16.7 166.4 34.8 166.4z"/>
  <g id="exclamation">
    <path fill="#49BDC5" stroke="#000000" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" d="M169.7 141.2c-1.9 0-3.7-0.4-5.3-1.1 -1.6-0.7-3-1.7-4.2-2.9 -1.2-1.2-2.1-2.7-2.9-4.3 -0.7-1.6-1.1-3.3-1.1-5.1 0-3.7 1.3-6.9 3.9-9.6 2.6-2.7 5.8-4 9.5-4 3.7 0 6.9 1.3 9.6 4 2.7 2.7 4 5.9 4 9.6 0 1.8-0.4 3.5-1.1 5.1 -0.7 1.6-1.7 3.1-2.9 4.3 -1.2 1.2-2.7 2.2-4.4 2.9C173.3 140.9 171.5 141.2 169.7 141.2zM160.3 103.1l-3.5-75.6h25.7l-3.4 75.6H160.3z"/>
  </g>
  <g id="question">
    <path fill="#F86D00" d="M332.9 221.3c-2.4-2.6-3.6-5.8-3.6-9.6 0-2.2 0.4-4 1.2-5.6 0.8-1.6 1.8-3 2.9-4.2 1.2-1.2 2.4-2.3 3.8-3.3 1.4-0.9 2.6-1.9 3.8-2.8 1.2-0.9 2.1-1.9 2.9-2.8 0.8-1 1.2-2.1 1.2-3.3 0-1.7-0.7-3.1-2-4.4 -1.3-1.2-3.5-1.9-6.5-1.9 -2.8 0-5.3 0.6-7.5 1.9 -2.3 1.2-4.2 2.9-5.9 4.9l-8.8-9.9c2.9-3.4 6.4-6 10.6-7.8 4.1-1.8 8.6-2.7 13.3-2.7 3.5 0 6.6 0.4 9.4 1.3 2.8 0.8 5.2 2 7.2 3.5 2 1.5 3.5 3.3 4.6 5.4 1.1 2.1 1.6 4.4 1.6 7 0 2.7-0.5 5-1.4 6.9 -0.9 1.9-2 3.5-3.4 5 -1.4 1.4-2.8 2.7-4.4 3.8 -1.6 1.1-3 2.2-4.4 3.3 -1.4 1.1-2.5 2.2-3.4 3.3 -0.9 1.2-1.4 2.5-1.4 4 0 0.9 0.2 1.7 0.5 2.6 0.4 0.8 0.8 1.5 1.4 2L332.9 221.3zM338.1 244.7c-2.4 0-4.5-0.9-6.2-2.6s-2.6-3.8-2.6-6.2c0-2.4 0.9-4.5 2.6-6.2s3.8-2.6 6.2-2.6c2.4 0 4.5 0.9 6.2 2.6 1.7 1.7 2.6 3.8 2.6 6.2 0 2.4-0.9 4.5-2.6 6.2C342.6 243.9 340.5 244.7 338.1 244.7z"/>
  </g>
</g>
</svg>
              
            
!

CSS

              
                svg {
  background-color: #FAB67F
}

/* People */

g#blue1,
g#blue2,
g#green1,
g#orange1,
g#orange-background1,
g#orange-background2 {
  animation-fill-mode: backwards;
  transform-origin: 50% 100%;
}


g#blue1 {
  opacity: 0;
  animation: appear .4s ease-in-out,
    scale-up .4s ease-in-out;
  animation-fill-mode: forwards;
}

g#green1 {
  opacity: 0;
  animation: appear .4s ease-in-out .6s,
    scale-up .4s ease-in-out .6s;
  animation-fill-mode: forwards;
}

g#orange1 {
  opacity: 0;
  animation: appear .4s ease-in-out 1.2s,
    scale-up .4s ease-in-out 1.2s;
  animation-fill-mode: forwards;
}

g#blue2 {
  opacity: 0;
  animation: appear .4s ease-in-out 1.8s,
    scale-up .4s ease-in-out 1.8s;
  animation-fill-mode: forwards;
}

g#orange-background1, g#orange-background2 {
  opacity: 0;
  animation: appear .4s ease-in-out 2.2s,
    scale .4s ease-in-out 2.2s;
  animation-fill-mode: forwards;
}

g#people {
  animation: disappear .3s ease-in 6.5s;
  animation-fill-mode: forwards;
}

/* Clouds */

g#clouds {
  opacity: 1;
}

g.clouds1,
g.clouds2,
g.clouds3,
g.clouds4,
g.clouds5,
g.clouds6,
g.clouds7 {
  transform-origin: 50% 50%;
}

g.clouds1 {
  opacity: 0;
  animation: appear .4s ease-in-out 4.6s,
    scale .4s ease-in-out 4.6s,
    scale-plane .4s ease-in-out 8.2s,
    cloud-away-1 .6s ease-in-out 9.6s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

g.clouds2 {
  opacity: 0;
  animation: appear .4s ease-in-out 4.2s,
    scale .4s ease-in-out 4.2s,
    cloud-enlarge .3s ease-in-out 8.2s,
    cloud-away-2 .6s ease-in-out 9.6s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

g.clouds3 {
  opacity: 0;
  animation: appear .4s ease-in-out 3.8s,
    scale .4s ease-in-out 3.6s,
    disappear .4s ease-in-out 7.8s;
  animation-fill-mode: forwards;
}

g.clouds4 {
  opacity: 0;
  animation: appear .4s ease-in-out 3.4s,
    scale .4s ease-in-out 3s,
    disappear .4s ease-in-out 7.4s;
  animation-fill-mode: forwards;
}

g.clouds5,
g.clouds6,
g.clouds7 {
  opacity: 0;
  animation: appear .4s ease-in-out 3s,
    scale .4s ease-in-out 3s,
    disappear .4s ease-in-out 7s;
  animation-fill-mode: forwards;
}

/* Plane */

g#plane {
  opacity: 0;
  transform-origin: 50% 50%;
  animation: appear .4s ease-in-out 5.8s,
    move-plane .4s ease-in-out 5.8s,
    scale-plane .4s ease-in-out 8.2s;
  animation-fill-mode: forwards;
}

g#plane-orange {
  transform: translate(450px, 250px);
  opacity: 0;
  animation: appear .4s ease-in-out 9s;
  animation-fill-mode: forwards;
}

g#plane-blue {
  transform: translate(50px, 50px);
  opacity: 0;
  animation: appear .4s ease-in-out 9.4s;
  animation-fill-mode: forwards;
}

g#planes-all {
  animation: planes-away .5s ease-in 11s;
  animation-fill-mode: forwards;
}

/* Phone */

g#phone-group {
  opacity: 0;
  transform: scale(.8) translate(150px, 20px);
  animation: appear .4s ease-in-out 11.8s,
    disappear .4s ease-in-out 16.4s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

g#phone-lines {
  opacity: 0;
  animation: appear .4s ease-in-out 12.2s,
    scale .4s ease-in-out 12.2s,
    rotate-and-scale 2s ease-in-out 13s,
    scale-and-fade 1.5s ease-in-out 15s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

#phone-circle {
  animation: scale .4s ease-in 13.8s,
    scale-and-fade 1s ease-in-out 15s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

/* Earth */

g#earth {
  opacity: 0;
  animation: appear .4s ease-in-out 16.8s,
    scale .4s ease-in-out 16.8s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

g#person1 {
   opacity: 0;
   animation: appear .3s ease-in-out 17.2s;
   animation-fill-mode: forwards;
}

g#person2 {
   opacity: 0;
   animation: appear .3s ease-in-out 17.5s;
   animation-fill-mode: forwards;
}

g#person3 {
   opacity: 0;
   animation: appear .3s ease-in-out 17.8s;
   animation-fill-mode: forwards;
}

g#person4 {
   opacity: 0;
   animation: appear .3s ease-in-out 18.1s;
   animation-fill-mode: forwards;
}

g#person5 {
   opacity: 0;
   animation: appear .3s ease-in-out 18.4s;
   animation-fill-mode: forwards;
}

g#person6 {
   opacity: 0;
   animation: appear .3s ease-in-out 18.7s;
   animation-fill-mode: forwards;
}

g#star1 {
  opacity: 0;
  animation: appear .2s ease-in-out 17.8s,
    scale .2s ease-in-out 17.8s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

g#star2 {
  opacity: 0;
  animation: appear .2s ease-in-out 18.7s,
    scale .2s ease-in-out 18.7s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

g#star3 {
  opacity: 0;
  animation: appear .2s ease-in-out 19s,
    scale .2s ease-in-out 19s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

g#star4 {
  opacity: 0;
  animation: appear .2s ease-in-out 19.3s,
    scale .2s ease-in-out 19.3s;
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}

g#earth-lines1 {
  opacity: 0;
  animation: appear .2s ease-in-out 19.6s 5,
    disappear .2s ease-in-out 21s;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
}

g#earth-lines2 {
  opacity: 0;
  animation: appear .2s ease-in-out 21s 5,
    disappear .2s ease-in-out 22s;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
}

g#earth-all {
  animation: disappear .4s ease-in-out 22.4s,
    move-up .4s ease-in 22.4s;
  animation-fill-mode: forwards;
}

/* Speech bubbles */

g#bubbles {
  transform: translate(100px, 60px);
}

#bubble-orange {
  opacity: 0;
  animation: appear .3s ease-in-out 23.5s,
    scale-up .3s ease-in-out 23.5s;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

#bubble-black {
  opacity: 0;
  animation: appear .3s ease-in-out 23.9s,
    scale-up .3s ease-in-out 23.9s;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

#question {
  opacity: 0;
  animation: appear .2s ease-in-out 24.2s,
    scale-up .2s ease-in-out 24.2s;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

#exclamation {
  opacity: 0;
  animation: appear .2s ease-in-out 24.5s,
    scale-up .2s ease-in-out 24.5s;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

#bubble-s1 {
  opacity: 0;
  animation: appear .2s ease-in-out 24.2s,
    scale-up .2s ease-in-out 24.2;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

#bubble-s2 {
  opacity: 0;
  animation: appear .2s ease-in-out 24.5s,
    scale-up .2s ease-in-out 24.5;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

#bubble-s3 {
  opacity: 0;
  animation: appear .2s ease-in-out 24.8s,
    scale-up .2s ease-in-out 24.8;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

#bubble-s4 {
  opacity: 0;
  animation: appear .2s ease-in-out 25.1s,
    scale-up .2s ease-in-out 25.1;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
}

@keyframes appear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes disappear {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes scale-up {
   0% { transform: scaleY(1); }
  30% { transform: scaleY(.95); }
  70% { transform: scaleY(1.05); }
  100% { transform: scaleY(1); }
}

@keyframes scale {
  0% { transform: scale(1); }
  30% { transform: scale(.95); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes scale-plane {
  0% { transform: translate(0, 0) scale(1); }
  70% { transform: scale(1.45); }
  100% { transform: translate(0, 100px) scale(1.4); }
}

@keyframes move-plane {
  0% { transform: translate(-200px, 200px); }
  90% { transform: translate(8px, -8px); }
  100% { transform: translate(0, 0); }
}

@keyframes cloud-enlarge {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(260px, 130px) scale(1.7); }
}

@keyframes cloud-away-1 {
  0% { transform: translate(0, 100px) scale(1.4); }
  100% { transform: translate(-200px, 200px) scale(0); }
}

@keyframes cloud-away-2 {
  0% { transform: translate(260px, 130px) scale(1.7); }
  100% { transform: translate(-200px, 200px) scale(0); }
}

@keyframes planes-away {
  0% { transform: translate(0, 0); }
  100% { transform: translate(400px, -400px); }
}

@keyframes rotate-and-scale {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.7) rotate(360deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes scale-and-fade {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(2) rotate(180deg); opacity: 0; }
}

@keyframes move-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-400px); }
}
              
            
!

JS

              
                
              
            
!
999px

Console