Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Auto Save

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="spacer"><p>Scroll down 🐟</p></div>
<section class="parallax">
  <svg viewBox="0 0 644 362">
    <path id="bgblue" fill="#1d4b70" stroke-width="0" d="M-.4 15.7h644.9v351.1H-.4z"></path>
    <path id="waves" fill="#1d4b70" stroke="#f5dbc8" stroke-miterlimit="10" stroke-width="2" d="M652 16s-13.7 1-19.9-2.1a22.2 22.2 0 0 0-20 0h-.2a22.2 22.2 0 0 1-19.8 0h-.2a22.2 22.2 0 0 0-20 0 22.3 22.3 0 0 1-19.9 0h-.2a22.2 22.2 0 0 0-19.9 0 22.2 22.2 0 0 1-20 0h-.1a22.2 22.2 0 0 0-20 0 22.2 22.2 0 0 1-19.8 0h-.3c-6.3-3.2-13.6-3.2-19.9 0h-.2a22.2 22.2 0 0 1-19.9 0 22.2 22.2 0 0 0-19.9 0h-.2a22.2 22.2 0 0 1-20 0 22.2 22.2 0 0 0-19.8 0h-.3a22.3 22.3 0 0 1-19.8 0h-.3a22.2 22.2 0 0 0-19.9 0l-.7.4c-5.8 2.9-12.6 2.7-18.3-.4a22.2 22.2 0 0 0-19.9 0h-.2a22.3 22.3 0 0 1-19.8 0h-.3a22.2 22.2 0 0 0-20 0 22.2 22.2 0 0 1-19.8 0h-.2a22.2 22.2 0 0 0-20 0 22.2 22.2 0 0 1-19.8 0h-.3a22.2 22.2 0 0 0-19.8 0h-.3c-6.3 3.2-13.6 3.2-19.9 0a22.2 22.2 0 0 0-20 0h-.1a22.2 22.2 0 0 1-20 0 22.2 22.2 0 0 0-19.8 0H92a22.2 22.2 0 0 1-19.8 0H72a22.2 22.2 0 0 0-20 0H52A22.2 22.2 0 0 1 32 14H32a22.2 22.2 0 0 0-20 0c-6.2 3.1-19.8 2-19.8 2"></path>
    <text fill="#f5dbc8" font-family="Futura-Bold, Futura" font-size="34" font-weight="700"><tspan x="190" y="150">WEIRD FISHES</tspan></text>
    <path class="text" fill="#f5dbc8" stroke-width="0" d="m225.2 81-3.7 1.9 1 1.8 3.4-1.7 1.1 2.4-3.4 1.7 1 1.8 3.5-1.7 1.1 2.4-6.5 3.2-5.5-10.7 7-3.4 1 2.4ZM238.1 83.4l-4.4 1.9.2 2.2-3.2 1.4c-.2-4.3-.4-8.7-.4-13l3.5-1.5c3 3 6.1 6.2 9 9.4l-3.2 1.3-1.5-1.7Zm-1.7-1.9-3-3 .2 4.2 2.8-1.1ZM245.4 72.8l3.2 8.8-3.1 1.2-3.3-8.8-2.6 1-1-2.5 8.6-3.2.9 2.5-2.7 1ZM257 69l-3.9 1.2.6 1.9 3.7-1.1.7 2.5-3.6 1.1.7 2 3.7-1.1.8 2.5-6.8 2.1-3.8-11.4 7.2-2.3.7 2.6ZM262.4 77.2 259 65.6l3.3-.9c2.7 1.8 5.3 3.7 7.8 5.6l-1.7-7.1 3.3-.8c1 3.9 1.8 7.8 2.7 11.8l-3.2.7c-2.5-2-5-3.8-7.7-5.7l1.9 7.2-3.1.8ZM281.2 60.5l5-.9c1.2-.2 2.2 0 2.9.4.7.5 1.1 1.2 1.2 2.2a3 3 0 0 1-.1 1.5c-.2.4-.5.8-1 1.2.6 0 1 0 1.3.2l1 .5.5.8a3.9 3.9 0 0 1 .2 2.5 3 3 0 0 1-.7 1.2c-.3.4-.8.7-1.3 1l-1.7.4-5.1.9-2.2-12Zm4.2 4h.6c1-.2 1.5-.6 1.4-1.4-.2-.8-.8-1-1.8-1l-.6.2.4 2.3Zm.8 5 .7-.2c.8-.1 1.4-.3 1.7-.6.3-.2.4-.6.4-1-.1-.5-.3-.8-.7-1h-1.8l-.8.2.5 2.5ZM296.7 64.5l-5.5-5.6 4-.5 2.8 3 2-3.5 4.1-.4-4.1 6.7.5 5.8-3.2.3-.6-5.7ZM317.1 59.5l.2 9.4-3.2.1-.3-9.4-2.8.2-.1-2.7 9-.3v2.7h-2.8ZM325.2 61.5l4.8.1.2-4.7 3.4.2-.6 12h-3.2l.1-5-4.7-.2-.1 5h-3.2v-12h3.4l-.1 4.6ZM344 60.5l-4-.3-.2 2 3.7.3-.2 2.6c-1.3 0-2.5-.2-3.7-.3l-.2 2 4 .4-.3 2.6a237 237 0 0 0-7.1-.5l.7-12 7.5.5c0 1-.2 1.8-.3 2.7ZM355.6 59.2l1 8 4-7.2 2.6.5c.5 2.7 1 5.4 1.3 8.1l3.7-7.2 3.5.8-6.2 11-3.3-.7a372 372 0 0 0-1.2-7.3l-3.6 6.5-3.3-.5a382 382 0 0 0-2-12.5l3.4.5ZM371.3 68.3a5.8 5.8 0 0 1 3-4c.7-.4 1.6-.7 2.5-.8a8.3 8.3 0 0 1 5.7 1.5 6 6 0 0 1 2.6 6.8 6.2 6.2 0 0 1-3.1 3.8 7 7 0 0 1-2.5.7 8 8 0 0 1-2.8-.2c-1-.3-1.9-.7-2.6-1.2a6.8 6.8 0 0 1-1.8-1.8 6.1 6.1 0 0 1-1-4.9Zm3.4.7a3.1 3.1 0 0 0 .5 2.6l1 1 1.2.5c.5.2 1 .2 1.4.1.5 0 .9-.1 1.3-.3.4-.2.7-.5 1-.9.3-.3.5-.7.7-1.2v-1.3c0-.5-.2-.9-.5-1.2-.2-.4-.5-.7-1-1a4 4 0 0 0-2.7-.7 3.5 3.5 0 0 0-2.3 1.2 3 3 0 0 0-.6 1.2ZM395.8 81.6a195 195 0 0 0-3.9-1.4l-1.5-5.4-1.5 4.5-3-1 3.4-11.6 5.1 1.7c.8.2 1.3.5 1.8.8.4.4.8.8 1 1.2.2.5.4 1 .4 1.4 0 .5 0 1-.2 1.5-.3.8-.8 1.5-1.4 1.8-.7.4-1.5.6-2.4.5l2.2 6Zm-4.8-8.7.6.2c.6.2 1.1.2 1.5.1.5-.1.8-.4.9-.9.1-.4 0-.8-.2-1.2-.2-.4-.7-.6-1.3-.8l-.6-.2-1 2.8ZM397 82l6.1-10.6 3.2 1.2.1 7 4.9-5 3.2 1.4-2.9 11.9-3-1.3 1.7-6.8c-1.8 1.7-3.7 3.4-5.4 5.2l-1.3-.5-.1-7.5-3.5 6-3-1ZM424.2 84a4 4 0 0 0-.7-1.1 3 3 0 0 0-1-.7c-.3-.2-.7-.2-1-.2-.4 0-.6.2-.7.5v.6c0 .2.1.3.3.5l.5.6.7.6c.9.8 1.4 1.6 1.6 2.3.2.8 0 1.5-.3 2.4-.3.5-.7 1-1.1 1.3l-1.4.7c-.6.1-1.2.2-1.8 0-.6 0-1.3-.3-2-.6a8.3 8.3 0 0 1-3.5-3.1l2.4-1.7c.2.6.6 1 1 1.4l1 1c.6.2 1 .3 1.3.2.4-.1.6-.3.8-.6v-.9l-.5-.6-.7-.7-1-1c-.3-.2-.6-.6-.8-1a3 3 0 0 1-.3-1.2c0-.4.1-.9.4-1.4.2-.6.5-1 1-1.4.3-.3.8-.6 1.3-.7.5-.2 1-.2 1.7-.1.6 0 1.2.2 1.8.5a9.1 9.1 0 0 1 3.3 2.8l-2.3 1.5Z"></path>
    <text class="textand" fill="#f5dbc8" font-family="Futura-Bold, Futura" font-size="25" font-weight="700"><tspan x="311" y="112">&amp;</tspan></text>
    <g id="fishessm" fill="#f5dbc8" stroke-width="0">
      <path d="M294.5 101.5c-.6.6-1.5.6-2.1 0s-.6-1.5 0-2.1c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1Zm-1.7 10.3c-4.8 1.4-9.6-.2-14.4-4.5l-6.5 2.6a1 1 0 0 1-1-.3h-.1a1 1 0 0 1-.1-1.1l3.2-6-3.2-5.8a1 1 0 0 1 1.2-1.5l6.5 2.6c4.8-4.3 9.6-5.8 14.4-4.5 3.4 1 6 3.3 7.7 5 1.6 1.7 2.8 3.6 3 4v.5c-.2.4-1.4 2.3-3 4-1.6 1.7-4.3 4-7.7 5Zm-7.4-2.3c-1-2.3-.6-5 1-7-1.6-1.8-2-4.5-1-6.8-2 .7-4 2.1-6 4a1 1 0 0 1-1.1.3l-4.5-1.8 2.1 3.9c.2.3.2.7 0 1l-2.1 3.9 4.4-1.8c.4-.2.8 0 1.1.2 2 2 4 3.3 6.1 4Zm15.9-7c-1-1.5-4.7-6.6-10.2-7.5-.9-.1-1.8-.2-2.7 0a4.5 4.5 0 0 0 0 6.8c.5.3.6 1 .2 1.4l-.1.1a4.5 4.5 0 0 0-.1 7c.9 0 1.8 0 2.7-.2 5.5-.9 9.2-6 10.2-7.5ZM349.5 99.4c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1-1.5.6-2.1 0-.6-1.5 0-2.1Zm-6 7.4a17.2 17.2 0 0 1-3-4v-.5a17 17 0 0 1 3-4c1.6-1.7 4.3-4 7.7-5 4.8-1.3 9.6.2 14.4 4.6l6.5-2.6a1 1 0 0 1 1.2 1.4l-3.2 5.9 3.2 5.9c.2.3.2.8 0 1.1h-.1a1 1 0 0 1-1.1.3l-6.5-2.6c-4.8 4.4-9.6 5.9-14.4 4.5-3.4-1-6.1-3.3-7.7-5Zm21.2-1.4a1 1 0 0 1 1-.2l4.5 1.8-2.1-4a1 1 0 0 1 0-1l2.1-3.8-4.4 1.8a1 1 0 0 1-1.1-.3c-2-1.9-4-3.3-6.1-4 1 2.3.6 5-1 6.9 1.6 1.9 2 4.6 1 6.9 2-.8 4-2.2 6-4.1Zm-11.8 4.7c.9.2 1.8.2 2.7.1l.5-.5c1.6-2 1.3-4.8-.6-6.4h-.1a1 1 0 0 1 .1-1.5 4.5 4.5 0 0 0 .1-6.9l-2.7.1c-5.5 1-9.2 6-10.2 7.6 1 1.5 4.7 6.6 10.2 7.5Z"></path>
    </g>
    <g id="wavessm" fill="none" stroke="#f5dbc8" stroke-width="2">
      <path d="M201.8 106.3a11 11 0 0 0 9.9 0h.2c3-1.6 6.7-1.5 9.8 0h.1c3.2 1.6 6.9 1.6 10 0a11 11 0 0 1 10 0 11 11 0 0 0 10 0 11 11 0 0 1 9.9 0M444.7 106.3a11 11 0 0 1-10 0 11.1 11.1 0 0 0-10 0 11.1 11.1 0 0 1-10 0 11 11 0 0 0-10 0 11 11 0 0 1-10 0 11 11 0 0 0-9.9 0"></path>
    </g>
    <g id="fish1">
      <path fill="#f5dbc8" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M149.2 232.3c0 3.5-7.9 4.2-22.2 6.9-22.2 4-56 10.1-69.8 9.3-42.1-2.5-45-19.6-45-19.6s22.2-12.8 45-12.8c14 0 45.4 5.1 67.6 9.3 13.8 2.7 24.4 3.5 24.4 6.9Z"></path>
      <path fill="#f5dbc8" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M60.3 248.7s4.8 7.2 10.2 7.5c5.5.4 3-5.5 3.8-8.3M91.8 244.3s3 8.9 7.5 7.5c4.5-1.4 9.2-4.7 15-7.2 5.9-2.6 7.6-2 7.3-4.5M56 216.7s6.4-14.7 12.3-14c5.9.7 4 9.7 9 10.3 3.8.5 4.5 5 4.5 5"></path>
      <path fill="none" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="m71 204.7-4.7 11.5M60.9 216.5s3.4-9.6 5.9-13.3M76.6 212.8l-1.4 4.7M70.7 216.7s1.8-4.9 3-7.3"></path>
      <path fill="#f5dbc8" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M133.3 227.7s19.3-16 23.9-12.5c4.2 3.2-6.2 9.7-6.2 16.7s8.6 16.2 5.4 18.4c-5.2 3.8-22.6-12.7-22.6-12.7"></path>
      <path fill="none" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M139.7 236.9s14.7 13.2 16.5 13.2-11.2-15.2-11.2-15.2M138.7 228.2s16-14.5 18-13-12.5 14.5-12.5 14.5"></path>
      <path fill="none" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M149.2 232.3c0 3.5-7.9 4.2-22.2 6.9-22.2 4-56 10.1-69.8 9.3-42.1-2.5-45-19.6-45-19.6s22.2-12.8 45-12.8c14 0 45.4 5.1 67.6 9.3 13.8 2.7 24.4 3.5 24.4 6.9Z"></path>
      <circle cx="28.3" cy="230.3" r="4.2" fill="#f5dbc8" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4"></circle>
      <circle cx="28.5" cy="228.9" r="1.4" fill="#1d4b70" stroke-width="0"></circle>
      <path fill="none" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M64.3 249s5.4 7.5 6.8 7.2c1.3-.2-2.2-7.8-2.2-7.8M96.8 244s2.5 6.4 5 6.7M101.5 243.4s2.5 4.8 4.5 5M107.4 242s2 4.2 3.9 4M112.4 241.5s.5 2.8 2.5 2.5"></path>
      <path fill="none" stroke="#1d4b70" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="M40.3 224.2s6.9 9.7-3.4 16.2M46.6 243.2c-1 .2 5-2.8 2.1-10.3 0 0 16.9-2.2 16.6 1-.3 3-14.7 8.7-18.7 9.3ZM63.1 235.7H50.6M58.1 239.2l-8.1-.4"></path>
      <path fill="#f5dbc8" stroke="#1d4b70" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="M12.3 228.9s1.8 3.9 7.7 4"></path>
      <path fill="none" stroke="#1d4b70" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="m72.6 225.5 3 3c1 1 1 2.7 0 3.7l-3 3M83.3 225.5l3 3c1 1 1 2.7 0 3.7l-3 3M93.9 225.5l3 3c1 1 1 2.7 0 3.7l-3 3M104.5 225.5l3.2 3.2c1 .9 1 2.4 0 3.3l-3.2 3.1M76.6 230.8l3 3c1 1 1 2.7 0 3.7l-3 3M87.3 230.8l2.9 3c1 1 1 2.7 0 3.7l-3 3M97.9 230.8l3 3c1 1 1 2.7 0 3.7l-3 3"></path>
    </g>
    <g id="fish2">
      <path fill="#f5dbc8" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M499.4 177.2c0 3.5 7.9 4.2 22.2 6.9 22.2 4.1 56 10.2 69.8 9.3 42.1-2.5 45-19.6 45-19.6s-22.2-12.8-45-12.8a505 505 0 0 0-67.6 9.4c-13.8 2.6-24.3 3.4-24.3 6.8Z"></path>
      <path fill="#f5dbc8" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M588.3 193.6s-4.8 7.2-10.2 7.6c-5.5.4-3-5.6-3.8-8.4M556.8 189.2s-3 9-7.5 7.5c-4.5-1.4-9.2-4.7-15-7.2-5.9-2.5-7.6-2-7.3-4.5M592.6 161.7s-6.4-14.8-12.3-14-4 9.6-9 10.3c-3.8.5-4.5 4.9-4.5 4.9"></path>
      <path fill="none" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="m577.6 149.6 4.7 11.6M587.7 161.4s-3.4-9.6-5.9-13.3M572 157.7l1.4 4.7M577.9 161.7s-1.7-5-3-7.4"></path>
      <path fill="#f5dbc8" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M515.3 172.6s-19.3-16-23.9-12.5c-4.2 3.3 6.3 9.8 6.3 16.7 0 6.8-8.7 16.2-5.5 18.5 5.2 3.7 22.6-12.7 22.6-12.7"></path>
      <path fill="none" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M508.9 181.8S494.2 195 492.4 195s11.2-15.2 11.2-15.2M509.9 173.1s-16-14.4-18-13c-2 1.5 12.5 14.5 12.5 14.5"></path>
      <path fill="none" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M499.4 177.2c0 3.5 7.9 4.2 22.2 6.9 22.2 4.1 56 10.2 69.8 9.3 42.1-2.5 45-19.6 45-19.6s-22.2-12.8-45-12.8a505 505 0 0 0-67.6 9.4c-13.8 2.6-24.3 3.4-24.3 6.8Z"></path>
      <circle cx="620.3" cy="175.2" r="4.2" fill="#f5dbc8" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4"></circle>
      <circle cx="620.1" cy="173.8" r="1.4" fill="#1d4b70" stroke-width="0"></circle>
      <path fill="none" stroke="#1d4b70" stroke-miterlimit="10" stroke-width="1.4" d="M584.3 193.9s-5.4 7.5-6.8 7.3c-1.3-.3 2.2-7.8 2.2-7.8M551.8 189s-2.5 6.3-5 6.6M547 188.4s-2.4 4.7-4.4 5M541.2 187s-2 4.2-3.9 3.9M536.2 186.4s-.6 2.8-2.5 2.5"></path>
      <path fill="none" stroke="#1d4b70" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="M608.3 169.1s-6.9 9.7 3.4 16.2M602 188.1c1 .2-5-2.8-2.2-10.3 0 0-16.8-2.1-16.5 1 .3 3.1 14.7 8.7 18.7 9.3ZM585.5 180.7H598M590.5 184.1l8.1-.3"></path>
      <path fill="#f5dbc8" stroke="#1d4b70" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="M636.3 173.8s-1.8 4-7.7 4.1"></path>
      <path fill="none" stroke="#1d4b70" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="m576 170.4-3 3c-1 1-1 2.7 0 3.7l3 3M565.3 170.4l-3 3c-1 1-1 2.7 0 3.7l3 3M554.7 170.4l-3 3c-1 1-1 2.7 0 3.7l3 3M544 170.4l-3 3.2c-1 .9-1 2.4 0 3.3l3 3.2M572 175.7l-3 3c-1 1-1 2.7 0 3.8l3 2.9M561.3 175.7l-2.9 3c-1 1-1 2.7 0 3.8l3 2.9M550.7 175.7l-3 3c-1 1-1 2.7 0 3.8l3 2.9"></path>
    </g>
    <g id="rama1" fill="#f5dbc8" stroke-width="0">
      <path d="M80 377.9a216 216 0 0 0 6.7-49.1c-.3-15-4.3-29.1-9.4-43s-10.9-26.6-14.6-40.5a82.9 82.9 0 0 1 19.6-82c1.4-1.4-.9-3.6-2.3-2.2a85.9 85.9 0 0 0-22.2 77c2.8 14.3 8.4 27.8 13.6 41.2a158.6 158.6 0 0 1 11.7 42c1.6 16.6-1.4 33.3-4.8 49.5L77 377c-.4 2 2.6 2.9 3 .9Z"></path>
      <path d="M60.3 198.2c-.2-.3 0 .1 0 0v-.2l-.3-.6-.4-1.5-1-3.3c-.2-1-.6-2-1.2-3a6.7 6.7 0 0 0-3.7-2.5c-2.9-.9-6.2.8-7 3.8-.7 2.5.2 5.5 2.2 7.2 2.7 2.4 6.5 2.7 10 2.5.8 0 1.6-.7 1.6-1.6 0-.9-.7-1.7-1.6-1.6a22.5 22.5 0 0 1-4.1-.1h-.5l-.9-.3-.9-.3c.3.1-.1 0-.1-.1l-.6-.3-.4-.2s-.4-.4-.1-.2l-.6-.5-.2-.2c.2.3 0 0 0 0l-.5-.8c-.2-.4.1.3 0-.1l-.1-.3a8 8 0 0 1-.2-.7c0-.1 0-.5 0 0V192c0 .5 0 .1 0 0v-.3l.2-.3c-.2.3 0 0 0 0l.2-.4s.3-.3 0 0l.2-.3s.5-.3.1 0l.7-.5c-.3.2.1 0 .2 0l.4-.2h.7l.5.2s.5.1.2 0l.4.2.7.5.4.4c.2.2-.2-.4 0-.1l.2.3.2.5.2.3-.1-.2v.2l.5 1.4c.7 2 1 4.2 1.9 6 .3.8 1.5 1.1 2.2.7.7-.5 1-1.4.5-2.2ZM75.7 286.4c-3.2-1.7-6.7-3.3-10.4-2.7-3 .4-5.8 2.4-6.8 5.3s.2 5.7 3 6.8c2.4 1 5.7.7 8.1-.3 2.9-1.3 4.5-4.3 6.4-6.6.5-.6.6-1.6 0-2.2-.6-.6-1.7-.7-2.3 0-1.4 1.7-2.6 3.9-4.3 5.2-1.5 1.2-3.8 1.5-5.8 1.2h-.4a4.7 4.7 0 0 1-.7-.3l-.3-.1-.2-.2c.1.1 0 0-.1 0l-.2-.3-.2-.3c-.2-.5-.2-.7-.1-1.3.2-2 2-3.3 3.9-3.7 3-.8 6.2.8 8.8 2.3 1.7 1 3.4-1.8 1.6-2.8ZM86.8 307.5a9.7 9.7 0 0 1 5-8.2l.6-.3h1.9a3 3 0 0 1 1.7 1.4l.4 1.2c.2.5 0-.1 0 .2v.3c0 .1 0 .4 0 0v.5c-.2.4-.7 1-1.2 1.4l-1.2.7s-.3.1 0 0l-.4.1-.8.3c-2.4.7-5 .8-7.6.8-2 0-2 3.2 0 3.2 2.8 0 5.8-.2 8.5-1 2.4-.7 5-2.1 5.7-4.6.9-2.7-.7-5.9-3.2-7.1-3-1.5-6.3-.2-8.6 2a13.2 13.2 0 0 0-4 9c0 1 .8 1.6 1.6 1.6 1 0 1.6-.7 1.6-1.5ZM81.3 358.5c-1.2-2.2-3.5-4-5.7-5.2-2.4-1.2-5.2-2-7.7-.6s-3.8 4.5-3 7.3 3.6 3.9 6.3 4c3.5.2 6.6-1.8 9.6-3.3.8-.4 1-1.5.6-2.2-.5-.7-1.4-.9-2.2-.5l-3.6 1.8c-.5.2-1 .5-1.6.6l-.9.3h-.3l-.3.1c-1 .1-1.7 0-2.5-.1l-1-.5s-.2 0-.3-.2c.1 0 .2.2 0 0l-.2-.2-.1-.1c-.9-1.2-.4-3.1.8-4 .4-.4.6-.5 1-.6H71.4a14.8 14.8 0 0 1 6.6 4l.7 1c1 1.8 3.8.2 2.8-1.6ZM59.7 227.6c.5-2.3 1-4.6 2.4-6.5 0 0-.2.1 0-.1l.3-.3.5-.5.2-.2.3-.1.7-.5c.2-.1-.3.2.1 0l.3-.1a6.9 6.9 0 0 1 .8-.2h.9c.3 0 .5 0 .7.2-.2-.1 0 0 0 0l.5.2s.2.2 0 0l.3.3.2.2c-.2-.2 0 0 0 .1l.3.4a3.9 3.9 0 0 1 .2.8v1.2c0-.4 0 0 0 0l-.2.7-.2.4s0 .2 0 0a6.8 6.8 0 0 1-.8 1.4l-.2.2-1.1.8c-1 .7-2 1-3.4 1.3l-3.9.6c-.8 0-1.5.7-1.5 1.6 0 .8.7 1.6 1.5 1.6 3-.3 6-.7 8.5-2.1 2.5-1.3 4-3.6 4.4-6.4.3-2.5-.8-5.1-3.2-6.2-2.6-1.1-5.6-.2-7.7 1.6-2.5 2.2-3.3 5.7-4 8.8-.1.8.3 1.7 1.2 2 .8.2 1.7-.3 2-1.2ZM61.3 247.4c-2.6-1.3-5.5-2.4-8.4-1.7a6.3 6.3 0 0 0-4.6 4.7 4.8 4.8 0 0 0 3.6 5.5c2.3.6 4.7-.2 6.4-1.7 1.5-1.3 2.4-3.1 3.5-4.6.5-.7.1-1.8-.5-2.2-.9-.5-1.7-.1-2.2.6l-1 1.4-.5.8-.3.5s-.2.2 0 0l-.3.2-.7.8-.4.4-.3.2-.5.3s-.4.1-.2 0h-.1l-.7.3s-.3 0 0 0H53.2c-.1 0-.4 0 0 0h-.3l-.6-.2c-.4-.1.2 0 0 0l-.3-.2-.2-.1c.2.1 0 0 0 0l-.3-.3c-.1-.2.2.3 0 0l-.1-.3s0 .3 0 0v-.2c-.2-.4-.1.2 0-.1 0-.2 0-.6-.1-.3l.1-.5c.1-.4 0 .2 0 0l.1-.3.2-.2.1-.3c0 .2.1 0 .1 0l.3-.3.2-.2c.2-.1.3-.3.5-.3l.2-.2c.3-.2-.1 0 .2 0 1-.3 2-.3 3 0 1.2.2 2.2.7 3.3 1.2.8.4 1.8.2 2.2-.5.4-.7.2-1.8-.6-2.2ZM72.5 268.3a29.6 29.6 0 0 1 1-4.2s.2-.2.1 0a9.4 9.4 0 0 1 1-1.7c.1-.2-.3.3 0-.1a5.7 5.7 0 0 1 .8-.8c.2-.2 0 0 0 0l.5-.4h.3c-.4.1-.2 0 0 0l.5-.2h.2c.4-.1-.3 0 0 0h1.5l.4.2.3.1.2.2c-.3-.2 0-.1 0 0 0 0 .4.5.2.1l.2.4c.1.2 0-.3 0 0v1.5l-.9 1.4c-.2.2.2-.2 0 .1-.2 0-.2.2-.3.2l-.3.3s-.3.2 0 0l-.6.4-.3.2s-.4.2-.1 0c-.5.2-1 .4-1.5.4 0 0 .3 0 0 0h-.4l-1 .1-3.4-.2c-.8 0-1.6.8-1.6 1.6 0 1 .7 1.5 1.6 1.6 2.4.2 5 .5 7.1-.4 2.7-1 4.8-3.5 5-6.4.1-2.4-1.8-4.4-4-4.9s-4.7.2-6.3 1.9c-2 2-2.7 5-3.3 7.8-.2.8.2 1.7 1.1 2 .8.1 1.8-.3 2-1.2ZM86.2 327.6a29.2 29.2 0 0 0-7.6-6.2c-2.3-1.2-5.1-1-7.1.6s-2.7 4.7-1.6 7.1c1.2 2.8 4.6 3.8 7.5 3.5 1.5-.1 3-.5 4.5-1 1.2-.5 2.4-1 3.6-1.3 2-.6 1.1-3.6-.9-3.1s-3.7 1.4-5.6 2c-1.8.4-4.4.7-5.8-.8-.5-.5-.7-1.1-.7-1.8v-.4l.3-.7.2-.4.1-.3.2-.1.2-.3.6-.3c.2-.2 0 0 0 0l.3-.2h.3s.5-.1.2 0c.8-.2 1.5 0 2 .3 2.7 1.4 5 3.5 7 5.7 1.4 1.5 3.6-.8 2.3-2.3ZM86.2 346.6a17 17 0 0 1 6.5-4l.7-.2h.3c.1 0 .5-.1.2 0 1-.2 1.6 0 2.3.7l.3.4a4.5 4.5 0 0 1 .3.4c.2.5.2.7.1 1a4 4 0 0 1-.6 1.3l-.1.3c.1-.2 0 0 0 0l-.3.3-.5.3c-.2.1.3 0 0 0l-.3.1h-.3c.4 0 .2 0 0 0H94c.4 0 0 0 0 0l-.7-.1-1.3-.4c-2-.8-4.2-2-6.4-2.7-.8-.3-1.7.3-2 1-.2 1 .3 1.8 1.2 2 2 .8 4.3 2 6.6 2.8s4.7 1 6.6-.5c2.1-1.8 3-5.2 1.3-7.5a6 6 0 0 0-3.5-2.5 7.1 7.1 0 0 0-4 .3c-2.8 1-5.7 2.6-7.7 4.8-1.5 1.5.8 3.7 2.2 2.2Z"></path>
    </g>
    <g id="rama2" fill="#f5dbc8" stroke-width="0">
      <path d="M536.1 377c-3.5-16.3-7-32.9-6.5-49.7.5-14.8 5-29 10.1-42.8 5.1-13.5 11-26.9 14.5-41a86.2 86.2 0 0 0-21-82.4c-1.5-1.4-3.8.8-2.3 2.3a82.4 82.4 0 0 1 20.8 76.6c-3.1 14-8.8 27.3-14 40.7a152 152 0 0 0-11 41.8 172.2 172.2 0 0 0 5 49.2c.5 2 1 4.1 1.3 6.2s3.5 1.2 3.1-.8Z"></path>
      <path d="M555.6 199.8c.8-1.7 1.1-3.6 1.6-5.4a22.3 22.3 0 0 1 .7-2l.1-.3c0 .2-.1.2 0 0v-.1l.3-.5.1-.2c.2-.3.2 0 0 0l.3-.3a5.7 5.7 0 0 1 1.5-.8l.4-.1c.4-.2-.3 0 .1 0h.9l.3.1.7.4c-.3-.2 0 0 0 0l.3.3c.3.3-.1-.3 0 0l.2.3.2.3c-.2-.4 0 0 0 .2l.1.3c0 .1 0 .5 0 0v1.1c0 .4.1-.4 0 0l-.2.9-.1.3c-.1.4.2-.3 0 0l-.4.7-.2.3c.2-.3 0 0 0 0a5.5 5.5 0 0 1-.8.8c-.2 0-.4.2-.5.3l-.4.2-.3.1c.1 0 .1 0 0 0a11.6 11.6 0 0 1-2.3.6h-.7l-1 .1h-2.3c-.8 0-1.6.7-1.6 1.6 0 .9.7 1.5 1.6 1.5 3 .2 6.4 0 9-1.6a7.5 7.5 0 0 0 3.4-7 5.6 5.6 0 0 0-1.7-3.5c-1.1-1-2.7-1.7-4.2-1.6s-3.3 1-4.4 2.1c-.8.8-1.2 1.9-1.6 2.9l-1 3.6a37.2 37.2 0 0 1-.7 2.5l-.1.3c-.2.3.1-.4 0 0-.4.7-.3 1.7.5 2.1.7.4 1.8.3 2.2-.5ZM539 289.2c2.5-1.4 5.2-2.7 8.1-2.4 1.8.1 4 1.4 4.5 3.2.1.4.2.9.1 1.4l-.3.8c-.1.2.2-.2 0 0l-.1.2-.3.2c.2-.2 0 0 0 0l-.3.2-.8.2c-1.6.4-4.1.2-5.6-.7-2-1.2-3.4-3.8-5-5.6-.5-.7-1.6-.6-2.2 0-.6.6-.5 1.6 0 2.2 1.7 2.1 3.2 4.7 5.6 6.2s5.6 1.6 8.2 1c2.7-.8 4.3-3.1 4-5.9-.5-3.2-3-5.5-6-6.3-4-1-8 .7-11.5 2.5-1.8 1-.2 3.8 1.6 2.8ZM529.5 307.5c-.2-3.1-1.2-6-3.3-8.3s-5.1-4.2-8.3-3.2c-2.7.8-4.7 3.6-4.4 6.4s2.6 4.6 5.1 5.5a47.6 47.6 0 0 0 9.3 1.2c2 0 2-3.2 0-3.2a31.5 31.5 0 0 1-8.3-1l-.3-.1a7.9 7.9 0 0 1-1.4-.8l-.2-.2c.2.2 0 0-.1 0a10 10 0 0 1-.5-.5c-.2-.2 0 0 0 0l-.2-.3-.1-.2v-.2c-.1-.1-.2-.6-.2-.3v-.5a4.2 4.2 0 0 1 .5-1.4l.2-.3c.4-.5.6-.6 1-.9l.3-.1h.2l.4-.2c.7 0 1 0 1.5.2 1 .3 2 1 2.8 1.9 1 .9 1.7 2 2.1 3s.7 2.3.7 3.5c0 .8.7 1.6 1.6 1.6.8 0 1.6-.8 1.6-1.6ZM534.5 360.1l.3-.5c.2-.2 0 0 0 0l.3-.3 1-1.1a14.8 14.8 0 0 1 5-3l.8-.1h.3c.3 0 .8 0 1.1.2 1.5.6 2.4 2.4 1.7 4 0-.2-.1.2-.2.3-.2.3 0 .1 0 0l-.3.3a3 3 0 0 1-1 .6l-.3.1-.7.2c-.3 0-.1 0 0 0h-2.1l-.4-.1-2-.7-4-2c-.9-.4-1.8-.2-2.3.5-.4.7-.2 1.8.6 2.2 2.8 1.4 5.6 3.2 8.8 3.3 2.5.2 5.3-.8 6.6-3 1.3-2.5.6-5.8-1.6-7.6a6 6 0 0 0-4-1.5c-1.4 0-2.6.5-3.7 1a15 15 0 0 0-6.7 5.6c-1 1.8 1.8 3.4 2.8 1.6ZM556.5 226.8c-.6-3-1.4-5.8-3.3-8.2-1.8-2-4.8-3.2-7.4-2.5s-4.3 3.2-4.2 5.8 1.4 5 3.6 6.6c2.7 1.9 6.1 2.2 9.3 2.6.8 0 1.6-.8 1.6-1.6 0-1-.7-1.5-1.6-1.6-2.1-.2-4.6-.5-6.5-1.4a8.1 8.1 0 0 1-1.6-1s0-.2-.2-.2 0-.2-.2-.2l-.2-.3-.1-.2-.2-.2-.3-.7c-.2-.2 0 0 0 0l-.2-.4-.2-.7V221.2c0 .4 0 0 0 0 0-.3 0-.5.2-.7l.2-.4.1-.2c-.2.3 0 0 0 0l.3-.3.4-.2.2-.1.6-.2c.3 0-.4 0 0 0h.8s.3 0 0 0l.9.2a5 5 0 0 1 2.1 1.3c.8.8 1.4 2 1.7 3 .5 1.3.8 2.7 1.1 4 .2.9 1.2 1.4 2 1.2.8-.3 1.2-1.1 1-2ZM553.4 250.1l3-1.2c1-.2 2-.4 2.8-.2l.5.2c.1 0 .4.1.1 0l.3.1.5.3c.2.2 0 0 0 0a4.3 4.3 0 0 1 .7.7l.2.3.1.3.2.6c0 .2 0-.4 0 0v.3s0 .2 0 0v.2l-.1.2c0-.2 0 0 0 0l-.2.2c.2-.2 0 .1 0 .2l-.2.1c.1-.1-.1 0-.1 0-.1.1-.6.4-.3.3l-.5.1h-.3c-.4.2.3 0-.1.1H559c-.2 0-.4 0-.6-.2h-.3l-.1-.1-1-.6-.2-.2-.4-.4-.5-.5-.1-.2c.2.3 0 0-.1 0l-.7-1-1-1.7c-.6-.7-1.4-1-2.2-.6-.7.4-1.1 1.5-.6 2.2 1 1.3 1.8 2.8 3 4a7.3 7.3 0 0 0 6 2.4c2.4-.3 4.7-2 4.7-4.7 0-2.4-1.9-4.5-4-5.4-3-1.2-6.4.2-9.1 1.5-.8.4-1 1.5-.6 2.2.4.7 1.4.9 2.2.5ZM543.7 267.4c-.5-2.5-1.1-5-2.8-7.1-1.4-1.8-3.5-2.8-5.8-2.6s-4.4 1.4-4.9 3.8c-.5 2.8 1.4 5.9 3.9 7.2s5.4 1 8 .7c.9 0 1.7-.6 1.6-1.6 0-.8-.7-1.6-1.5-1.5l-3.2.2h-1.3l-.4-.1c-.3 0 .4 0 0 0l-.8-.2-.6-.2-.3-.1-.6-.4c-.3-.2.2.1 0 0l-.4-.4-.3-.3-.5-.7c-.3-.5-.4-.8-.5-1.4v-.7s.2-.4.1-.1v-.1l.2-.2c.1-.3-.2.1 0 0l.2-.2c0-.1.2-.2 0 0l.1-.1.5-.3c-.4.2 0 0 .2 0l.6-.2h.8s.5.1 0 0h.3l.6.3c.1 0 .4.1 0 0h.2l.5.4c.1 0 .2.2 0 0l.3.2.6.6c.2.3 0 .1 0 0l.3.4.4.8.2.3s.2.5 0 .2l.4.9.8 3.4c.2.8 1.2 1.3 2 1.1.8-.2 1.3-1.1 1-2ZM529.2 329.9c1.8-2 3.9-3.8 6.2-5.3l.7-.4.3-.2s-.2.1 0 0l.7-.1.3-.1h1.2l1 .5c.1.2-.2 0 0 0 0 .2.1.2.2.3l.3.3.4 1.2a3 3 0 0 1-.2 1.9c-1 1.6-3.6 1.7-5.4 1.3-2.2-.4-4.2-1.5-6.4-2.1-2-.5-2.8 2.5-.9 3 2.4.7 4.5 1.9 7 2.3 2.9.5 6.4 0 8.2-2.6 1.5-2.2 1.1-5.4-.6-7.4a6.2 6.2 0 0 0-6.7-1.5c-1.6.6-3 1.7-4.4 2.8a31 31 0 0 0-4.2 3.8c-1.3 1.5 1 3.8 2.3 2.3ZM529.2 344.4a20 20 0 0 0-6.9-4.4 9 9 0 0 0-3.8-.9c-1.5.1-2.9.7-4 1.8s-1.6 2.5-1.5 4 .8 2.8 1.7 3.9c1.6 1.8 4.1 1.9 6.3 1.3 1.4-.4 2.7-1 4-1.6l3.5-1.5c.8-.2 1.3-1 1-2-.2-.7-1-1.3-1.9-1l-3 1.2-2.6 1.2-2.7.8h-1.2c.4 0 .1 0 0 0 0 0-.6-.2-.3 0l-.5-.3c-.2-.2.2.2 0 0l-.2-.3-.2-.2c.1.2 0 0 0 0l-.5-.8c-.3-.8-.3-1.4.1-2l.8-.9.4-.2.4-.1.3-.1h.8c.3 0-.4 0 0 0h.4l1.4.5c2.1.8 4.4 2.2 6 3.8 1.4 1.5 3.6-.8 2.2-2.2Z"></path>
    </g>
    <path id="fondo" fill="#f5dbc8" stroke-width="0" d="M662.2 365.7c-39.3-17.4-94.5-46-137.4-45.5-32.2.4-63.6 10.3-93.5 22.4-17.6 7.1-35.4 15.1-54.4 16-20.8.8-40.8-7.1-60.6-13.6a482.5 482.5 0 0 0-204.6-21c-54.5 6.2-97.6 20.4-129.9 41.7"></path>
    <g id="plant1" stroke-width="0">
      <path fill="#f5635a" d="M278.3 278c-13.4-2-24-10.9-33.5-20-4.9-4.6-9.6-9.5-14.6-14a279 279 0 0 0-16.9-14c-6.5-5-13.1-9.9-19.8-14.7-1.5-1.2-3 1.4-1.5 2.6 11.9 8.7 23.9 17.3 35 27.1 10 9 19 19.6 30.2 27.4 6 4.2 13 7.4 20.3 8.5 1.8.3 2.7-2.6.8-2.9Z"></path>
      <path fill="#f5635a" d="M226.8 241c-7.6-15.6-13.7-32-17.4-49-.4-1.9-3.3-1.1-3 .8 3.8 17.2 10.1 33.9 17.8 49.7.8 1.7 3.4.2 2.6-1.5Z"></path>
      <path fill="#f5635a" d="M228.9 243.4a110.8 110.8 0 0 1 3.2-40.4c.6-1.9-2.3-2.7-2.9-.8-2.2 6.5-3 13.5-3.5 20.4s-.6 14 .2 20.8c.2 2 3.2 2 3 0ZM233.6 249.3c-7.8-1.4-16.9-6.3-24.5-8.8a70.6 70.6 0 0 0-46 .8c17.5 9.8 20.5 13.7 40.6 13.8 4.5 0 26.4-3 30-5.8M243.6 260.6c-18.9-3-43.3 6.3-58.7 17.6 31.8 9.3 49.7-10 58.7-17.6M240.4 256c-5-33.9 10.7-58.8 27.6-68.6 3.2 32.5-10.4 58.6-27.5 68.5M254 268.2c-1.6-7.4 5.3-26.8 26-29.6.8 15.8-11.6 24.8-26 29.6"></path>
      <path fill="#de010a" d="M201.6 186.4c.4 3-3.3 5.8-1.2 7 2.7 1.7 4.4-2 4.9-2.1 1.3-.4 1.9 2.2 3.3 2.2 1.7 0 1.5-3.8 3.2-3.5.8.2 1 1.1 1.6 1.7 1 1.2 5-.2 4-1.7-2-3.6-2.4-4.6-2.4-5 .1-.6 6.7-2.7 5-9.3-1.5-5.1-7.2-5-8.7-5.5-2.1-.9-2.6-4.2-6-3.9-3 .3-4 4.1-5.9 5-3 1.4-6.7 2.8-6 8.4.4 2.9 2.2 8.2 8.2 6.7"></path>
      <path fill="#f5dbc8" d="m199.2 177.3.1.3c.1.2 0-.1 0 0l.2.4.5 1.2c.6 1 1.3 2 2.1 2.8.3.3.8.3 1 0 .3-.3.3-.8 0-1l-.6-.9-.2-.1s-.1-.2 0-.1l-.3-.3a11 11 0 0 1-.7-1.2l-.2-.5-.1-.3s-.1-.2 0 0l-.5-1c-.1-.3-.7-.5-1-.3-.4.3-.5.7-.3 1ZM213.3 175.5l-1.5 2-.6.8-.4.5-.2.4-.2.1v.1c-.3.3-.4.8 0 1 .2.3.8.4 1 0l3.2-4.2c.2-.3 0-.8-.3-1-.4-.2-.8 0-1 .3ZM205 173.9c.3 1.8.3 3.7.7 5.5 0 .4.5.6.9.5.4 0 .6-.5.5-.9l-.7-5.5c0-.4-.6-.6-1-.5-.3 0-.5.5-.4.9Z"></path>
      <path fill="#de010a" d="M226.2 198.3c-1.6 2.8-4.3 3.4-3 5.2 2 2.8 4.1-.3 4.5-.3 1.2 0 .9 2.3 2 2.7 1.4.4 2.3-2.6 3.6-1.8.5.3.5 1.1.7 1.7.6 1.3 3.3 1.5 3.5.1.2-2.1-.4-4.7-.2-5 .2-.4 6-.2 6.5-6 .3-4.4-4.3-5.9-5.3-6.8-1.4-1.3-.8-4-3.5-4.7-2.6-.7-4.4 2-6.2 2.2-2.8.3-6.3.6-7.2 5-.5 2.4-.2 6.5 4.6 7.7"></path>
      <path fill="#f5dbc8" d="M226.8 190.3v1.7l.6 2.1c.1.4.5.6 1 .5.3-.1.6-.5.4-.9 0-.4-.2-.8-.4-1.3v-.5c0 .3 0 .1 0 0l-.2-1.6c0-.4-.3-.8-.7-.8-.4 0-.8.4-.8.8ZM238.5 194.1l-1.8 1.4-.1.1c-.1.1 0 0 0 0l-.2.1-.4.3a6.7 6.7 0 0 1-.6.3s-.1.1 0 0h-.1l-.2.1c-.4.2-.6.6-.5 1 .1.3.5.6 1 .5.7-.3 1.4-.7 2-1.2l.8-.6.4-.4c-.2.1 0 0 0 0h.1l.3-.3c.3-.2.5-.7.3-1-.2-.3-.7-.5-1-.3ZM233.2 189.2l-1.6 4.5c-.2.4.1.8.5 1 .4 0 .8-.2 1-.6l1.5-4.5c.2-.4-.1-.9-.5-1-.4 0-.8.2-1 .6Z"></path>
      <path fill="#de010a" d="M188 219.3c1.7 3.2 1.7 5.2 4 4.7 3.2-.9 1-4 1.2-4.3.5-1.1 2.5 0 3.3-1 .9-1-1.6-3-.4-3.9.5-.4 1.2 0 1.9 0 1.3-.1 2-2 1.3-3.2s-4.5-1.4-4.7-1.6c-.3-.4 2-5.8-3.2-8.3-4-2-7 1.8-8.3 2.4-1.7 1-4-.6-5.7 1.6-1.6 2.2.3 4.9-.2 6.6-.7 2.7-1.3 6.1 2 8.5 2 1.4 6.5 3.2 8.9-1.5"></path>
      <path fill="#f5dbc8" d="M180.9 216.9c.8.3 1.7.7 2.6.7s1.8-.3 2.6-.5c.4-.2.7-.6.6-1s-.6-.6-1-.5l-1.4.4h-.2l-.2.1s-.1 0 0 0H183.3c-.2 0 .1 0 0 0l-.6-.2-1.4-.5c-.4-.1-.9.2-1 .6 0 .4.2.7.6.9ZM189.7 206.4l.4 1.5a8.2 8.2 0 0 1 .2.8s0 .1 0 0v.8c0 .5-.2 1-.3 1.4-.1.4.1.8.5 1s.8-.2 1-.6c.2-.8.4-1.7.3-2.6 0-.9-.4-1.8-.7-2.7-.1-.3-.5-.6-1-.5-.3.1-.6.5-.5 1ZM182 209.4l2.3 1.5a18.5 18.5 0 0 1 1.6 1l.1.1.4.3c.3.3.8.3 1 0 .3-.3.4-.8 0-1-.7-.7-1.4-1.2-2.3-1.6l-1-.6-.5-.4h-.1c0-.1 0-.1 0 0l-.1-.1-.3-.3c-.3-.2-.8-.3-1 0-.3.3-.4.8 0 1.1Z"></path>
    </g>
    <g id="plant2" stroke-width="0">
      <path fill="#f5635a" d="M367.8 280.9c13.4-2 24.3-10.8 33.9-19.9 5-4.7 9.7-9.6 14.7-14.2 5.4-5 11.2-9.6 17-14.1 6.5-5 13.1-10 19.8-14.8 1.5-1.2 0-3.8-1.5-2.6-11.8 8.6-23.6 17.2-34.6 26.8-10.2 9-19 19.5-30 27.2A48 48 0 0 1 367 278c-2 .3-1.1 3.2.8 2.9Z"></path>
      <path fill="#f5635a" d="M421 242.5c7.7-15.8 14-32.5 17.7-49.7.4-1.9-2.5-2.7-2.9-.8-3.7 17-9.8 33.4-17.4 49-.8 1.7 1.8 3.2 2.6 1.5Z"></path>
      <path fill="#f5635a" d="M419.3 243.4a111.5 111.5 0 0 0-3.3-41.2c-.6-1.9-3.5-1-2.9.8a109.1 109.1 0 0 1 3.2 40.5c-.2 1.9 2.8 1.9 3 0ZM411.6 249.3c7.8-1.4 16.9-6.3 24.4-8.8 15-5 31.5-4.6 46.2.8-17.6 9.8-20.6 13.7-40.7 13.8-4.5 0-26.4-3-30-5.8M401.6 260.6c18.8-3 43.3 6.3 58.7 17.6-31.8 9.3-49.8-10-58.7-17.6M404.7 256c5-33.9-10.6-58.8-27.5-68.6C374 220 387.6 246 404.7 256M391.2 268.2c1.5-7.4-5.3-26.8-26-29.6-.8 15.8 11.6 24.8 26 29.6"></path>
      <path fill="#de010a" d="M443.6 186.4c-.4 3 3.3 5.8 1.1 7-2.6 1.7-4.3-2-4.8-2.1-1.3-.4-2 2.2-3.3 2.2-1.7 0-1.5-3.8-3.2-3.5-.8.2-1 1.1-1.6 1.7-1 1.2-5-.2-4-1.7 2-3.6 2.4-4.6 2.4-5-.1-.6-6.7-2.7-5-9.3 1.5-5.1 7.2-5 8.7-5.5 2.1-.9 2.6-4.2 5.9-3.9 3.1.3 4 4.1 6 5 3 1.4 6.7 2.8 6 8.4-.4 2.9-2.2 8.2-8.2 6.7"></path>
      <path fill="#f5dbc8" d="m444.7 176.6-.4 1s0-.1 0 0l-.2.2a12 12 0 0 1-1 1.7c0 .1 0 .2-.2.3v.1l-.2.2-.7.8c-.3.3-.3.8 0 1 .3.4.8.4 1 0a13.9 13.9 0 0 0 2.7-3.9l.2-.4c0-.1-.1.2 0 0v-.3c.3-.3.2-.8-.2-1-.3-.2-.8-.1-1 .3ZM430.6 176.2c1 1.5 2 2.9 3.2 4.3.2.3.8.3 1 0 .3-.3.3-.7 0-1 0-.1 0-.2-.2-.3l-.2-.3-.4-.6-.7-.8-1.4-2c-.2-.4-.6-.5-1-.3-.3.2-.5.7-.3 1ZM438.8 173.5l-.7 5.5c0 .4 0 .8.5 1 .4 0 .8-.2 1-.6.2-1.8.3-3.7.6-5.5 0-.4 0-.8-.5-1-.4 0-.9.2-1 .6Z"></path>
      <path fill="#de010a" d="M419 198.3c1.6 2.8 4.3 3.4 3 5.2-2 2.8-4.1-.3-4.5-.3-1.2 0-.9 2.3-2 2.7-1.4.4-2.3-2.6-3.6-1.8-.5.3-.5 1.1-.7 1.7-.6 1.3-3.3 1.5-3.5.1-.2-2.1.4-4.7.2-5-.2-.4-6-.2-6.5-6-.3-4.4 4.3-5.9 5.3-6.8 1.4-1.3.8-4 3.6-4.7 2.5-.7 4.3 2 6.1 2.2 2.8.3 6.3.6 7.2 5 .5 2.4.2 6.5-4.6 7.7"></path>
      <path fill="#f5dbc8" d="m417 190.3-.2 1.6s0 .2 0 0v.5l-.5 1.3c0 .4.2.8.6 1 .4 0 .8-.2.9-.6.2-.7.5-1.4.5-2.2l.1-1.7c0-.3-.3-.7-.7-.7-.4 0-.7.3-.8.8ZM406 195.4l.2.2.2.1s.1.1 0 0l.2.2.2.1.8.7c.6.5 1.3.9 2 1.2.4.1 1-.2 1-.5 0-.5-.1-.8-.5-1h-.3c.1 0 0 0 0 0l-.1-.1a6.7 6.7 0 0 1-1-.6h-.1c-.1-.2.1 0 0 0l-.1-.2-1.8-1.4c-.3-.2-.8 0-1 .3-.2.4 0 .8.3 1ZM410.6 189.6l1.6 4.5c.1.4.5.7.9.5.4-.1.7-.5.5-.9l-1.6-4.5c-.1-.4-.5-.7-1-.5-.3 0-.6.5-.4.9Z"></path>
      <path fill="#de010a" d="M457.1 219.3c-1.6 3.2-1.6 5.2-3.8 4.7-3.3-.9-1.1-4-1.3-4.3-.5-1.1-2.5 0-3.3-1-.9-1 1.6-3 .5-3.9-.6-.4-1.3 0-2 0-1.3-.1-2-2-1.3-3.2s4.5-1.4 4.7-1.6c.3-.4-2-5.8 3.2-8.3 4-2 7 1.8 8.3 2.4 1.7 1 4-.6 5.7 1.6 1.6 2.2-.3 4.9.2 6.6.7 2.7 1.3 6.1-2 8.5-2 1.4-6.5 3.2-8.9-1.5"></path>
      <path fill="#f5dbc8" d="M464 215.4a24.3 24.3 0 0 1-2 .7h-.1c-.2 0 .1 0 0 0h-.7c.1 0 .2 0 0 0h-.3l-1.5-.5c-.3-.1-.8.1-.9.5s.1.8.5 1c.9.2 1.8.5 2.7.5s1.8-.4 2.6-.7c.4-.2.6-.5.5-1 0-.3-.5-.6-.9-.5ZM454 206c-.2 1-.6 1.8-.7 2.8 0 .8.2 1.7.4 2.5.1.4.6.7 1 .5s.6-.5.5-.9a15 15 0 0 1-.3-1.3s0-.2 0 0v-.9c-.1.1 0 0 0 0v-.3l.1-.5.5-1.5c.1-.3-.1-.8-.5-.9-.4 0-.8.2-1 .5ZM462 208.3l-.2.3s-.1 0 0 0l-.2.1-.5.3-1 .7c-.9.4-1.7 1-2.4 1.6-.3.2-.2.8 0 1 .4.3.8.3 1 0l1.1-.7 1.1-.7c.8-.4 1.5-.9 2.2-1.5.3-.2.3-.8 0-1-.3-.3-.7-.3-1 0Z"></path>
    </g>
    <g id="flower" stroke-width="0">
      <path fill="#f5dbc8" d="M356.8 196.5c0-7.2-6.6-7.7-10.6-8.7 1.9-2.3 7.7-6.9 2.6-12.5-5.5-6-11.9-2.6-16-.3-.2-5.4-4.5-12-12.9-10.5-5.3.9-8 4-9 9.4-2-2.9-9.3-2.1-12.6 1.5-6.4 7.2-.9 10.7 1 13.4-5-1.9-11.4 3-12 8.4-.7 5.3 4.5 10.6 9.8 10.1-1.7.5-4.4 8 1.4 13.3 6.9 6.2 12.4.8 14.7-.4-1.6 4.9 3 10 11.2 9.9 5.2-.1 8.4-4.8 9-10 3.6 2.6 11.1 1.6 14.2-1.6s3.3-7 1-12c3.6-1.8 8.1-2.3 8.1-10ZM322 207.1a10 10 0 1 1 0-19.9 10 10 0 0 1 0 20Z"></path>
      <path fill="#1d4b70" d="M358.3 196.5c0-3.2-1.4-6-4.2-7.8-2.3-1.3-5-1.7-7.5-2.3l.6 2.5c1.7-2 3.6-3.7 4.5-6.1 1.4-3.3.1-6.6-2.3-9s-5.7-3.7-9.2-3.2a24 24 0 0 0-8.2 3.1l2.3 1.3a12.4 12.4 0 0 0-11-12.2c-3.2-.3-6.8.6-9.4 2.6s-3.9 5-4.5 8.1l2.8-.4c-1.7-2.3-4.7-2.7-7.4-2.3-3.4.4-6.3 2-8.4 4.6-2 2.5-3.3 5.7-2.1 8.8.7 2.1 2.5 3.6 3.7 5.4l1.7-2.2c-6-2-12.7 3-13.8 9-1.3 6.4 4.7 13 11.2 12.4l-.4-3c-2.2.8-3 3.8-3.1 5.8-.4 3.5.8 6.9 3.1 9.4 2.7 2.8 6.5 4.6 10.5 3.8 2.6-.5 4.5-2 6.7-3.3l-2.2-1.7c-1.8 6.2 4 10.7 9.5 11.6 3.4.5 6.7.1 9.3-2.2a14 14 0 0 0 4.4-8.6l-2.2.9c4 2.7 10.5 2 14.3-.6 2.1-1.4 3.8-3.7 4.3-6.2.7-3-.2-6-1.5-8.9l-.5 2c2-1 4.2-1.6 6-3.1 2.3-2.1 3-5.2 3-8.2 0-1.9-3-1.9-3 0 0 2.3-.5 4.8-2.4 6.3-1.5 1.1-3.4 1.7-5.1 2.5-.8.4-.9 1.4-.6 2 1 2.1 1.8 4.5 1.2 6.8a7.3 7.3 0 0 1-3.4 4.5c-3 1.7-7.8 2.3-10.8.3-.7-.5-2 0-2.2.9a12 12 0 0 1-3 6.8c-2 1.9-4.4 2.2-7 1.8-3.9-.5-8.7-3.2-7.4-7.8.4-1.3-1-2.4-2.2-1.7-1.5.9-3 2-4.7 2.7-2.9 1-5.7 0-8-2a9 9 0 0 1-3.2-7c0-1 .2-2 .6-2.9 0-.3.2-.6.4-.8.1-.2.3-.3 0-.1 1.5-.6 1.4-3.1-.4-3-4.7.4-9.3-4.2-8.2-9 .9-4.2 5.7-8 10-6.6 1.2.4 2.5-1.1 1.7-2.2-1-1.3-2.3-2.5-3.1-4-1.1-1.9-.7-3.9.5-5.7a9.6 9.6 0 0 1 6.3-4.4c1.4-.3 4.2-.7 5.2.8.7 1 2.5 1 2.8-.4.5-2.4 1.3-4.9 3.3-6.5s4.9-2.2 7.4-2c4.8.3 8 4.7 8.2 9.2 0 1.2 1.3 1.9 2.3 1.3 4.2-2.3 9.3-4.6 13.4-.8 2 1.9 3 4.1 1.8 6.7-.9 1.8-2.4 3-3.6 4.6-.7.8-.5 2.2.6 2.5 2 .5 4.3.7 6.2 1.7 2.3 1 3.3 3 3.3 5.5 0 2 3 2 3 0Z"></path>
      <path fill="#1d4b70" d="M322 205.6c-3.5 0-6.8-2.2-8-5.5s-.1-7.3 2.7-9.5 6.7-2.5 9.7-.7 4.6 5.4 4 8.8c-.8 4-4.3 6.9-8.4 7-2 0-2 3 0 3 4.8-.1 9-3 10.8-7.6s.2-9.7-3.4-12.7-9.1-3.6-13.2-1-6.3 7.2-5.4 12c1 5.3 5.8 9.2 11.2 9.2 2 0 2-3 0-3Z"></path>
    </g>
  </svg>
