Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <button id="startButton">Start me up!</button>
<div class="story">
  <p class="welcome">Once upon a time there was a merman in the sea... </p>
  <p class="text-1">he swam and...</p>
  <p class="options-wrap"><button id="option1">worked hard </button><button id="option2">played hard </button></p>
  <p class="option1-text">so as he turned 29, he deserved a break...</p>
  <p class="option2-text">nop... he worked reaaaally hard...</p>
  <p class="text-2">and he swam in the current, far, far away...</p>
  <p class="text-3">And found a little Mermaid! Where did he go?</p>
  <p class="end-options"><button id="bingo">Copenhagen </button><button id="fail">Stockholm </button></p>
  <p class="bingo-text">Yay! We're going to Copenhagen on the 22nd!<br/></p>
  <p class="fail-text">Dude, what? Think again! Where did he go?</p>
  <p class="finish-text">Happy Birthday!</p>
</div>
<div class="svg-wrapper">
<svg id="scene" xmlns="http://www.w3.org/2000/svg" viewBox="0 300 1200 700">
   <defs>
     <clipPath id="clip-path">
   <ellipse class="circ-in" fill="none" cx="105" cy="720" rx="100" ry="100"/>
     </clipPath>
        <filter id="blurBig">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <filter id="blurSmall">
            <feGaussianBlur stdDeviation="2" />
        </filter>
    </defs>
  <g class="full-scene">
  <linearGradient id="sky_1_" gradientUnits="userSpaceOnUse" x1="2001" y1="289.295" x2="2001" y2="-5">
    <stop offset="0" stop-color="#95c2f1"/>
    <stop offset=".153" stop-color="#8cb9ec"/>
    <stop offset=".408" stop-color="#72a0e0"/>
    <stop offset=".567" stop-color="#5f8dd7"/>
    <stop offset=".994" stop-color="#3c64b0"/>
  </linearGradient>
  <path id="sky" fill="url(#sky_1_)" d="M1-5h4000v294.3H1z"/>
  <linearGradient id="water_1_" gradientUnits="userSpaceOnUse" x1="585.68" y1="1749.636" x2="3414.32" y2="-460.341">
    <stop offset="0" stop-color="#012345"/>
    <stop offset=".097" stop-color="#023456"/>
    <stop offset=".172" stop-color="#0e3a5c"/>
    <stop offset=".177" stop-color="#113c5e"/>
    <stop offset=".207" stop-color="#234567"/>
    <stop offset=".215" stop-color="#284a6c"/>
    <stop offset=".237" stop-color="#345678"/>
    <stop offset=".261" stop-color="#2b4d6f"/>
    <stop offset=".294" stop-color="#234567"/>
    <stop offset=".404" stop-color="#123456"/>
    <stop offset=".483" stop-color="#123456"/>
    <stop offset=".581" stop-color="#234567"/>
    <stop offset=".635" stop-color="#345678"/>
    <stop offset=".675" stop-color="#234567"/>
    <stop offset=".698" stop-color="#1e4062"/>
    <stop offset=".814" stop-color="#092b4d"/>
    <stop offset=".89" stop-color="#012345"/>
    <stop offset=".946" stop-color="#0d2f51"/>
    <stop offset="1" stop-color="#123456"/>
  </linearGradient>
  <path id="water" fill="url(#water_1_)" d="M0 289.3h4000V1000H0z"/>
  <g id="bank-far" stroke="#000">
    <path id="XMLID_45_" d="M2547.3 855.4c.9-.5 1.8-1.2 2.8-1.5.5-.1 1.1-.3 1.6-.4l1.5-.6c.2-.3.4-.5.6-.8.2-.1.5-.4.5-.4.5-.6 1.6-1.3 2.3-1.8 1.1-.7 2.4-1.1 3.8-1.3 2.5-.4 6-1.2 8.3-.1 1 .5.2 1.4-.3 2-.7.7-2.3 1.6-2.7 2.4 2.4.4 4.8.5 7.1 1.3.8.3 1.6.6 2.2 1 .6.4.8.8 1.5.4s1.3-1.1 2-1.6c.9-.7 1.9-1.5 3.2-1.8l-.5.1c1-.3 2.2-.8 3.3-.3 1.5.7 0 1.7-.5 2.5-.2.4-.2.8-.4 1.2-.5 1.2-1 2.6-.9 3.8 0 .8.3 2.1.7 2.6.5.7 2.6 2.6 1.4 3.2-.3.2 0 .1-.4.1-2.2.1-5-.6-6.4-1.8-.6-.5-1-1.3-1.9-.8-.9.5-1.6.9-2.8 1.1-.7.2-1.3.6-2 .8-1.3.4-2.3.6-3.9.6-.8 0-1.8.1-2.6.2-.2 1.1.3 2.2.3 3.4 0 .2 0 .4-.2.5-.2.2-.6.2-1 .2-1.4-.1-2.2-.7-3.2-1.4-.5-.4-.9-.7-1.2-1.2-.8-.9-1.5-1.3-3-1.4-3-.3-5.3-.7-7.5-1.7-1.5-1-2.9-2.3-3.1-3.8 0-.2-.3-.9-.3-1.1.2-1.5.5-2.9 1.7-3.6z"/>
    <path id="XMLID_42_" d="M2578.2 835.1c.9-.5 1.8-1.2 2.8-1.5.5-.1 1.1-.3 1.6-.4l1.5-.6c.2-.3.4-.5.6-.8.2-.1.5-.4.5-.4.5-.6 1.6-1.3 2.3-1.8 1.1-.7 2.4-1.1 3.8-1.3 2.5-.4 6-1.2 8.3-.1 1 .5.2 1.4-.3 2-.7.7-2.3 1.6-2.7 2.4 2.4.4 4.8.5 7.1 1.3.8.3 1.6.6 2.2 1 .6.4.8.8 1.5.4s1.3-1.1 2-1.6c.9-.7 1.9-1.5 3.2-1.8l-.5.1c1-.3 2.2-.8 3.3-.3 1.5.7 0 1.7-.5 2.5-.2.4-.2.8-.4 1.2-.5 1.2-1 2.6-.9 3.8 0 .8.3 2.1.7 2.6.5.7 2.6 2.6 1.4 3.2-.3.2 0 .1-.4.1-2.2.1-5-.6-6.4-1.8-.6-.5-1-1.3-1.9-.8-.9.5-1.6.9-2.8 1.1-.7.2-1.3.6-2 .8-1.3.4-2.3.6-3.9.6-.8 0-1.8.1-2.6.2-.2 1.1.3 2.2.3 3.4 0 .2 0 .4-.2.5-.2.2-.6.2-1 .2-1.4-.1-2.2-.7-3.2-1.4-.5-.4-.9-.7-1.2-1.2-.8-.9-1.5-1.3-3-1.4-3-.3-5.3-.7-7.5-1.7-1.5-1-2.9-2.3-3.1-3.8 0-.2-.3-.9-.3-1.1.2-1.5.4-2.9 1.7-3.6z"/>
    <path id="XMLID_18_" d="M2594 855.4c.9-.5 1.8-1.2 2.8-1.5.5-.1 1.1-.3 1.6-.4l1.5-.6c.2-.3.4-.5.6-.8.2-.1.5-.4.5-.4.5-.6 1.6-1.3 2.3-1.8 1.1-.7 2.4-1.1 3.8-1.3 2.5-.4 6-1.2 8.3-.1 1 .5.2 1.4-.3 2-.7.7-2.3 1.6-2.7 2.4 2.4.4 4.8.5 7.1 1.3.8.3 1.6.6 2.2 1 .6.4.8.8 1.5.4s1.3-1.1 2-1.6c.9-.7 1.9-1.5 3.2-1.8l-.5.1c1-.3 2.2-.8 3.3-.3 1.5.7 0 1.7-.5 2.5-.2.4-.2.8-.4 1.2-.5 1.2-1 2.6-.9 3.8 0 .8.3 2.1.7 2.6.5.7 2.6 2.6 1.4 3.2-.3.2 0 .1-.4.1-2.2.1-5-.6-6.4-1.8-.6-.5-1-1.3-1.9-.8-.9.5-1.6.9-2.8 1.1-.7.2-1.3.6-2 .8-1.3.4-2.3.6-3.9.6-.8 0-1.8.1-2.6.2-.2 1.1.3 2.2.3 3.4 0 .2 0 .4-.2.5-.2.2-.6.2-1 .2-1.4-.1-2.2-.7-3.2-1.4-.5-.4-.9-.7-1.2-1.2-.8-.9-1.5-1.3-3-1.4-3-.3-5.3-.7-7.5-1.7-1.5-1-2.9-2.3-3.1-3.8 0-.2-.3-.9-.3-1.1.2-1.5.4-2.9 1.7-3.6z"/>
    <path id="XMLID_16_" d="M2626.2 838.9c.9-.5 1.8-1.2 2.8-1.5.5-.1 1.1-.3 1.6-.4l1.5-.6c.2-.3.4-.5.6-.8.2-.1.5-.4.5-.4.5-.6 1.6-1.3 2.3-1.8 1.1-.7 2.4-1.1 3.8-1.3 2.5-.4 6-1.2 8.3-.1 1 .5.2 1.4-.3 2-.7.7-2.3 1.6-2.7 2.4 2.4.4 4.8.5 7.1 1.3.8.3 1.6.6 2.2 1 .6.4.8.8 1.5.4s1.3-1.1 2-1.6c.9-.7 1.9-1.5 3.2-1.8l-.5.1c1-.3 2.2-.8 3.3-.3 1.5.7 0 1.7-.5 2.5-.2.4-.2.8-.4 1.2-.5 1.2-1 2.6-.9 3.8 0 .8.3 2.1.7 2.6.5.7 2.6 2.6 1.4 3.2-.3.2 0 .1-.4.1-2.2.1-5-.6-6.4-1.8-.6-.5-1-1.3-1.9-.8-.9.5-1.6.9-2.8 1.1-.7.2-1.3.6-2 .8-1.3.4-2.3.6-3.9.6-.8 0-1.8.1-2.6.2-.2 1.1.3 2.2.3 3.4 0 .2 0 .4-.2.5-.2.2-.6.2-1 .2-1.4-.1-2.2-.7-3.2-1.4-.5-.4-.9-.7-1.2-1.2-.8-.9-1.5-1.3-3-1.4-3-.3-5.3-.7-7.5-1.7-1.5-1-2.9-2.3-3.1-3.8 0-.2-.3-.9-.3-1.1.2-1.5.5-2.9 1.7-3.6z"/>
  </g>
  <g id="algae-far_1_">
    <g id="algae_4_">
      <path id="XMLID_114_" d="M457.8 975.1s27-113.7-5.1-197.4c-13.7-35-17.8-74.6-11.7-112.8 3-18.1 7.3-35.8 12.9-52.9" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_113_" d="M433.9 559.3c0 13.9 20.4 54.3 20.4 54.3s20.3-40.4 20.3-54.3c.5-13.9-8.2-25.8-19.4-26.4-11.2-.7-20.8 10.1-21.3 24.1v2.3z" fill="#64ea87"/>
      <path id="XMLID_109_" d="M400.2 636.4c6.1 11.7 41 31.9 41 31.9s-.6-47.6-6.8-59.3c-6.1-11.7-18.8-15-28.2-7.4-9.4 7.6-12.1 23.3-6 35v-.2z" fill="#64ea87"/>
      <path id="XMLID_108_" d="M401.8 768.3c10 6.3 48.3 2 48.3 2s-19.9-40.8-30-47c-9.9-6.6-22.2-2-27.6 10.2-5.3 12.3-1.6 27.6 8.3 34.2.3.2.6.4 1 .6z" fill="#64ea87"/>
      <path id="XMLID_107_" d="M420.8 867.8c8.9 8.3 47.4 12 47.4 12s-14.1-44.1-23.1-52.6c-9.3-7.8-22-4.8-28.3 6.8-6 10.9-4.3 25.6 4 33.8z" fill="#64ea87"/>
      <path id="XMLID_105_" d="M483.9 671c-8.1 9.7-45.6 19.8-45.6 19.8s9.2-46.2 17.3-55.9c8.1-9.7 20.9-9.5 28.8.5 7.8 10 7.6 25.9-.5 35.6z" fill="#64ea87"/>
      <path id="XMLID_104_" d="M505.4 787.7c-10.1 6.3-48.3 1.9-48.3 1.9s20-40.7 30-47c10-6.3 22.3-1.3 27.3 11.1 5 12.6 1 27.7-9 34z" fill="#64ea87"/>
      <path id="XMLID_103_" d="M513.4 904.7c-8.9 8.3-47.4 12-47.4 12s14.1-44.1 23.1-52.6c9-8.3 21.8-5.9 28.5 5.3 6.7 11.2 4.8 27-4.2 35.3z" fill="#64ea87"/>
    </g>
    <g id="algae_6_">
      <path id="XMLID_92_" d="M1592.3 977.7s27-113.7-5.1-197.4c-13.7-35-17.8-74.6-11.7-112.8 3-18.1 7.3-35.8 12.9-52.9" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_91_" d="M1568.3 561.8c0 13.9 20.4 54.3 20.4 54.3s20.3-40.4 20.3-54.3c.5-13.9-8.2-25.8-19.4-26.4-11.2-.7-20.8 10.1-21.3 24.1v2.3z" fill="#64ea87"/>
      <path id="XMLID_90_" d="M1534.7 639c6.1 11.7 41 31.9 41 31.9s-.6-47.6-6.8-59.3c-6.1-11.7-18.8-15-28.2-7.4-9.4 7.6-12.1 23.3-6 35v-.2z" fill="#64ea87"/>
      <path id="XMLID_89_" d="M1536.2 770.9c10 6.3 48.3 2 48.3 2s-19.9-40.8-30-47c-9.9-6.6-22.2-2-27.6 10.2-5.3 12.3-1.6 27.6 8.3 34.2.3.2.7.4 1 .6z" fill="#64ea87"/>
      <path id="XMLID_88_" d="M1555.3 870.4c8.9 8.3 47.4 12 47.4 12s-14.1-44.1-23.1-52.6c-9.3-7.8-22-4.8-28.3 6.8-6.1 10.8-4.3 25.6 4 33.8z" fill="#64ea87"/>
      <path id="XMLID_87_" d="M1618.4 673.6c-8.1 9.7-45.6 19.8-45.6 19.8s9.2-46.2 17.3-55.9c8.1-9.7 20.9-9.5 28.8.5 7.7 9.9 7.5 25.9-.5 35.6z" fill="#64ea87"/>
      <path id="XMLID_86_" d="M1639.8 790.3c-10.1 6.3-48.3 1.9-48.3 1.9s20-40.7 30-47c10-6.3 22.3-1.3 27.3 11.1 5.1 12.5 1.1 27.7-9 34z" fill="#64ea87"/>
      <path id="XMLID_85_" d="M1647.8 907.3c-8.9 8.3-47.4 12-47.4 12s14.1-44.1 23.1-52.6c9-8.3 21.8-5.9 28.5 5.3 6.8 11.2 4.9 27-4.2 35.3z" fill="#64ea87"/>
    </g>
    <g id="algae_5_">
      <path id="XMLID_101_" d="M2969.3 983s27-113.7-5.1-197.4c-13.7-35-17.8-74.6-11.7-112.8 3-18.1 7.3-35.8 12.9-52.9" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_100_" d="M2945.4 567.2c0 13.9 20.4 54.3 20.4 54.3s20.3-40.4 20.3-54.3c.5-13.9-8.2-25.8-19.4-26.4-11.2-.7-20.8 10.1-21.3 24.1v2.3z" fill="#64ea87"/>
      <path id="XMLID_99_" d="M2911.8 644.4c6.1 11.7 41 31.9 41 31.9s-.6-47.6-6.8-59.3c-6.1-11.7-18.8-15-28.2-7.4-9.4 7.6-12.1 23.3-6 35v-.2z" fill="#64ea87"/>
      <path id="XMLID_98_" d="M2913.3 776.3c10 6.3 48.3 2 48.3 2s-19.9-40.8-30-47c-9.9-6.6-22.2-2-27.6 10.2-5.3 12.3-1.6 27.6 8.3 34.2.3.2.7.4 1 .6z" fill="#64ea87"/>
      <path id="XMLID_97_" d="M2932.4 875.8c8.9 8.3 47.4 12 47.4 12s-14.1-44.1-23.1-52.6c-9.3-7.8-22-4.8-28.3 6.8-6.1 10.8-4.3 25.5 4 33.8z" fill="#64ea87"/>
      <path id="XMLID_96_" d="M2995.5 679c-8.1 9.7-45.6 19.8-45.6 19.8s9.2-46.2 17.3-55.9c8.1-9.7 20.9-9.5 28.8.5 7.7 9.9 7.5 25.9-.5 35.6z" fill="#64ea87"/>
      <path id="XMLID_95_" d="M3016.9 795.7c-10.1 6.3-48.3 1.9-48.3 1.9s20-40.7 30-47c10-6.3 22.3-1.3 27.3 11.1 5.1 12.5 1.1 27.7-9 34z" fill="#64ea87"/>
      <path id="XMLID_94_" d="M3024.9 912.6c-8.9 8.3-47.4 12-47.4 12s14.1-44.1 23.1-52.6c9-8.3 21.8-5.9 28.5 5.3 6.8 11.3 4.9 27.1-4.2 35.3z" fill="#64ea87"/>
    </g>
    <g id="algae_12_">
      <path id="XMLID_128_" d="M1058.9 1165.1s41.5-123.8-7.8-215c-21-38.2-27.3-81.3-18-122.9 4.6-19.7 11.2-39 19.8-57.6" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_126_" d="M1022.1 712.3c0 15.1 31.3 59.2 31.3 59.2s31.3-44 31.3-59.2c.8-15.2-12.5-28.1-29.8-28.8s-31.9 11-32.8 26.2v2.6z" fill="#eac1c4"/>
      <path id="XMLID_125_" d="M970.4 796.4c9.4 12.7 62.9 34.7 62.9 34.7s-1-51.8-10.4-64.6c-9.4-12.7-28.9-16.3-43.4-8.1-14.5 8.3-18.6 25.3-9.2 38.1v-.1z" fill="#eac1c4"/>
      <path id="XMLID_124_" d="M972.7 939.9c15.4 6.8 74.2 2.2 74.2 2.2s-30.6-44.4-46.1-51.2c-15.2-7.2-34.2-2.2-42.3 11.2-8.2 13.4-2.5 30 12.7 37.2l1.5.6z" fill="#eac1c4"/>
      <path id="XMLID_119_" d="M1099 834c-12.4 10.6-70.1 21.5-70.1 21.5s14.2-50.3 26.5-60.9c12.4-10.6 32.2-10.3 44.2.6 12.1 10.9 11.8 28.3-.6 38.8z" fill="#eac1c4"/>
      <path id="XMLID_117_" d="M1132 961.1c-15.5 6.8-74.3 2.1-74.3 2.1s30.7-44.3 46.1-51.1c15.4-6.8 34.2-1.4 42 12.1 7.8 13.5 1.6 30.1-13.8 36.9z" fill="#eac1c4"/>
    </g>
    <g id="algae_11_">
      <path id="XMLID_115_" d="M2424.6 1127.6s41.5-123.8-7.8-215c-21-38.2-27.3-81.3-18-122.9 4.6-19.7 11.2-39 19.8-57.6" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_102_" d="M2387.9 674.8c0 15.1 31.3 59.2 31.3 59.2s31.3-44 31.3-59.2c.8-15.2-12.5-28.1-29.8-28.8-17.3-.7-31.9 11-32.8 26.2-.1.9-.1 1.7 0 2.6z" fill="#eac1c4"/>
      <path id="XMLID_93_" d="M2336.2 758.8c9.4 12.7 62.9 34.7 62.9 34.7s-1-51.8-10.4-64.6c-9.4-12.7-28.9-16.3-43.4-8.1-14.5 8.3-18.6 25.3-9.2 38.1v-.1z" fill="#eac1c4"/>
      <path id="XMLID_84_" d="M2338.5 902.4c15.4 6.8 74.2 2.2 74.2 2.2s-30.6-44.4-46.1-51.2c-15.2-7.2-34.2-2.2-42.3 11.2-8.2 13.4-2.5 30 12.7 37.2l1.5.6z" fill="#eac1c4"/>
      <path id="XMLID_66_" d="M2464.8 796.5c-12.4 10.6-70.1 21.5-70.1 21.5s14.2-50.3 26.5-60.9c12.4-10.6 32.2-10.3 44.2.6s11.8 28.2-.6 38.8z" fill="#eac1c4"/>
      <path id="XMLID_43_" d="M2497.7 923.6c-15.5 6.8-74.3 2.1-74.3 2.1s30.7-44.3 46.1-51.1c15.4-6.8 34.2-1.4 42 12.1 7.8 13.5 1.6 30-13.8 36.9z" fill="#eac1c4"/>
    </g>
  </g>
  <linearGradient id="floor_1_" gradientUnits="userSpaceOnUse" x1="988.566" y1="978.995" x2="988.566" y2="972.874" gradientTransform="matrix(2.0236 0 0 8.1777 0 -7005.967)">
    <stop offset="0" stop-color="#297077"/>
    <stop offset=".197" stop-color="#10736a"/>
    <stop offset="1" stop-color="#123456"/>
  </linearGradient>
  <path id="floor" fill="url(#floor_1_)" d="M0 949.9h4001v50.1H0z"/>
  <g id="bank3" stroke="#000">
    <path id="XMLID_55_" d="M2313.5 575.1c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-4-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.1-3.4 1.8-4.4z"/>
    <path id="XMLID_53_" d="M2275.8 516.3c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-3.9-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.1-3.4 1.8-4.4z"/>
    <path id="XMLID_51_" d="M2296.8 543.6c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-3.9-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.2-3.4 1.8-4.4z"/>
    <path id="XMLID_49_" d="M2339.8 521.4c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-3.9-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.2-3.5 1.8-4.4z"/>
    <path id="XMLID_47_" d="M2318.3 495.6c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-3.9-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.2-3.4 1.8-4.4z"/>
    <path id="XMLID_2_" d="M2353.8 553.6c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-3.9-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.2-3.4 1.8-4.4z"/>
    <path id="XMLID_57_" d="M2377.3 495.7c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-3.9-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.2-3.4 1.8-4.4z"/>
  </g>
  <g id="algae-mid">
    <g id="algae_10_">
      <path id="XMLID_41_" d="M371.1 955s14.2-59.8-2.7-103.8c-7.2-18.4-9.3-39.2-6.2-59.3 1.6-9.5 3.8-18.8 6.8-27.8" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_27_" d="M358.6 736.4c0 7.3 10.7 28.6 10.7 28.6s10.7-21.3 10.7-28.6c.3-7.3-4.3-13.5-10.2-13.9s-10.9 5.3-11.2 12.6c-.1.5-.1.9 0 1.3z" fill="#64ea87"/>
      <path id="XMLID_26_" d="M340.9 777c3.2 6.1 21.5 16.8 21.5 16.8s-.3-25-3.6-31.2c-3.2-6.2-9.9-7.9-14.8-3.9-5 4-6.4 12.2-3.1 18.3z" fill="#64ea87"/>
      <path id="XMLID_25_" d="M341.7 846.3c5.3 3.3 25.4 1 25.4 1s-10.5-21.4-15.8-24.7c-5.2-3.5-11.7-1.1-14.5 5.4-2.8 6.4-.9 14.5 4.3 18l.6.3z" fill="#64ea87"/>
      <path id="XMLID_22_" d="M351.7 898.6c4.7 4.4 24.9 6.3 24.9 6.3s-7.4-23.2-12.2-27.7c-4.9-4.1-11.6-2.5-14.9 3.5-3.1 5.9-2.2 13.6 2.2 17.9z" fill="#64ea87"/>
      <path id="XMLID_21_" d="M384.9 795.2c-4.2 5.1-24 10.4-24 10.4s4.8-24.3 9.1-29.4c4.2-5.1 11-5 15.1.3 4.1 5.2 4 13.6-.2 18.7z" fill="#64ea87"/>
      <path id="XMLID_20_" d="M396.1 856.5c-5.3 3.3-25.4 1-25.4 1s10.5-21.4 15.8-24.7c5.3-3.3 11.7-.7 14.4 5.9 2.6 6.5.5 14.5-4.8 17.8z" fill="#64ea87"/>
      <path id="XMLID_4_" d="M400.3 918c-4.7 4.4-24.9 6.3-24.9 6.3s7.4-23.2 12.2-27.6c4.7-4.4 11.4-3.1 15 2.8 3.5 5.8 2.5 14.1-2.3 18.5z" fill="#64ea87"/>
    </g>
    <g id="algae_9_">
      <path id="XMLID_65_" d="M1043.1 954.5s14.2-49.5-2.7-85.9c-7.2-15.2-9.3-32.5-6.2-49.1 1.6-7.9 3.8-15.6 6.8-23" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_64_" d="M1030.5 773.6c0 6 10.7 23.6 10.7 23.6s10.7-17.6 10.7-23.6c.3-6.1-4.3-11.2-10.2-11.5-5.9-.3-10.9 4.4-11.2 10.5v1z" fill="#64ea87"/>
      <path id="XMLID_63_" d="M1012.9 807.2c3.2 5.1 21.5 13.9 21.5 13.9s-.3-20.7-3.6-25.8c-3.2-5.1-9.9-6.5-14.8-3.2-5 3.3-6.4 10.1-3.1 15.1z" fill="#64ea87"/>
      <path id="XMLID_62_" d="M1013.6 864.6c5.3 2.7 25.4.9 25.4.9s-10.5-17.7-15.8-20.5c-5.2-2.9-11.7-.9-14.5 4.5-2.8 5.3-.9 12 4.3 14.9.3 0 .5.1.6.2z" fill="#64ea87"/>
      <path id="XMLID_61_" d="M1023.7 907.9c4.7 3.6 24.9 5.2 24.9 5.2s-7.4-19.2-12.2-22.9c-4.9-3.4-11.6-2.1-14.9 2.9-3.1 4.8-2.2 11.2 2.2 14.8z" fill="#64ea87"/>
      <path id="XMLID_60_" d="M1056.8 822.3c-4.2 4.2-24 8.6-24 8.6s4.8-20.1 9.1-24.3c4.2-4.2 11-4.1 15.1.2 4.2 4.3 4.1 11.2-.2 15.5z" fill="#64ea87"/>
      <path id="XMLID_59_" d="M1068.1 873c-5.3 2.7-25.4.8-25.4.8s10.5-17.7 15.8-20.4c5.3-2.7 11.7-.6 14.4 4.8 2.6 5.5.5 12.1-4.8 14.8z" fill="#64ea87"/>
      <path id="XMLID_58_" d="M1072.3 923.9c-4.7 3.6-24.9 5.2-24.9 5.2s7.4-19.2 12.2-22.9c4.7-3.6 11.4-2.6 15 2.3 3.5 4.9 2.5 11.8-2.3 15.4z" fill="#64ea87"/>
    </g>
    <g id="algae_8_">
      <path id="XMLID_74_" d="M2106.1 957.8s14.2-59.8-2.7-103.8c-7.2-18.4-9.3-39.2-6.2-59.3 1.6-9.5 3.8-18.8 6.8-27.8" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_73_" d="M2093.5 739.3c0 7.3 10.7 28.6 10.7 28.6s10.7-21.3 10.7-28.6c.3-7.3-4.3-13.5-10.2-13.9-5.9-.3-10.9 5.3-11.2 12.6v1.3z" fill="#64ea87"/>
      <path id="XMLID_72_" d="M2075.8 779.8c3.2 6.1 21.5 16.8 21.5 16.8s-.3-25-3.6-31.2c-3.2-6.2-9.9-7.9-14.8-3.9s-6.3 12.3-3.1 18.3z" fill="#64ea87"/>
      <path id="XMLID_71_" d="M2076.6 849.1c5.3 3.3 25.4 1 25.4 1s-10.5-21.4-15.8-24.7c-5.2-3.5-11.7-1.1-14.5 5.4-2.8 6.4-.9 14.5 4.3 18 .3.1.5.2.6.3z" fill="#64ea87"/>
      <path id="XMLID_70_" d="M2086.7 901.5c4.7 4.4 24.9 6.3 24.9 6.3s-7.4-23.2-12.2-27.7c-4.9-4.1-11.6-2.5-14.9 3.5-3.1 5.8-2.2 13.5 2.2 17.9z" fill="#64ea87"/>
      <path id="XMLID_69_" d="M2119.8 798c-4.2 5.1-24 10.4-24 10.4s4.8-24.3 9.1-29.4c4.2-5.1 11-5 15.1.3 4.2 5.2 4.1 13.6-.2 18.7z" fill="#64ea87"/>
      <path id="XMLID_68_" d="M2131.1 859.4c-5.3 3.3-25.4 1-25.4 1s10.5-21.4 15.8-24.7c5.3-3.3 11.7-.7 14.4 5.9 2.6 6.5.5 14.5-4.8 17.8z" fill="#64ea87"/>
      <path id="XMLID_67_" d="M2135.3 920.8c-4.7 4.4-24.9 6.3-24.9 6.3s7.4-23.2 12.2-27.6c4.7-4.4 11.4-3.1 15 2.8 3.5 5.9 2.5 14.2-2.3 18.5z" fill="#64ea87"/>
    </g>
    <g id="algae_7_">
      <path id="XMLID_83_" d="M3316.6 958.2s14.2-59.8-2.7-103.8c-7.2-18.4-9.3-39.2-6.2-59.3 1.6-9.5 3.8-18.8 6.8-27.8" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_82_" d="M3304 739.7c0 7.3 10.7 28.6 10.7 28.6s10.7-21.3 10.7-28.6c.3-7.3-4.3-13.5-10.2-13.9s-10.9 5.3-11.2 12.6v1.3z" fill="#64ea87"/>
      <path id="XMLID_81_" d="M3286.4 780.2c3.2 6.1 21.5 16.8 21.5 16.8s-.3-25-3.6-31.2c-3.2-6.2-9.9-7.9-14.8-3.9-5 4-6.4 12.3-3.1 18.3z" fill="#64ea87"/>
      <path id="XMLID_80_" d="M3287.1 849.5c5.3 3.3 25.4 1 25.4 1s-10.5-21.4-15.8-24.7c-5.2-3.5-11.7-1.1-14.5 5.4-2.8 6.4-.9 14.5 4.3 18 .3.1.5.2.6.3z" fill="#64ea87"/>
      <path id="XMLID_79_" d="M3297.2 901.9c4.7 4.4 24.9 6.3 24.9 6.3s-7.4-23.2-12.2-27.7c-4.9-4.1-11.6-2.5-14.9 3.5-3.1 5.8-2.2 13.5 2.2 17.9z" fill="#64ea87"/>
      <path id="XMLID_78_" d="M3330.3 798.4c-4.2 5.1-24 10.4-24 10.4s4.8-24.3 9.1-29.4c4.2-5.1 11-5 15.1.3 4.2 5.2 4.1 13.6-.2 18.7z" fill="#64ea87"/>
      <path id="XMLID_77_" d="M3341.6 859.7c-5.3 3.3-25.4 1-25.4 1s10.5-21.4 15.8-24.7c5.3-3.3 11.7-.7 14.4 5.9 2.6 6.6.5 14.5-4.8 17.8z" fill="#64ea87"/>
      <path id="XMLID_76_" d="M3345.8 921.2c-4.7 4.4-24.9 6.3-24.9 6.3s7.4-23.2 12.2-27.6c4.7-4.4 11.4-3.1 15 2.8 3.5 5.9 2.5 14.2-2.3 18.5z" fill="#64ea87"/>
    </g>
  </g>
  <g id="bank1" stroke="#000">
    <path id="XMLID_3_" d="M1251.6 593.6c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-3.9-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.1-1.6.2-3.4 1.8-4.4z"/>
    <path id="XMLID_6_" d="M1292.8 566.3c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-4-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.1-3.4 1.8-4.4z"/>
    <path id="XMLID_8_" d="M1313.8 593.6c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-4-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.2-3.4 1.8-4.4z"/>
    <path id="XMLID_11_" d="M1356.8 571.4c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-4-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.2-3.5 1.8-4.4z"/>
    <path id="XMLID_13_" d="M1335.3 545.6c1.2-.7 2.4-1.6 3.8-2.1.7-.2 1.5-.4 2.2-.6.7-.3 1.3-.6 2-.8.2-.4.6-.7.8-1.1.3-.2.7-.6.7-.6.7-.8 2.1-1.8 3.1-2.4 1.5-.9 3.2-1.5 5-1.8 3.3-.5 8-1.6 11.1-.1 1.3.7.2 1.9-.5 2.6-1 1-3 2.1-3.6 3.2 3.2.6 6.4.7 9.5 1.7 1.1.3 2.1.8 3 1.3.8.5 1.1 1.1 2 .6 1-.5 1.8-1.5 2.6-2.2 1.2-1 2.5-2.1 4.3-2.5l-.6.1c1.4-.4 2.9-1.1 4.4-.5 2 .9 0 2.3-.6 3.3-.3.5-.3 1.1-.5 1.6-.7 1.7-1.3 3.5-1.2 5.1 0 1.1.4 2.8.9 3.6.6.9 3.5 3.5 1.9 4.3-.4.2 0 .1-.5.2-2.9.2-6.7-.8-8.5-2.4-.8-.7-1.3-1.8-2.6-1-1.2.7-2.1 1.2-3.7 1.5-.9.3-1.7.8-2.7 1.1-1.7.6-3.1.8-5.1.9-1.1 0-2.4.1-3.5.2-.2 1.5.4 3 .4 4.5 0 .2 0 .5-.2.7-.3.3-.8.3-1.3.3-1.9-.1-3-1-4.3-1.9-.7-.5-1.2-1-1.6-1.6-1.1-1.2-2-1.7-4-1.9-4-.5-7-1-10-2.3-2-1.4-3.8-3.1-4.2-5.1 0-.3-.3-1.2-.3-1.5-.2-1.6.2-3.4 1.8-4.4z"/>
  </g>
  <g id="mermen-wrap">
  <g id="mermen">
    <g id="swimming">
      <path id="swimming-body" d="M73.7 664.1l15.6 12.7c1 1 2.2 1.4 3.4 1.2l24-.7c2.6 0 4.8-2.4 4.6-5-.2-2.6-1.9-4.8-4.6-4.8l-22.1.7-21.4-20.9c-1.4-1.4-33.9-14.9-41.6-22.8-3.8-3.8-13.9-4.6-18.3-1.2l-30.1 26.2-18.2-30.6c13-6.3 22.8-18.5 25.2-33.9 1-6.3.7-12.5-1-18.3-15.1 5.3-27.2 18.8-29.8 35.8-.7 3.8-.7 7.7-.2 11.5-8.2-11.1-21.2-18-36.1-18.3-6.5 0-12.5 1.2-18 3.6 7.5 14.2 22.6 24 39.9 24.3 4.6 0 9.1-.7 13.2-1.9l13.5 41.8c1.4 4.3 6.5 6.3 10.6 4.1L23.4 644s30.8 21.4 32.2 21.4"/>
      <circle id="swimming-head" cx="94.4" cy="643.4" r="11.8"/>
    </g>
    <g id="iddle">
      <path id="iddle-body" d="M158.1 714.6c-5.8-16.1-23.6-24.3-39.4-18.5-2.4 1.2-5.3 1.7-8.2 1.7-5.5 0-10.8-2.4-14.4-6s-6-8.9-6-14.4c0-4.1 1.2-7.9 3.4-11.3l35.8 10.1c2.4.7 5-.7 5.8-3.1.7-2.4-.7-5-3.1-5.8l-62.8-17.8c-3.1-1-6.7-.5-9.4 2.2l-30.1 28.9c-1.9 1.7-1.9 4.6-.2 6.5 1.7 1.9 4.6 1.9 6.5.2l27.2-26.2c-1.7 5-2.6 10.6-2.6 16.4 0 13.7 5.5 26.2 14.7 35.3 9.1 9.1 22.1 14.4 35.3 10.8 4.1-1.2 8.4-4.1 12.5-5.8 8.9-3.1 18.5 1.4 21.6 10.1 2.4 6.5.5 13.7-4.3 18.3-1.4 1.2-7.9 6.3-12 9.1-8.2-11.1-21.6-18-36.5-17.6-6 .2-12 1.7-17.1 4.1 7.9 13.2 22.6 22.1 39.2 21.4 3.6-.2 7.2-.7 10.6-1.7-8.7 9.6-13 23.3-10.3 37 1.2 6 3.4 11.5 6.7 16.4 12-9.6 18.5-25.5 15.4-41.8-.7-4.3-2.4-8.4-4.3-12.3 5-3.1 11.3-7.7 14.2-9.6 10.8-8.7 16.9-22.9 11.8-36.6z"/>
      <circle id="iddle-head" cx="88.1" cy="639.5" r="12.7"/>
    </g>
    <g id="finish">
      <path id="XMLID_24_" d="M78.2 742.2c-3.8 0-7.7-.5-11.5-1.7-2.4 1.9-5 3.6-8.2 4.6-10.8 3.8-22.6.7-29.8-7.5-.5-.5-1-1.2-1.2-2.2-1.2-3.4.5-7 3.8-8.2s7 .5 8.2 3.8c1 2.4.2 4.8-1.2 6.5-1 1.2-2.2 2.2-3.4 3.1 3.8 2.6 8.4 4.1 13 4.3 3.8-4.8 5.3-11.8 3.1-18-3.6-9.6-14.2-14.7-23.8-11.1-9.6 3.6-14.7 14.2-11.1 23.8 1 2.9 2.6 5.3 4.6 7.2 10.8 10.3 26.7 14.2 41.6 8.7 7.5-2.6 13.7-7.5 18.3-13.5-.7.2-1.7.2-2.4.2z"/>
      <path id="XMLID_23_" d="M153.2 742.2c-3.6 0-7.2-.5-10.8-1.4-4.1 10.6-13.9 17.1-24.8 17.6-.7 0-1.7 0-2.4-.5-3.4-1.2-5-5-3.8-8.2 1.2-3.4 5-5 8.4-3.8 2.4 1 3.8 2.9 4.1 5.3.2 1.4.2 3.1.2 4.6 4.6-1.2 8.4-3.8 11.5-7.2-1.2-6.3-5.5-11.5-11.8-13.9-9.6-3.6-20.4 1.4-23.8 11.1-3.6 9.6 1.4 20.2 11.1 23.8 2.9 1 5.8 1.4 8.4 1 14.7-1.7 28.1-11.3 33.4-26.2.2-.7.5-1.2.7-1.9-.1-.3-.1-.3-.4-.3z"/>
      <path id="finish-body" d="M161.2 701.5c-9.9 0-18 7.7-18.5 17.6 3.6 2.9 7.9 4.8 12.5 5.5-.2-1.4-.5-2.6-.5-4.1v-.2c0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5c0 3.4-2.4 6-5.8 6.5-10.8 1.2-21.9-4.1-27.2-14.2-1.4-2.4-2.6-5-2.9-7.7-1.4-28.1-20.2-44.5-20.2-44.5l.7-42.8c0-2.4-1.9-4.3-4.3-4.3s-4.3 1.9-4.3 4.3l-.5 34.9-16.8 7.2-29.6-19.2c-1.9-1.2-4.8-.7-6 1.2-1.2 1.9-.7 4.8 1.2 6l39.9 25.7c10.6 7.2 9.9 17.6 7.7 31.3-.5 2.6-1.4 5.3-2.9 7.7-5.5 10.1-16.6 15.4-27.2 14.2-3.1-.5-5.8-3.1-5.8-6.5 0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5v.2c0 1.4-.2 2.9-.5 4.1 4.6-.7 8.9-2.6 12.5-5.5-.5-9.9-8.7-17.6-18.5-17.6-10.3 0-18.5 8.4-18.5 18.5 0 7.9 5 14.7 12 17.3 13.5 5.8 29.8 3.4 41.4-7.5 4.6-4.1 7.9-9.1 10.1-14.7h.7c2.2 5.5 5.5 10.3 10.1 14.7 11.8 10.8 27.9 13.2 41.8 7.9 7-2.6 12-9.4 12-17.3-.1-10.2-8.3-18.7-18.6-18.7z"/>
      <ellipse id="finish-head" cx="87.6" cy="641.9" rx="11.5" ry="11.5"/>
    </g>
  </g>
  </g>
  <g id="algae-close">
    <g id="algae_3_">
      <path id="XMLID_123_" d="M222.5 1370.6s48.1-142.3-9-247c-24.3-43.8-31.6-93.4-20.8-141.1 5.3-22.6 12.9-44.8 22.9-66.2" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_122_" d="M180 850.4c0 17.4 36.3 68 36.3 68s36.2-50.6 36.2-68c.9-17.4-14.5-32.2-34.6-33.1-20-.8-37 12.7-37.9 30.1-.1 1-.1 2 0 3z" fill="#64ea87"/>
      <path id="XMLID_121_" d="M120.1 947c10.9 14.6 72.9 39.9 72.9 39.9s-1.1-59.6-12-74.2c-10.9-14.6-33.4-18.8-50.2-9.2-16.8 9.5-21.6 29.1-10.6 43.8v-.3z" fill="#64ea87"/>
      <path id="XMLID_118_" d="M269 990.2c-14.3 12.1-81.2 24.7-81.2 24.7s16.4-57.8 30.7-70c14.4-12.1 37.3-11.8 51.2.7 14 12.5 13.7 32.5-.7 44.6z" fill="#64ea87"/>
    </g>
    <g id="algae_2_">
      <path id="XMLID_149_" d="M1285.6 1401.2s48.1-142.3-9-247c-24.3-43.8-31.6-93.4-20.8-141.1 5.3-22.6 12.9-44.8 22.9-66.2" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_148_" d="M1243 881c0 17.4 36.3 68 36.3 68s36.2-50.6 36.2-68c.9-17.4-14.5-32.2-34.6-33.1-20-.8-37 12.7-37.9 30.1v3z" fill="#64ea87"/>
      <path id="XMLID_147_" d="M1183.1 977.6c10.9 14.6 72.9 39.9 72.9 39.9s-1.1-59.6-12-74.2c-10.9-14.6-33.4-18.8-50.2-9.2-16.8 9.5-21.6 29.1-10.6 43.8v-.3z" fill="#64ea87"/>
      <path id="XMLID_127_" d="M1332.1 1020.9c-14.3 12.1-81.2 24.7-81.2 24.7s16.4-57.8 30.7-70c14.4-12.1 37.3-11.8 51.2.7 14 12.5 13.7 32.4-.7 44.6z" fill="#64ea87"/>
    </g>
    <g id="algae_1_">
      <path id="XMLID_158_" d="M2568.6 1328.5s48.1-142.3-9-247c-24.3-43.8-31.6-93.4-20.8-141.1 5.3-22.6 12.9-44.8 22.9-66.2" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_157_" d="M2526 808.3c0 17.4 36.3 68 36.3 68s36.2-50.6 36.2-68c.9-17.4-14.5-32.2-34.6-33.1-20-.8-37 12.7-37.9 30.1v3z" fill="#64ea87"/>
      <path id="XMLID_156_" d="M2466.1 904.8c10.9 14.6 72.9 39.9 72.9 39.9s-1.1-59.6-12-74.2c-10.9-14.6-33.4-18.8-50.2-9.2-16.8 9.5-21.6 29.1-10.6 43.8v-.3z" fill="#64ea87"/>
      <path id="XMLID_153_" d="M2615.1 948.1c-14.3 12.1-81.2 24.7-81.2 24.7s16.4-57.8 30.7-70c14.4-12.1 37.3-11.8 51.2.7 14 12.5 13.6 32.4-.7 44.6z" fill="#64ea87"/>
    </g>
    <g id="algae">
      <path id="XMLID_167_" d="M3462.5 1423.5s48.1-142.3-9-247c-24.3-43.8-31.6-93.4-20.8-141.1 5.3-22.6 12.9-44.8 22.9-66.2" fill="none" stroke="#64ea87" stroke-width="2" stroke-miterlimit="10"/>
      <path id="XMLID_166_" d="M3419.9 903.3c0 17.4 36.3 68 36.3 68s36.2-50.6 36.2-68c.9-17.4-14.5-32.2-34.6-33.1-20-.8-37 12.7-37.9 30.1v3z" fill="#64ea87"/>
      <path id="XMLID_165_" d="M3360 999.8c10.9 14.6 72.9 39.9 72.9 39.9s-1.1-59.6-12-74.2c-10.9-14.6-33.4-18.8-50.2-9.2-16.8 9.5-21.6 29.1-10.6 43.8v-.3z" fill="#64ea87"/>
      <path id="XMLID_162_" d="M3509 1043.1c-14.3 12.1-81.2 24.7-81.2 24.7s16.4-57.8 30.7-70c14.4-12.1 37.3-11.8 51.2.7 14 12.5 13.6 32.5-.7 44.6z" fill="#64ea87"/>
    </g>
  </g>
  <g id="sirenita" fill-rule="evenodd" clip-rule="evenodd">
    <path id="stone" d="M3780.3 179.1c7.8-.2 14.9 1.1 17.7 5.8 6.6.1 9.1-2.6 12.8-5.2 7.7.1 8.4 5.4 13.4 7 6.7 2.1 16.8 3.8 24.4 2.3 4.2-1 8.3-1.9 12.5-2.9 2.3-.2 4.2 3.6 7 2.9 2-.9 2.4-2.6 3.8-4.1 18.5 8.1 37.1 15.9 48.9 30.5 4.9 6.5 9.9 13 14.8 19.5 6.5 8.1 15.6 13.7 21.8 22.1 7.4 10.1 11.9 28.4 13.4 43.6-2.5-.4-4.7 2.1-7.6 2.6l-24.4.6c-4.7-.4-9.6-1.4-13.7-.9l-8.1 1.2c-4-.9-8-1.7-11.9-2.6-5.1.4-9.2 2.8-13.1 3.8-6.1 1.5-12.1-1.2-15.7-2-3.7-.8-5.9 2.5-10.5 1.7-4.7-.9-9.3-1.7-14-2.6-4.3-.7-5.6 1.8-7.9 2.6-4 1.5-9.2-2.4-11.9-2.9-2.5-.5-4.3.8-6.1 1.2-4.1.7-9.4.1-13.1.6-7.2 1-16.3-1.1-21.8-2.3-3.8-.9-6.4 1.7-9 2.3l-9.9.6-10.8-.6c-16 2.3-28.7-1.5-42.5-3.2-1.2.3-2.3.6-3.5.9-3-.3-11.7-7-14-9-.8-3.1-.8-6.3-1.7-10.2-1.3-2.9-2.5-5.8-3.8-8.7l-.3-10.2c-.6-.5-1.2-1-1.7-1.5-1.7-3.2-2.1-13.6-2.9-17.2-1.9-8.6 1-16.4 5.5-19.8-2.8-7 9.9-14.8 14-17.7 4.5-3.3 6.8-10 9.9-12.2 5.5-3.9 15.3-6.9 22.1-10.2 4.4 1.1 8.7 2.1 13.1 3.2 3.2.8 18.1-2.1 19.5-2.9 1.1-2.3 3.3-4.6 5.3-6.1z" fill="#a8a8a8"/>
    <path id="siren" d="M3942.1 253.3c-.2-1.9-.4-3.9-.6-5.8-1.3-1-2.5-1.9-3.8-2.9-5.4-5.9-11.1-9.8-17.5-14.8-5.3-4.2-9.1-16.2-13.1-18.9-5.3-3.6-11.6-4.5-16.3-8.4-10.2-8.4-3.1-17-22.8-9l-.6-.6c2.7-5.3 7-8.6 9.1-14.6 5.3-14.7 4.8-36.1-.9-49.5-1.1-2.4-1.5-3.3-2.1-4.6-.8-1.8-1-3.9-.4-5.8 1.6-5.1.4-12.4.5-19 .2-8.5 3.5-14.5 0-22.4-.6-1.3-17.7-15.3-19.2-16-3-.7-4.1-3.1-7.1-3.8-3.1-2-3.8-4.9-7-7.2.3-19.5-3.8-37.6-24-37.7-7.6 3.8-23.9 8-25.6 15.1.3 1.9.6 3.9.9 5.8 1.6 7.1 3.2 12.8 1.7 20.4 2.6 3.2 6.4 4.9 6.7 10.5-4.7 6.1-7.2 11.5-8.7 21.2-.2 3.9-.4 7.8-.6 11.6-3.6 15.4-10 28-13.1 43.1-1.9 9.1-1.9 24.1-6.1 31.1-2.8 4.7-19.8 3.7-22.7 12.8 3.3 1 2 5 2.9 7.9 5.8.8 11.6 1.6 17.5 2.3 2.2 7.4 2.3 13.1 2 20.7 9.3 1.2 13.7 1.9 18 7.9 8.7.1 16.9-1.1 26.2.6 15.9 2.9 31.4 9 45.7 13.4 3.3.6 6.6 1.2 9.9 1.7 12 4.3 21.9 11.9 36.5 14.6 1.1-3 .9-2.3 2-5.2-.3-.2-.7-.4-1-.6l-.3-.6c7.8 3.8 14.7 8 21.5 12.8 4.4 3.1 7.6 6.7 14 8.1.8-.8 1.2-1.1 2-1.9-.6-4.7-2.6-8.3-3.6-12.3zM3817 134.9c-1 4.6-1.6 10.3-.7 15.1-8.7 1.4-16.8 3.4-27.8 3.5v-.6c2-4 3.1-8 4.5-11.9 3.8-10.9 6.4-22.9 11.6-32.3 2.9 1.3 5.9 2.5 8.8 3.8 1.5 6.1 3.9 11.9 5.3 17.7-.6 1.6-1.1 3.1-1.7 4.7z"/>
  </g>
     </g>
