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 id="root"></div>
              
            
!

CSS

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

body {
  font-family: "Kanit", sans-serif;
  margin: 0;
}

.App {
  align-items: center;
  background-color: #dbdad8;
  display: flex;
  height: 100vh;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

.phone {
  background-color: #fff;
  border-radius: 25px;
  height: 560px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

.phone-content {
  box-sizing: border-box;
  padding: 20px;
  position: absolute;
}

.pre-title {
  display: block;
  font-size: 16px;
  font-style: italic;
  margin-top: 52px;
  text-align: center;
  width: 100%;
}

.title {
  display: block;
  font-size: 36px;
  font-weight: 900;
  line-height: 36px;
  text-align: center;
  width: 100%;
}

.cook {
  margin-top: -8px;
}

.bottomSheet {
  position: absolute;
  height: 100%;
}

.drag-area {
  height: 500px;
  opacity: 0.5;
  position: absolute;
  width: 300px;
  z-index: 1;
}

.drag {
  cursor: pointer;
}

.container {
  box-sizing: border-box;
  height: 500px;
  padding: 20px;
  position: absolute;
  top: 60px;
  width: 100%;
}

.content {
  font-size: 28px;
  font-weight: 900;
}

.icon {
  left: 40px;
  position: absolute;
  top: 16px;
  width: 20px;
}

.close {
  left: 56px;
  position: absolute;
  top: 17px;
}

.content-title {
  margin-bottom: 24px;
}

.content-subtitle {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 20px;
}

.content-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

              
            
!

JS

              
                const { useState, useEffect,  } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;

const THRESHOLD = 300;

function Close({ stroke, scale }) {
  return (
    <svg
      className="close"
      xmlns="http://www.w3.org/2000/svg"
      height="20"
      width="20"
    >
      <animated.g style={{ scale, transformOrigin: "50%" }}>
        <path
          d="M3 3l13 13M16 3L3 16"
          fill="none"
          strokeWidth="2.2"
          strokeLinecap="round"
          style={{ stroke }}
        />
      </animated.g>
    </svg>
  );
}

function Veg({ fill }) {
  return (
    <svg
      className="icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 25"
      fill={fill}
    >
      <path d="M13.1 3.8c-.6-.3-1.3-.6-2.1-.7.2-1 .9-1.2 1.9-1.1.5 0 1-.4 1.1-.9S13.6 0 13.1 0C10.6-.2 9.2 1.2 9 3.1c-.7.1-1.4.3-2.1.7C3.7 1.5-.5 4.4.3 8.5L2 17.4c.3 1.5 1.6 2.6 3.1 2.6.9 0 1.6-.4 2.2-1 .7.6 1.7 1 2.7 1 1.1 0 2-.4 2.7-.9.5.6 1.3.9 2.1.9 1.5 0 2.8-1.1 3.1-2.6l1.7-8.9c.8-4.1-3.3-6.9-6.5-4.7zM5.1 18c-.5 0-1-.4-1.1-1L2.3 8.2c-.4-2 1.2-3.6 3-3-.8 1-1.1 2.2-.8 3.4l1.7 8.2c-.2.6-.3 1.2-1.1 1.2zm4.9 0c-1 0-1.7-.5-1.8-1L6.4 8.1C6.1 6.4 7.9 5 10 5c2 0 4 1.4 3.6 3.1-1.9 9.3-1.7 8.2-1.8 8.9-.1.5-.8 1-1.8 1zm7.7-9.8L16 17c-.1.6-.6 1-1.1 1-.7 0-.9-.5-1-1.2l1.7-8.3c.2-1.1 0-2.4-.8-3.4 1.7-.6 3.3 1 2.9 3.1z" />
    </svg>
  );
}

function Chicken({ fill }) {
  return (
    <svg
      className="icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 25"
      fill={fill}
    >
      <path d="M17.7 2.3C15.1-.3 12.5-1 9.9 1.6 8.2 3.3 6.9 6 6.7 8.4c-.1.5-.3 1-.6 1.3l-.9.9c-.5.5-1.3.6-1.9.6-.9-.1-1.8.2-2.4.9-1.2 1.2-1.2 3.1 0 4.2.5.5 1.2.8 2 .9 0 .7.3 1.4.9 2 1.2 1.2 3.1 1.2 4.2 0 .6-.6.9-1.5.9-2.4 0-.6 0-1.3.6-1.9l.9-.9c.3-.3.8-.5 1.3-.6 2.3-.2 5-1.5 6.7-3.2 2.6-2.7 1.9-5.3-.7-7.9zM17 8.7c-1.3 1.3-3.7 2.5-5.5 2.6-1 .1-1.9.5-2.5 1.2l-1 1c-.9.9-1.3 2.1-1.1 3.5 0 .3-.1.6-.3.8-.4.4-1 .4-1.4 0-.2-.2-.3-.5-.3-.8.1-1-.7-1.8-1.7-1.7-.3 0-.6-.1-.8-.3-.4-.4-.4-1 0-1.4.2-.2.5-.3.8-.3 1.4.1 2.6-.3 3.5-1.1l.9-.9c.7-.7 1.1-1.5 1.2-2.5 0-2.1 1.2-4.4 2.5-5.8 1.6-1.6 3-1.3 5 .7 1.9 1.9 2.3 3.3.7 5z" />
    </svg>
  );
}

function Fish({ fill }) {
  return (
    <svg
      className="icon"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 25"
      fill={fill}
    >
      <path d="M19.9 1c-.1-.5-.4-.8-.9-.9C10.9-.8 4.9 3.5 4.6 11.6l-3.8.7C0 12.5-.3 13.4.3 14L6 19.7c.6.6 1.5.3 1.7-.5l.8-3.8C16.6 15.1 20.8 9 19.9 1zM18 2c.1 2.1-.2 4.1-.8 5.7-2.4-.6-4.3-2.5-4.9-4.9 1.6-.6 3.5-.9 5.7-.8zM6 17l-3-3 1.6-.3c0 .2 0 .5.1.7.1.5.4.8.9.9.3 0 .5.1.8.1L6 17zm.6-3.6c-.2-3.8.8-7.4 3.8-9.6.9 2.7 3 4.9 5.8 5.8-2.2 3-5.8 4-9.6 3.8z" />
      <path d="M15.6 4.9c.7.3 1.4-.2 1.4-.9 0-.4-.3-.8-.6-.9-.5-.2-1.1 0-1.3.5-.2.6.1 1.1.5 1.3z" />
    </svg>
  );
}

function Cook() {
  return (
    <svg
      className="cook"
      xmlns="http://www.w3.org/2000/svg"
      width="260"
      height="400"
    >
      <path
        d="M154.193 179.977c-.278 1.194-6.235 55.415-6.235 55.415l-5.388 7.661-1.46 11.73 11.175 27.693h-82.82s-1.313-14.632-1.2-18.546c.114-3.913 2.108-18.266 2.108-18.266l-.191-14.573-3.137-63.538 28.066-9.052c16.955-2.918 41.907 9.768 41.907 9.768l17.175 11.708"
        fill="#f03d5f"
      />
      <path
        d="M143.43 139.564c3.688-.231 6.516-3.314 8.55-6.4 1.898-2.879 3.523-6.116 3.54-9.566.015-2.995-1.18-5.848-2.355-8.603-1.209-2.838-2.44-5.711-4.34-8.141-1.902-2.43-4.584-4.403-7.645-4.783l2.25 37.493"
        fill="#17282f"
      />
      <path
        d="M100.327 154.01l.037-.913 2.164-52.94 1.195-3.003 26.48-3.663c8.652-.674 16.11 5.999 16.418 14.672.34 9.636.376 21.414-.96 28.56-2.691 14.37-13.804 15.9-13.804 15.9s-.19 3.763-.397 9.197c-.155 4.105-3.78 15.938-7.886 16.054-1.765.05-6.578-1.48-8.876-1.814-14.482-2.116-14.371-22.05-14.371-22.05"
        fill="#f8a58d"
      />
      <path
        d="M141.733 116.562c.007.978-.815 1.792-1.836 1.818-1.02.027-1.855-.742-1.863-1.721-.007-.979.815-1.792 1.835-1.82 1.021-.026 1.856.745 1.864 1.723M143.899 114.215c-.236.234-1.61-.841-3.602-.892-1.989-.077-3.479.907-3.688.657-.103-.11.142-.54.791-.986.64-.445 1.72-.864 2.961-.824 1.24.04 2.272.526 2.858 1.01.6.487.796.93.68 1.035M122.241 116.371c.008.978-.814 1.792-1.835 1.818-1.02.027-1.855-.743-1.862-1.721-.008-.979.814-1.793 1.834-1.82 1.021-.026 1.856.745 1.863 1.723M124.31 114.046c-.236.236-1.612-.84-3.602-.89-1.989-.079-3.479.906-3.688.655-.103-.11.14-.54.792-.985.64-.444 1.72-.864 2.96-.824 1.241.04 2.272.527 2.86 1.01.597.487.794.93.679 1.034M131.132 129.017c-.007-.114 1.237-.293 3.25-.495.51-.038.995-.126 1.09-.47.13-.365-.068-.92-.298-1.518l-1.397-3.914c-1.937-5.571-3.324-10.147-3.099-10.223.225-.076 1.978 4.378 3.914 9.95.465 1.373.91 2.683 1.333 3.935.177.583.49 1.248.21 2.004-.148.376-.53.642-.857.72-.33.091-.615.088-.868.097-2.02.052-3.274.027-3.278-.087"
        fill="#17282f"
      />
      <path
        d="M131.857 152.624s-9.726.358-19.186-5.69c0 0 4.416 10.044 18.897 9.092l.29-3.402M130.157 133.793c-.69-.967-1.931-1.521-3.18-1.422-.868.07-1.753.463-2.297 1.152-.544.69-.682 1.685-.223 2.37.516.77 1.635.976 2.593.732s1.792-.847 2.587-1.449c.22-.166.445-.34.585-.574.14-.232.178-.54.017-.74"
        fill="#f68260"
      />
      <path
        d="M125.232 130.233c.324-.01.269 2.152 2.077 3.737 1.804 1.591 4.116 1.412 4.124 1.714.027.137-.525.406-1.497.405-.956.007-2.34-.338-3.447-1.308-1.103-.972-1.554-2.241-1.603-3.13-.058-.906.198-1.435.346-1.418M125.04 106.255c-.212.537-2.193.224-4.538.441-2.348.171-4.252.803-4.548.309-.132-.237.21-.736.987-1.24.769-.503 1.988-.966 3.395-1.085 1.407-.114 2.686.144 3.527.514.849.369 1.268.806 1.177 1.061M143.326 108.43c-.364.443-1.723-.065-3.372-.132-1.647-.126-3.055.22-3.364-.262-.134-.234.098-.681.72-1.092.614-.41 1.63-.731 2.762-.666 1.132.068 2.104.504 2.665.984.57.48.749.952.589 1.168M100.183 116.332s-3.539 1.896-7.271 6.579c-2.295 2.88-3.787 6.604-3.214 10.243.795 5.041 5.168 8.629 9.23 11.717 2.342.34 4.083-2.243 4.45-4.582.365-2.337.037-4.864 1.144-6.955.993-1.877 2.956-3.026 4.264-4.697 2.436-3.109 2.27-7.483 1.676-11.388-.595-3.905.022-9.81 5.019-15.36 0 0-12.202 4.784-15.298 14.443"
        fill="#17282f"
      />
      <path
        d="M95.857 129.334c2.132-3.03 1.57-7.48-.855-10.283-2.425-2.802-6.355-4.024-10.046-3.706-2.69.23-5.407 1.284-7.145 3.35-1.737 2.067-2.263 5.244-.82 7.526.798 1.262 2.187 2.455 1.867 3.913-.309 1.404-1.969 1.936-3.149 2.757-2.063 1.434-2.863 4.333-2.072 6.718.792 2.385 2.991 4.172 5.44 4.737 2.448.564 5.081-.01 7.24-1.297-.014 2.243 2.409 3.957 4.644 3.766 2.235-.19 4.127-1.815 5.325-3.712 1.69-2.68 2.274-5.938 2.2-9.105-.074-3.167-.764-6.284-1.45-9.376"
        fill="#17282f"
      />
      <path
        d="M99.554 145.56c-.007.01-.12-.063-.33-.209l-.907-.657a51.242 51.242 0 01-3.213-2.578c-1.302-1.15-2.806-2.616-4.098-4.547-1.291-1.917-2.285-4.376-2.394-7.077-.042-1.343.14-2.675.607-3.865.451-1.196 1.165-2.225 1.955-3.076 1.607-1.695 3.4-2.786 4.817-3.776 1.44-.968 2.545-1.827 3.254-2.484.36-.324.622-.592.796-.78.178-.182.276-.275.286-.267.01.008-.07.117-.232.316-.156.204-.404.49-.751.834-.687.693-1.781 1.595-3.206 2.592-1.402 1.018-3.169 2.13-4.717 3.792-.762.835-1.44 1.828-1.868 2.976-.444 1.142-.617 2.425-.577 3.726.105 2.615 1.061 5.019 2.31 6.904 1.252 1.904 2.718 3.373 3.99 4.54 1.28 1.165 2.378 2.042 3.129 2.658l.863.711c.195.165.295.257.286.267"
        fill="#33535f"
      />
      <path
        d="M89.265 127.293c-.06.034-.429-.738-1.347-1.723-.901-.98-2.442-2.137-4.431-2.626-1.99-.485-3.892-.172-5.144.282-1.27.449-1.953.963-1.99.905-.014-.018.143-.163.459-.383a7.5 7.5 0 011.44-.764c1.264-.528 3.24-.902 5.322-.394 2.079.511 3.66 1.755 4.537 2.809.446.527.747 1 .924 1.342.178.341.25.542.23.552M78.035 131.127c-.04-.004.218-.694 1.16-1.284.464-.29 1.084-.525 1.79-.646.708-.125 1.49-.147 2.304-.13 1.635.042 3.094.34 4.114.647 1.023.309 1.617.6 1.6.643-.019.051-.641-.154-1.666-.394a20.526 20.526 0 00-4.059-.532c-1.6-.058-3.053.115-3.953.635-.914.494-1.241 1.1-1.29 1.061M75.63 142.567c-.002-.067 1.001-.044 2.57-.35a15.135 15.135 0 005.69-2.4 15.125 15.125 0 004.216-4.516c.828-1.366 1.152-2.316 1.214-2.291.022.007-.037.25-.19.678a12 12 0 01-.802 1.744c-.774 1.42-2.178 3.254-4.229 4.684-2.049 1.431-4.254 2.117-5.853 2.354-.804.123-1.462.158-1.914.153-.453-.005-.703-.034-.702-.056M89.966 127.067c.028-.033.425.378 1.308.862.872.486 2.302.962 4.1.9a9.411 9.411 0 002.86-.551c.986-.36 1.98-.915 2.905-1.653 1.867-1.47 3.436-3.641 4.605-6.125 1.168-2.496 1.916-5.034 2.666-7.315.734-2.288 1.493-4.33 2.319-5.96.815-1.635 1.67-2.854 2.332-3.63.326-.391.601-.678.796-.862.195-.185.3-.278.31-.269.023.023-.376.421-.996 1.22-.623.796-1.434 2.022-2.211 3.654-.787 1.629-1.514 3.66-2.231 5.95-.73 2.283-1.47 4.835-2.656 7.367-1.186 2.522-2.796 4.738-4.726 6.233a10.625 10.625 0 01-3.012 1.674 9.541 9.541 0 01-2.956.524c-1.848.031-3.306-.5-4.174-1.033a4.405 4.405 0 01-.566-.378 2.932 2.932 0 01-.386-.316c-.197-.183-.296-.282-.287-.292"
        fill="#33535f"
      />
      <path
        d="M110.508 114.095c.035.021-.254.422-.577 1.238-.325.816-.598 2.063-.704 3.635-.141 1.564-.083 3.475-.622 5.541-.548 2.05-1.802 4.138-3.67 5.73-1.853 1.612-4.13 2.52-6.246 2.692a11.638 11.638 0 01-5.508-.845 10.985 10.985 0 01-3.194-1.988 7.106 7.106 0 01-.72-.727c-.154-.175-.23-.271-.22-.28.03-.03.348.348 1.033.9.68.55 1.731 1.296 3.197 1.855 1.45.57 3.324.959 5.38.751 2.05-.186 4.242-1.071 6.04-2.634 1.812-1.544 3.036-3.562 3.585-5.544.54-1.992.515-3.9.688-5.473.14-1.583.457-2.854.83-3.667.187-.405.354-.71.493-.9.131-.194.205-.291.215-.284M151.976 132.23c-.024-.03.235-.22.611-.649a6.594 6.594 0 001.224-2.053 8.401 8.401 0 00.497-3.493c-.089-1.334-.516-2.775-1.196-4.17-1.386-2.802-3.294-4.949-4.54-6.59a17.773 17.773 0 01-1.364-2.038c-.283-.506-.407-.802-.388-.812.026-.014.192.259.51.738.316.479.795 1.156 1.444 1.953 1.288 1.59 3.248 3.727 4.666 6.59.696 1.43 1.13 2.918 1.203 4.308a8.362 8.362 0 01-.592 3.61c-.404.971-.94 1.652-1.36 2.055-.211.202-.385.347-.514.43-.126.09-.194.13-.201.121"
        fill="#33535f"
      />
      <path
        d="M149.902 136.325c-.07-.057.94-.783 1.733-2.502a8.045 8.045 0 00.691-3.194c.031-1.24-.27-2.593-.816-3.923-.538-1.337-1.275-2.508-1.883-3.622a85.428 85.428 0 01-1.56-2.974 41.68 41.68 0 01-.965-2.049c-.211-.492-.308-.772-.286-.782.024-.01.165.25.414.72l1.066 1.993c.455.838 1.002 1.833 1.624 2.929.616 1.092 1.375 2.276 1.928 3.648.56 1.361.865 2.777.814 4.067a7.944 7.944 0 01-.794 3.296 6.88 6.88 0 01-1.322 1.861c-.19.193-.35.327-.463.413-.11.087-.173.128-.181.119"
        fill="#33535f"
      />
      <path
        d="M99.5 118.19c4.791-8.18 11.498-15.791 20.72-17.993 9.22-2.203 18.63-.676 26.6 4.456V88.528l-11.512-37.16-8.974-4.73-21.191 12.105-5.484 44.697-.158 14.75"
        fill="#f03d5f"
      />
      <path
        d="M99.5 118.19l.159-14.75 5.484-44.697 21.19-12.104 8.975 4.73 11.512 37.16v16.124a36.636 36.636 0 00-.897-.56c-5.378-3.238-11.367-4.875-17.486-4.875-2.728 0-5.481.325-8.217.979a23.682 23.682 0 00-4.79 1.711c-.47.226-.933.468-1.388.723l-.19.106c-6.042 3.447-10.741 9.288-14.351 15.453"
        fill="#f9b2c4"
      />
      <path
        d="M146.369 89.112c-.007.011-.181-.07-.507-.239-.33-.16-.795-.436-1.431-.72a31.098 31.098 0 00-5.502-2.057 36.104 36.104 0 00-8.604-1.24 43.87 43.87 0 00-5.141.191c-1.778.182-3.617.408-5.413.986-3.604 1.145-6.8 2.904-9.5 4.758a33.35 33.35 0 00-6.466 5.802c-1.625 1.885-2.584 3.666-3.248 4.881l-.65 1.462c-.152.334-.236.508-.248.504-.012-.004.05-.186.179-.53.133-.342.317-.854.591-1.496.629-1.243 1.564-3.062 3.179-4.985 1.595-1.926 3.752-4.023 6.47-5.913 2.715-1.886 5.93-3.67 9.586-4.832 1.831-.588 3.703-.815 5.486-.992a43.277 43.277 0 015.184-.172c3.31.098 6.262.635 8.665 1.327a28.878 28.878 0 015.495 2.18c.629.304 1.085.6 1.403.782.317.189.478.293.472.303"
        fill="#17282f"
      />
      <path
        d="M132.368 84.797c-.1.017-1.601-8.475-3.353-18.963-1.753-10.492-3.093-19.008-2.993-19.025.099-.017 1.6 8.472 3.352 18.964 1.753 10.49 3.093 19.008 2.994 19.024M118.324 86.33c-.1-.002.058-8.06.355-17.994.296-9.937.618-17.988.718-17.985.102.003-.058 8.058-.355 17.996-.296 9.934-.617 17.987-.718 17.984M106.37 93.024c-.012 0-.014-.133-.008-.385l.046-1.098c.047-.955.137-2.334.272-4.037.265-3.405.728-8.102 1.378-13.273.652-5.172 1.367-9.838 1.954-13.203.29-1.683.546-3.041.736-3.977l.229-1.076c.056-.246.09-.373.103-.371.013.002 0 .134-.031.383l-.16 1.089c-.156.994-.365 2.346-.623 3.993a486.938 486.938 0 00-3.329 26.458l-.387 4.024c-.047.441-.084.803-.114 1.094-.03.25-.052.38-.066.38M134.411 87.516c.052.005.028.624-.037 1.622-.084 1.136-.178 2.446-.284 3.893l-.296 3.893c-.084.995-.152 1.612-.204 1.61-.05-.002-.071-.622-.055-1.623.019-1.001.078-2.383.191-3.908.114-1.522.26-2.897.39-3.89.133-.994.246-1.603.295-1.597"
        fill="#17282f"
      />
      <path
        d="M67.627 246.66c-.882-1.29-3.252-2.437-4.805-2.606-5.377-.587-10.277 1.728-14.512 5.092l-.833 1.515c-2.282 1.78-4.66 3.81-5.37 6.616-.71 2.806-.911 6.004-.97 8.898-.027 1.325.582 2.814 1.813 4.25.98 1.146 2.432 1.766 3.932 1.913 2.828.275 5.703-.472 8.193-1.84 2.491-1.367 4.617-3.333 6.42-5.529a31.474 31.474 0 006.55-13.962c.283-1.469.426-3.112-.418-4.347"
        fill="#f03d5f"
      />
      <path
        d="M48.058 272.394c-.392 0-.785-.018-1.176-.056-1.5-.147-2.953-.767-3.932-1.912a8.594 8.594 0 01-1.28-1.948c-1.63-13.298 9.871-24.27 19.633-24.27 1.184 0 2.343.16 3.448.499l-.393-.267c1.291.475 2.649 1.312 3.27 2.22.475.697.638 1.524.638 2.376-.001.658-.098 1.331-.22 1.971a31.474 31.474 0 01-6.55 13.962c-1.804 2.196-3.93 4.162-6.42 5.53-2.146 1.177-4.578 1.895-7.018 1.895"
        fill="#9c2438"
      />
      <path
        d="M67.045 167.553c-.843.281-42.781 59.722-43.906 63.658s-7.27 13.375 1.406 22.212c8.65 8.81 17.143 15.206 17.143 15.206-1.944-14.98 12.8-27.059 23.063-23.922l-7.872-5.343 17.995-23.898-7.829-47.913M154.193 179.977s6.598 8.246 8.248 13.59c1.41 4.564 8.886 25.67 8.886 25.67l13.625 33.767s-2.07 2.984-2.566 5.513c-.198 1.002-1.93 16.516-6.057 23.119l-21.855-9.77-2.754-19.562-3.762-16.912 3.894-45.38 2.34-10.035M92.855 158.976s5.622-5.17 7.156-5.893c0 0 1.778 6.063 6.975 8.935 5.196 2.872 8.589 5.965 8.589 6.375v7.521s-21.372-5.842-22.72-16.938"
        fill="#f03d5f"
      />
      <path
        d="M96.431 197.246L138 194.735l-1.92-23.744-1.81-4.026-2.813-5.049s-.1 2.582-1.964 4.61c-3.427 3.729-8.446 4.465-8.446 4.465l-.82 4.923-21.047-8.7s-2.748 28.665-2.748 29.349"
        fill="#f03d5f"
      />
      <path
        d="M121.046 170.991c.006 0-.004.11-.032.321l-.137.944c-.133.854-.324 2.082-.573 3.67l-.01.066-.067.002-17.099.524c-.92.025-1.86.052-2.821.08l-1.457.041c-.5.009-.965.022-1.419.183-.898.31-1.669 1.048-1.977 1.987-.168.474-.189.953-.163 1.49l.03 1.594.287 13.507c.318 13.142.522 25.044.462 33.66a595.07 595.07 0 01-.127 10.2l-.075 2.773-.029.72c-.009.163-.016.246-.022.246-.006 0-.011-.084-.016-.246-.001-.181-.003-.42-.007-.722l.007-2.773.012-10.199c-.007-8.613-.25-20.508-.57-33.651l-.272-13.51-.025-1.592c-.026-.512-.003-1.1.185-1.606.346-1.041 1.2-1.854 2.193-2.193.497-.176 1.04-.188 1.517-.194l1.457-.035 2.822-.068 17.103-.376-.077.067.648-3.659.177-.937c.043-.21.067-.315.075-.314"
        fill="#17282f"
      />
      <path
        d="M101.968 185.086a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0"
        fill="#17282f"
      />
      <path
        d="M110.128 183.176c.012.107-2.004.368-4.437.936-2.436.558-4.361 1.209-4.398 1.108-.035-.087 1.853-.898 4.315-1.463 2.462-.575 4.514-.675 4.52-.58M107.145 186.705c-.033.1-1.397-.297-3.105-.652-1.707-.361-3.115-.544-3.106-.649.005-.096 1.447-.074 3.181.292 1.735.36 3.064.92 3.03 1.01M101.968 205.186a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0"
        fill="#17282f"
      />
      <path
        d="M110.128 203.275c.012.107-2.004.368-4.437.936-2.436.559-4.361 1.21-4.398 1.108-.035-.087 1.853-.898 4.315-1.463 2.462-.574 4.514-.675 4.52-.58M107.145 206.804c-.033.1-1.397-.297-3.105-.651-1.707-.361-3.115-.545-3.106-.65.005-.096 1.447-.074 3.181.293 1.735.36 3.064.919 3.03 1.008M101.968 225.284a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0"
        fill="#17282f"
      />
      <path
        d="M110.128 223.375c.012.106-2.004.367-4.437.935-2.436.559-4.361 1.21-4.398 1.109-.035-.087 1.853-.898 4.315-1.464 2.462-.573 4.514-.674 4.52-.58M107.145 226.904c-.033.1-1.397-.298-3.105-.652-1.707-.36-3.115-.544-3.106-.65.005-.095 1.447-.073 3.181.293 1.735.36 3.064.919 3.03 1.009M72.337 220.883c-.012-.003.022-.178.098-.507l.35-1.439c.31-1.247.77-3.048 1.297-5.284.524-2.234 1.106-4.906 1.56-7.905.454-2.994.751-6.325.642-9.816-.134-3.488-.733-6.788-1.663-9.664-.935-2.876-2.164-5.333-3.459-7.216-1.287-1.89-2.556-3.258-3.504-4.117-.452-.455-.861-.743-1.108-.974-.256-.221-.387-.343-.38-.353.008-.01.154.092.425.295.263.214.688.485 1.158.927.984.832 2.293 2.185 3.621 4.076 1.336 1.885 2.603 4.358 3.566 7.258.958 2.901 1.573 6.233 1.708 9.756.11 3.522-.199 6.874-.674 9.88-.474 3.01-1.085 5.683-1.642 7.914a166.779 166.779 0 01-1.41 5.26l-.416 1.421c-.099.323-.157.492-.169.488"
        fill="#17282f"
      />
      <path
        d="M71.691 220.27c-.024.005-.108-.326-.238-.932a38.51 38.51 0 01-.451-2.581c-.323-2.19-.597-5.247-.552-8.63.052-3.382.413-6.431.798-8.61.191-1.09.373-1.968.524-2.568.147-.601.24-.93.265-.925.024.005-.022.345-.125.953-.109.607-.252 1.49-.41 2.58a67.597 67.597 0 00-.688 8.576 67.565 67.565 0 00.444 8.59 83.11 83.11 0 00.335 2.59c.086.612.123.953.098.957M31.889 238.503c-.005-.031.39-.1 1.087-.273.694-.189 1.673-.542 2.816-1.132 1.146-.584 2.442-1.408 3.915-2.286 1.475-.85 3.164-1.814 5.165-2.146 2-.382 3.967.127 5.501.9 1.562.779 2.74 1.818 3.708 2.675.96.877 1.657 1.668 2.12 2.224.462.56.696.885.678.9-.02.017-.292-.278-.784-.805a28.779 28.779 0 00-2.186-2.128c-.982-.825-2.164-1.829-3.683-2.564-1.505-.736-3.38-1.208-5.293-.842-1.918.315-3.582 1.246-5.058 2.076-1.473.857-2.793 1.666-3.968 2.226-1.172.568-2.185.892-2.897 1.04-.356.08-.641.096-.83.123-.19.02-.29.025-.291.012"
        fill="#17282f"
      />
      <path
        d="M46.384 223.944c.01-.023.246.068.666.256.212.09.466.208.747.375.283.162.617.33.952.57.694.443 1.465 1.056 2.258 1.804a17.8 17.8 0 012.268 2.72 17.775 17.775 0 011.632 3.144c.386 1.02.652 1.968.792 2.78.092.402.119.774.16 1.098.044.324.056.604.057.835.01.46.003.712-.022.712-.071.005-.095-1.01-.447-2.593-.17-.792-.457-1.714-.851-2.707a19.111 19.111 0 00-1.624-3.067 19.111 19.111 0 00-2.2-2.682c-.764-.747-1.504-1.368-2.169-1.83-1.323-.937-2.25-1.35-2.22-1.415"
        fill="#17282f"
      />
      <path
        d="M56.435 239.089a48.247 48.247 0 00-1.927-2.12c.676.626 1.2 1.18 1.587 1.59l.166.18.174.35m-24.926-.67c-.549 0-1.08-.133-1.407-.552-.584-.75-.096-1.852.512-2.583a9.167 9.167 0 014.501-2.93c.905-.258 2.06-.59 2.161-1.526.045-.413-.153-.81-.195-1.224-.086-.844.517-1.645 1.277-2.026.627-.314 1.338-.396 2.045-.396.148 0 .297.004.445.01 6.295.245 12.278 4.377 14.735 10.177l.23.465.028.21a22.099 22.099 0 00-1.76-1.803c-.969-.857-2.146-1.896-3.708-2.674-1.175-.594-2.606-1.03-4.11-1.03-.458 0-.923.04-1.39.129-2.002.332-3.691 1.296-5.166 2.146-1.473.878-2.77 1.702-3.915 2.286-.828.427-1.57.73-2.18.937-.44.127-.885.232-1.338.311a4.449 4.449 0 01-.765.073m24.51-.169l-.104-.122c.001-.024.003-.051.003-.083l.102.205m-17.999-2.063c.59-.341 1.207-.709 1.854-1.085 1.476-.83 3.14-1.76 5.058-2.076a7.195 7.195 0 011.352-.127c1.13 0 2.219.255 3.192.639a8.261 8.261 0 00-2.49-.379c-2.27 0-4.549.851-6.626 1.855-.783.378-1.559.78-2.34 1.173"
        fill="#9c2438"
      />
      <path
        d="M56.261 238.739l-.166-.18a31.097 31.097 0 00-1.587-1.59c-1.466-1.498-3.092-2.814-5.031-3.431-.973-.384-2.061-.639-3.192-.639-.446 0-.898.04-1.352.127-1.918.315-3.582 1.246-5.058 2.076-.647.376-1.265.744-1.854 1.085-1.435.722-2.885 1.41-4.41 1.848.61-.207 1.353-.51 2.181-.937 1.146-.584 2.442-1.408 3.915-2.286 1.475-.85 3.164-1.814 5.165-2.146a7.44 7.44 0 011.391-.13c1.504 0 2.935.437 4.11 1.03 1.562.779 2.74 1.818 3.708 2.675.738.673 1.32 1.298 1.76 1.802.019.128.034.195.052.195.01 0 .018-.037.022-.11.036.042.07.083.105.122l.241.489"
        fill="#0c1418"
      />
      <path
        d="M55.893 238.238c-.018 0-.033-.067-.052-.195a12.58 12.58 0 01-.028-.209l.105.211c0 .032-.002.06-.003.083-.004.073-.011.11-.021.11"
        fill="#0c1418"
      />
      <path
        d="M147.958 235.392c.009.009-.081.114-.26.306l-.8.825c-.346.359-.777.79-1.304 1.263-.523.478-1.104 1.04-1.795 1.606-1.345 1.17-3.028 2.474-4.961 3.827a67.332 67.332 0 01-6.57 3.97 67.252 67.252 0 01-7.012 3.127c-2.215.816-4.246 1.452-5.976 1.888-.858.245-1.65.4-2.341.557-.69.162-1.29.27-1.783.35l-1.133.184c-.26.038-.397.053-.4.04-.002-.012.132-.05.387-.112.295-.065.664-.15 1.118-.25.488-.102 1.082-.23 1.765-.41.684-.176 1.47-.348 2.32-.607 1.715-.467 3.727-1.125 5.924-1.953a71.913 71.913 0 006.962-3.137 72.125 72.125 0 006.55-3.923c1.933-1.331 3.623-2.608 4.984-3.75.699-.55 1.29-1.096 1.824-1.557.538-.458.983-.873 1.343-1.216l.845-.774c.196-.175.304-.263.313-.254"
        fill="#17282f"
      />
      <path
        d="M154.474 189.371c.013.003-.003.165-.045.472l-.203 1.34-.776 4.92c-.64 4.155-1.486 9.903-2.358 16.26-.851 6.342-1.62 12.081-2.186 16.288l-.662 4.937-.194 1.34c-.05.306-.08.467-.092.464-.013-.001-.006-.164.018-.473l.128-1.349.547-4.951a796.795 796.795 0 012.08-16.307c.872-6.359 1.758-12.103 2.465-16.251.36-2.073.657-3.75.89-4.903l.27-1.328c.066-.302.106-.46.118-.459M130.79 258.564c-.02-.014.117-.252.38-.67a61.08 61.08 0 011.157-1.743 138.79 138.79 0 014.05-5.589 137.598 137.598 0 014.317-5.388c.57-.674 1.04-1.213 1.373-1.578.333-.365.527-.559.545-.543.02.016-.136.242-.436.634l-1.283 1.65a465.51 465.51 0 00-4.226 5.445 476.729 476.729 0 00-4.13 5.518l-1.25 1.675c-.3.393-.475.603-.496.589M175.842 243.994c-.012.026-.405-.153-1.12-.462-.713-.31-1.75-.752-3.062-1.207-2.608-.904-6.387-1.912-10.615-1.786-1.046.05-2.064.224-2.961.611-.901.382-1.678.948-2.328 1.576-1.3 1.272-2.087 2.753-2.628 4.02-.54 1.275-.864 2.357-1.105 3.096-.235.743-.371 1.152-.396 1.145-.024-.007.066-.428.26-1.184.2-.754.486-1.85 1.004-3.156.517-1.296 1.295-2.829 2.63-4.16.667-.659 1.475-1.258 2.422-1.664.947-.414 2.01-.596 3.085-.647 4.31-.129 8.112.935 10.72 1.907 1.31.49 2.337.97 3.035 1.32.35.171.615.32.795.42.18.101.27.16.264.171"
        fill="#17282f"
      />
      <path
        d="M170.604 233.008c.001.073-1.098.038-2.825.337-.865.142-1.876.408-2.967.788a20.14 20.14 0 00-3.385 1.621 20.217 20.217 0 00-2.985 2.278c-.835.8-1.531 1.579-2.051 2.284-1.051 1.403-1.52 2.398-1.586 2.363-.022-.01.085-.262.3-.71.104-.226.241-.497.43-.795.185-.3.377-.656.648-1.01.5-.735 1.189-1.548 2.027-2.375a18.936 18.936 0 013.026-2.345 18.902 18.902 0 013.464-1.628c1.119-.37 2.156-.614 3.038-.725.438-.08.842-.09 1.193-.118.352-.033.656-.031.904-.02.497.01.77.03.77.055"
        fill="#17282f"
      />
      <path
        d="M176.232 277.353c-.591-4.572-3.78-8.67-7.989-10.553-3.333-1.492-7.941-1.834-11.11-.017-3.168 1.816-7.408 6.34-6.552 9.89l7.271 12.213c3.657 2.807 9.098 2.912 12.97.409 3.87-2.503 6-7.37 5.41-11.942"
        fill="#f03d5f"
      />
      <path
        d="M164.59 291.087c-2.414 0-4.821-.73-6.738-2.2l-3.824-6.423-.205-.345-3.242-5.445a4.107 4.107 0 01-.112-.968c0-3.366 3.778-7.269 6.664-8.923 1.5-.86 3.32-1.236 5.177-1.236 2.067 0 4.178.467 5.933 1.253 4.208 1.882 7.398 5.981 7.989 10.553.065.509.098 1.021.097 1.534 0 .88-.097 1.76-.281 2.623-.674 3.144-2.527 6.04-5.227 7.785-1.842 1.191-4.04 1.792-6.231 1.792"
        fill="#9c2438"
      />
      <path
        d="M173.967 286.255c-.027-.017.255-.49.715-1.362.424-.889.987-2.22 1.256-3.96.257-1.728.237-3.88-.535-6.077-.164-.558-.427-1.09-.668-1.647-.294-.53-.572-1.085-.944-1.596-.709-1.039-1.569-2.04-2.612-2.879a12.928 12.928 0 00-3.335-1.982 14.039 14.039 0 00-3.526-.827c-2.316-.196-4.422.184-6.066.801-1.652.609-2.882 1.364-3.669 1.957-.79.592-1.194.967-1.22.94-.007-.01.087-.109.276-.29.196-.172.456-.466.857-.762.77-.634 1.996-1.436 3.666-2.087 1.663-.658 3.81-1.076 6.186-.894 1.181.115 2.412.371 3.626.83a13.144 13.144 0 013.437 2.034c1.071.86 1.952 1.89 2.676 2.96.38.525.662 1.097.96 1.642.245.571.51 1.121.675 1.694.773 2.259.766 4.467.47 6.225a13.213 13.213 0 01-1.384 3.983c-.238.438-.467.753-.604.975-.145.219-.227.33-.237.322"
        fill="#17282f"
      />
      <path
        d="M153.968 269.083c-.1.017-.95-4.776-1.9-10.702-.95-5.928-1.64-10.746-1.54-10.762.099-.015.95 4.776 1.9 10.704.95 5.926 1.639 10.744 1.54 10.76"
        fill="#17282f"
      />
      <path
        d="M153.597 265.638c-.041-.165-.081-.33-.119-.496a480.798 480.798 0 00-.845-5.53c-.168-1.442-.333-2.857-.594-4.199-.232-1.19-.46-2.387-.692-3.596-.41-2.367-.713-3.953-.802-4.172a442.262 442.262 0 00-1.315-6.534l2.49 11.193 1.877 13.334"
        fill="#8c8f8f"
      />
      <path
        d="M153.599 265.643l-.002-.005-1.877-13.334-2.49-11.193v-.005l3.713-.254c2.409-3.758 6.362-6.49 10.728-7.416.599-.127 1.217-.22 1.828-.22.338 0 .674.028 1.003.095-.566.128-1.17.296-1.802.505-1.11.392-2.298.924-3.464 1.628a18.936 18.936 0 00-3.026 2.345c-.838.827-1.527 1.64-2.027 2.375-.27.354-.463.71-.648 1.01a6.572 6.572 0 00-.43.795c-.215.448-.322.7-.3.71l.004.001c.077 0 .548-.984 1.582-2.364.52-.705 1.216-1.485 2.05-2.284a20.217 20.217 0 012.986-2.278 20.14 20.14 0 013.385-1.621 19.89 19.89 0 012.276-.655c.879.332 1.647 1.017 1.876 1.921.257 1.01-.357 2.234-1.383 2.424a7.699 7.699 0 014.86 3.852c.121.232.224.511.227.768a34.214 34.214 0 00-.92-.36c-2.463-.919-5.993-1.918-10.01-1.918-.235 0-.472.004-.71.01-1.075.052-2.138.234-3.085.648-.947.406-1.755 1.005-2.422 1.663-1.335 1.332-2.113 2.865-2.63 4.161-.518 1.305-.805 2.402-1.005 3.156-.193.756-.283 1.177-.26 1.184h.001c.027 0 .163-.408.396-1.145.241-.74.564-1.821 1.105-3.097.541-1.266 1.328-2.747 2.628-4.02.65-.627 1.427-1.193 2.328-1.575.897-.387 1.915-.56 2.961-.61.244-.008.484-.011.725-.011 3.934 0 7.432.944 9.89 1.796.345.12.672.239.978.354a.614.614 0 01-.153.262c-.195.195-.494.226-.773.226l-.064-.001c-1.717-.026-3.415-.382-5.131-.463-.206-.01-.414-.015-.622-.015-1.524 0-3.076.283-4.3 1.17-1.384 1.006-2.155 2.631-2.82 4.206-2.33 5.518-4.113 11.686-5.176 17.58"
        fill="#9c2438"
      />
      <path
        d="M151.627 250.987c-.024-.007.066-.428.26-1.184.2-.754.486-1.85 1.004-3.156.517-1.296 1.295-2.829 2.63-4.16.667-.659 1.475-1.258 2.422-1.664.947-.414 2.01-.596 3.085-.647.238-.007.475-.01.71-.01 4.017 0 7.547.998 10.01 1.917.324.121.631.242.92.36a.825.825 0 01-.03.236 39.266 39.266 0 00-.978-.354c-2.458-.852-5.956-1.796-9.89-1.796-.24 0-.481.003-.725.01-1.046.05-2.064.224-2.961.611-.901.382-1.678.948-2.328 1.576-1.3 1.272-2.087 2.753-2.628 4.02-.54 1.275-.864 2.357-1.105 3.096-.233.737-.37 1.145-.396 1.145M154.809 242.68h-.004c-.022-.012.085-.263.3-.71.104-.227.241-.498.43-.796.185-.3.377-.656.648-1.01.5-.735 1.189-1.548 2.027-2.375a18.936 18.936 0 013.026-2.345 18.902 18.902 0 013.464-1.628c.631-.209 1.236-.377 1.802-.505a4.013 4.013 0 01.586.167 19.89 19.89 0 00-2.276.655 20.14 20.14 0 00-3.385 1.621 20.217 20.217 0 00-2.985 2.278c-.835.8-1.531 1.579-2.051 2.284-1.034 1.38-1.505 2.364-1.582 2.364M153.478 265.142c-.417-1.824-.632-3.7-.845-5.53.33 2.083.62 3.986.845 5.53m-2.131-13.325c-.263-1.373-.528-2.762-.802-4.172.09.219.392 1.805.802 4.172"
        fill="#0c1418"
      />
      <path
        d="M68.629 272.01v-.005.005m-.337-5.93a91.727 91.727 0 00-.042-.532c-.297-3.677 2.12-19.864 2.123-19.884-.002.019-1.994 14.356-2.107 18.266-.016.537-.005 1.275.026 2.15m1.966-29.17a251.835 251.835 0 00-.314-7.06l.212.728.026.513.076 5.819"
        fill="#8c8f8f"
      />
      <path
        d="M96.082 281.06c-3.318 0-6.626-.181-9.9-.715-6.682-1.09-12.924-3.396-17.553-8.335v-.005a136.84 136.84 0 00-.337-5.924 36.205 36.205 0 01-.026-2.15c.113-3.911 2.105-18.248 2.107-18.267 0 0 .045-3.553-.115-8.754l-.076-5.82-.026-.512 2.138 7.322c1.142 3.907 2.65 8.26 6.34 9.978 3.073 1.43 6.755.548 9.994 1.545 2.947.906 5.193 3.247 7.3 5.499 5.759 6.155 11.656 12.527 14.632 20.413.418 1.108.769 2.376.254 3.442-.725 1.503-2.702 1.795-4.369 1.89-3.446.197-6.91.393-10.363.393"
        fill="#9c2438"
      />
      <path
        d="M114.698 171.972c-.006.025-.333-.049-.919-.203-.588-.147-1.425-.408-2.446-.77-2.044-.72-4.8-1.937-7.617-3.682-2.814-1.753-5.127-3.684-6.678-5.196a29.31 29.31 0 01-1.775-1.851c-.398-.457-.608-.718-.59-.735.02-.016.266.212.693.637a51.353 51.353 0 001.848 1.761 46.56 46.56 0 006.694 5.074 46.525 46.525 0 007.515 3.75c1.003.392 1.824.688 2.398.877.57.195.884.315.877.338M134.209 168.086c.021.014-.073.197-.264.52-.185.324-.494.77-.907 1.297-.823 1.054-2.147 2.384-3.866 3.507-1.724 1.117-3.476 1.788-4.773 2.114-.649.164-1.182.266-1.554.304-.371.043-.577.056-.58.031-.011-.063.802-.195 2.063-.583a18.86 18.86 0 004.645-2.172 18.88 18.88 0 003.867-3.366c.865-.996 1.315-1.686 1.369-1.652M137.45 172.403c.084.026-.647 1.892-2.279 3.702-1.619 1.824-3.392 2.755-3.427 2.674-.065-.093 1.58-1.14 3.156-2.917 1.59-1.762 2.45-3.512 2.55-3.46"
        fill="#17282f"
      />
      <path
        d="M100.741 255.614s.163-.034.44-.089c1.548-.303 6.7-1.237 7.53-.407.98.98 7.956 7.834 7.956 7.834s-1.347 2.202-5.753 0c-4.406-2.204-10.173-7.338-10.173-7.338"
        fill="#f8a58d"
      />
      <path
        d="M90.845 241.7a3.538 3.538 0 014.816.853l21.266 28.206-5.446 3.973L90.003 246.8a3.539 3.539 0 01.842-5.1"
        fill="#17282f"
      />
      <path
        d="M42.216 260.587s25.257 4.098 28.736 4.377c3.478.278 13.079 10.436 15.862 11.41 2.782.973 10.296.835 10.296.835s13.636.709 14.053.006c.418-.702 1.253-.563 0-3.207-1.252-2.644-2.783-4.591-2.783-4.591s3.479 4.313 4.453 4.452c.974.14 3.061.39 2.922-1.475-.139-1.864-3.757-9.517-3.757-9.517s-1.53-3.573-4.313-4.36c-2.783-.788-14.888-6.632-14.888-6.632h-12.94l-15.106-7.178s-9.14-2.937-17.839 6.656c-1.712 1.886-2.957 4.148-3.782 6.557l-.914 2.667"
        fill="#f8a58d"
      />
      <path
        d="M114.429 268.63c-.024.01-.156-.253-.375-.735l-.9-2.054-1.29-3.068c-.408-1.15-1.071-2.388-2.204-3.217-.564-.414-1.196-.712-1.81-.994l-1.789-.798c-1.143-.503-2.18-.94-3.051-1.303l-2.067-.858c-.488-.205-.755-.327-.745-.352.008-.023.291.054.794.219.504.165 1.227.418 2.113.75.886.334 1.935.749 3.088 1.235l1.803.782c.622.28 1.276.583 1.88 1.025 1.219.894 1.903 2.211 2.306 3.4l1.213 3.086.79 2.093c.179.499.267.779.244.788M101.729 261.622c.03-.035.554.342 1.335 1.035.78.692 1.807 1.71 2.832 2.93a28.474 28.474 0 012.391 3.301c.546.89.826 1.473.785 1.496-.046.028-.404-.507-1-1.354a48.57 48.57 0 00-2.455-3.208 48.758 48.758 0 00-2.73-2.978c-.73-.734-1.194-1.18-1.158-1.222M108.95 277.41c-.01.02-.202-.05-.532-.21a10.055 10.055 0 01-1.326-.817c-1.08-.76-2.385-2.04-3.688-3.547a207.902 207.902 0 01-3.307-3.88c-.832-1.005-1.327-1.643-1.29-1.676.039-.033.603.545 1.484 1.507.881.962 2.08 2.31 3.387 3.809 1.3 1.502 2.55 2.784 3.57 3.582 1.01.808 1.731 1.178 1.703 1.232M101.453 277.396c-.025.042-.526-.198-1.302-.651a30.475 30.475 0 01-2.91-1.959 34.464 34.464 0 01-2.679-2.266c-.651-.615-1.028-1.024-.995-1.06.076-.084 1.733 1.386 3.894 3.036 2.163 1.645 4.049 2.805 3.992 2.9"
        fill="#f68260"
      />
      <path
        d="M142.888 287.891s-2.22-3.429-2.528-4.655c-.305-1.226 0-7.052-4.087-6.133v.423c.101.497 0 12.354 0 12.354l6.615-1.989"
        fill="#f8a58d"
      />
      <path
        d="M90.523 294.097s-3.778 34.813 36.98 33.796c33.23-.827 32.645-33.216 32.645-33.216l-69.625-.58"
        fill="#f03d5f"
      />
      <path
        d="M162.705 294.424c0 5.072-17.004 9.182-37.98 9.182-20.975 0-37.98-4.11-37.98-9.182 0-5.07 17.005-9.181 37.98-9.181 20.976 0 37.98 4.11 37.98 9.18"
        fill="#f03d5f"
      />
      <path
        d="M125.29 299.9c-19.253 0-34.86-2.598-34.86-5.803s15.607-5.802 34.86-5.802c19.252 0 34.859 2.597 34.859 5.802 0 3.205-15.607 5.802-34.86 5.802"
        fill="#9c2438"
      />
      <path
        d="M161.415 297.049c.004.005-.048.043-.154.111l-.47.295c-.413.262-1.043.615-1.869 1.04-1.653.847-4.144 1.907-7.36 2.76-3.213.866-7.11 1.562-11.463 2.141-4.361.538-9.195.74-14.259.702-5.063-.043-9.89-.211-14.264-.593-4.375-.389-8.29-1.02-11.522-1.793-3.236-.758-5.784-1.645-7.504-2.34-.869-.328-1.518-.644-1.964-.843l-.503-.236c-.113-.055-.17-.085-.167-.092a.754.754 0 01.182.059l.517.202c.455.176 1.111.471 1.986.777 1.732.653 4.28 1.5 7.511 2.221 3.227.738 7.13 1.341 11.493 1.71 4.363.363 9.181.52 14.238.563 5.054.038 9.87-.153 14.217-.67 4.338-.558 8.236-1.227 11.436-2.057 3.208-.816 5.697-1.835 7.363-2.638a36.27 36.27 0 001.895-.976c.2-.108.36-.195.489-.263.11-.058.17-.085.172-.08"
        fill="#17282f"
      />
      <path
        d="M138.146 293.313s4.157-13.934 5.588-15.787c1.182-1.532 9.56-7.869 12.435-10.023a6.866 6.866 0 012.372-1.15c2.85-.754 5.692-1.254 10.383.776 5.007 2.167 6.396 6.897 6.396 6.897l-15.64 9.72-.61 6.582-12.588-3.21s.158-.67-.37-1.922c0 0-3.99 9.698-7.966 8.117"
        fill="#f8a58d"
      />
      <path
        d="M123.057 283.42a80.28 80.28 0 01-3.968-5.833 61.782 61.782 0 01-2.295-4.167c-.49-1.014-.777-1.569-.813-1.553-.034.014.187.597.618 1.643.443 1.039 1.16 2.512 2.155 4.274a69.54 69.54 0 003.895 5.937c1.569 2.163 3.406 4.454 5.361 6.829 2.725 3.276 5.248 6.334 7.297 9.016l.564-.026c-2.049-2.788-4.628-5.965-7.436-9.34-1.954-2.372-3.796-4.645-5.378-6.78M113.057 273.437c-.035.017.208.593.663 1.622.452 1.031 1.111 2.52 1.884 4.377 1.552 3.712 3.539 8.908 5.273 14.795.547 1.965 1.127 3.875 1.812 5.646.181 0 .375-.002.563-.004-.693-1.797-1.277-3.746-1.848-5.797a120.236 120.236 0 00-5.442-14.793 92.833 92.833 0 00-2.05-4.315c-.515-1.004-.822-1.547-.855-1.531M114.431 271.766c-.033.019.236.587.751 1.6.516 1.013 1.277 2.47 2.237 4.26 1.925 3.579 4.622 8.507 7.904 13.776 1.9 3.066 3.808 5.876 5.574 8.327l.588-.018a175.811 175.811 0 01-5.695-8.6c-3.273-5.253-6.02-10.145-8.031-13.672l-2.39-4.176c-.572-.98-.905-1.514-.938-1.497M145.035 295.69c-1.378-3.43-3.693-6.263-6.194-8.5-2.507-2.257-5.192-4.008-7.702-5.604-2.518-1.588-4.878-3.031-6.932-4.495a48.433 48.433 0 01-8.803-8.026 57.375 57.375 0 01-2.045-2.528l-.513-.673c-.118-.15-.182-.226-.19-.22-.008.006.04.09.144.252l.47.706a41.27 41.27 0 001.97 2.601 46.441 46.441 0 008.74 8.205c2.054 1.493 4.412 2.962 6.914 4.563 2.494 1.608 5.147 3.36 7.607 5.595 2.459 2.22 4.695 4.976 6.037 8.332.39.946.716 1.938.932 2.954.181-.02.364-.037.541-.057a17.517 17.517 0 00-.976-3.105"
        fill="#f3f2f1"
      />
      <path
        d="M143.774 297.994c-.757-1.972-1.989-4.198-3.736-6.377-1.741-2.188-3.997-4.29-6.506-6.283-2.515-1.989-5.025-3.716-7.265-5.332-2.245-1.612-4.219-3.123-5.797-4.486a43.212 43.212 0 01-3.556-3.423c-.79-.858-1.198-1.361-1.235-1.333-.014.012.072.15.25.403.174.255.454.616.824 1.071.744.91 1.902 2.162 3.46 3.574 1.557 1.41 3.52 2.966 5.755 4.604 2.23 1.643 4.726 3.38 7.22 5.354 2.492 1.976 4.725 4.039 6.456 6.169 1.737 2.124 2.98 4.287 3.769 6.203.123.302.23.593.334.88l.363-.033c-.105-.325-.205-.648-.336-.991M125.423 294.756a303.25 303.25 0 01-6.55-12.769l-1.887-3.92c-.445-.927-.708-1.432-.743-1.416-.035.014.162.549.548 1.503.389.953.975 2.32 1.73 3.998a197.76 197.76 0 006.417 12.868 208.922 208.922 0 002.695 4.79l.601-.012c-.908-1.59-1.852-3.28-2.811-5.042"
        fill="#f3f2f1"
      />
      <path
        d="M131.019 288.47a144.106 144.106 0 01-10.678-11.72c-1.284-1.572-2.294-2.87-2.996-3.763-.698-.897-1.095-1.386-1.127-1.364-.03.022.308.554.954 1.491.65.935 1.616 2.27 2.864 3.88a119.584 119.584 0 0010.597 11.87c2.212 2.188 4.455 4.123 6.339 6.02 1.488 1.482 2.724 2.963 3.671 4.381.156-.01.31-.022.468-.034-.95-1.526-2.224-3.123-3.777-4.703-1.888-1.939-4.116-3.88-6.315-6.058M119.528 298.105c-.932-2.81-1.562-5.509-2.153-7.965-1.132-4.926-2.186-8.91-3.312-11.522-1.08-2.629-2.014-3.91-2.014-3.91-.007.005.032.095.117.266a33.059 33.059 0 011.698 3.723c1.058 2.621 2.048 6.59 3.132 11.531.568 2.466 1.176 5.176 2.099 8.021.182.538.38 1.087.588 1.638l.5.001c-.235-.6-.453-1.197-.655-1.783"
        fill="#f3f2f1"
      />
      <path
        d="M147.73 289.657c0-.007.057-.01.167-.012.11-.005.273.01.487.021a29.97 29.97 0 011.86.222c1.605.256 3.943.594 6.73 1.49.695.251 1.393.535 2.108.927.348.207.704.456.956.83.267.376.318.882.199 1.328-.118.49-.552.8-.916 1.03-.368.242-.785.47-1.207.644-.847.357-1.732.678-2.67.928-3.709 1.03-7.874 1.84-12.284 2.362-8.831 1.044-16.896.839-22.696.625a285.618 285.618 0 01-6.873-.35l-1.866-.129-.485-.043c-.109-.011-.164-.02-.164-.028 0-.006.057-.01.167-.01l.486.008 1.87.061 6.874.234c5.798.147 13.847.31 22.645-.73 4.392-.52 8.54-1.317 12.238-2.324.92-.24 1.801-.554 2.632-.898.42-.173.795-.374 1.166-.613.368-.23.704-.477.792-.847.098-.376.064-.781-.151-1.086-.207-.315-.528-.553-.856-.75a14.749 14.749 0 00-2.051-.927c-2.739-.914-5.075-1.295-6.665-1.592a53.68 53.68 0 00-1.846-.29c-.424-.054-.646-.067-.647-.08"
        fill="#17282f"
      />
      <path
        d="M151.125 281.045c.061.086-1.243 1.098-2.73 2.478-1.495 1.376-2.608 2.596-2.689 2.527-.073-.06.927-1.4 2.44-2.794 1.51-1.399 2.926-2.29 2.979-2.211M150.814 286.569c-.054.093-.97-.51-2.25-.467-1.28.011-2.17.651-2.227.559-.028-.034.153-.248.541-.474.385-.226.99-.433 1.68-.45.69-.012 1.302.17 1.695.38.397.21.587.417.561.452"
        fill="#f68260"
      />
      <path
        d="M241.81 193.873a3.78 3.78 0 00-4.885 2.144l-5.635 15.092 7.009 2.574 5.677-14.945a3.778 3.778 0 00-2.167-4.865"
        fill="#f03d5f"
      />
      <path
        d="M241.658 198.645a1.607 1.607 0 11-3.214 0 1.607 1.607 0 013.214 0M237.666 208.542a1.607 1.607 0 11-3.214 0 1.607 1.607 0 013.214 0"
        fill="#fafaf9"
      />
      <path
        d="M231.29 211.109l-10.854 28.311 13.362-.167 10.896-23.394-13.404-4.75"
        fill="#dadbd8"
      />
      <path d="M203.942 239.42v43.056h37.44V239.42h-37.44" fill="#f03d5f" />
      <path
        d="M241.382 250.147c0 .1-8.382.183-18.719.183-10.34 0-18.72-.082-18.72-.183 0-.1 8.38-.182 18.72-.182 10.337 0 18.72.081 18.72.182M241.382 254.782c0 .1-8.382.183-18.719.183-10.34 0-18.72-.082-18.72-.183 0-.1 8.38-.181 18.72-.181 10.337 0 18.72.08 18.72.181M241.382 259.418c0 .1-8.382.182-18.719.182-10.34 0-18.72-.082-18.72-.182 0-.1 8.38-.183 18.72-.183 10.337 0 18.72.082 18.72.183M241.382 264.053c0 .1-8.382.182-18.719.182-10.34 0-18.72-.082-18.72-.182 0-.101 8.38-.182 18.72-.182 10.337 0 18.72.081 18.72.182M241.382 268.688c0 .1-8.382.183-18.719.183-10.34 0-18.72-.083-18.72-.183 0-.1 8.38-.182 18.72-.182 10.337 0 18.72.081 18.72.182M241.382 273.324c0 .1-8.382.182-18.719.182-10.34 0-18.72-.082-18.72-.182 0-.101 8.38-.183 18.72-.183 10.337 0 18.72.082 18.72.183"
        fill="#fff"
      />
      <path
        d="M181.938 215.72l25.034 2.002s.715-12.159-11.014-13.446c-11.73-1.287-14.02 11.444-14.02 11.444"
        fill="#33535f"
      />
      <path
        d="M213.838 239.42c-.475.166-3.076-6.073-5.808-13.933-2.734-7.862-4.563-14.369-4.088-14.534.475-.164 3.076 6.073 5.81 13.935 2.731 7.86 4.561 14.367 4.086 14.532M215.334 321.884c.002.012-.168.048-.494.107l-1.434.237-1.038.162c-.382.05-.798.08-1.244.126-.893.077-1.908.209-3.038.222l-1.773.06c-.616.019-1.257-.017-1.922-.025-1.33.003-2.744-.133-4.233-.248a62.566 62.566 0 01-9.552-1.764 62.554 62.554 0 01-9.118-3.352c-1.341-.66-2.627-1.265-3.77-1.945-.575-.332-1.146-.629-1.667-.957l-1.493-.957c-.965-.588-1.772-1.219-2.501-1.74-.36-.266-.704-.505-1.005-.742-.294-.241-.564-.465-.81-.669l-1.113-.935c-.252-.216-.38-.334-.372-.344.008-.01.153.09.42.288l1.152.88.827.642c.308.228.656.458 1.02.715.738.503 1.552 1.117 2.522 1.69l1.498.93c.523.322 1.093.61 1.669.935 1.143.665 2.427 1.255 3.763 1.904a64.61 64.61 0 009.075 3.306 64.724 64.724 0 009.488 1.781c1.481.123 2.886.27 4.209.28.66.014 1.299.056 1.912.047l1.764-.038c1.125.003 2.138-.11 3.03-.167.445-.035.862-.056 1.242-.095l1.039-.13 1.44-.17c.33-.035.505-.047.507-.034"
        fill="#33535f"
      />
      <path
        d="M185.54 319.12c-5.253-.7-12.108 1.335-16.038 4.89a51.804 51.804 0 0016.038-4.89M185.806 319.187c1.924-4.94-.92-11.896-.92-11.896-.554-.939-.304 6.416.92 11.896M177.521 315.268c1.404-3.625-.635-8.718-.635-8.718-.399-.687-.237 4.704.635 8.718M193.22 320.909c1.404-3.625-.636-8.72-.636-8.72-.397-.685-.235 4.706.637 8.72M177.679 315.345c-3.909-.52-9.01.993-11.934 3.638a38.537 38.537 0 0011.934-3.638M194.02 321.497c-5.548.074-12.34 3.222-15.87 7.503a54.218 54.218 0 0015.87-7.503"
        fill="#33535f"
      />
      <path
        d="M215.17 294.996c-2.25-3.378-6.425-5.37-10.466-4.992-4.041.378-7.775 3.11-9.359 6.846-1.334 3.147-1.16 6.828.158 9.981 1.318 3.154 3.71 5.79 6.534 7.714 7.397 5.038 18.127 4.811 25.001-.92 2.553-2.127 4.602-5.033 5.073-8.323.543-3.803-1.233-7.845-4.403-10.016-3.17-2.17-7.58-2.367-10.93-.487"
        fill="#f03d5f"
      />
      <path
        d="M215.197 294.981c-.434-1.803-2.344-3.12-4.183-2.885l2.474 2.948c-1.343.169-2.558 1.123-3.042 2.386-.116.303-.151.726.137.877.19.1.422.018.62-.064l3.008-1.248c.204 1.672.825 3.29 1.792 4.67a12.254 12.254 0 001.135-4.698c1.107.49 2.215.981 3.322 1.473a4.963 4.963 0 00-1.56-2.46 8.257 8.257 0 002.778-1.086c.257-.158.538-.433.422-.71-.09-.214-.36-.274-.591-.296a10.96 10.96 0 00-6.336 1.316"
        fill="#33535f"
      />
      <path
        d="M214.978 296.223a21.63 21.63 0 00-.826-10.031c.791-.177 1.767-.296 2.28.333.296.365.33.87.335 1.34.041 3.162-.567 6.33-1.776 9.252"
        fill="#33535f"
      />
      <path
        d="M198.841 308.268c-.016.015-.211-.16-.52-.52a9.086 9.086 0 01-1.11-1.67c-.8-1.485-1.484-3.872-1.057-6.472.433-2.6 1.849-4.641 3.084-5.788a9.127 9.127 0 011.59-1.225c.408-.241.649-.344.66-.325.04.061-.903.543-2.069 1.733-1.16 1.167-2.488 3.16-2.905 5.665-.41 2.503.204 4.817.927 6.296.72 1.502 1.46 2.261 1.4 2.306M202.177 310.79c-.033.091-.56-.021-1.087-.4-.53-.378-.81-.84-.732-.9.079-.067.455.256.943.603.486.349.913.6.876.697"
        fill="#fff"
      />
      <path
        d="M61.545 256.598c-.303.068 1.953 11.42 1.953 11.42h5.785l2.554-10.97s-4.282-1.803-10.292-.45"
        fill="#33535f"
      />
      <path
        d="M58.063 320.494s-8.512-23.831-7.32-30.3c1.19-6.469 3.744-7.83 5.787-9.873 2.043-2.043 3.745-3.745 4.256-5.788.51-2.043 0-10.213 0-10.213s-1.532-2.384-1.021-3.234c.51-.852 13.107 0 13.107 0s0 1.361-1.021 2.892c0 0-.34 9.533.17 10.555.51 1.02 8.34 9.703 9.532 14.129 1.192 4.426-4.7 31.832-4.7 31.832h-18.79"
        fill="#f3f2f1"
      />
      <path
        d="M58.063 320.494s.114-.009.33-.013l.96-.014 3.696-.03c3.226-.013 7.91-.034 13.804-.06l-.114.093a500.129 500.129 0 002.305-11.713c.783-4.322 1.628-9.034 2.208-14.091.136-1.264.257-2.552.285-3.854.012-.649.007-1.313-.116-1.935-.148-.624-.405-1.239-.691-1.839-1.198-2.39-2.839-4.632-4.541-6.873a180.162 180.162 0 00-2.651-3.355c-.45-.563-.908-1.121-1.35-1.71a5.06 5.06 0 01-.323-.477 2.33 2.33 0 01-.143-.584c-.057-.375-.08-.74-.1-1.11-.128-2.947-.04-5.93.047-8.956l.001-.05.029-.045a6.81 6.81 0 00.389-.67c.334-.664.565-1.41.602-2.122l.17.18c-2.873-.181-5.711-.326-8.49-.37-1.38-.006-2.781-.045-4.084.16-.144.025-.342.093-.36.12a.684.684 0 00-.083.374c.005.3.097.618.207.923.228.61.544 1.2.885 1.75l.025.042.003.044c.124 2.176.21 4.318.22 6.425 0 1.054-.007 2.098-.119 3.138-.095 1.067-.566 2.047-1.137 2.892-.577.849-1.255 1.598-1.94 2.314-.69.708-1.372 1.407-2.087 2.064-.714.65-1.413 1.285-2.013 1.993a10.849 10.849 0 00-1.5 2.288c-.787 1.624-1.255 3.352-1.532 5.03-.114.833-.094 1.679-.029 2.501.057.824.17 1.632.284 2.423.503 3.162 1.231 6.044 1.912 8.651 1.394 5.209 2.716 9.31 3.621 12.125.46 1.394.815 2.476 1.06 3.223.119.357.21.633.275.833.062.189.085.285.085.285s-.046-.093-.115-.275l-.303-.823c-.263-.726-.642-1.804-1.117-3.205-.942-2.804-2.298-6.896-3.724-12.104-.697-2.608-1.441-5.49-1.96-8.668-.12-.796-.237-1.609-.297-2.444-.069-.833-.095-1.69.022-2.564.277-1.711.742-3.453 1.545-5.124.403-.832.916-1.63 1.534-2.355.613-.729 1.326-1.378 2.034-2.027.703-.648 1.384-1.349 2.068-2.055.678-.71 1.343-1.45 1.9-2.273.55-.82.99-1.744 1.076-2.745.107-1.008.113-2.05.113-3.097a122.919 122.919 0 00-.23-6.404l.028.084c-.356-.577-.677-1.17-.92-1.82-.117-.326-.222-.664-.231-1.043a.989.989 0 01.156-.592c.228-.217.392-.2.572-.254 1.39-.22 2.763-.173 4.161-.172 2.79.043 5.63.187 8.51.37l.178.01-.009.172c-.042.818-.287 1.573-.64 2.285a7.164 7.164 0 01-.411.709l.03-.094c-.087 3.017-.175 6.007-.05 8.923.019.362.043.728.096 1.074.018.186.06.334.108.478.09.14.178.28.292.425.43.575.89 1.138 1.338 1.7.902 1.124 1.795 2.239 2.652 3.364 1.708 2.253 3.352 4.5 4.57 6.94.292.616.556 1.243.715 1.914.133.685.131 1.353.12 2.014-.032 1.323-.157 2.614-.296 3.884-.593 5.074-1.452 9.785-2.251 14.107a463.711 463.711 0 01-2.36 11.71l-.02.093h-.094c-5.918-.027-10.62-.046-13.86-.06l-3.676-.03-.942-.014c-.21-.004-.312-.014-.312-.014"
        fill="#17282f"
      />
      <path
        d="M75.22 318.023c1.948-6.854 3.678-16.52 4.273-24.33.072-.938.072-2.023-.637-2.643-.867-.758-2.196-.353-3.293-.003a19.863 19.863 0 01-9.987.53c-3.226-.663-6.425-2.141-9.676-1.603-.816.135-1.67.44-2.133 1.127-.527.782-.4 1.817-.25 2.75 1.275 8 3.886 17.198 6.009 24.172H75.22"
        fill="#f03d5f"
      />
      <path
        d="M77.358 292.031c.016.016-.194.262-.614.667-.419.407-1.064.957-1.925 1.55-1.709 1.19-4.394 2.483-7.588 2.884-3.194.402-6.116-.186-8.066-.917a15.242 15.242 0 01-2.249-1.025c-.508-.29-.77-.476-.76-.494.033-.065 1.135.622 3.094 1.275 1.944.66 4.81 1.192 7.936.8 3.124-.393 5.769-1.619 7.49-2.737 1.737-1.119 2.635-2.056 2.682-2.003"
        fill="#fff"
      />
    </svg>
  );
}

function BottomSheet({
  descriptor,
  fill,
  color,
  offset,
  dragAreaClipPath,
  icon,
  title,
}) {
  const [expanded, setExpanded] = useState(false);
  const [{ y }, set] = useSpring(() => ({ y: 500 }));
  const props = useDrag(
    ({ movement: [x, y], down, tap }) => {
      if (!down && tap) {
        set({ y: expanded ? 500 : 200 });
        setExpanded(!expanded);
        return;
      }
      if (!down) {
        if (y >= THRESHOLD) {
          set({ y: 500 });
          setExpanded(false);
        } else {
          set({ y: 200 });
          setExpanded(true);
        }
      } else {
        set({ y });
      }
    },
    {
      initial: () => [0, y.get()],
      bounds: { left: 0, right: 0, top: 200, bottom: 500 },
      rubberband: true,
    }
  );
  return (
    <>
      <animated.div className="bottomSheet" style={{ y }}>
        <div style={{ transform: `translateX(${offset}px)` }}>
          <Close
            stroke={color}
            scale={y.to({
              range: [200, 300],
              output: [1, 0],
              extrapolate: "clamp",
            })}
          />
          <animated.div
            style={{
              x: y.to({
                range: [200, 300],
                output: [-16, 0],
                extrapolate: "clamp",
              }),
            }}
          >
            {icon}
          </animated.div>
        </div>
        <svg className="top" height="100" width="300">
          <path className="drag" d={descriptor} fill={fill} />
        </svg>
        <div className="container" style={{ backgroundColor: fill }}>
          <div className="content" style={{ color }}>
            <div className="content-title">{title}</div>
            <div className="content-subtitle">yada yada...</div>
            <div className="content-body">1 cup of this</div>
            <div className="content-body">2½ cups of that</div>
            <div className="content-body">⅗ cups of something else</div>
          </div>
        </div>
      </animated.div>
      <animated.div
        className="drag-area"
        {...props()}
        style={{
          y,
          clipPath: `polygon(${dragAreaClipPath})`,
        }}
      />
    </>
  );
}

function App() {
  return (
    <div className="App">
      <div className="phone">
        <div className="phone-content">
          <span className="pre-title">Welcome to the</span>
          <span className="title">Today's recipe</span>
          <Cook />
        </div>
        <BottomSheet
          descriptor="M 217.48438,0 C 207.79841,0 200,7.7984043 200,17.484375 V 23.984375 32.515625 C 200,42.201596 192.20159,50 182.51562,50 H 0 V 100 H 117.48438 182.51562 300 V 50 50 32.515625 23.984375 17.484375 C 300,7.7984043 292.20159,0 282.51562,0 Z"
          fill="#addff2"
          color="#328DAB"
          offset={200}
          dragAreaClipPath="0px 50px, 0px 360px, 300px 360px, 300px 50px, 300px 0px, 200px 0px, 200px 50px"
          icon={<Fish fill="#328DAB" />}
          title="Today's fish"
        />
        <BottomSheet
          descriptor="M 117.48438 0 C 107.79841 0 100 7.7984043 100 17.484375 L 100 23.984375 L 100 32.515625 C 100 42.201596 92.201595 50 82.515625 50 L 0 50 L 0 100 L 117.48438 100 L 182.51562 100 L 300 100 L 300 50 L 217.48438 50 C 207.79841 50 200 42.201596 200 32.515625 L 200 23.984375 L 200 17.484375 C 200 7.7984043 192.20159 1.0821526e-16 182.51562 0 L 117.48438 0 z"
          fill="indianred"
          color="#fff"
          offset={100}
          dragAreaClipPath="100px 50px, 0px 50px, 0px 360px, 300px 360px, 300px 50px, 200px 50px, 200px 0px, 100px 0px"
          icon={<Veg fill="#fff" />}
          title="Today's veg"
        />
        <BottomSheet
          descriptor="M 17.484377,0 C 7.7984075,0 -2.5e-6,7.7984043 -2.5e-6,17.484375 V 23.984375 32.515625 L 0,50 V 50 100 H 117.48438 182.51562 300 V 50 H 117.48438 C 107.79841,50 99.524951,42.18994 99.999998,32.515625 V 23.984375 17.484375 C 99.999998,7.7984043 92.201588,0 82.515618,0 Z"
          fill="#eeb5c4"
          color="#9e194c"
          offset={0}
          dragAreaClipPath="0px 0px, 0px 360px, 100% 360px, 300px 50px, 100px 50px, 100px 0px"
          icon={<Chicken fill="#9e194c" />}
          title="Today's chicken"
        />
      </div>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
              
            
!
999px

Console