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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="responsive-container">
  <div class="burger-display">

    <svg class="burger" width="170" height="550" viewBox="0 0 170 127" fill="none" xmlns="http://www.w3.org/2000/svg">
      <use class="burger-ingredient bottom-patty-path" xlink:href="#bottom-patty" data-ingredient-order="3" />
      <use class="burger-ingredient bottom-sauce-path" xlink:href="#bottom-sauce" data-ingredient-order="1" />
      <use class="burger-ingredient bottom-bun-path" xlink:href="#bottom-bun" data-ingredient-order="0" />
      <use class="burger-ingredient lettuce-path" xlink:href="#lettuce" data-ingredient-order="2" />
      <use class="burger-ingredient onions-path" xlink:href="#onions" data-ingredient-order="4" />
      <use class="burger-ingredient bottom-cheese-path" xlink:href="#bottom-cheese" data-ingredient-order="5" />
      <use class="burger-ingredient top-patty-path" xlink:href="#top-patty" data-ingredient-order="6" />
      <use class="burger-ingredient top-cheese-path" xlink:href="#top-cheese" data-ingredient-order="7" />
      <use class="burger-ingredient pickles-path" xlink:href="#pickles" data-ingredient-order="8" />
      <use class="burger-ingredient top-sauce-path" xlink:href="#top-sauce" data-ingredient-order="9" />
      <use class="burger-ingredient top-bun-path" xlink:href="#top-bun" data-ingredient-order="10" />

      <defs>
        <g id="bottom-patty">
          <path class="bottom-patty" d="M4 86.8C4 84.149 6.68629 82 10 82H160C163.314 82 166 84.149 166 86.8V89.2C166 91.851 163.314 94 160 94H10C6.68629 94 4 91.851 4 89.2V86.8Z" fill="#703600" />
          <path class="bottom-patty-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M160 82.8H10C7.23858 82.8 5 84.5909 5 86.8V89.2C5 91.4091 7.23857 93.2 10 93.2H160C162.761 93.2 165 91.4091 165 89.2V86.8C165 84.5909 162.761 82.8 160 82.8ZM10 82C6.68629 82 4 84.149 4 86.8V89.2C4 91.851 6.68629 94 10 94H160C163.314 94 166 91.851 166 89.2V86.8C166 84.149 163.314 82 160 82H10Z" fill="#693200" />
          <rect class="bottom-patty-highlight" x="9" y="84" width="20" height="4" rx="2" fill="#D07118" />
        </g>
        <g id="bottom-sauce">
          <path class="bottom-sauce" d="M13.5977 97.2146L23.4721 94.0469C27.8231 92.651 32.6769 92.651 37.0279 94.0469L39.375 94.7998C45.2327 96.679 51.7673 96.679 57.625 94.7998C63.4827 92.9207 70.0173 92.9207 75.875 94.7998C81.7327 96.679 88.2673 96.679 94.125 94.7998C99.9827 92.9207 106.517 92.9207 112.375 94.7998C118.233 96.679 124.767 96.679 130.625 94.7998L132.972 94.0469C137.323 92.651 142.177 92.651 146.528 94.0469L156.402 97.2146C157.367 97.5242 158 98.2738 158 99.1073C158 100.549 156.402 101 154.514 101L15.4857 101C13.825 101 12 100.549 12 99.1073C12 98.2738 12.6328 97.5242 13.5977 97.2146Z" fill="#FBC592" />
          <path class="bottom-sauce-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M23.854 95.2371L13.9796 98.4049C13.3859 98.5953 13.25 98.9561 13.25 99.1073C13.25 99.1099 13.2499 99.1128 13.2498 99.1159C13.2479 99.1652 13.2433 99.2826 13.6247 99.4508C14.062 99.6438 14.7359 99.75 15.4857 99.75L154.514 99.75C155.397 99.75 156.052 99.6389 156.442 99.4593C156.622 99.3761 156.69 99.3035 156.712 99.2733C156.724 99.2572 156.75 99.2213 156.75 99.1073C156.75 98.9561 156.614 98.5953 156.02 98.4049L146.146 95.2371C142.043 93.921 137.457 93.921 133.354 95.2371L131.007 95.9901C124.901 97.9489 118.099 97.9489 111.993 95.9901C106.384 94.1906 100.116 94.1906 94.5068 95.9901C88.4008 97.9489 81.5992 97.9489 75.4932 95.9901C69.8838 94.1906 63.6162 94.1906 58.0068 95.9901C51.9008 97.9489 45.0992 97.9489 38.9932 95.9901L36.646 95.2371C32.5434 93.921 27.9566 93.921 23.854 95.2371ZM23.4721 94.0469L13.5977 97.2146C12.6328 97.5242 12 98.2738 12 99.1073C12 100.549 13.825 101 15.4857 101L154.514 101C156.402 101 158 100.549 158 99.1073C158 98.2738 157.367 97.5242 156.402 97.2146L146.528 94.0469C142.177 92.651 137.323 92.651 132.972 94.0469L130.625 94.7998C124.767 96.679 118.233 96.679 112.375 94.7998C106.517 92.9207 99.9827 92.9207 94.125 94.7998C88.2673 96.679 81.7327 96.679 75.875 94.7998C70.0173 92.9207 63.4827 92.9207 57.625 94.7998C51.7673 96.679 45.2327 96.679 39.375 94.7998L37.0279 94.0469C32.6769 92.651 27.8231 92.651 23.4721 94.0469Z" fill="#FAEBDE" />
        </g>
        <g id="bottom-bun">
          <path class="bottom-bun" d="M85 126C142.852 126 162 128 162 113C162 109 161 99.0001 155 99.0001H85H16C8 99.0001 7 109 7 113C7 128 27.1481 126 85 126Z" fill="#FFB905" />
          <path class="bottom-bun-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M103.391 123.049C97.767 123.026 91.6487 123 85 123C78.3657 123 72.2462 123.026 66.6087 123.049C47.5078 123.129 33.9415 123.186 24.6397 122.144C18.5934 121.466 14.9013 120.367 12.7527 118.888C10.9023 117.615 10 115.93 10 113C10 111.153 10.2432 108.116 11.2692 105.654C11.7719 104.448 12.3972 103.539 13.1217 102.944C13.7951 102.392 14.6823 102 16 102H155C155.89 102 156.973 102.655 157.904 105.449C158.76 108.018 159 111.158 159 113C159 115.986 158.118 117.667 156.364 118.916C154.32 120.371 150.771 121.467 144.853 122.144C135.754 123.186 122.396 123.129 103.391 123.049ZM103.218 126.049C97.6242 126.026 91.561 126 85 126C78.4508 126 72.3848 126.026 66.7765 126.049C22.8445 126.235 7 126.302 7 113C7 109 8 99 16 99H155C161 99 162 109.201 162 113.201C162 126.5 146.949 126.235 103.218 126.049Z" fill="#ECAB05" />
        </g>
        <g id="lettuce">
          <path class="lettuce" d="M5 97.3452C5 96.2062 5.69344 95.182 6.75095 94.759L17.5722 90.4305C22.3404 88.5232 27.6596 88.5232 32.4278 90.4305L35 91.4593C41.4194 94.0271 48.5806 94.0271 55 91.4593V91.4593C61.4194 88.8916 68.5806 88.8916 75 91.4593V91.4593C81.4194 94.0271 88.5806 94.0271 95 91.4593V91.4593C101.419 88.8916 108.581 88.8916 115 91.4593V91.4593C121.419 94.0271 128.581 94.0271 135 91.4593L137.572 90.4305C142.34 88.5232 147.66 88.5232 152.428 90.4305L163.249 94.759C164.307 95.182 165 96.2062 165 97.3452V97.3452C165 99.3158 163.01 100.663 161.18 99.9314L149.262 95.1642C146.526 94.0698 143.474 94.0698 140.738 95.1642L135 97.4593C128.581 100.027 121.419 100.027 115 97.4593V97.4593C108.581 94.8916 101.419 94.8916 95 97.4593V97.4593C88.5806 100.027 81.4194 100.027 75 97.4593V97.4593C68.5806 94.8916 61.4194 94.8916 55 97.4593V97.4593C48.5806 100.027 41.4194 100.027 35 97.4593L29.262 95.1642C26.5261 94.0698 23.4739 94.0698 20.738 95.1642L8.81992 99.9314C6.99027 100.663 5 99.3158 5 97.3452V97.3452Z" fill="#70DF00" />
          <path class="lettuce-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M17.9436 91.3589L7.12234 95.6874C6.44448 95.9586 6 96.6151 6 97.3452C6 98.6083 7.27574 99.472 8.44852 99.0029L20.3666 94.2357C23.341 93.0459 26.659 93.0459 29.6334 94.2357L35.3714 96.5309C41.5524 99.0033 48.4476 99.0033 54.6286 96.5309C61.2864 93.8677 68.7136 93.8677 75.3714 96.5309C81.5524 99.0033 88.4476 99.0033 94.6286 96.5309C101.286 93.8677 108.714 93.8677 115.371 96.5309C121.552 99.0033 128.448 99.0033 134.629 96.5309L140.367 94.2357C143.341 93.0459 146.659 93.0459 149.633 94.2357L161.551 99.0029C162.724 99.472 164 98.6083 164 97.3452C164 96.6151 163.556 95.9586 162.878 95.6874L152.056 91.3589C147.527 89.547 142.473 89.547 137.944 91.3589L135.371 92.3878C128.714 95.0509 121.286 95.0509 114.629 92.3878C108.448 89.9154 101.552 89.9154 95.3714 92.3878C88.7136 95.0509 81.2864 95.0509 74.6286 92.3878C68.4476 89.9154 61.5524 89.9154 55.3714 92.3878C48.7136 95.0509 41.2864 95.0509 34.6286 92.3878L32.0564 91.3589C27.5266 89.547 22.4734 89.547 17.9436 91.3589ZM6.75095 94.759C5.69344 95.182 5 96.2062 5 97.3452C5 99.3158 6.99027 100.663 8.81992 99.9314L20.738 95.1642C23.4739 94.0698 26.5261 94.0698 29.262 95.1642L35 97.4593C41.4194 100.027 48.5806 100.027 55 97.4593C61.4194 94.8916 68.5806 94.8916 75 97.4593C81.4194 100.027 88.5806 100.027 95 97.4593C101.419 94.8916 108.581 94.8916 115 97.4593C121.419 100.027 128.581 100.027 135 97.4593L140.738 95.1642C143.474 94.0698 146.526 94.0698 149.262 95.1642L161.18 99.9314C163.01 100.663 165 99.3158 165 97.3452C165 96.2062 164.307 95.182 163.249 94.759L152.428 90.4305C147.66 88.5232 142.34 88.5232 137.572 90.4305L135 91.4593C128.581 94.0271 121.419 94.0271 115 91.4593C108.581 88.8916 101.419 88.8916 95 91.4593C88.5806 94.0271 81.4194 94.0271 75 91.4593C68.5806 88.8916 61.4194 88.8916 55 91.4593C48.5806 94.0271 41.4194 94.0271 35 91.4593L32.4278 90.4305C27.6596 88.5232 22.3404 88.5232 17.5722 90.4305L6.75095 94.759Z" fill="#67CC01" />
        </g>
        <g id="onions">

          <path class="onions" fill-rule="evenodd" clip-rule="evenodd" d="M84.9887 79.7858C85.0079 78.6814 85.9189 77.8017 87.0233 77.821L163.012 79.1474C164.116 79.1667 164.996 80.0776 164.976 81.182C164.957 82.2864 164.046 83.1661 162.942 83.1468L123 82.4496L123 82.4842C123 83.5888 122.105 84.4842 121 84.4842H45C44.0039 84.4842 43.1779 83.756 43.0253 82.8029L6.05127 83.4483C4.94687 83.4676 4.03595 82.5879 4.01667 81.4835C3.99739 80.3791 4.87706 79.4682 5.98146 79.4489L81.9699 78.1225C83.0743 78.1032 83.9852 78.9829 84.0045 80.0873C84.0069 80.223 83.9957 80.3557 83.9722 80.4842H85.1011C85.0243 80.266 84.9844 80.0306 84.9887 79.7858Z" fill="#FA1ECA" />
          <path class="onions-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M122.12 81.5618C122.359 81.3244 122.684 81.1939 123.022 81.1998L162.964 81.897C163.378 81.9042 163.719 81.5743 163.727 81.1602C163.734 80.746 163.404 80.4044 162.99 80.3972L87.0014 79.0708C86.5873 79.0636 86.2457 79.3934 86.2385 79.8076C86.2368 79.9017 86.2521 79.9893 86.2803 80.0695C86.4148 80.4519 86.3554 80.8759 86.1211 81.2067C85.8867 81.5376 85.5065 81.7342 85.1011 81.7342H83.9722C83.6013 81.7342 83.2495 81.5695 83.012 81.2846C82.7746 80.9998 82.6758 80.6241 82.7425 80.2593C82.7513 80.2117 82.7556 80.1616 82.7547 80.1091C82.7474 79.695 82.4058 79.3651 81.9917 79.3723L6.00327 80.6987C5.58912 80.7059 5.25925 81.0475 5.26648 81.4617C5.27371 81.8758 5.6153 82.2057 6.02945 82.1985L43.0035 81.5531C43.6257 81.5422 44.1611 81.9908 44.2595 82.6053C44.3166 82.9616 44.6277 83.2342 45 83.2342H121C121.413 83.2342 121.748 82.9006 121.75 82.4883C121.75 82.487 121.75 82.4856 121.75 82.4842L121.75 82.4603C121.747 82.1232 121.88 81.7991 122.12 81.5618ZM122.997 82.5901C122.942 83.6454 122.069 84.4842 121 84.4842H45C44.0039 84.4842 43.1779 83.756 43.0253 82.8029L6.05127 83.4483C4.94687 83.4676 4.03595 82.5879 4.01667 81.4835C3.99739 80.3791 4.87706 79.4682 5.98146 79.4489L81.9699 78.1225C82.7642 78.1086 83.4585 78.5598 83.7929 79.2252C83.8765 79.3916 83.9376 79.5714 83.9722 79.7607C83.9726 79.7631 83.973 79.7656 83.9735 79.7681C83.992 79.8719 84.0026 79.9785 84.0045 80.0873C84.0069 80.223 83.9957 80.3557 83.9722 80.4842H85.1011C85.0545 80.3518 85.0215 80.2132 85.0037 80.0699C84.9921 79.977 84.987 79.8821 84.9887 79.7858C84.992 79.594 85.0223 79.4089 85.0758 79.2342C85.0849 79.2042 85.0948 79.1745 85.1053 79.1451C85.3867 78.3606 86.1436 77.8056 87.0233 77.821L163.012 79.1474C164.116 79.1667 164.996 80.0776 164.976 81.182C164.957 82.2864 164.046 83.1661 162.942 83.1468L123 82.4496L123 82.4842C123 82.5197 122.999 82.555 122.997 82.5901Z" fill="#CC06A1" />
        </g>
        <g id="bottom-cheese">

          <path class="bottom-cheese" d="M166 86V95C166 96.1046 166.895 97 168 97C169.105 97 170 96.1046 170 95V85C170 80.0294 165.971 76 161 76H9C4.02943 76 0 80.0294 0 85V94C0 95.1046 0.895432 96 2 96C3.10457 96 4 95.1046 4 94V86C4 82.6863 6.68629 80 10 80H27.9647C29.2846 80 30.5677 80.4353 31.6152 81.2384L56.3494 100.201C58.5031 101.852 61.4969 101.852 63.6506 100.201L88.3847 81.2384C89.4323 80.4353 90.7154 80 92.0353 80H160C163.314 80 166 82.6863 166 86Z" fill="#FFD600" />
          <path class="bottom-cheese-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M167 95V86C167 82.134 163.866 79 160 79H92.0353C90.4954 79 88.9984 79.5078 87.7763 80.4448L63.0422 99.4076C61.2474 100.784 58.7526 100.784 56.9578 99.4076L32.2237 80.4448C31.0016 79.5078 29.5046 79 27.9647 79H10C6.134 79 3 82.134 3 86V94C3 94.5523 2.55229 95 2 95C1.44771 95 1 94.5523 1 94V85C1 80.5817 4.58173 77 9 77H161C165.418 77 169 80.5817 169 85V95C169 95.5523 168.552 96 168 96C167.448 96 167 95.5523 167 95ZM166 95V86C166 82.6863 163.314 80 160 80H92.0353C90.7154 80 89.4323 80.4353 88.3847 81.2384L63.6506 100.201C61.4969 101.852 58.5031 101.852 56.3494 100.201L31.6152 81.2384C30.5677 80.4353 29.2846 80 27.9647 80H10C6.68629 80 4 82.6863 4 86V94C4 95.1046 3.10457 96 2 96C0.895432 96 0 95.1046 0 94V85C0 80.0294 4.02943 76 9 76H161C165.971 76 170 80.0294 170 85V95C170 96.1046 169.105 97 168 97C166.895 97 166 96.1046 166 95Z" fill="#F0CB08" />
        </g>
        <g id="top-patty">
          <path class="top-patty" d="M4 68.8C4 66.149 6.68629 64 10 64H160C163.314 64 166 66.149 166 68.8V71.2C166 73.851 163.314 76 160 76H10C6.68629 76 4 73.851 4 71.2V68.8Z" fill="#703600" />
          <path class="top-patty-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M160 64.8H10C7.23858 64.8 5 66.5909 5 68.8V71.2C5 73.4091 7.23857 75.2 10 75.2H160C162.761 75.2 165 73.4091 165 71.2V68.8C165 66.5909 162.761 64.8 160 64.8ZM10 64C6.68629 64 4 66.149 4 68.8V71.2C4 73.851 6.68629 76 10 76H160C163.314 76 166 73.851 166 71.2V68.8C166 66.149 163.314 64 160 64H10Z" fill="#693200" />
          <rect class="top-patty-highlight" x="9" y="66" width="50" height="4" rx="2" fill="#D07118" />
        </g>
        <g id="top-cheese">
          <path class="top-cheese" d="M4 70V78C4 79.1046 3.10457 80 2 80C0.895431 80 0 79.1046 0 78V69C0 64.0294 4.02944 60 9 60H161C165.971 60 170 64.0294 170 69V76C170 77.1046 169.105 78 168 78C166.895 78 166 77.1046 166 76V70C166 66.6863 163.314 64 160 64H136.035C134.715 64 133.432 64.4353 132.385 65.2384L107.651 84.2012C105.497 85.8524 102.503 85.8524 100.349 84.2012L75.6153 65.2384C74.5677 64.4353 73.2846 64 71.9647 64H10C6.68629 64 4 66.6863 4 70Z" fill="#FFD600" />
          <path class="top-cheese-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M3 78V70C3 66.134 6.13401 63 10 63H71.9647C73.5046 63 75.0016 63.5078 76.2237 64.4448L100.958 83.4076C102.753 84.7836 105.247 84.7836 107.042 83.4076L131.776 64.4448C132.998 63.5078 134.495 63 136.035 63H160C163.866 63 167 66.134 167 70V76C167 76.5523 167.448 77 168 77C168.552 77 169 76.5523 169 76V69C169 64.5817 165.418 61 161 61H9C4.58173 61 1 64.5817 1 69V78C1 78.5523 1.44772 79 2 79C2.55228 79 3 78.5523 3 78ZM4 78V70C4 66.6863 6.68629 64 10 64H71.9647C73.2846 64 74.5677 64.4353 75.6153 65.2384L100.349 84.2012C102.503 85.8524 105.497 85.8524 107.651 84.2012L132.385 65.2384C133.432 64.4353 134.715 64 136.035 64H160C163.314 64 166 66.6863 166 70V76C166 77.1046 166.895 78 168 78C169.105 78 170 77.1046 170 76V69C170 64.0294 165.971 60 161 60H9C4.02944 60 0 64.0294 0 69V78C0 79.1046 0.895431 80 2 80C3.10457 80 4 79.1046 4 78Z" fill="#F0CB08" />
        </g>
        <g id="top-bun">
          <path d="M85 0C142.852 0 163 30 163 45C163 49 163 56 155 56H85H16C7 56 7 49 7 45C7 30 27.1481 0 85 0Z" fill="#FFB905" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M160 45C160 32.3566 141.995 3 85 3C28.0054 3 10 32.3566 10 45C10 47.1327 10.0528 49.1475 10.8083 50.6584C11.1396 51.321 11.5941 51.8465 12.2783 52.2351C12.9876 52.6378 14.1339 53 16 53H155C156.558 53 157.466 52.663 158.01 52.3157C158.546 51.9729 158.948 51.4793 159.259 50.7816C159.956 49.2133 160 47.1266 160 45ZM163 45C163 30 142.852 0 85 0C27.1481 0 7 30 7 45C7 49 7 56 16 56H155C163 56 163 49 163 45Z" fill="#ECAB05" />
          <ellipse rx="2" ry="1.5" transform="matrix(0.939692 -0.342022 0.342019 0.939693 62.7687 8.18811)" fill="#FFD464" />
          <ellipse rx="2" ry="1.5" transform="matrix(0.587786 -0.809016 0.809017 0.587784 107.389 12.5448)" fill="#FFD464" />
          <ellipse cx="93.7426" cy="7.65082" rx="2" ry="1.5" transform="rotate(6 93.7426 7.65082)" fill="#FFD464" />
          <ellipse cx="64.7191" cy="19.9973" rx="2" ry="1.5" transform="rotate(15 64.7191 19.9973)" fill="#FFD464" />
          <ellipse cx="115.35" cy="23.1633" rx="2" ry="1.5" transform="rotate(-13 115.35 23.1633)" fill="#FFD464" />
          <ellipse rx="2" ry="1.5" transform="matrix(0.945519 0.325567 -0.325569 0.945518 125.356 15.0694)" fill="#FFD464" />
          <ellipse rx="2" ry="1.5" transform="matrix(-0.309016 -0.951057 0.951056 -0.309017 79.5897 13.048)" fill="#FFD464" />
          <ellipse rx="2" ry="1.5" transform="matrix(0.766046 0.642786 -0.642789 0.766043 99.4246 18.4346)" fill="#FFD464" />
          <ellipse cx="44.5777" cy="16.8045" rx="2" ry="1.5" transform="rotate(58 44.5777 16.8045)" fill="#FFD464" />
        </g>
        <g id="top-sauce">
          <path d="M156.424 57.7854L146.685 60.9531C142.394 62.349 137.606 62.349 133.315 60.9531L131 60.2002C125.223 58.321 118.777 58.321 113 60.2002C107.223 62.0794 100.777 62.0794 95 60.2002C89.2225 58.321 82.7775 58.321 77 60.2002C71.2225 62.0794 64.7775 62.0794 59 60.2002C53.2225 58.321 46.7775 58.321 41 60.2002L38.685 60.9531C34.3936 62.349 29.6064 62.349 25.315 60.9531L15.5758 57.7854C14.6241 57.4758 14 56.7262 14 55.8927C14 54.4505 15.5758 54 17.4379 54L154.562 54C156.2 54 158 54.4505 158 55.8927C158 56.7262 157.376 57.4758 156.424 57.7854Z" fill="#FBC492" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M146.31 60.0123L156.049 56.8446C156.617 56.6598 156.892 56.2536 156.892 55.8927C156.892 55.6497 156.789 55.4741 156.403 55.3016C155.965 55.1052 155.298 55 154.562 55L17.4379 55C16.5713 55 15.9229 55.11 15.5299 55.2936C15.3485 55.3784 15.2546 55.4635 15.2034 55.5344C15.1562 55.5999 15.1077 55.7044 15.1077 55.8927C15.1077 56.2536 15.3832 56.6598 15.9513 56.8446L25.6904 60.0123C29.7392 61.3292 34.2608 61.3292 38.3096 60.0123L40.6245 59.2594C46.6447 57.3012 53.3553 57.3012 59.3755 59.2594C64.9103 61.0596 71.0897 61.0596 76.6245 59.2594C82.6447 57.3012 89.3553 57.3012 95.3755 59.2594C100.91 61.0596 107.09 61.0596 112.625 59.2594C118.645 57.3012 125.355 57.3012 131.375 59.2594L133.69 60.0123C137.739 61.3292 142.261 61.3292 146.31 60.0123ZM146.685 60.9531L156.424 57.7854C157.376 57.4758 158 56.7262 158 55.8927C158 54.4505 156.2 54 154.562 54L17.4379 54C15.5758 54 14 54.4505 14 55.8927C14 56.7262 14.6241 57.4758 15.5758 57.7854L25.315 60.9531C29.6064 62.349 34.3936 62.349 38.685 60.9531L41 60.2002C46.7775 58.321 53.2225 58.321 59 60.2002C64.7775 62.0794 71.2225 62.0794 77 60.2002C82.7775 58.321 89.2225 58.321 95 60.2002C100.777 62.0794 107.223 62.0794 113 60.2002C118.777 58.321 125.223 58.321 131 60.2002L133.315 60.9531C137.606 62.349 142.394 62.349 146.685 60.9531Z" fill="#FAEBDE" />
        </g>
        <g id="pickles">
          <path class="pickles" fill-rule="evenodd" clip-rule="evenodd" d="M12.2095 60.3794C12.6222 60.0829 13.1727 60.0637 13.605 60.3306C15.1146 61.2626 17.0364 61.1955 18.4773 60.1605C18.89 59.864 19.4405 59.8448 19.8728 60.1118C21.3824 61.0437 23.3042 60.9766 24.7451 59.9416C25.1578 59.6452 25.7082 59.6259 26.1406 59.8929L26.2516 59.9614C27.6533 60.8267 29.4111 60.8747 30.8578 60.0871L31.3702 59.8081C32.1307 59.3941 32.4116 58.4419 31.9975 57.6814C31.5835 56.9208 30.6313 56.64 29.8708 57.054L29.3584 57.333C28.9 57.5825 28.3431 57.5673 27.899 57.2932L27.7879 57.2246C26.2784 56.2927 24.3565 56.3598 22.9157 57.3948C22.503 57.6912 21.9525 57.7104 21.5201 57.4435C20.0106 56.5115 18.0887 56.5786 16.6479 57.6136C16.2352 57.9101 15.6847 57.9293 15.2523 57.6624C13.7428 56.7304 11.8209 56.7975 10.3801 57.8325L10.2741 57.9086C9.85021 58.2131 9.29566 58.2671 8.82098 58.0502L8.29039 57.8076C7.50284 57.4476 6.57257 57.7942 6.21258 58.5818C5.85259 59.3694 6.1992 60.2996 6.98676 60.6596L7.51734 60.9021C9.01547 61.5869 10.7657 61.4165 12.1035 60.4555L12.2095 60.3794ZM38.8605 61.0603C39.2882 60.7858 39.8389 60.7955 40.2567 61.0847C41.7154 62.0943 43.6381 62.1279 45.1312 61.1697C45.5588 60.8953 46.1096 60.9049 46.5274 61.1941C47.9861 62.2038 49.9088 62.2373 51.4019 61.2792C51.8295 61.0048 52.3802 61.0144 52.798 61.3036L52.9053 61.3778C54.2597 62.3153 56.0126 62.4552 57.4986 61.7444L58.0249 61.4926C58.806 61.1189 59.1363 60.1828 58.7627 59.4016C58.389 58.6205 57.4528 58.2901 56.6717 58.6638L56.1454 58.9156C55.6746 59.1408 55.1192 59.0965 54.69 58.7994L54.5827 58.7252C53.124 57.7155 51.2013 57.6819 49.7082 58.6401C49.2806 58.9145 48.7299 58.9049 48.3121 58.6157C46.8534 57.606 44.9306 57.5725 43.4376 58.5306C43.0099 58.8051 42.4592 58.7955 42.0414 58.5063C40.5827 57.4966 38.66 57.463 37.1669 58.4212L37.0571 58.4916C36.6178 58.7735 36.0612 58.7984 35.5986 58.5569L35.0814 58.287C34.3138 57.8862 33.3666 58.1837 32.9659 58.9513C32.5652 59.719 32.8627 60.6661 33.6303 61.0668L34.1474 61.3368C35.6077 62.099 37.3644 62.0204 38.7507 61.1308L38.8605 61.0603ZM66.4016 60.4138C65.974 60.1393 65.4233 60.1489 65.0055 60.4381L64.8982 60.5124C63.5437 61.4499 61.7908 61.5898 60.3049 60.8789L59.7786 60.6272C58.9975 60.2535 58.6671 59.3173 59.0408 58.5362C59.4145 57.755 60.3507 57.4247 61.1318 57.7984L61.6581 58.0501C62.1289 58.2754 62.6843 58.231 63.1135 57.934L63.2207 57.8597C64.6795 56.85 66.6022 56.8165 68.0952 57.7746C68.5229 58.0491 69.0736 58.0395 69.4914 57.7503C70.9501 56.7406 72.8728 56.707 74.3659 57.6652C74.7935 57.9396 75.3443 57.93 75.7621 57.6408C77.2208 56.6311 79.1435 56.5976 80.6366 57.5557L80.7464 57.6262C81.1856 57.9081 81.7422 57.933 82.2049 57.6915L82.7221 57.4215C83.4897 57.0208 84.4368 57.3183 84.8376 58.0859C85.2383 58.8535 84.9408 59.8007 84.1732 60.2014L83.656 60.4713C82.1958 61.2336 80.4391 61.155 79.0527 60.2653L78.9429 60.1948C78.5153 59.9204 77.9646 59.93 77.5468 60.2192C76.0881 61.2289 74.1653 61.2625 72.6723 60.3043C72.2446 60.0299 71.6939 60.0395 71.2761 60.3287C69.8174 61.3384 67.8947 61.3719 66.4016 60.4138ZM117.324 60.7862C117.737 60.4897 118.288 60.4705 118.72 60.7374C120.23 61.6694 122.151 61.6023 123.592 60.5673C124.005 60.2708 124.555 60.2516 124.988 60.5186C126.497 61.4505 128.419 61.3834 129.86 60.3484C130.273 60.052 130.823 60.0327 131.256 60.2997L131.367 60.3682C132.768 61.2335 134.526 61.2815 135.973 60.4939L136.485 60.2149C137.246 59.8009 137.527 58.8487 137.113 58.0882C136.698 57.3276 135.746 57.0468 134.986 57.4608L134.473 57.7398C134.015 57.9893 133.458 57.9741 133.014 57.7L132.903 57.6314C131.393 56.6995 129.472 56.7666 128.031 57.8016C127.618 58.098 127.067 58.1172 126.635 57.8503C125.126 56.9183 123.204 56.9854 121.763 58.0204C121.35 58.3169 120.8 58.3361 120.367 58.0692C118.858 57.1372 116.936 57.2043 115.495 58.2393L115.389 58.3154C114.965 58.6199 114.411 58.6739 113.936 58.4569L113.405 58.2144C112.618 57.8544 111.688 58.201 111.328 58.9886C110.968 59.7761 111.314 60.7064 112.102 61.0664L112.632 61.3089C114.13 61.9937 115.881 61.8233 117.219 60.8623L117.324 60.7862ZM92.5099 60.4765C92.1024 60.1729 91.5524 60.144 91.1154 60.4034L91.0032 60.47C89.5867 61.3107 87.8283 61.328 86.3956 60.5152L85.8881 60.2274C85.135 59.8001 84.8708 58.8432 85.298 58.09C85.7253 57.3368 86.6822 57.0726 87.4354 57.4999L87.9428 57.7877C88.3968 58.0452 88.9539 58.0398 89.4027 57.7734L89.515 57.7068C91.0405 56.8013 92.9609 56.902 94.3835 57.9619C94.791 58.2655 95.341 58.2944 95.778 58.035C97.3036 57.1295 99.224 57.2302 100.647 58.2902C101.054 58.5938 101.604 58.6226 102.041 58.3632C103.567 57.4578 105.487 57.5584 106.91 58.6184L107.014 58.6964C107.433 59.0082 107.986 59.0719 108.465 58.8632L108.999 58.63C109.793 58.2838 110.717 58.6466 111.063 59.4403C111.41 60.234 111.047 61.1581 110.253 61.5043L109.718 61.7375C108.208 62.3961 106.461 62.1951 105.141 61.2109L105.036 61.1329C104.628 60.8293 104.078 60.8005 103.641 61.0599C102.116 61.9653 100.196 61.8647 98.7729 60.8047C98.3655 60.5011 97.8154 60.4723 97.3785 60.7316C95.8529 61.6371 93.9325 61.5364 92.5099 60.4765ZM143.379 60.8156C143.816 60.5563 144.366 60.5851 144.773 60.8887C146.196 61.9487 148.116 62.0493 149.642 61.1439C150.079 60.8845 150.629 60.9133 151.036 61.2169C152.459 62.2769 154.379 62.3775 155.905 61.4721C156.342 61.2127 156.892 61.2416 157.299 61.5452L157.404 61.6231C158.725 62.6073 160.472 62.8083 161.982 62.1497L162.516 61.9165C163.31 61.5703 163.673 60.6462 163.327 59.8525C162.981 59.0588 162.057 58.696 161.263 59.0422L160.728 59.2754C160.25 59.4841 159.696 59.4204 159.278 59.1086L159.173 59.0306C157.75 57.9707 155.83 57.87 154.304 58.7755C153.868 59.0348 153.317 59.006 152.91 58.7024C151.487 57.6424 149.567 57.5418 148.041 58.4472C147.604 58.7066 147.054 58.6778 146.647 58.3742C145.224 57.3142 143.304 57.2135 141.778 58.119L141.666 58.1856C141.217 58.452 140.66 58.4575 140.206 58.1999L139.699 57.9121C138.946 57.4848 137.989 57.749 137.562 58.5022C137.134 59.2554 137.398 60.2123 138.152 60.6396L138.659 60.9275C140.092 61.7402 141.85 61.7229 143.267 60.8822L143.379 60.8156Z" fill="#98F63C" />
          <path class="pickles-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M15.5807 57.1305C13.8564 56.066 11.6612 56.1426 10.0154 57.3248L9.0808 57.4817L8.55021 57.2391C7.44872 56.7356 6.14763 57.2204 5.64414 58.3219C5.14065 59.4234 5.62543 60.7245 6.72692 61.228L7.2575 61.4705C8.95962 62.2485 10.9481 62.0549 12.4681 60.963L12.5741 60.8869C12.7819 60.7377 13.059 60.728 13.2767 60.8624C15.0009 61.9269 17.1961 61.8502 18.8419 60.668C19.0497 60.5188 19.3268 60.5091 19.5445 60.6435C21.2687 61.708 23.4639 61.6313 25.1097 60.4492C25.3175 60.2999 25.5946 60.2902 25.8123 60.4246L25.9233 60.4932C27.5158 61.4763 29.513 61.5308 31.1567 60.6359L31.669 60.357C31.8632 60.2513 32.0349 60.1205 32.1826 59.9709C32.2753 60.6517 32.6856 61.2787 33.3411 61.6208L33.8582 61.8908C35.5173 62.7569 37.5132 62.6675 39.0883 61.6567L39.1981 61.5863C39.4134 61.4481 39.6907 61.453 39.901 61.5985C41.5672 62.7518 43.7634 62.7902 45.4688 61.6957C45.6841 61.5576 45.9613 61.5624 46.1716 61.708C47.8378 62.8613 50.034 62.8996 51.7394 61.8052C51.9547 61.667 52.232 61.6719 52.4423 61.8175L52.5496 61.8917C54.0884 62.9569 56.08 63.1158 57.7683 62.3082L58.2946 62.0564C58.7457 61.8406 59.0893 61.4907 59.3005 61.0772C59.3671 61.1184 59.4366 61.1564 59.5089 61.1909L60.0352 61.4427C61.7234 62.2503 63.715 62.0914 65.2539 61.0262L65.3612 60.952C65.5715 60.8064 65.8488 60.8016 66.064 60.9397C67.7695 62.0342 69.9657 61.9958 71.6318 60.8425C71.8422 60.6969 72.1194 60.6921 72.3347 60.8303C74.0401 61.9247 76.2363 61.8864 77.9025 60.7331C78.1128 60.5875 78.3901 60.5826 78.6054 60.7208L78.7152 60.7913C80.2902 61.8021 82.2862 61.8914 83.9452 61.0253L84.4624 60.7554C84.6795 60.642 84.8698 60.4974 85.0305 60.33C85.1845 60.5013 85.3684 60.651 85.5798 60.771L86.0872 61.0588C87.715 61.9823 89.7129 61.9626 91.3223 61.0074L91.4345 60.9408C91.6544 60.8103 91.9314 60.8248 92.1365 60.9776C93.7614 62.1884 95.9549 62.3033 97.6975 61.2691C97.9175 61.1385 98.1944 61.153 98.3995 61.3059C100.024 62.5166 102.218 62.6315 103.961 61.5973C104.18 61.4667 104.457 61.4812 104.663 61.6341L104.767 61.712C106.268 62.8302 108.253 63.0586 109.968 62.3104L110.503 62.0771C110.872 61.9162 111.174 61.666 111.396 61.3629C111.53 61.4688 111.679 61.5605 111.842 61.6348L112.372 61.8773C114.075 62.6553 116.063 62.4617 117.583 61.3698L117.689 61.2937C117.897 61.1445 118.174 61.1348 118.392 61.2692C120.116 62.3337 122.311 62.257 123.957 61.0748C124.165 60.9256 124.442 60.9159 124.659 61.0503C126.384 62.1148 128.579 62.0381 130.225 60.856C130.432 60.7067 130.71 60.697 130.927 60.8314L131.038 60.9C132.631 61.8831 134.628 61.9376 136.272 61.0427L136.784 60.7638C136.908 60.6964 137.023 60.6188 137.128 60.5326C137.309 60.7923 137.549 61.0166 137.843 61.1832L138.351 61.4711C139.979 62.3945 141.976 62.3749 143.586 61.4197L143.698 61.3531C143.918 61.2225 144.195 61.237 144.4 61.3899C146.025 62.6006 148.218 62.7155 149.961 61.6813C150.181 61.5507 150.458 61.5652 150.663 61.7181C152.288 62.9288 154.481 63.0438 156.224 62.0095C156.444 61.879 156.721 61.8935 156.926 62.0463L157.031 62.1243C158.531 63.2425 160.516 63.4708 162.232 62.7226L162.766 62.4894C163.876 62.0052 164.384 60.7128 163.9 59.6026C163.416 58.4925 162.123 57.9851 161.013 58.4693L160.478 58.7025C160.205 58.8215 159.89 58.7852 159.651 58.6074L159.546 58.5294C157.922 57.3187 155.728 57.2037 153.986 58.238C153.766 58.3686 153.489 58.354 153.283 58.2012C151.659 56.9905 149.465 56.8755 147.722 57.9098C147.502 58.0403 147.226 58.0258 147.02 57.873C145.396 56.6622 143.202 56.5473 141.459 57.5815L140.515 57.6563L140.007 57.3685C139.195 56.9077 138.214 57.0219 137.533 57.581C136.902 56.6765 135.678 56.3722 134.687 56.9118L134.175 57.1908C133.913 57.3331 133.596 57.3244 133.342 57.1681L133.231 57.0995C131.507 56.035 129.312 56.1117 127.666 57.2939C127.458 57.4431 127.181 57.4528 126.963 57.3184C125.239 56.2539 123.044 56.3306 121.398 57.5128C121.19 57.662 120.913 57.6717 120.696 57.5373C118.971 56.4728 116.776 56.5494 115.13 57.7316L114.196 57.8885L113.665 57.6459C112.702 57.2055 111.585 57.5213 110.984 58.3445C110.37 57.8612 109.516 57.7227 108.749 58.0571L108.215 58.2903C107.942 58.4093 107.626 58.373 107.388 58.1952L107.283 58.1172C105.658 56.9065 103.465 56.7915 101.722 57.8258C101.502 57.9563 101.225 57.9418 101.02 57.789C99.3951 56.5782 97.2015 56.4633 95.459 57.4975C95.239 57.6281 94.9621 57.6136 94.757 57.4607C93.132 56.25 90.9385 56.1351 89.196 57.1693L88.2512 57.2441L87.7438 56.9562C86.8524 56.4505 85.7569 56.6374 85.0789 57.3451C84.4257 56.6173 83.3397 56.394 82.4328 56.8674L81.9157 57.1374L82.202 57.6859L81.9157 57.1374C81.6518 57.2751 81.3344 57.2609 81.0839 57.1002L80.9741 57.0297C79.2687 55.9353 77.0725 55.9736 75.4063 57.1269C75.196 57.2725 74.9188 57.2773 74.7035 57.1392C72.9981 56.0447 70.8019 56.0831 69.1357 57.2363C68.9254 57.3819 68.6481 57.3868 68.4328 57.2486C66.7274 56.1542 64.5312 56.1925 62.865 57.3458L61.9278 57.4863L61.4015 57.2345C60.3267 56.7204 59.0421 57.1591 58.5031 58.2137C57.8893 57.8343 57.1012 57.7655 56.4019 58.1L55.8757 58.3517L56.1427 58.9099L55.8757 58.3517C55.6072 58.4802 55.2904 58.4549 55.0457 58.2855L54.9384 58.2113C53.2723 57.058 51.0761 57.0196 49.3707 58.1141C49.1554 58.2522 48.8781 58.2474 48.6678 58.1018C47.0016 56.9485 44.8054 56.9102 43.1 58.0046C42.8847 58.1428 42.6075 58.1379 42.3971 57.9923C40.7309 56.8391 38.5348 56.8007 36.8293 57.8952L35.8878 58.0029L35.3706 57.7329C34.4952 57.2759 33.453 57.4681 32.7941 58.1366C32.7593 57.8794 32.678 57.624 32.5464 57.3825C31.9674 56.3188 30.6356 55.9259 29.5719 56.505L29.0596 56.784L29.3554 57.3274L29.0596 56.784C28.7982 56.9263 28.4805 56.9176 28.2273 56.7613L28.1162 56.6927C26.392 55.6282 24.1968 55.7049 22.551 56.8871C22.3433 57.0363 22.0661 57.046 21.8485 56.9116C20.1242 55.8471 17.929 55.9238 16.2832 57.106C16.0755 57.2552 15.7983 57.2649 15.5807 57.1305ZM36.5318 58.0552L35.5986 58.5569L35.8878 58.0029C36.0891 58.1079 36.3216 58.1246 36.5318 58.0552ZM36.5318 58.0552C36.597 58.0336 36.6602 58.0037 36.7195 57.9656L36.8293 57.8952L36.5318 58.0552ZM62.5732 57.5161L61.6581 58.0501L61.9278 57.4863C62.1327 57.5843 62.3656 57.5928 62.5732 57.5161ZM62.5732 57.5161C62.6377 57.4922 62.6997 57.4602 62.7577 57.4201L62.865 57.3458L62.5732 57.5161ZM88.893 57.3188L87.9428 57.7877L88.2512 57.2441C88.4487 57.3561 88.6805 57.3809 88.893 57.3188ZM88.893 57.3188C88.959 57.2995 89.0231 57.2719 89.0838 57.2359L89.196 57.1693L88.893 57.3188ZM114.842 57.907L113.936 58.4569L114.196 57.8885C114.402 57.9829 114.635 57.9873 114.842 57.907ZM114.842 57.907C114.906 57.882 114.967 57.8489 115.024 57.8078L115.13 57.7316L114.842 57.907ZM141.156 57.731L141.459 57.5815L141.347 57.6481C141.287 57.6841 141.222 57.7118 141.156 57.731ZM141.156 57.731L140.206 58.1999L140.515 57.6563C140.712 57.7684 140.944 57.7931 141.156 57.731ZM9.72664 57.5002L8.82097 58.0501L9.0808 57.4817C9.28734 57.5761 9.5204 57.5805 9.72664 57.5002ZM9.72664 57.5002C9.7907 57.4752 9.85218 57.4421 9.90947 57.401L10.0154 57.3248L9.72664 57.5002ZM10.7447 58.3401C11.9806 57.4523 13.6292 57.3947 14.924 58.1941C15.5711 58.5936 16.3949 58.5648 17.0125 58.1212C18.2484 57.2334 19.8969 57.1758 21.1918 57.9752C21.8389 58.3747 22.6627 58.346 23.2803 57.9023C24.5162 57.0145 26.1647 56.957 27.4596 57.7564L27.5706 57.8249L27.8963 57.2973L27.5706 57.8249C28.2056 58.2169 29.0019 58.2386 29.6572 57.8818L30.1696 57.6029L29.9643 57.2257L30.1696 57.6029C30.627 57.3539 31.1996 57.5228 31.4486 57.9801C31.6976 58.4375 31.5287 59.0101 31.0713 59.2591L30.559 59.5381C29.3092 60.2185 27.7907 60.177 26.58 59.4295L26.4689 59.361C25.8219 58.9615 24.9981 58.9903 24.3805 59.4339C23.1445 60.3217 21.496 60.3793 20.2011 59.5799C19.5541 59.1804 18.7303 59.2092 18.1127 59.6528C16.8767 60.5406 15.2282 60.5982 13.9333 59.7988C13.2863 59.3993 12.4625 59.428 11.8449 59.8717L11.7389 59.9478C10.5832 60.778 9.07131 60.9252 7.77716 60.3336L7.24658 60.0911C6.77296 59.8746 6.56452 59.3152 6.78101 58.8416C6.9975 58.3679 7.55694 58.1595 8.03056 58.376L8.56114 58.6185C9.23981 58.9287 10.0327 58.8515 10.6387 58.4162L10.7447 58.3401ZM37.5045 58.9472C38.7852 58.1253 40.4345 58.1541 41.6857 59.0202C42.311 59.4529 43.1351 59.4673 43.7751 59.0566C45.0558 58.2347 46.7051 58.2635 47.9564 59.1296C48.5816 59.5624 49.4058 59.5768 50.0458 59.1661C51.3265 58.3442 52.9758 58.373 54.227 59.2391L54.3343 59.3133C54.9479 59.738 55.7419 59.8014 56.4151 59.4794L56.9414 59.2276C57.4111 59.0029 57.9741 59.2015 58.1988 59.6713C58.4236 60.1411 58.2249 60.7041 57.7552 60.9288L57.2289 61.1805C55.9453 61.7946 54.431 61.6738 53.261 60.8639L53.1537 60.7897C52.5285 60.3569 51.7043 60.3425 51.0643 60.7532C49.7836 61.5751 48.1343 61.5463 46.8831 60.6802C46.2578 60.2474 45.4336 60.233 44.7936 60.6437C43.5129 61.4656 41.8637 61.4368 40.6124 60.5707C39.9871 60.1379 39.163 60.1236 38.523 60.5343L38.4132 60.6047C37.2156 61.3733 35.6981 61.4412 34.4367 60.7827L33.9195 60.5127C33.4579 60.2718 33.279 59.7022 33.52 59.2405C33.761 58.7789 34.3305 58.6 34.7922 58.841L35.3093 59.111C35.9708 59.4563 36.7666 59.4207 37.3947 59.0176L37.5045 58.9472ZM67.7577 58.3006C66.477 57.4787 64.8277 57.5075 63.5765 58.3736L63.4692 58.4479C62.8556 58.8725 62.0615 58.9359 61.3884 58.6139L60.8621 58.3621C60.3923 58.1374 59.8293 58.3361 59.6046 58.8058C59.3799 59.2756 59.5785 59.8386 60.0483 60.0633L60.5746 60.3151C61.8582 60.9291 63.3724 60.8083 64.5424 59.9984L64.6497 59.9242C65.275 59.4914 66.0992 59.477 66.7392 59.8877C68.0199 60.7096 69.6692 60.6808 70.9204 59.8147C71.5457 59.3819 72.3698 59.3676 73.0098 59.7783C74.2905 60.6001 75.9398 60.5714 77.1911 59.7053C77.8163 59.2725 78.6405 59.2581 79.2805 59.6688L79.3903 59.7393C80.5878 60.5078 82.1054 60.5757 83.3668 59.9172L83.884 59.6473C84.3456 59.4063 84.5245 58.8367 84.2835 58.3751C84.0425 57.9134 83.4729 57.7346 83.0113 57.9755L82.4941 58.2455C81.8326 58.5908 81.0368 58.5552 80.4088 58.1522L80.7437 57.6304L80.4088 58.1522L80.299 58.0817C79.0183 57.2598 77.369 57.2886 76.1178 58.1547C75.4925 58.5875 74.6683 58.6019 74.0283 58.1912C72.7476 57.3693 71.0984 57.3981 69.8471 58.2641C69.2218 58.6969 68.3977 58.7113 67.7577 58.3006ZM115.86 58.7469C117.096 57.8591 118.744 57.8015 120.039 58.6009C120.686 59.0004 121.51 58.9716 122.127 58.528C123.363 57.6402 125.012 57.5826 126.307 58.382C126.954 58.7815 127.778 58.7527 128.395 58.3091C129.631 57.4213 131.28 57.3638 132.575 58.1632L132.686 58.2317L133.011 57.7041L132.686 58.2317C133.321 58.6237 134.117 58.6454 134.772 58.2886L135.285 58.0097L135.079 57.6325L135.285 58.0097C135.742 57.7607 136.315 57.9296 136.564 58.3869C136.813 58.8443 136.644 59.4169 136.186 59.6659L135.674 59.9449C134.424 60.6253 132.906 60.5838 131.695 59.8363L131.584 59.7678C130.937 59.3683 130.113 59.3971 129.495 59.8407C128.26 60.7285 126.611 60.7861 125.316 59.9867C124.669 59.5872 123.845 59.616 123.228 60.0596C121.992 60.9474 120.343 61.005 119.048 60.2056C118.401 59.8061 117.577 59.8348 116.96 60.2785L116.854 60.3546C115.698 61.1848 114.186 61.332 112.892 60.7404L112.362 60.4979C111.888 60.2814 111.68 59.722 111.896 59.2484C112.112 58.7747 112.672 58.5663 113.146 58.7828L113.676 59.0253C114.355 59.3355 115.148 59.2583 115.754 58.823L115.86 58.7469ZM94.0101 58.4631C92.7898 57.5539 91.1426 57.4675 89.834 58.2442L89.7218 58.3108C89.0801 58.6917 88.2835 58.6995 87.6345 58.3313L87.127 58.0435C86.6741 57.7865 86.0986 57.9454 85.8417 58.3984C85.5847 58.8513 85.7436 59.4268 86.1965 59.6837L86.704 59.9716C87.9416 60.6737 89.4606 60.6588 90.6843 59.9325L90.7965 59.8659C91.4504 59.4778 92.2736 59.5209 92.8834 59.9753C94.1036 60.8845 95.7509 60.9708 97.0595 60.1941C97.7134 59.806 98.5366 59.8492 99.1464 60.3035C100.367 61.2127 102.014 61.2991 103.323 60.5224C103.976 60.1342 104.8 60.1774 105.409 60.6317L105.514 60.7097C106.655 61.5599 108.164 61.7335 109.468 61.1646L110.003 60.9314C110.48 60.7232 110.699 60.1675 110.49 59.6901C110.282 59.2128 109.727 58.9946 109.249 59.2028L108.714 59.4361C108.031 59.7344 107.239 59.6434 106.641 59.1975L106.536 59.1195C105.316 58.2103 103.669 58.124 102.36 58.9007C101.706 59.2888 100.883 59.2457 100.273 58.7913C99.0529 57.8821 97.4056 57.7958 96.097 58.5725C95.443 58.9606 94.6199 58.9174 94.0101 58.4631ZM142.097 58.6565C143.406 57.8798 145.053 57.9661 146.274 58.8753C146.883 59.3297 147.707 59.3728 148.36 58.9847C149.669 58.208 151.316 58.2943 152.537 59.2036C153.146 59.6579 153.97 59.701 154.623 59.3129C155.932 58.5362 157.579 58.6226 158.8 59.5318L158.904 59.6097C159.503 60.0556 160.294 60.1466 160.978 59.8483L161.513 59.6151C161.99 59.4069 162.546 59.6251 162.754 60.1024C162.962 60.5797 162.744 61.1354 162.267 61.3436L161.732 61.5768C160.428 62.1457 158.919 61.9721 157.778 61.1219L157.673 61.044C157.063 60.5896 156.24 60.5465 155.586 60.9346C154.277 61.7113 152.63 61.625 151.41 60.7157C150.8 60.2614 149.977 60.2182 149.323 60.6064C148.014 61.3831 146.367 61.2967 145.147 60.3875C144.537 59.9332 143.714 59.89 143.06 60.2781L142.948 60.3447C141.724 61.071 140.205 61.0859 138.967 60.3838L138.46 60.096C138.007 59.839 137.848 59.2635 138.105 58.8106C138.362 58.3576 138.938 58.1988 139.391 58.4557L139.898 58.7435C140.547 59.1117 141.344 59.1039 141.985 58.7231L142.097 58.6565Z" fill="#62AF17" />
        </g>
      </defs>
    </svg>

    <img class="labels" src="https://assets.codepen.io/64141/smashburger-diagram.svg" alt="arrows pointing to burger ingredients with labels for each one" />
  </div>
