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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <section>
    <svg xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 800 800" preserveAspectRatio="xMinYMin meet" class="svg-content">

      <defs>
        <mask id="bkgMask">
          <rect x="0" y="490" width="800" height="200" fill="white" />
        </mask>
      </defs>

      <g>

        <!-- CITY BACKGROUND 
          ---------------------------------------------------------->

        <g mask="url(#bkgMask)">
          <!-- City Back -->
          <path id="city-bkg-back" d="M642.229 554.4h-24.4l-6.629 5.543v15.828h-3.943v11.543h-18v-24.171h-5.6v-4.114h-20.686v4.114h-3.542v17.428l-18.686.458V543.2h-21.314v24.914h-15.086v-9.143h-20v18.686h-5.772v-36.4l-16.8-16.971v61.6l-9.714 1.771v-44.743l-5.543-6.743h-22.628l-5.372 4.4v27.543h-15.257v-7.143l-4.628-6.571h-24.4l-6.629 5.543v15.828h-3.943v12.286h-32.114v-12.971h-18.629v-11.943h-5.6v-4.114h-20.628v4.114h-3.543v17.428l-18.686.458V543.2h-21.314v24.914h-15.086v-9.143h-20v18.686h-5.771v-36.4l-31.429-16.971v61.6l-.628.114v6.343h-16.172v96H646.857V560.971l-4.628-6.571z" fill="#C1D5D7" />

          <!-- City Front -->
          <path id="city-bkg-front" d="M662.8 622h-10.514v-38.743h-18.972v13.086H585.2v-48.4l-36.457 23.371v72.4h-18.229v-47.885L524 589.143h-30.629l-8 5.543v25.085H462v-36.514h-34.971v40.972h-24.743v-15.086h-32.8v30.628H360v-37.257l-19.714-27.885v85.2l-4.743-3.6v-47.086l-9.086-11.086h-37.143l-8.743 7.2v14.629h-4.685v-36.457h-34.972v40.914h-24.8v-15.029h-32.8v30.629H137.2v48.4h525.6V622z" fill="#9BC3C9" />

          <!-- BUSHES 
          ---------------------------------------------------------->

          <!-- Left Bush -->
          <path id="bush-left" d="M181.886 689.543h169.143a12.111 12.111 0 002.857-8.286c-.229-6.8-5.886-12.057-12.686-11.828-.914.057-1.829.171-2.686.4-1.828-9.2-10.114-15.943-19.771-15.658a21.006 21.006 0 00-4.286.629c-1.771-10.457-11.086-18.286-22-17.886-7.257.229-13.543 4.057-17.257 9.657a12.635 12.635 0 00-6.4-1.542c-2.857.114-5.429 1.142-7.486 2.857a13.96 13.96 0 00-13.371-8.4 14.214 14.214 0 00-7.086 2.228c-3.714-7.314-11.428-12.228-20.171-11.943-12 .4-21.429 10.458-20.972 22.515a21.032 21.032 0 001.086 6.057c-8.343 1.143-14.629 8.457-14.343 17.028.057 1.372.286 2.743.629 4-3.315 2.058-5.486 5.772-5.315 9.943.115.115.115.172.115.229z" fill="#49A05D" vector-effect="non-scaling-stroke" stroke-width="2" stroke="#000" />

          <!-- Right Bush -->
          <path id="bush-right" d="M624.914 689.543c-.114-.057-.228-.172-.343-.229.229-.857.4-1.714.458-2.628.171-5.657-3.943-10.515-9.486-11.257.4-1.258.686-2.629.743-4 .285-7.943-5.943-14.572-13.829-14.858a14.395 14.395 0 00-13.314 7.886c-1.372-.857-2.972-1.428-4.686-1.486a9.32 9.32 0 00-8.8 5.543c-1.371-1.085-3.028-1.828-4.914-1.885-1.543-.058-2.972.342-4.229 1.028-2.457-3.714-6.571-6.228-11.371-6.4-7.2-.228-13.314 4.914-14.514 11.829-.915-.229-1.829-.4-2.8-.4a12.79 12.79 0 00-13.029 10.285c-.571-.171-1.143-.228-1.771-.285-4.115-.115-7.658 2.857-8.286 6.857h110.171z" fill="#49A05D" mask="url(#b)" vector-effect="non-scaling-stroke" stroke-width="2" stroke="#000" />
        </g>

        <!-- GROUND 
          ---------------------------------------------------------->
        <g id="ground">
          <path d="M690.914 691.371H128.286c-.8 0-1.429-.628-1.429-1.428 0-.8.629-1.429 1.429-1.429h562.628c.8 0 1.429.629 1.429 1.429s-.629 1.428-1.429 1.428z" />
        </g>

        <!-- CLOUDS 
          ---------------------------------------------------------->
        <g id="clouds">

          <!-- Cloud Line -->
          <g id="cloud-line">
            <path d="M145.829 175.543H104.8c-.8 0-1.429-.629-1.429-1.429s.629-1.428 1.429-1.428h41.029c.8 0 1.428.628 1.428 1.428 0 .8-.628 1.429-1.428 1.429zM169.486 175.543H152c-.8 0-1.429-.629-1.429-1.429s.629-1.428 1.429-1.428h17.486c.8 0 1.428.628 1.428 1.428 0 .8-.628 1.429-1.428 1.429z" />
          </g>

          <!-- Cloud Large -->
          <g id="cloud-large">
            <path d="M188.743 124.571c.571 0 1.086 0 1.657.058 9.657-12.058 24.514-19.829 41.2-19.829 20.229 0 37.829 11.429 46.686 28.171 1.943-.457 4-.742 6.057-.742 14 0 25.314 11.314 25.314 25.314H155.771c0-18.229 14.8-32.972 32.972-32.972z" fill="#FFF" stroke="#000" stroke-width="2" />
            <path d="M321.657 158.971h-12c-.8 0-1.428-.628-1.428-1.428 0-.8.628-1.429 1.428-1.429h12c.8 0 1.429.629 1.429 1.429s-.629 1.428-1.429 1.428zM334.571 158.971h-4.457c-.8 0-1.428-.628-1.428-1.428 0-.8.628-1.429 1.428-1.429h4.457c.8 0 1.429.629 1.429 1.429s-.629 1.428-1.429 1.428zM155.771 158.971h-16.857c-.8 0-1.428-.628-1.428-1.428 0-.8.628-1.429 1.428-1.429h16.857c.8 0 1.429.629 1.429 1.429s-.629 1.428-1.429 1.428z" />
          </g>

          <!-- Cloud Small -->
          <g id="cloud-small">
            <path d="M601.143 357.143c2.171 0 4.228.286 6.228.8 7.2-9.486 18.572-15.6 31.372-15.6 21.771 0 39.428 17.657 39.428 39.428H576.457c.057-13.6 11.086-24.628 24.686-24.628z" fill="#FFF" />
            <path d="M678.229 383.2s-.058 0 0 0H576.514c-.8 0-1.428-.629-1.428-1.429 0-14.4 11.714-26.057 26.057-26.057 1.886 0 3.828.229 5.657.629 7.829-9.772 19.371-15.372 31.943-15.372 22.457 0 40.743 18.229 40.857 40.686v.172c.057.742-.629 1.371-1.371 1.371zm-100.286-2.857h98.8c-.743-20.286-17.486-36.572-38-36.572-11.943 0-22.972 5.486-30.286 15.029-.343.457-.914.686-1.486.514-1.885-.514-3.885-.743-5.885-.743-12.286 0-22.4 9.6-23.143 21.772z" />
            <path d="M685.314 383.2h-7.143c-.8 0-1.428-.629-1.428-1.429s.628-1.428 1.428-1.428h7.143c.8 0 1.429.628 1.429 1.428 0 .8-.629 1.429-1.429 1.429zM697.257 383.2h-5.486c-.8 0-1.428-.629-1.428-1.429s.628-1.428 1.428-1.428h5.486c.8 0 1.429.628 1.429 1.428 0 .8-.629 1.429-1.429 1.429zM576.514 383.2h-4.971c-.8 0-1.429-.629-1.429-1.429s.629-1.428 1.429-1.428h4.971c.8 0 1.429.628 1.429 1.428 0 .8-.686 1.429-1.429 1.429z" />
          </g>
        </g>

        <!-- SIGN 
          ---------------------------------------------------------->
        <g>

          <!-- Signpost -->
          <path id="pole" fill="#AAAAAB" vector-effect="non-scaling-stroke" stroke-width="2" stroke="#000" stroke-miterlimit="2" d="M392.4 181.486h10.171v508.057H392.4z" />

          <!-- Bottom Arrow Panel -->
          <g id="arrow-bottom">
            <path d="M460.743 545.943l-9.657-38-99.257 24.686-5.543-22.286-29.6 49.257 50.057 27.486-5.029-20.057 99.029-21.086z" mask="url(#c)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M460.743 545.943l-9.657-38-99.257 24.686-5.543-22.286-29.6 49.257 50.057 27.486-5.029-20.057 99.029-21.086z" />

            <path d="M460.286 544.057l-9.715-38-98.971 24.629-5.543-22.229-29.6 49.2 50.057 27.486-5.028-20.057 98.8-21.029z" fill="#F64936" mask="url(#d)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M460.286 544.057l-9.715-38-98.971 24.629-5.543-22.229-29.6 49.2 50.057 27.486-5.028-20.057 98.8-21.029z" fill="#F64936" />
            <path d="M359.086 575.543L323.2 555.829l20.971-34.858 3.886 15.6 99.029-24.628 7.257 28.4-98.743 21.028 3.486 14.172zM325.6 555.2l30.914 16.971-3.028-12.114 98.685-21.028-6.4-25.029-99.028 24.629-3.314-13.258L325.6 555.2z" fill="#FFE000" />
            <path d="M430.286 530.229a4.23 4.23 0 014.228-4.229 4.231 4.231 0 014.229 4.229 4.23 4.23 0 01-4.229 4.228 4.23 4.23 0 01-4.228-4.228zm-17.715 4.171a4.231 4.231 0 014.229-4.229 4.231 4.231 0 014.229 4.229 4.231 4.231 0 01-4.229 4.229 4.231 4.231 0 01-4.229-4.229zm-17.714 4.229a4.231 4.231 0 014.229-4.229 4.23 4.23 0 014.228 4.229 4.23 4.23 0 01-4.228 4.228 4.23 4.23 0 01-4.229-4.228zm-18 3.942a4.23 4.23 0 014.229-4.228 4.23 4.23 0 014.228 4.228 4.23 4.23 0 01-4.228 4.229 4.231 4.231 0 01-4.229-4.229zm-17.714 4.172a4.23 4.23 0 014.228-4.229 4.231 4.231 0 014.229 4.229 4.23 4.23 0 01-4.229 4.228 4.23 4.23 0 01-4.228-4.228zm-17.714 4.171a4.23 4.23 0 018.457 0 4.231 4.231 0 01-4.229 4.229 4.23 4.23 0 01-4.228-4.229z" fill-rule="evenodd" fill="#FFF" />

          </g>

          <!-- Bottom Pink Board -->
          <g id="pink-bottom">
            <path d="M463.543 479.429H308.057l5.486 13.2c3.2 7.771 10.8 12.8 19.2 12.8H463.6h-.171c8.4 0 15.942-5.029 19.2-12.8l5.485-13.2h-24.571z" fill="#F1267B" vector-effect="non-scaling-stroke" stroke-width="6" stroke="#000" />
            <path d="M463.543 479.429H308.057l5.486 13.2c3.2 7.771 10.8 12.8 19.2 12.8H463.6h-.171c8.4 0 15.942-5.029 19.2-12.8l5.485-13.2h-24.571z" fill="#F1267B" />
            <path d="M463.543 476.914H308.057l5.486 13.2c3.2 7.772 10.8 12.8 19.2 12.8H463.6h-.171c8.4 0 15.942-5.028 19.2-12.8l5.485-13.2h-24.571z" fill="#F1267B" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M463.543 476.914H308.057l5.486 13.2c3.2 7.772 10.8 12.8 19.2 12.8H463.6h-.171c8.4 0 15.942-5.028 19.2-12.8l5.485-13.2h-24.571z" fill="#F1267B" />
          </g>

          <!-- Top Pink Board -->
          <g id="pink-top">
            <path d="M412 444H281.371l5.486 13.2c3.2 7.771 10.8 12.8 19.2 12.8h184c8.4 0 15.943-5.029 19.2-12.8l5.486-13.2H412z" fill="#F1267B" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M412 444H281.371l5.486 13.2c3.2 7.771 10.8 12.8 19.2 12.8h184c8.4 0 15.943-5.029 19.2-12.8l5.486-13.2H412z" fill="#F1267B" />
            <path d="M412 441.486H281.371l5.486 13.2c3.2 7.771 10.8 12.8 19.2 12.8h184c8.4 0 15.943-5.029 19.2-12.8l5.486-13.2H412z" fill="#F1267B" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M412 441.486H281.371l5.486 13.2c3.2 7.771 10.8 12.8 19.2 12.8h184c8.4 0 15.943-5.029 19.2-12.8l5.486-13.2H412z" fill="#F1267B" />
          </g>

          <!-- 24 Hour Board -->
          <g id="board-24">
            <circle vector-effect="non-scaling-stroke" cx="398.057" cy="478.857" r="44.171" stroke="#000" />
            <circle class="b24" vector-effect="non-scaling-stroke" cx="398.057" cy="474.629" r="44.171" fill="#FF9E00" stroke-width="2" stroke="#000" />
            <path class="b24" d="M398.057 512.8c-21.028 0-38.171-17.143-38.171-38.171 0-21.029 17.143-38.172 38.171-38.172 21.029 0 38.172 17.143 38.172 38.172 0 21.028-17.143 38.171-38.172 38.171zm0-74.629c-20.114 0-36.457 16.343-36.457 36.458 0 20.114 16.343 36.457 36.457 36.457s36.457-16.343 36.457-36.457c0-20.115-16.4-36.458-36.457-36.458z" fill="#FFF" />
            <path class="b24" d="M380.286 458.8c0-3.314.914-5.886 2.685-7.657 1.543-1.543 3.6-2.343 6.115-2.343 2.343 0 4.285.857 5.943 2.629 1.657 1.714 2.457 3.771 2.457 6.114 0 2.4-.515 4.686-1.6 6.914-.572 1.257-1.943 3.372-4.057 6.4-.572.8-1.429 2.114-2.572 3.829l-.971 1.428a41.34 41.34 0 00-1.429 2.229c-.171.286-.228.457-.228.514h10.4v5.2h-16.858V479.2c0-.114.4-.743 1.143-1.943.343-.514.743-1.143 1.2-1.771l1.372-2c.8-1.086 2.057-2.857 3.771-5.315 1.657-2.285 2.857-4.342 3.657-6.228.629-1.543.972-2.914.972-4.229 0-1.085-.286-2-.915-2.743-.628-.8-1.485-1.2-2.514-1.2-1.486 0-2.514.858-3.143 2.572-.228.571-.285 1.257-.285 2v1.371h-5.2v-.914h.057zm17.485 12.343l9.372-22.286h5.314v22.286h3.372v5.314h-3.372v7.6h-5.314v-7.6h-9.372v-5.314zm9.372 0v-11.029l-4.4 11.029h4.4zM381.771 496.971v5.258h-1.885v-12.4h1.885v5.257h2.286v-5.257h1.886v12.4H384v-5.258h-2.229zm8.743-7.314c.8 0 1.543.286 2.115.857.571.572.857 1.257.857 2.115v6.8c0 .8-.286 1.542-.857 2.114-.572.571-1.258.857-2.115.857-.8 0-1.543-.286-2.114-.857-.571-.572-.857-1.257-.857-2.114v-6.8c0-.8.286-1.543.857-2.115.571-.571 1.314-.857 2.114-.857zm1.029 2.972c0-.286-.114-.572-.286-.743-.228-.229-.457-.286-.743-.286-.285 0-.571.114-.743.286-.171.171-.342.457-.342.743v6.8c0 .285.114.571.342.742.229.229.458.286.743.286.286 0 .572-.114.743-.286.229-.228.286-.457.286-.742v-6.8zm6.571 9.771c-.8 0-1.543-.286-2.114-.857-.571-.572-.857-1.257-.857-2.114v-9.6h1.828v9.6c0 .285.115.571.343.742.229.229.457.286.743.286s.572-.114.743-.286c.229-.228.286-.457.286-.742v-9.6h1.943v9.6c0 .857-.286 1.542-.858 2.114a2.806 2.806 0 01-2.057.857zm7.6-12.571c1.029 0 1.829.285 2.286.857.457.514.629 1.2.629 2.114v1.829c0 .857-.343 1.6-1.029 2.228l1.371 5.429h-2l-1.142-4.686h-1.258v4.686h-1.885v-12.4h3.028v-.057zm1.086 3.028c0-.743-.343-1.086-1.086-1.086h-1.143v4h1.143c.286 0 .572-.114.743-.342.229-.229.286-.458.286-.743v-1.829h.057zm9.371 6.286c0 .857-.228 1.6-.685 2.228-.286.4-.743.686-1.315.858-.285.114-.628.114-1.028.114-.743 0-1.314-.172-1.829-.572a2.902 2.902 0 01-.971-1.2c-.229-.514-.4-1.085-.4-1.771l1.771-.114c.057.743.286 1.257.572 1.6.228.228.457.343.8.343.4 0 .743-.229.971-.629.114-.171.172-.457.172-.8 0-.514-.229-1.029-.686-1.543-.343-.343-.914-.857-1.657-1.6-.629-.628-1.086-1.143-1.315-1.6-.285-.514-.4-1.143-.4-1.771 0-1.143.4-2 1.143-2.572.457-.343 1.029-.514 1.772-.514.685 0 1.257.171 1.714.457.343.229.686.572.914.972.229.4.343.914.4 1.428l-1.771.343c-.057-.514-.172-.914-.457-1.2-.172-.229-.4-.286-.743-.286a.913.913 0 00-.8.457c-.172.229-.229.572-.229.915 0 .571.229 1.143.743 1.714.172.229.457.514.857.8.457.343.743.629.857.743.458.457.8.914 1.086 1.371.114.229.229.4.286.572.171.514.228.914.228 1.257z" fill-rule="evenodd" />
          </g>

          <!-- Blue Panel -->
          <g id="panel-blue">
            <mask id="i" x="-200%" y="-200%" width="400%" height="400%">
              <rect x="-200%" y="-200%" width="400%" height="400%" fill="#fff" />
              <path d="M260.857 178.629l54.629 232.114 165.085 8.514 79.143-97.028-298.857-143.6zm270.914 146.857H295.429l.342 1.371h260.115l1.143-1.371h-25.258zm-.114 27.428H301.886l.343 1.372h231.314l1.086-1.372h-2.972zm0-13.714H298.629l.342 1.371h245.772l1.086-1.371h-14.172zm0 6.857H300.286l.285 1.372h238.572l1.086-1.372H531.657zm0-13.714H297.029l.342 1.371H550.286l1.143-1.371H531.657zm-41.143 34.286H305.086l.343 1.371h216.914l1.143-1.371h-32.972zm0-6.858H303.486l.343 1.372H527.943l1.143-1.372h-38.572zm0 34.286H311.543l.343 1.372H500l1.086-1.372H490.514zm0-13.714H308.343l.286 1.371H511.2l1.086-1.371h-21.772zm0 20.571H313.2l.286 1.372H494.4l1.143-1.372h-5.029zm0-13.714H309.943l.343 1.371H505.6l1.086-1.371H490.514zm0-13.714H306.743l.286 1.371h209.714l1.143-1.371h-27.372zm-41.143 34.285H314.8l.286 1.372H488.8l1.143-1.372h-40.572zm0 6.858H390.343l17.886.914h.114l8.571.457H483.2l1.143-1.371h-34.972zM325.943 285.714h157.771l-2.857-1.371H285.714l.343 1.371H325.943zm0-6.857h143.486l-2.858-1.371H284.114l.343 1.371h41.486zm0 34.286H540.8l-2.857-1.372H292.171l.343 1.372H325.943zm0-13.714h186.343l-2.857-1.372H288.971l.343 1.372h36.629zm0 20.571H555.086l-2.857-1.371h-258.4l.285 1.371h31.829zm0-13.714H526.514l-2.857-1.372H290.571l.343 1.372H325.943zm0-13.715H498l-2.857-1.371H287.371l.286 1.371H325.943zM284.8 203.429h27.657l-2.857-1.372h-43.2l.286 1.372H284.8zm-3.714-15.086h-17.943l.343 1.371h20.457l-2.857-1.371zm3.714 8.228h13.429l-2.858-1.371h-30.628l.343 1.371H284.8zm-18-15.085h-5.257l.343 1.371h7.771l-2.857-1.371zm18 63.085h113.314l-2.857-1.371H276.057l.343 1.371H284.8zm0-13.714h84.743l-2.343-1.143-.114-.057-.4-.171H272.857l.286 1.371H284.8zm0-13.714H341.029l-2.858-1.372H269.6l.343 1.372H284.8zm0 20.571h99.029l-2.858-1.371H274.457l.286 1.371H284.8zm0-13.714h70.514l-2.857-1.371H271.2l.343 1.371H284.8zm0-13.714H326.743l-.686-.343-.114-.057-2.057-.972H268l.286 1.372H284.8zm0 61.714H455.2l-2.857-1.371H282.514l.343 1.371h1.943zm0-13.714h141.829l-2.858-1.372H279.314l.286 1.372h5.2zm0 6.857H440.914l-2.857-1.372H280.914l.286 1.372H284.8zm0-13.714H412.343l-2.8-1.372H277.657l.343 1.372h6.8z" fill-rule="evenodd" />
            </mask>
            <path d="M260.857 178.629l54.629 232.114 165.085 8.514 79.143-97.028-298.857-143.6zm270.914 146.857H295.429l.342 1.371h260.115l1.143-1.371h-25.258zm-.114 27.428H301.886l.343 1.372h231.314l1.086-1.372h-2.972zm0-13.714H298.629l.342 1.371h245.772l1.086-1.371h-14.172zm0 6.857H300.286l.285 1.372h238.572l1.086-1.372H531.657zm0-13.714H297.029l.342 1.371H550.286l1.143-1.371H531.657zm-41.143 34.286H305.086l.343 1.371h216.914l1.143-1.371h-32.972zm0-6.858H303.486l.343 1.372H527.943l1.143-1.372h-38.572zm0 34.286H311.543l.343 1.372H500l1.086-1.372H490.514zm0-13.714H308.343l.286 1.371H511.2l1.086-1.371h-21.772zm0 20.571H313.2l.286 1.372H494.4l1.143-1.372h-5.029zm0-13.714H309.943l.343 1.371H505.6l1.086-1.371H490.514zm0-13.714H306.743l.286 1.371h209.714l1.143-1.371h-27.372zm-41.143 34.285H314.8l.286 1.372H488.8l1.143-1.372h-40.572zm0 6.858H390.343l17.886.914h.114l8.571.457H483.2l1.143-1.371h-34.972zM325.943 285.714h157.771l-2.857-1.371H285.714l.343 1.371H325.943zm0-6.857h143.486l-2.858-1.371H284.114l.343 1.371h41.486zm0 34.286H540.8l-2.857-1.372H292.171l.343 1.372H325.943zm0-13.714h186.343l-2.857-1.372H288.971l.343 1.372h36.629zm0 20.571H555.086l-2.857-1.371h-258.4l.285 1.371h31.829zm0-13.714H526.514l-2.857-1.372H290.571l.343 1.372H325.943zm0-13.715H498l-2.857-1.371H287.371l.286 1.371H325.943zM284.8 203.429h27.657l-2.857-1.372h-43.2l.286 1.372H284.8zm-3.714-15.086h-17.943l.343 1.371h20.457l-2.857-1.371zm3.714 8.228h13.429l-2.858-1.371h-30.628l.343 1.371H284.8zm-18-15.085h-5.257l.343 1.371h7.771l-2.857-1.371zm18 63.085h113.314l-2.857-1.371H276.057l.343 1.371H284.8zm0-13.714h84.743l-2.343-1.143-.114-.057-.4-.171H272.857l.286 1.371H284.8zm0-13.714H341.029l-2.858-1.372H269.6l.343 1.372H284.8zm0 20.571h99.029l-2.858-1.371H274.457l.286 1.371H284.8zm0-13.714h70.514l-2.857-1.371H271.2l.343 1.371H284.8zm0-13.714H326.743l-.686-.343-.114-.057-2.057-.972H268l.286 1.372H284.8zm0 61.714H455.2l-2.857-1.371H282.514l.343 1.371h1.943zm0-13.714h141.829l-2.858-1.372H279.314l.286 1.372h5.2zm0 6.857H440.914l-2.857-1.372H280.914l.286 1.372H284.8zm0-13.714H412.343l-2.8-1.372H277.657l.343 1.372h6.8z" fill-rule="evenodd" fill="#64D9F7" mask="url(#i)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M260.857 178.629l54.629 232.114 165.085 8.514 79.143-97.028-298.857-143.6zm270.914 146.857H295.429l.342 1.371h260.115l1.143-1.371h-25.258zm-.114 27.428H301.886l.343 1.372h231.314l1.086-1.372h-2.972zm0-13.714H298.629l.342 1.371h245.772l1.086-1.371h-14.172zm0 6.857H300.286l.285 1.372h238.572l1.086-1.372H531.657zm0-13.714H297.029l.342 1.371H550.286l1.143-1.371H531.657zm-41.143 34.286H305.086l.343 1.371h216.914l1.143-1.371h-32.972zm0-6.858H303.486l.343 1.372H527.943l1.143-1.372h-38.572zm0 34.286H311.543l.343 1.372H500l1.086-1.372H490.514zm0-13.714H308.343l.286 1.371H511.2l1.086-1.371h-21.772zm0 20.571H313.2l.286 1.372H494.4l1.143-1.372h-5.029zm0-13.714H309.943l.343 1.371H505.6l1.086-1.371H490.514zm0-13.714H306.743l.286 1.371h209.714l1.143-1.371h-27.372zm-41.143 34.285H314.8l.286 1.372H488.8l1.143-1.372h-40.572zm0 6.858H390.343l17.886.914h.114l8.571.457H483.2l1.143-1.371h-34.972zM325.943 285.714h157.771l-2.857-1.371H285.714l.343 1.371H325.943zm0-6.857h143.486l-2.858-1.371H284.114l.343 1.371h41.486zm0 34.286H540.8l-2.857-1.372H292.171l.343 1.372H325.943zm0-13.714h186.343l-2.857-1.372H288.971l.343 1.372h36.629zm0 20.571H555.086l-2.857-1.371h-258.4l.285 1.371h31.829zm0-13.714H526.514l-2.857-1.372H290.571l.343 1.372H325.943zm0-13.715H498l-2.857-1.371H287.371l.286 1.371H325.943zM284.8 203.429h27.657l-2.857-1.372h-43.2l.286 1.372H284.8zm-3.714-15.086h-17.943l.343 1.371h20.457l-2.857-1.371zm3.714 8.228h13.429l-2.858-1.371h-30.628l.343 1.371H284.8zm-18-15.085h-5.257l.343 1.371h7.771l-2.857-1.371zm18 63.085h113.314l-2.857-1.371H276.057l.343 1.371H284.8zm0-13.714h84.743l-2.343-1.143-.114-.057-.4-.171H272.857l.286 1.371H284.8zm0-13.714H341.029l-2.858-1.372H269.6l.343 1.372H284.8zm0 20.571h99.029l-2.858-1.371H274.457l.286 1.371H284.8zm0-13.714h70.514l-2.857-1.371H271.2l.343 1.371H284.8zm0-13.714H326.743l-.686-.343-.114-.057-2.057-.972H268l.286 1.372H284.8zm0 61.714H455.2l-2.857-1.371H282.514l.343 1.371h1.943zm0-13.714h141.829l-2.858-1.372H279.314l.286 1.372h5.2zm0 6.857H440.914l-2.857-1.372H280.914l.286 1.372H284.8zm0-13.714H412.343l-2.8-1.372H277.657l.343 1.372h6.8z" fill-rule="evenodd" fill="#64D9F7" />
          </g>

          <!-- Yellow Panel -->
          <g id="panel-yellow">
            <path d="M239.371 202.571L342.686 415.6l-1.829 5.314 5.029 1.315 164.171-29.772 55.657-115.486-326.343-74.4z" />
            <mask id="j" x="-200%" y="-200%" width="400%" height="400%">
              <rect x="-200%" y="-200%" width="400%" height="400%" fill="#fff" />
              <path d="M234.286 201.257l106.571 219.657 164.114-29.771 55.658-115.486-326.343-74.4z" />
            </mask>
            <path d="M234.286 201.257l106.571 219.657 164.114-29.771 55.658-115.486-326.343-74.4z" fill="#FFE000" mask="url(#j)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M234.286 201.257l106.571 219.657 164.114-29.771 55.658-115.486-326.343-74.4z" fill="#FFE000" />
            <path d="M259.943 208.571h-20.514l2 4.115h36.628l-18.114-4.115zm51.543 11.715h-66.343l2 4.171H329.6l-18.114-4.171zm51.6 11.771H250.8l2 4.114h128.343l-18.057-4.114zm51.543 11.772H256.514l2 4.114h174.229l-18.114-4.114zm51.542 11.771H262.229l2 4.114h220.057l-18.115-4.114zm-198.228 11.714l2 4.172h265.886l-18.058-4.172H267.943zm7.714 15.886h279.772l1.942-4.114H273.657l2 4.114zm5.657 11.771h268.4l2-4.114h-272.4l2 4.114zm5.715 11.772h257.028l2-4.172H285.029l2 4.172zm5.714 11.714H538.4l2-4.114H290.743l2 4.114zm5.714 11.772h234.286l2-4.115H296.457l2 4.115zM304.171 342h222.915l2-4.114H302.114l2.057 4.114zm5.658 11.714h211.6l1.942-4.114H307.829l2 4.114zm5.714 11.772h200.171l2-4.115H313.543l2 4.115zm5.714 11.771h188.8l2-4.114h-192.8l2 4.114zm5.714 11.772H504.4l2-4.172H324.971l2 4.172zm5.658 11.714h111.257l22.743-4.114h-136l2 4.114zm5.714 11.771h40.686l22.742-4.114h-65.428l2 4.114z" fill-rule="evenodd" fill="#FFC400" />
          </g>

          <!-- DINER text -->
          <g id="text-diner" fill-rule="evenodd" stroke-width="2" stroke="#000">
            <path d="M357.714 319.143c0 3.657-1.314 6.8-4 9.371-2.685 2.572-5.885 3.886-9.714 3.886h-13.714v-55.486H344c3.829 0 7.029 1.315 9.714 3.886 2.686 2.571 4 5.714 4 9.314v29.029zm-18.685 4.971h5.257c1.371 0 2.571-.457 3.485-1.428.972-.972 1.429-2.115 1.429-3.372v-29.028c0-1.315-.457-2.457-1.429-3.429-.971-.971-2.114-1.428-3.485-1.428h-5.257v38.685zm4.971 9.715h-13.714c-.8 0-1.429-.629-1.429-1.429v-55.486c0-.8.629-1.428 1.429-1.428H344c4.171 0 7.771 1.428 10.686 4.285 2.914 2.858 4.4 6.343 4.4 10.343v28.972c0 4.057-1.486 7.543-4.457 10.4-2.858 2.914-6.458 4.343-10.629 4.343zm-12.286-2.858H344c3.429 0 6.286-1.142 8.686-3.485 2.4-2.343 3.6-5.086 3.6-8.343v-28.972c0-3.257-1.143-6-3.543-8.342-2.4-2.343-5.257-3.486-8.743-3.486h-12.286v52.628zm12.572-5.428h-5.257c-.8 0-1.429-.629-1.429-1.429v-38.685c0-.8.629-1.429 1.429-1.429h5.257c1.714 0 3.257.629 4.457 1.829 1.257 1.2 1.886 2.685 1.886 4.457v29.028c0 1.657-.629 3.143-1.829 4.4-1.2 1.2-2.743 1.829-4.514 1.829zm-3.829-2.857h3.829c1.028 0 1.828-.343 2.514-1.029.686-.686 1.029-1.486 1.029-2.4v-29.028c0-.972-.343-1.715-1.029-2.4-.686-.686-1.486-1.029-2.514-1.029h-3.829v35.886zm33.657 9.714h-8.743v-55.486h8.743V332.4zm-.057 1.429h-8.743c-.8 0-1.428-.629-1.428-1.429v-55.429c0-.8.628-1.428 1.428-1.428h8.743c.8 0 1.429.628 1.429 1.428V332.4c0 .8-.629 1.429-1.429 1.429zm-7.257-2.858h5.886V278.4H366.8v52.571zm24.857-54.057l11.6 37.315v-37.315H412V332.4h-9.371l-12-35.543V332.4h-8.743v-55.486h9.771zm20.286 56.915h-9.372c-.628 0-1.142-.4-1.371-.972l-9.2-27.314V332.4c0 .8-.629 1.429-1.429 1.429h-8.742c-.8 0-1.429-.629-1.429-1.429v-55.486c0-.8.629-1.428 1.429-1.428h9.771c.629 0 1.2.4 1.371 1.028l8.8 28.286v-27.886c0-.8.629-1.428 1.429-1.428h8.743c.8 0 1.428.628 1.428 1.428V332.4c0 .8-.628 1.429-1.428 1.429zm-8.343-2.858h6.914v-52.628h-5.885v35.886c0 .685-.515 1.314-1.2 1.428a1.44 1.44 0 01-1.6-.971L390.571 278.4h-7.314v52.629h5.886v-34.115c0-.685.514-1.314 1.2-1.428a1.44 1.44 0 011.6.971l11.657 34.514zm16.171 1.429v-55.486h24.8v8.4h-16.114v15.143h11.772v8.4h-11.772V324h16.114v8.4h-24.8 0zm24.8 1.429h-24.8c-.8 0-1.428-.629-1.428-1.429v-55.486c0-.8.628-1.428 1.428-1.428h24.8c.8 0 1.429.628 1.429 1.428v8.4c0 .8-.629 1.429-1.429 1.429h-14.685v12.286h10.343c.8 0 1.428.628 1.428 1.428v8.4c0 .8-.628 1.429-1.428 1.429h-10.343v12.285h14.685c.8 0 1.429.629 1.429 1.429v8.4c0 .8-.629 1.429-1.429 1.429zm-23.371-2.858h21.943v-5.542h-14.686c-.8 0-1.428-.629-1.428-1.429v-15.143c0-.8.628-1.428 1.428-1.428H438.8v-5.543h-10.343c-.8 0-1.428-.629-1.428-1.429v-15.143c0-.8.628-1.428 1.428-1.428h14.686v-5.543H421.2v52.628zm43.143-54c4.857 0 8.457 1.258 10.686 3.829 2 2.229 2.971 5.371 2.971 9.371v8.058c0 3.942-1.543 7.257-4.686 9.942l6.457 24.229h-9.428l-5.314-20.914H459.2V332.4h-8.743v-55.486h13.886v.057zm5.2 13.372c0-3.2-1.657-4.8-4.972-4.8h-5.257v17.771h5.257c1.372 0 2.572-.457 3.543-1.428.972-.972 1.429-2.057 1.429-3.429v-8.114zm10.286 43.486s0 0 0 0H470.4c-.629 0-1.2-.458-1.371-1.086L464 312.914h-3.257V332.4c0 .8-.629 1.429-1.429 1.429h-8.743c-.8 0-1.428-.629-1.428-1.429v-55.429c0-.8.628-1.428 1.428-1.428h13.772c5.257 0 9.2 1.486 11.771 4.343 2.229 2.514 3.372 6 3.372 10.343v8.057c0 4.057-1.486 7.543-4.515 10.4l6.172 23.2c.057.171.114.343.114.514 0 .8-.628 1.429-1.428 1.429zm-8.286-2.858H478l-6-22.4c-.114-.514.057-1.085.457-1.428 2.8-2.457 4.172-5.372 4.172-8.857v-8.115c0-3.657-.915-6.457-2.629-8.457-2-2.228-5.2-3.371-9.657-3.371H452v52.571h5.886v-19.485c0-.8.628-1.429 1.428-1.429h5.829c.628 0 1.2.457 1.371 1.086l5.029 19.885zm-6.972-26.285h-5.257c-.8 0-1.428-.629-1.428-1.429v-17.771c0-.8.628-1.429 1.428-1.429h5.257c4.115 0 6.4 2.229 6.4 6.229v8.114c0 1.714-.628 3.2-1.885 4.457-1.257 1.2-2.743 1.829-4.515 1.829zm-3.828-2.857h3.828c1.029 0 1.829-.343 2.515-1.029.685-.686 1.028-1.429 1.028-2.4v-8.114c0-2.4-1.028-3.372-3.543-3.372h-3.828v14.915h0z" vector-effect="non-scaling-stroke" />
            <path d="M357.714 316.4c0 3.657-1.314 6.8-4 9.371-2.685 2.572-5.885 3.886-9.714 3.886h-13.714v-55.486H344c3.829 0 7.029 1.315 9.714 3.886 2.686 2.572 4 5.714 4 9.314V316.4zm-18.685 5.029h5.257c1.371 0 2.571-.458 3.485-1.429.972-.971 1.429-2.114 1.429-3.371V287.6c0-1.314-.457-2.457-1.429-3.429-.971-.971-2.114-1.428-3.485-1.428h-5.257v38.686zm35.085 8.285h-8.743v-55.485h8.743v55.485zm17.543-55.543l11.6 37.315v-37.315H412v55.486h-9.371l-12-35.543v35.543h-8.743v-55.486h9.771zm28.114 55.543v-55.543h24.8v8.4h-16.114v15.143h11.772v8.457h-11.772v15.143h16.114v8.4h-24.8zm44.572-55.485c4.857 0 8.457 1.257 10.686 3.828 2 2.229 2.971 5.372 2.971 9.372v8.057c0 3.943-1.543 7.257-4.686 9.943l6.457 24.228h-9.428l-5.314-20.914H459.2v20.914h-8.743v-55.486h13.886v.058zm5.2 13.371c0-3.2-1.657-4.8-4.972-4.8h-5.257v17.771h5.257c1.372 0 2.572-.457 3.543-1.428.972-.972 1.429-2.057 1.429-3.429V287.6z" fill="#FFF" vector-effect="non-scaling-stroke" />
          </g>

          <!-- MOM's Text -->
          <g id="text-moms">
            <path d="M307.314 261.714l6.629-15.828h3.086l-2.858 20.057h-3.085l2-14.229-5.943 14.229h-2.914l.628-13.943-5.2 13.943H298l7.086-19.086c-3.029.629-4.743 3.029-4.743 6.514 0 1.315.171 1.658.4 1.886-1.6 0-2.629-.686-2.629-2.457 0-3.714 5.029-7.257 8.286-7.257.571 0 1.2.114 1.6.4l-.686 15.771zm20.057-5.2c1.658 0 3.086-.571 4.458-1.657l.228.743c-1.028 1.2-2.8 2-4.743 2.229-.343 4.742-2.571 8.285-5.943 8.285-2.4 0-4.228-1.2-4.228-4.285 0-3.143 1.543-9.6 7.143-9.6 2.171-.058 3.085 1.485 3.085 4.285zM326 257.886c-.914 0-1.086-.457-1.086-1.143 0-.914.515-1.314 1.2-1.372-.114-1.257-.743-1.714-1.657-1.714-2.743 0-4.286 4.914-4.286 7.657 0 1.886.572 2.743 2.286 2.743 1.657 0 3.143-2.286 3.543-6.171zm19.314 6.171c.229 0 .515-.057.857-.171-.171 1.943-1.657 2.285-2.4 2.285-1.371 0-2.342-1.085-2.342-3.028 0-2.343 1.314-5.372 1.314-7.314 0-.915-.286-1.486-1.2-1.486-1.143 0-1.886.914-2.743 2.914l-1.886 8.8h-2.743l1.943-9.086c.115-.514.115-.914.115-1.2 0-1.028-.458-1.371-1.143-1.371-1.143 0-1.886.971-2.743 2.914l-1.886 8.8h-2.743l2.915-13.657h2.742l-.4 1.772c1.258-1.658 2.458-1.886 3.372-1.886 1.828 0 2.571 1.028 2.743 2.286 1.371-2 2.685-2.286 3.657-2.286 2.228 0 2.8 1.428 2.8 3.028 0 2.4-1.314 5.372-1.314 7.372.114.857.457 1.314 1.085 1.314zm7.143-18.514c1.257 0 1.772.857 1.772 1.828 0 1.772-1.715 4.343-3.486 5.086a.519.519 0 01-.229-.457c0-.857 1.086-1.771 1.086-2.571 0-1.029-.914-.572-.914-2.058 0-1.2.857-1.828 1.771-1.828zm8 5.943c.343 7.028.686 8.114.686 9.943 0 3.542-2.572 4.742-4.343 4.742-2.8 0-4-1.828-4-3.485 0-1.257.686-2.172 1.429-2.515 1.542-2.685 2.514-5.371 3.371-8.057l2.857-.628zm-2.743 2.914c-.514 2-1.2 3.829-2.171 5.771.228.172.4.458.4.915 0 .857-.572 1.371-1.143 1.371-.286 0-.514-.114-.629-.4 0 1.257.572 2 1.772 2 1.371 0 2.4-.743 2.4-2.628-.057-1.486-.343-2.286-.629-7.029z" fill-rule="evenodd" />
          </g>

          <!-- Top Arrow Panel -->
          <g id="arrow-top">
            <path d="M539.6 393.6l-34.686-45.714-3.143 22.743-198.4-27.2-49.2-99.258 37.543 140.8 203.943 20.858-2.857 20.514 46.8-32.743z" mask="url(#k)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M539.6 393.6l-34.686-45.714-3.143 22.743-198.4-27.2-49.2-99.258 37.543 140.8 203.943 20.858-2.857 20.514 46.8-32.743z" />
            <path d="M539.6 391.657l-34.686-45.714-3.143 22.743-198.4-27.2-49.2-99.257 37.543 140.8 203.943 20.857L492.8 424.4l46.8-32.743z" fill="#F64936" mask="url(#l)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M539.6 391.657l-34.686-45.714-3.143 22.743-198.4-27.2-49.2-99.257 37.543 140.8 203.943 20.857L492.8 424.4l46.8-32.743z" fill="#F64936" />
            <path d="M500.286 412.8c-.115 0-.229 0-.286-.057a.705.705 0 01-.286-.572l1.772-12.8-205.315-21.028a.55.55 0 01-.514-.4l-21.828-81.829c-.058-.285.057-.571.342-.685.286-.115.572 0 .686.285l25.029 50.572 206.228 28.228 1.943-14.171c.057-.229.172-.4.4-.457a.572.572 0 01.629.228l22.8 30c.114.115.114.286.114.457 0 .172-.114.286-.229.4l-31.2 21.715a.435.435 0 01-.285.114zm-203.657-35.6l205.485 21.029c.172 0 .286.114.4.228.115.114.115.286.115.457l-1.658 12.115 29.658-20.743-21.6-28.457L507.2 375.2c0 .171-.114.286-.229.4-.114.114-.285.114-.4.114l-207.085-28.4c-.172 0-.343-.171-.457-.285L276.4 301.314l20.229 75.886z" fill="#FFE000" />
            <path d="M306.571 363.543a4.231 4.231 0 014.229-4.229 4.231 4.231 0 014.229 4.229 4.23 4.23 0 01-8.458 0zm18.115 2.286a4.23 4.23 0 014.228-4.229 4.231 4.231 0 014.229 4.229 4.23 4.23 0 01-4.229 4.228 4.23 4.23 0 01-4.228-4.228zm18.057 2.228a4.23 4.23 0 014.228-4.228 4.23 4.23 0 014.229 4.228 4.231 4.231 0 01-4.229 4.229 4.23 4.23 0 01-4.228-4.229zm18.114 2.286a4.231 4.231 0 014.229-4.229 4.23 4.23 0 11-4.229 4.229zm18.057 2.228a4.23 4.23 0 014.229-4.228 4.23 4.23 0 014.228 4.228 4.23 4.23 0 01-4.228 4.229 4.231 4.231 0 01-4.229-4.229zm18.057 2.286a4.23 4.23 0 018.458 0 4.231 4.231 0 01-4.229 4.229 4.231 4.231 0 01-4.229-4.229zm18.115 2.229a4.23 4.23 0 014.228-4.229 4.231 4.231 0 014.229 4.229 4.23 4.23 0 01-8.457 0zm18.057 2.285a4.23 4.23 0 014.228-4.228 4.23 4.23 0 014.229 4.228 4.231 4.231 0 01-4.229 4.229 4.23 4.23 0 01-4.228-4.229zM451.2 381.6a4.231 4.231 0 014.229-4.229 4.23 4.23 0 014.228 4.229 4.23 4.23 0 01-4.228 4.229 4.231 4.231 0 01-4.229-4.229zm18.286 2a4.23 4.23 0 014.228-4.229 4.231 4.231 0 014.229 4.229 4.231 4.231 0 01-4.229 4.229 4.23 4.23 0 01-4.228-4.229zm18.114 2.286a4.231 4.231 0 014.229-4.229 4.23 4.23 0 014.228 4.229 4.23 4.23 0 01-4.228 4.228 4.23 4.23 0 01-4.229-4.228zm18.057 2.228a4.23 4.23 0 114.229 4.229 4.231 4.231 0 01-4.229-4.229z" fill-rule="evenodd" fill="#FFF" />
          </g>

          <!-- Top Bar -->
          <g id="top-bar">
            <mask id="m" x="-200%" y="-200%" width="400%" height="400%">
              <rect x="-200%" y="-200%" width="400%" height="400%" fill="#fff" />
              <path d="M362.686 204.686l179.371 42.457 2.457-9.886L365.086 194.8l-2.4 9.886z" />
            </mask>
            <path d="M362.686 204.686l179.371 42.457 2.457-9.886L365.086 194.8l-2.4 9.886z" fill="#AAAAAB" mask="url(#m)" vector-effect="non-scaling-stroke" stroke-width="4" stroke="#000" />
            <path d="M362.686 204.686l179.371 42.457 2.457-9.886L365.086 194.8l-2.4 9.886z" fill="#AAAAAB" />
          </g>

          <!-- Green Circles Text - OPEN -->
          <g id="green-circles">
            <!-- O -->
            <g class="greenCirc" stroke-width="2" stroke="#000">
              <circle vector-effect="non-scaling-stroke" cx="395.486" cy="208.571" r="16.971" />
              <circle vector-effect="non-scaling-stroke" cx="395.486" cy="206.057" r="16.971" fill="#76C49F" />
              <path d="M401.341 205.619h0q0 1.822-.413 3.285h0q-.413 1.462-1.233 2.489h0q-.821 1.028-2.059 1.579h0q-1.239.551-2.891.551h0q-1.629 0-2.818-.505h0q-1.188-.504-1.964-1.468h0q-.776-.963-1.155-2.391h0q-.38-1.428-.38-3.285h0q0-1.776.413-3.226h0q.413-1.451 1.239-2.467h0q.826-1.016 2.065-1.567h0q1.239-.551 2.89-.551h0q1.596 0 2.779.499h0q1.183.499 1.97 1.456h0q.787.958 1.172 2.368h0q.385 1.411.385 3.233z" fill="#76C49F" vector-effect="non-scaling-stroke" />
            </g>

            <!-- P -->
            <g class="greenCirc">
              <circle vector-effect="non-scaling-stroke" cx="434.629" cy="218" r="16.971" stroke-width="2" stroke="#000" />
              <circle vector-effect="non-scaling-stroke" cx="434.629" cy="215.486" r="16.971" fill="#76C49F" stroke-width="2" stroke="#000" />
              <path d="M439.728 211.425q0 1.125-.357 2.031-.357.905-1.021 1.544-.664.638-1.629.986-.966.348-2.305.348h-1.641v5.409q0 .093-.05.163-.05.069-.156.11-.106.041-.29.07-.184.029-.463.029t-.464-.029q-.184-.029-.295-.07-.112-.041-.157-.11-.044-.07-.044-.163v-13.859q0-.464.234-.661.235-.198.525-.198h3.091q.469 0 .899.041.429.041 1.015.174.586.134 1.194.499.609.366 1.033.9.424.534.652 1.236.229.702.229 1.55zm-2.02.162q0-.917-.329-1.532t-.815-.917q-.485-.302-1.004-.383-.519-.081-1.01-.081h-1.775v6.024h1.73q.871 0 1.446-.232.574-.233.965-.645.39-.412.591-.986.201-.575.201-1.248z" />
            </g>

            <!-- E -->
            <g class="greenCirc">
              <circle vector-effect="non-scaling-stroke" cx="475.486" cy="227.6" r="16.971" stroke-width="2" stroke="#000" />
              <circle vector-effect="non-scaling-stroke" cx="475.486" cy="225.086" r="16.971" fill="#76C49F" stroke-width="2" stroke="#000" />
              <path d="M479.748 232.548q0 .209-.022.366t-.078.261q-.056.105-.128.151-.073.047-.162.047h-6.931q-.256 0-.485-.18-.229-.18-.229-.633v-13.395q0-.452.229-.632t.485-.18h6.853q.089 0 .161.046.073.047.118.151.044.105.072.261.028.157.028.389 0 .209-.028.366t-.072.255q-.045.099-.118.145-.072.047-.161.047h-5.647v4.712h4.843q.089 0 .162.052.072.053.123.146.05.092.072.255.023.162.023.383 0 .209-.023.36-.022.151-.072.243-.051.093-.123.134-.073.041-.162.041h-4.843v5.374h5.725q.089 0 .162.046.072.047.128.145.056.099.078.256.022.156.022.388z" />
            </g>

            <!-- N -->
            <g class="greenCirc">
              <circle class="greenCirc" vector-effect="non-scaling-stroke" cx="516.171" cy="236.571" r="16.971" stroke-width="2" stroke="#000" />
              <circle class="greenCirc" vector-effect="non-scaling-stroke" cx="516.171" cy="234.057" r="16.971" fill="#76C49F" stroke-width="2" stroke="#000" />
              <path d="M521.43 226.774v13.859q0 .233-.072.395-.073.163-.19.267-.117.104-.262.151-.146.046-.291.046h-.613q-.291 0-.508-.064-.218-.063-.413-.232-.195-.168-.391-.458-.195-.29-.429-.743l-4.554-8.543q-.357-.661-.72-1.387-.362-.725-.675-1.41h-.022q.022.836.033 1.706.011.871.011 1.73v9.065q0 .081-.044.156-.045.076-.151.116-.106.041-.279.07-.173.029-.441.029t-.441-.029q-.172-.029-.273-.07-.1-.04-.145-.116-.045-.075-.045-.156v-13.859q0-.465.246-.662.245-.197.536-.197h.915q.323 0 .541.058.218.058.391.191.173.134.334.372.162.238.352.598l3.504 6.592q.324.604.625 1.179.302.574.581 1.131.279.557.552 1.097.273.54.541 1.085h.011q-.022-.917-.027-1.909-.006-.992-.006-1.909v-8.149q0-.081.045-.15.044-.07.15-.122.106-.053.279-.076.173-.023.452-.023.246 0 .424.023.179.023.279.076.101.052.145.122.045.069.045.15z" />
            </g>

          </g>
        </g>
      </g>
    </svg>
  </section>
  <footer>
    <div id="replayBtn">
      <svg xmlns="http://www.w3.org/2000/svg" id="refreshBtn" viewBox="0 0 24 24">
        <g>
          <polyline points="1 4 1 10 7 10"></polyline>
          <polyline points="23 20 23 14 17 14"></polyline>
          <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
        </g>
      </svg>
    </div>
    <a href="https://www.vecteezy.com/vector-art/425454-retro-sign" target="blank">Retro Sign Vectors by Vecteezy</a>
  </footer>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: #f8fddf;
  font-family: "Lato", sans-serif;
  color: #2b2b2b;
}