</section>
<div class="spacer" style="background-color:#f5dbc8; margin-top:-5px"><p>Space for scroll 👾</p></div>

              
            
!

CSS

              
                body { background-color: #acbfbd; margin: 0 auto; }

.spacer {
  color: #1d4b70;
  font-size: 2rem;
  display: grid;
  height: 90vh;
  letter-spacing: 0.5em;
  place-items: center;
}

#waves {
  transform: translateX(-8px);
  animation: waves both;
  animation-timeline: view();
  animation-range: contain;
}
@keyframes waves {
  to { transform: translateX(8px); }  
}


text, .text, #fishessm, #wavessm, #rama1, #rama2, #plant1, #plant2, #flower {
  animation: moveUp both;
  animation-timeline: view();
}
@keyframes moveUp {
  from { transform: translateY(var(--offset)); opacity: 0; }  
  to { transform: opacity: 1; }  
}
.text { --offset: 10vh; }
#fishessm, #wavessm, .textand { --offset: 15vh; }
text { --offset: 20vh; }
#flower { --offset: 25vh; }
#plant1, #plant2 { --offset: 30vh; }
#rama1, #rama2 { --offset: 35vh; }


#fish1 {  
  animation: moveLeft both; 
  animation-timeline: view();
  animation-range: contain 100% cover 100%; 
}
#fish2 {  
  animation: moveRight both; 
  animation-timeline: view();
  animation-range: contain 100% cover 100%; 
}

@keyframes moveLeft {
  from {  transform: translateX(50%); opacity:0; }  
  to {  transform: translateX(-25%); opacity:1; }  
}
@keyframes moveRight {
  from {  transform: translateX(-50%); opacity:0; }  
  to {  transform: translateX(25%); opacity:1; }  
}

              
            
!

JS

              
                
              
            
!
999px

Console