</div>
              
            
!

CSS

              
                body {
  background: #fff5dc;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.responsive-container {
  position: relative;
  height: 0;
  padding-bottom: 52.35%;
  width: 100%;
}

.burger-display {
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.burger {
  width: 16.21%;
  height: auto;
  position: relative;
  top: 0.75%;
  z-index: 2;
}

.labels {
  display: block;
  opacity: 0;
  transition: 0.75s opacity ease-in-out;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.labels.open {
  opacity: 1;
}

              
            
!

JS

              
                const animate = gsap.to(".burger-ingredient", {
  duration: 0.4,
  ease: "sine.out",
  y: function (_index, target) {
    const order = parseInt(target.dataset.ingredientOrder);
    const distance = (order - 5) * -25;
    return distance;
  },
  stagger: function (index, target, list) {
    const order = parseInt(target.dataset.ingredientOrder);

    return 0.25 - (Math.abs(order - 5) / 5) * 0.25;
  },
  paused: true
});

const labels = document.querySelector(".labels");
const burger = document.querySelector(".burger");

function toggleBurgerSplode() {
  if (open) {
    labels.classList.add("open");
    animate.play();
  } else {
    labels.classList.remove("open");
    animate.reverse();
  }

  open = !open;
}

burger.addEventListener("click", () => {
  toggleBurgerSplode(open);
});

              
            
!
999px

Console