a {
  text-decoration: none;
  color: #d33f2e;
  font-size: 0.9rem;
}

.container {
  width: 100%;
  max-width: 800px;
  height: 100%;
  padding: 1em;
  display: grid;
  grid-template-rows: 800px 1fr;
  align-items: start;
}

section {
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 800px;
  position: relative;
}

.svg-content {
  position: absolute;
  top: 0;
  left: 0;
}

footer {
  padding: 1em 0 2em;
  text-align: center;
  display: grid;
  place-items: center;

  a {
    margin-top: 20px;
  }

  div {
    border: none;
    outline: none;
    width: 40px;
    height: 40px;
    background: #ffa004;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;

    svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke-width: 3;
      stroke: #fff;
      text-align: center;
    }
  }
}

@media (max-width: 580px) {
  .container {
    grid-template-rows: 1fr 30%;
  }
}

              
            
!

JS

              
                let main_tl = gsap.timeline();

let clouds_tl = gsap.timeline();
clouds_tl.from("#clouds", 3, {
  opacity: 0,
  x: -40,
  delay: 2
});

let board24 = gsap.from(".b24", 0.5, {
  scale: 0,
  stagger: 0.2,
  transformOrigin: "50% 50%",
  ease: "back.out(2)"
});

let open_text = gsap.from(".greenCirc", 0.4, {
  scale: 0,
  stagger: 0.2,
  transformOrigin: "50% 50%",
  ease: "elastic.out(1, 1.5)"
});