</svg>  
</div>


  <small class="copy">*Mermen adapted from the Merfolk colection by Andrew McKinley from the Noun Project</small>
</div>
            
          
!
            
              .container {
	max-width: 1200px;
  margin: 0 auto;
	position: relative;
	font-family: 'Allan', cursive;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}
#startButton {
  display: block;
  margin: 0 auto;
}
small {
  color: #aaa;
  visibility: hidden;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: right;
}
.full-scene {
  clip-path: url(#clip-path);
}
.story {
  text-align: center;
  color: #234567;
  font-size: 3vw;
  perspective: 400px;
  position: relative;
  p {
    display: none;
    margin-top: 0;
  }
  .end-options,
  .options-wrap {
    position: absolute;
    top: calc(100% + 1em);
    left: 0;
    right: 0;
  }
}
.svg-wrapper {
  width: 100%;
  display: none;
  max-height: calc(100% - 10em);
}
svg {
  display: block;
  width: 100%;
}
#swimming, #finish {
  display: none;
}
#bank1,
#bank3,
#algae-close {
    filter: url(#blurSmall);
}
#bank-far,
#algae-far_1_{
  opacity: 0.8;
  filter: url(#blurBig);
}

button {
  margin: 0 5px;
  border: none;
  border-radius: 0;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 1.5em;
  vertical-align: middle;
  font-size: 2vw;
  line-height: 3;
  text-align: center;
  text-decoration: none;
  transition: 0.1s ease-in-out;
  transition-property: box-shadow;
  text-transform: uppercase;
	font-family: inherit;
  color: #ffffff;
  background: linear-gradient(166.42deg, #FA6B4E 0%, #C0523C 50%, #C0523C 100%);
  background-size: 200%;
  &:hover {
    cursor: pointer;
    box-shadow: inset -10px -10px 200px rgba(0,0,0,.1);
  }
}

.finish-text {
  color: #FA6B4E;
  font-weight: bold;
  font-size: 4rem;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
            
          
!
            
              
var master = new TimelineMax(),
    scene = document.getElementById("scene"),
    mermen = ('#mermen'),
    body = ("#iddle-body");
// infinite iddle movement
var infinite = TweenMax.to("#mermen-wrap", 1.5, {
  y:20, repeat:-1, yoyo: true });
document.getElementById("startButton").addEventListener('click', clickedStart);
document.getElementById('option1').addEventListener('click', function(){clickOption(1)});
document.getElementById('option2').addEventListener('click', function(){clickOption(2)});
function clickedStart() {
  TweenMax.set("#startButton", {display:"none"});
  master.add(zeroScene(),'sceneZero');
  master.add(firstScene(),'sceneOne');
}
function clickOption(option) {
  TweenMax.set(".text-1", {display:"none"});
  TweenMax.set(".options-wrap", {display:"none"});
  TweenMax.set(".option"+option+"-text", {display:"block"});
  master.add(secondScene(option),'sceneTwo');
}
function zeroScene() {
  var tl0 = new TimelineMax(),
      $welcome = document.querySelector(".welcome"),
      splitWelcome = new SplitText($welcome, {type:"words,chars"}),
      welcomeChars = splitWelcome.chars;
  TweenMax.set(".copy", {visibility:"visible"});
  TweenMax.set(".svg-wrapper", {display:"block"});
  TweenMax.set(".welcome", {display:"block"});
  tl0.add("start");
  tl0.from(".circ-in", 1, {scale:0, transformOrigin:"50% 50%", ease:Circ.easeIn}, "start+=1");
  tl0.staggerFrom(welcomeChars, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "start+=.5");
  tl0.to(".circ-in", 1, {scale:100, transformOrigin:"50% 50%", ease:Circ.easeIn}, "-=.25");
  tl0.to(".welcome", 1, {opacity: 0, ease:Circ.easeIn}, "-=1");
  tl0.set(".welcome", {display:"none"});
  tl0.set(".text-1, .options-wrap", {display:"block"});
  tl0.eventCallback("onComplete", endSceneZero);
  return tl0;
}

function endSceneZero() {
  TweenMax.to("#bank1", 6, {
    bezier: {
    type: "soft",
    values: [
      {x: 0, y: 0},
      {x: -50,y: 25},
      {x: -100,y: 40},
      {x: -150,y: 10},
      {x: -200,y: 35},
      {x: -250,y: 5},
      {x: -300,y: -15},
      {x: -350,y: 30},
      {x: -450,y: -10}],
    },ease: Linear.easeNone}, "+2");
}

function clicked() {
  master.add(firstScene(),'sceneOne');
  master.add(secondScene(),'sceneTwo');
}

function endSceneTwo() {
  TweenMax.set(".option1-text, .option2-text", {display:"none"});
  TweenMax.set(".text-2", {display:"block"});
  master.add(thirdScene(),'sceneThree'); 
}

function firstScene() {
  var tl1 = new TimelineMax(),
      $text1 = document.querySelectorAll(".text-1"),
      splitText1 = new SplitText($text1, {type:"words,chars"}),
      text1Chars = splitText1.chars;
  tl1.to(body, .5, {morphSVG:{shape: "#swimming-body", shapeIndex:21},ease:Circ.easeOut});
  tl1.to(mermen, 3, {
    bezier: {
    type: "soft",
    values: [
      {x: 0, y: 0},
      {x: 100,y: 100}, 
      {x: 300,y: 50}, 
      {x: 500,y: 200},
      {x: 700,y: 100}, 
      {x: 1000,y: 80}],
      autoRotate: ["x","y","rotation", 0]
    },ease: Circ.easeInOut}, "-=.5");
  tl1.staggerFrom(text1Chars, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=1.5");
  tl1.to(body, .5, {morphSVG:{shape: "#iddle-body", shapeIndex:21},ease: Circ.easeOut}, "-=.5");
  tl1.from(".options-wrap", 1, {y:-300, skewY: -40, transformOrigin:"0 50%", ease:Bounce.easeOut}, "-=.5");
  tl1.to(scene, 1.5, {
        attr: { viewBox: '1000 300 1200 700' },
        ease:Circ.easeOut
      }, "-=2");
  return tl1;
}

function secondScene(option) {
  var tl2 = new TimelineMax(),
      $text = document.querySelectorAll(".option"+option+"-text"),
      splitText = new SplitText($text, {type:"words,chars"}),
      textChars = splitText.chars;
  tl2.to(body, .5, {morphSVG:{shape: "#swimming-body", shapeIndex:21},ease:Circ.easeOut});
  tl2.staggerFrom(textChars, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=1.5");
  tl2.to(mermen, 3, {
    bezier: {
    type: "soft",
    values: [
      {x: 1000, y: 10},
      {x: 1100,y: -30}, 
      {x: 1300,y: -50}, 
      {x: 1500,y: -200},
      {x: 1700,y: -100}, 
      {x: 2000,y: -80}],
      autoRotate: true
    },ease: Circ.easeInOut}, "-=2.5");
  tl2.to(body, .5, {morphSVG:{shape: "#iddle-body", shapeIndex:21},ease: Circ.easeOut}, "-=.5");
  tl2.to(scene, 1.5, {
        attr: { viewBox: '2000 300 1200 700' },
        ease:Circ.easeOut
      }, "-=.5");
  TweenMax.to("#bank3", 6, {
    bezier: {
    type: "soft",
    values: [
      {x: 0, y: 0},
      {x: -50,y: 25},
      {x: -100,y: 40},
      {x: -150,y: 10},
      {x: -200,y: 35},
      {x: -250,y: 5},
      {x: -300,y: -15},
      {x: -350,y: 30},
      {x: -450,y: -10}],
    },ease: Linear.easeNone});
  TweenMax.to("#bank-far", 12, {
    bezier: {
    type: "soft",
    values: [
      {x: 0, y: 0},
      {x: -50,y: 25},
      {x: -100,y: 40},
      {x: -150,y: 10},
      {x: -200,y: 35},
      {x: -250,y: 5},
      {x: -300,y: -15},
      {x: -350,y: 30},
      {x: -450,y: -10},
      {x: -500,y: 0},
      {x: -550,y: 20},
      {x: -600,y: -5},
      {x: -650,y: 15},
      {x: -700,y: 35}],
    },ease: Linear.easeNone});
  tl2.eventCallback("onComplete", endSceneTwo);
  return tl2;
}

function thirdScene() {
  var tl3 = new TimelineMax(),
      $text = document.querySelectorAll(".text-2"),
      splitText = new SplitText($text, {type:"words,chars"}),
      textChars = splitText.chars,
      $text3 = document.querySelectorAll(".text-3"),
      splitText3 = new SplitText($text3, {type:"words,chars"}),
      textChars3 = splitText3.chars;
  tl3.to(body, .5, {morphSVG:{shape: "#swimming-body", shapeIndex:21},ease:Circ.easeOut});
  tl3.staggerFrom(textChars, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=1.5");
  tl3.to(mermen, 3, {
    bezier: {
    type: "soft",
    values: [
      {x: 2200, y: 10},
      {x: 2400,y: -30}, 
      {x: 2600,y: -50}, 
      {x: 2800,y: -200},
      {x: 3000,y: -100},
      {x: 3100, y: -150},
      {x: 3200,y: -200}, 
      {x: 3300,y: -250}, 
      {x: 3400,y: -320}], 
      autoRotate: true
    },ease: Circ.easeInOut}, "-=2.5");
  tl3.to(scene, 1.5, {
        attr: { viewBox: '2800 0 1200 700' },
        ease:Circ.easeOut
      }, "-=1.5");
  tl3.to(body, .5, {morphSVG:{shape: "#finish-body", shapeIndex:21},ease:Circ.easeOut});
  tl3.to(mermen, .2, {rotation:20, scale:1.5, y: -475}, "-=.3");
  tl3.set(".text-2", {display:"none"});
  tl3.set(".text-3, .end-options", {display:"block"});
  tl3.eventCallback("onComplete", endSceneThree);
  tl3.staggerFrom(textChars3, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=1.5");
  tl3.from(".end-options", 1, {y:-300, skewY: -40, transformOrigin:"0 50%", ease:Bounce.easeOut}, "-=.5");
  return tl3;
}

function endSceneThree() {
  infinite.kill();
}


document.getElementById('bingo').addEventListener('click', function(){finish()});
document.getElementById('fail').addEventListener('click', function(){retry()});

function finish() {
  TweenMax.set(".text-3, .end-options, .fail-text", {display:"none"});
  TweenMax.set(".bingo-text, .finish-text", {display:"block"});
  master.add(finishScene(),'finish');
}

function retry() {
  TweenMax.set(".text-3", {display:"none"});
  TweenMax.set(".fail-text", {display:"block"});
  master.add(retryScene(),'retry');
}
function retryScene() {
  var tl4 = new TimelineMax(),
      $text = document.querySelectorAll(".fail-text"),
      splitText = new SplitText($text, {type:"words,chars"}),
      textChars = splitText.chars;
  tl4.staggerFrom(textChars, 1, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=.25");
  return tl4;
}
function finishScene() {
  var tl4 = new TimelineMax(),
      $text = document.querySelectorAll(".bingo-text"),
      splitText = new SplitText($text, {type:"words,chars"}),
      textChars = splitText.chars,
      $textFinish = document.querySelectorAll(".finish-text"),
      splitTextFinish = new SplitText($textFinish, {type:"words,chars"}),
      textCharsFinish = splitTextFinish.chars;
  tl4.staggerFrom(textChars, 1, {opacity:0, scale:0.5, y:20, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.05, "-=.25");
  tl4.to(scene, 1, {scale:0, transformOrigin:"50% 50%", ease:Circ.easeIn}, "-=.25");
  tl4.staggerFrom(textCharsFinish, 1.2, {opacity:0, scale:0.5, y:30, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.08, "-=.25");
  return tl4;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console