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 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 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