bkg_tl = gsap.timeline({ duration: 0.5 });
bkg_tl
  .from("#city-bkg-back", {
    y: 180,
    ease: "power4.out"
  })
  .from(
    "#city-bkg-front",
    {
      y: 180,
      ease: "power4.out"
    },
    "-=.3"
  )
  .from(
    "#bush-left",
    {
      scaleY: 0,
      y: 10,
      transformOrigin: "50% 100%",
      ease: "elastic.out(1, 0.6)"
    },
    "-=.3"
  )
  .from(
    "#bush-right",
    {
      scaleY: 0,
      y: 10,
      transformOrigin: "50% 100%",
      ease: "elastic.out(1, 0.6)"
    },
    "-=.3"
  );

main_tl
  .set("#arrow-top", { clipPath: "polygon(0 0, 0% 0%, 0% 0%, 0% 0%, 0 0%)" })
  .from("#ground", 0.5, {
    scaleX: 0,
    transformOrigin: "50% 50%"
  })
  .add(bkg_tl)
  .from("#pole", 0.7, {
    scaleY: 0,
    transformOrigin: "0% 100%",
    ease: "elastic.out(1, 0.5)"
  })
  .from("#arrow-bottom", 0.5, {
    scale: 0,
    rotation: 30,
    transformOrigin: "50% 50%",
    ease: "elastic.out(1, 0.3)"
  })
  .from(
    "#pink-bottom",
    0.7,
    {
      scale: 0,
      rotation: -30,
      transformOrigin: "50% 50%",
      ease: "elastic.out(1, 0.6)"
    },
    "-=.3"
  )
  .from(
    "#pink-top",
    0.7,
    {
      scale: 0,
      rotation: 30,
      transformOrigin: "50% 50%",
      ease: "elastic.out(1, 0.6)"
    },
    "-=.3"
  )
  .from("#board-24", 0.5, {
    opacity: 0,
    scale: 0,
    transformOrigin: "50% 50%",
    ease: "elastic.out(1, 0.6)"
  })
  .add(board24, "<.3")
  .from(
    "#panel-yellow",
    0.5,
    {
      scale: 0,
      transformOrigin: "0% 0%",
      ease: "back.out"
    },
    "-=.2"
  )
  .from(
    "#panel-blue",
    0.5,
    {
      scale: 0,
      transformOrigin: "100% 100%",
      ease: "back.out"
    },
    "-=.2"
  )
  .to("#arrow-top", 1, {
    clipPath: "polygon(0 0, 50% 60%, 100% 50%, 100% 100%, 0 100%)",
    transformOrigin: "0% 0%",
    ease: "power4.out"
  })
  .from(
    "#text-moms",
    0.7,
    {
      opacity: 0,
      scale: 0,
      transformOrigin: "50% 50%",
      ease: "bounce.out"
    },
    "-=.2"
  )
  .from(
    "#text-diner",
    0.7,
    {
      opacity: 0,
      scale: 0,
      transformOrigin: "50% 50%",
      ease: "bounce.out"
    },
    "-=.2"
  )
  .from("#top-bar", 0.5, {
    scaleY: 0,
    transformOrigin: "0% 0%",
    ease: "elastic.out"
  })
  .add(open_text);

main_tl.duration(7);

let replayBtn = document.getElementById("replayBtn");

replayBtn.addEventListener("click", () => {
  main_tl.restart();
  clouds_tl.restart();
  gsap.from("#refreshBtn", 0.5, {
    rotation: 90
  });
});

              
            
!
999px

Console