React Generative Bedroom Wall Art

index.html

<div id="root"></div>

react-generative-bedroom-wall-art.markdown

React Generative Bedroom Wall Art

SVG Design

Floral Elements 98
Floral Elements 96
Floral Elements 92

A Pen by Dilum on CodePen.

License.

script.babel

const { useState } = React

const rand = (max, min = 0) => min + Math.random() * (max - min);
const randInt = (max, min = 0) => Math.floor(rand(max, min));
const randChoise = (arr) => arr[randInt(arr.length)];
const range = (n, m = 0) =>
  Array(n)
    .fill(m)
    .map((i, j) => i + j);

const palette = ['#FFEE7E', '#8BE4E4', '#BE96D1'];

const randomConfig = () => {
  const x = rand(1100, 100);
  const y = rand(500, 100);
  const scale = rand(14);
  return {
    transform: `translate(${x} ${y}) scale(${scale} ${scale})`,
    color: randChoise(palette),
    id: randInt(7),
  };
};

const App = () => {
  const [items, setItems] = useState(range(40).map(() => randomConfig()));
  const generateNew = () => {
    setItems(range(40).map(() => randomConfig()));
  };
  return (
    <>
      <button className="btn-refresh" onClick={generateNew}>
        Generate New
      </button>
      <svg
        id="svg"
        viewBox="0 0 1280 720"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect width="1280" height="720" fill="#F4F4F4" />
        <g filter="url(#filter0_d)">
          <rect x="538" y="88" width="204" height="544" fill="white" />
        </g>
        <g filter="url(#filter1_d)">
          <rect x="754" y="155.5" width="204" height="409" fill="white" />
        </g>
        <g filter="url(#filter2_d)">
          <rect x="322" y="155.5" width="204" height="409" fill="white" />
        </g>
        <g filter="url(#filter3_d)">
          <rect x="970" y="225" width="204" height="270" fill="white" />
        </g>
        <g filter="url(#filter4_d)">
          <rect x="106" y="225" width="204" height="270" fill="white" />
        </g>
        <defs>
          <filter
            id="filter0_d"
            x="538"
            y="88"
            width="218"
            height="558"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            />
            <feOffset dx="7" dy="7" />
            <feGaussianBlur stdDeviation="3.5" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0.584314 0 0 0 0 0.545098 0 0 0 0 0.545098 0 0 0 0.25 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow"
              result="shape"
            />
          </filter>
          <filter
            id="filter1_d"
            x="754"
            y="155.5"
            width="218"
            height="423"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            />
            <feOffset dx="7" dy="7" />
            <feGaussianBlur stdDeviation="3.5" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0.584314 0 0 0 0 0.545098 0 0 0 0 0.545098 0 0 0 0.25 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow"
              result="shape"
            />
          </filter>
          <filter
            id="filter2_d"
            x="322"
            y="155.5"
            width="218"
            height="423"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            />
            <feOffset dx="7" dy="7" />
            <feGaussianBlur stdDeviation="3.5" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0.584314 0 0 0 0 0.545098 0 0 0 0 0.545098 0 0 0 0.25 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow"
              result="shape"
            />
          </filter>
          <filter
            id="filter3_d"
            x="970"
            y="225"
            width="218"
            height="284"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            />
            <feOffset dx="7" dy="7" />
            <feGaussianBlur stdDeviation="3.5" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0.584314 0 0 0 0 0.545098 0 0 0 0 0.545098 0 0 0 0.25 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow"
              result="shape"
            />
          </filter>
          <filter
            id="filter4_d"
            x="106"
            y="225"
            width="218"
            height="284"
            filterUnits="userSpaceOnUse"
            colorInterpolationFilters="sRGB"
          >
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix
              in="SourceAlpha"
              type="matrix"
              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            />
            <feOffset dx="7" dy="7" />
            <feGaussianBlur stdDeviation="3.5" />
            <feColorMatrix
              type="matrix"
              values="0 0 0 0 0.584314 0 0 0 0 0.545098 0 0 0 0 0.545098 0 0 0 0.25 0"
            />
            <feBlend
              mode="normal"
              in2="BackgroundImageFix"
              result="effect1_dropShadow"
            />
            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow"
              result="shape"
            />
          </filter>

          <clipPath id="clip">
            <rect x="538" y="88" width="204" height="544" fill="white" />
            <rect x="754" y="155.5" width="204" height="409" fill="white" />
            <rect x="322" y="155.5" width="204" height="409" fill="white" />
            <rect x="970" y="225" width="204" height="270" fill="white" />
            <rect x="106" y="225" width="204" height="270" fill="white" />
          </clipPath>
        </defs>
        <g clipPath="url(#clip)">
          {items.map(({ transform, color, id }) => (
            <g transform={transform} fill={color}>
              <Flower id={id} />
            </g>
          ))}
        </g>
      </svg>
    </>
  );
}


function Flower({ id }) {
  const svgItems = [
    <path d="M5.95935 2.77906C0.889923 4.5425 2.11709 7.24683 2.1201 7.25347L2.63734 6.83518C2.66385 6.80962 2.68923 6.78895 2.71326 6.77378L2.63733 6.83518C2.11045 7.34272 1.12616 9.78947 1.12616 9.78947L1.77353 9.75981C1.67955 9.10727 2.37913 7.7527 2.37913 7.7527C3.07874 8.20752 4.42361 7.92477 4.42361 7.92477C9.3852 7.25353 8.79454 0.206139 8.79454 0.206139C8.79454 0.206139 8.85358 1.77228 5.95936 2.77906H5.95935Z" />,
    <>
      <path d="M4.69391 1.92173C4.46454 1.51463 4.11975 1.17688 3.70676 0.954799C3.25537 0.758445 2.74391 0.682137 2.23723 0.739788C1.85842 1.44314 1.7968 2.28252 2.05966 3.00408C2.25647 3.45636 2.58302 3.84783 2.99377 4.1239C3.40477 4.39956 3.89212 4.55452 4.38785 4.56721L4.38778 4.56719C3.89338 4.50328 3.43743 4.29799 3.08029 3.99652C2.72328 3.69486 2.46895 3.3 2.3436 2.88224C2.14722 2.24539 2.23177 1.57821 2.50043 1.13221C2.52477 1.13456 2.54892 1.1375 2.57288 1.141C2.85578 1.12118 3.18567 1.17946 3.50654 1.32283C3.87118 1.4637 4.20798 1.71779 4.45351 2.05532C4.68577 2.37457 4.83592 2.76759 4.87144 3.18487C4.90676 3.60216 4.82735 4.03941 4.63061 4.43761C4.86625 4.06362 4.99782 3.62939 5.0091 3.18831C5.02002 2.74718 4.91045 2.30695 4.69391 1.92173V1.92173ZM7.02482 2.09434C6.43459 2.2659 5.89908 2.606 5.49452 3.06619C5.09035 3.52664 4.82361 4.09982 4.73231 4.70408C4.8746 4.10745 5.18771 3.57141 5.61105 3.16724C6.0345 2.76321 6.56459 2.49475 7.11151 2.38939C7.94686 2.22334 8.80023 2.41886 9.36436 2.83923C9.35863 2.87055 9.35215 2.90173 9.34494 2.93275C9.32017 3.31725 9.18385 3.73591 8.9407 4.11904C8.69013 4.55191 8.30348 4.9246 7.83237 5.16714C7.38676 5.39656 6.86674 5.50921 6.34079 5.47729C5.81484 5.44519 5.2875 5.26902 4.83181 4.95951C5.25855 5.30438 5.77645 5.53162 6.32043 5.61261C6.86447 5.69324 7.42664 5.62643 7.9362 5.42062C8.47485 5.20255 8.94599 4.83232 9.28366 4.36173C9.60032 3.85007 9.77794 3.24578 9.78872 2.6279C8.98113 2.06725 7.95287 1.87312 7.02482 2.09434V2.09434ZM4.73229 4.70414V4.70408V4.70412V4.70414ZM0.226189 7.29884C0.972104 7.69288 1.86121 7.75488 2.62453 7.47796C3.10288 7.27089 3.51648 6.92835 3.80763 6.49809C4.09819 6.06782 4.26086 5.55821 4.27302 5.04019C4.20666 5.55691 3.99066 6.03386 3.67264 6.4079C3.35421 6.78206 2.93677 7.04908 2.49475 7.18135C1.82088 7.3885 1.11415 7.30204 0.641074 7.02243C0.643504 6.99697 0.646537 6.97172 0.650182 6.94666C0.628365 6.65099 0.689141 6.30585 0.840021 5.96995C0.988146 5.58838 1.25628 5.23547 1.613 4.97779C1.95038 4.73404 2.36615 4.57592 2.80793 4.53759C3.24971 4.49945 3.71295 4.5812 4.13521 4.78576C3.73852 4.54046 3.27828 4.40416 2.81113 4.39363C2.34397 4.38348 1.87811 4.4993 1.47081 4.72682C1.04029 4.96782 0.683643 5.32928 0.44965 5.76172C0.243006 6.23431 0.163677 6.76924 0.226189 7.29884V7.29884ZM4.27306 5.03923C4.27306 5.03956 4.27303 5.03987 4.27302 5.04019L4.27316 5.0392L4.27305 5.03923H4.27306ZM6.16251 5.84207C5.78033 5.52814 5.31036 5.32701 4.8182 5.26669L4.81827 5.26671C5.30411 5.37789 5.73791 5.62608 6.06399 5.9605C6.38992 6.29511 6.60457 6.71259 6.68862 7.14045C6.822 7.79319 6.67282 8.44909 6.36195 8.86716C6.33808 8.8625 6.31433 8.85726 6.29071 8.85143C6.0072 8.84395 5.68454 8.75419 5.37915 8.58062C5.02996 8.40532 4.71951 8.12002 4.50802 7.76044C4.30799 7.42034 4.19684 7.01472 4.20216 6.59599C4.20768 6.17726 4.32932 5.74971 4.56395 5.37231C4.29295 5.72187 4.1197 6.1414 4.06548 6.57932C4.01161 7.01732 4.07775 7.46601 4.25574 7.87026C4.44435 8.29753 4.7546 8.66687 5.144 8.92765C5.57414 9.16652 6.07576 9.29169 6.58567 9.28307C7.03125 8.61946 7.17439 7.78996 6.9831 7.0465C6.83129 6.5774 6.54444 6.15635 6.16252 5.84206L6.16251 5.84207Z" />
      <path d="M1.61023 6.38688C1.93893 6.5898 2.33911 6.51991 2.64494 6.40005C2.95068 6.27998 3.32225 6.07227 3.48791 5.65827C3.65357 5.24426 3.86186 5.15386 4.01165 4.98347C3.80598 5.05246 3.23521 5.37649 2.92803 5.87494C2.66588 6.30029 1.94005 6.41881 1.61021 6.38687L1.61023 6.38688ZM3.35988 2.77006C3.41741 3.09168 3.5483 3.49486 3.92362 3.73858C4.29894 3.98229 4.34665 4.20314 4.48486 4.38293C4.45777 4.16893 4.25181 3.54861 3.82139 3.15026C3.45408 2.81031 3.4817 2.07993 3.57887 1.76511C3.31328 2.04479 3.30254 2.44839 3.35988 2.77006V2.77006ZM7.57142 3.94509C7.29725 3.67372 6.89152 3.65211 6.56636 3.70035C6.24124 3.74879 5.83208 3.86787 5.57672 4.23408C5.32137 4.60028 5.09791 4.64168 4.9133 4.77409C5.12933 4.75298 5.75894 4.56522 6.17137 4.14846C6.52331 3.79283 7.25734 3.84006 7.57142 3.94509V3.94509ZM4.70608 6.52504C4.78203 6.84286 4.93588 7.23795 5.32462 7.45997C5.71335 7.68198 5.77368 7.89973 5.922 8.07139C5.88265 7.85926 5.64135 7.25167 5.18872 6.8784C4.80245 6.55987 4.78803 5.82911 4.86693 5.5093C4.61785 5.8036 4.63035 6.20714 4.70608 6.52504V6.52504Z" />
    </>,
    <>
      <path d="M4.53712 1.23479C4.41846 0.961349 4.24456 0.712056 4.03162 0.503723C3.96418 0.591373 3.905 0.685077 3.85086 0.781384C3.69065 1.07002 3.57873 1.39147 3.56544 1.72338C3.55176 1.99451 3.63328 2.26171 3.75224 2.50264C3.87441 2.74488 4.03585 2.9676 4.22756 3.15952C4.27668 3.09763 4.32116 3.03201 4.36263 2.96469C4.57256 2.62181 4.71023 2.21904 4.6742 1.81295C4.66475 1.61388 4.61574 1.41763 4.53713 1.23477L4.53712 1.23479ZM6.7954 1.30171C6.83446 1.1113 6.79943 0.911222 6.72145 0.7351C6.52639 0.8604 6.35792 1.04387 6.29261 1.27031C6.23684 1.45862 6.26423 1.66512 6.34615 1.84165C6.42998 1.79655 6.50716 1.73949 6.5759 1.67378C6.68097 1.57314 6.76672 1.44613 6.7954 1.30171V1.30171ZM4.81409 1.29185C4.77051 1.50882 4.81953 1.73709 4.92188 1.93081C5.04144 1.84426 5.14681 1.73537 5.22007 1.60665C5.27694 1.50772 5.30542 1.3943 5.31176 1.28087C5.31639 1.10174 5.25863 0.925412 5.17126 0.770632C5.00148 0.900053 4.86079 1.0803 4.81409 1.29185V1.29185ZM3.37342 1.85937C3.41127 1.67298 3.40955 1.47311 3.3391 1.29437C3.29763 1.18538 3.21783 1.0953 3.12715 1.02394C3.02469 0.94393 2.90736 0.883953 2.78457 0.841986C2.73616 1.06611 2.75327 1.31701 2.8835 1.51165C2.99984 1.68032 3.18251 1.79313 3.37343 1.85937H3.37342ZM5.95516 0.913328C5.89074 0.958629 5.82965 1.00844 5.77118 1.06117C5.55772 1.25491 5.37386 1.49062 5.27824 1.76506C5.20206 1.98446 5.20256 2.22428 5.24917 2.44992C5.2869 2.62906 5.34991 2.80316 5.43837 2.96358C5.50409 2.91971 5.56578 2.87009 5.62476 2.81756C5.8368 2.62745 6.01394 2.39155 6.10773 2.12072C6.18543 1.90183 6.18391 1.6621 6.13953 1.43637C6.10279 1.25461 6.0414 1.07748 5.95515 0.91334L5.95516 0.913328ZM7.92288 1.98547C8.06217 1.85312 8.14551 1.67046 8.18234 1.48377C7.99918 1.48226 7.81026 1.51094 7.64783 1.59981C7.55786 1.64731 7.48962 1.72591 7.43267 1.80864C7.34319 1.94148 7.28371 2.09395 7.25422 2.25125C7.40378 2.25146 7.55454 2.22116 7.6889 2.15484C7.77686 2.11338 7.85001 2.04836 7.92288 1.98547ZM2.30078 2.5253C2.45779 2.83758 2.71684 3.09603 3.0259 3.25826C3.28314 3.39363 3.56594 3.48018 3.85428 3.51521C3.85337 3.3579 3.83526 3.20099 3.80466 3.04682C3.74881 2.77076 3.64806 2.49954 3.4807 2.27108C3.36869 2.11589 3.21933 1.991 3.05802 1.88985C2.75991 1.70638 2.41855 1.5976 2.07202 1.55492C2.07737 1.88935 2.15084 2.2254 2.30078 2.52529V2.5253ZM5.88008 3.3746C5.89196 3.5793 5.92707 3.78331 5.99028 3.97865C6.08036 3.94061 6.1673 3.89532 6.25164 3.8457C6.48776 3.70581 6.70543 3.52878 6.87098 3.30859C6.97093 3.17655 7.0463 3.0269 7.09944 2.8703C7.17865 2.63198 7.19807 2.37706 7.18036 2.12747C7.16617 1.93957 7.13356 1.75258 7.0775 1.57253C6.91286 1.64811 6.75777 1.74393 6.61274 1.85221C6.36597 2.038 6.14658 2.26957 6.01011 2.54905C5.89899 2.808 5.86499 3.09483 5.88008 3.3746V3.3746ZM7.45924 3.48773C7.73751 3.42724 8.00934 3.30376 8.21031 3.09795C8.34718 2.95705 8.44702 2.78395 8.51908 2.60219C8.57927 2.44881 8.62264 2.2885 8.64508 2.12515C8.37325 2.12687 8.09992 2.18172 7.85243 2.29544C7.70832 2.36367 7.57033 2.45192 7.46618 2.57432C7.23309 2.84 7.10245 3.1848 7.05848 3.53272C7.19324 3.53322 7.3277 3.51611 7.45924 3.48773V3.48773ZM4.53643 3.47061C4.58492 3.65016 4.66182 3.82206 4.76176 3.97885C4.95902 3.80073 5.12345 3.578 5.20478 3.32288C5.26748 3.12774 5.25933 2.91579 5.20678 2.71943C5.15849 2.53949 5.07947 2.3679 4.97572 2.21331C4.76578 2.40352 4.5947 2.64627 4.52113 2.92233C4.47121 3.10177 4.48963 3.29268 4.53643 3.47061ZM1.52617 3.34944C1.7211 3.41788 1.93083 3.43599 2.13614 3.42291C2.29596 3.41215 2.45507 3.38467 2.60805 3.33686C2.4927 3.08396 2.32715 2.85148 2.11551 2.67022C1.99997 2.5745 1.87156 2.48857 1.72603 2.4469C1.56581 2.39769 1.39744 2.37957 1.23028 2.38148C1.03935 2.3848 0.84854 2.41138 0.664767 2.46331C0.737221 2.62594 0.833552 2.77771 0.94626 2.91538C1.10156 3.10217 1.29499 3.26662 1.52615 3.34944H1.52617ZM5.26566 3.60598C5.1915 3.81269 5.21293 4.04527 5.29566 4.24615C5.47933 4.1438 5.64558 3.99032 5.72107 3.79015C5.79343 3.57911 5.76837 3.34451 5.68846 3.1393C5.50781 3.24991 5.34437 3.4058 5.26566 3.60597V3.60598ZM2.69923 4.0185C2.87516 4.14299 3.0878 4.21687 3.30398 4.22009C3.52961 4.22381 3.75415 4.17208 3.96156 4.08502C3.88748 3.96456 3.79661 3.85476 3.69506 3.75643C3.52116 3.59058 3.30569 3.4522 3.06233 3.42442C2.79231 3.39132 2.51656 3.44566 2.26728 3.55002C2.37818 3.73258 2.52442 3.89502 2.69922 4.0185H2.69923ZM4.0313 3.4065C3.99629 3.57398 3.99458 3.75231 4.04912 3.91585C4.08646 4.03018 4.16344 4.12709 4.25161 4.207C4.3587 4.30241 4.4851 4.37577 4.62006 4.42399C4.66433 4.20721 4.65669 3.96507 4.53372 3.77405C4.41918 3.59441 4.22896 3.47595 4.0313 3.4065V3.4065ZM8.26528 3.42412C8.06529 3.42995 7.86471 3.46578 7.67974 3.54327C7.50845 3.61533 7.35175 3.7197 7.21356 3.84349C6.98128 4.05434 6.79431 4.31519 6.66669 4.60161C6.7936 4.64308 6.92454 4.67126 7.05657 4.69048C7.39373 4.73849 7.74727 4.72138 8.0662 4.59447C8.25037 4.5213 8.41764 4.40939 8.56326 4.27564C8.78386 4.07104 8.9628 3.82185 9.09052 3.54962C8.82544 3.46105 8.54474 3.41717 8.26526 3.42412H8.26528ZM0.737035 4.21878C0.952706 4.41302 1.21227 4.57112 1.50139 4.62234C1.69352 4.65848 1.89118 4.65968 2.08492 4.63593C2.32635 4.60543 2.56397 4.54083 2.78607 4.44109C2.71855 4.32516 2.63894 4.21667 2.5525 4.11421C2.35946 3.88736 2.12497 3.6899 1.85032 3.57025C1.70449 3.50825 1.55031 3.46478 1.39271 3.44716C1.18458 3.42341 0.973146 3.43882 0.768228 3.48058C0.598251 3.51581 0.431191 3.56723 0.272974 3.63879C0.395149 3.85526 0.553668 4.05111 0.737035 4.21877V4.21878ZM6.55206 3.90468C6.41206 3.93971 6.27127 4.00029 6.17515 4.1117C6.05087 4.25269 5.98082 4.43516 5.95416 4.61963C6.20082 4.63291 6.46289 4.55482 6.63407 4.37024C6.75918 4.23166 6.82983 4.05151 6.86405 3.86996C6.75918 3.86865 6.65401 3.87992 6.55206 3.90468V3.90468ZM8.50086 4.69078C8.62647 4.7105 8.75578 4.70981 8.88048 4.68373C9.00145 4.65867 9.1175 4.60393 9.20776 4.51869C9.34232 4.39268 9.43078 4.22381 9.48241 4.04829C9.36225 4.02887 9.23856 4.02927 9.119 4.05192C8.99048 4.07588 8.8668 4.13273 8.77179 4.22351C8.63935 4.3494 8.55169 4.51678 8.50086 4.69078V4.69078ZM3.34595 4.90283C3.54088 4.96473 3.75424 4.93826 3.94364 4.86881C3.90219 4.78669 3.84915 4.71041 3.78836 4.64137C3.69094 4.53137 3.56626 4.43858 3.42092 4.40567C3.22568 4.36058 3.01846 4.3954 2.8371 4.47592C2.95828 4.66401 3.12845 4.83338 3.34594 4.90283H3.34595ZM0.71751 5.01021C0.938112 5.04554 1.16617 4.98948 1.36161 4.88613C1.23077 4.71343 1.05133 4.5685 0.83979 4.51073C0.623008 4.46565 0.396967 4.5212 0.201828 4.61812C0.327325 4.79666 0.504652 4.94963 0.71751 5.01021V5.01021ZM6.94737 4.83178C6.84593 4.77634 6.73421 4.74402 6.62291 4.71494C6.3381 4.65234 6.03728 4.71051 5.77592 4.83218C5.9302 5.07624 6.14316 5.2907 6.40603 5.4155C6.54441 5.48454 6.70322 5.49571 6.85549 5.48926C7.06784 5.47648 7.27707 5.42022 7.4701 5.33126C7.33987 5.12606 7.16214 4.94762 6.94737 4.83178V4.83178ZM8.49533 4.80772C8.29062 4.73909 8.06559 4.73939 7.85838 4.79696C7.68639 4.84446 7.52314 4.92366 7.37862 5.02823C7.56793 5.22086 7.80131 5.37846 8.06419 5.44881C8.23639 5.49721 8.41986 5.47779 8.59003 5.43049C8.76121 5.38158 8.92457 5.30519 9.0729 5.20667C8.91581 5.03085 8.71926 4.88542 8.49533 4.80772V4.80772ZM2.45759 4.76355C2.22138 4.77975 1.99173 4.85855 1.78641 4.9748C1.93375 5.17306 2.12869 5.33941 2.35574 5.43904C2.54736 5.52307 2.76334 5.54653 2.96914 5.51091C3.16137 5.4788 3.34715 5.41006 3.51632 5.31365C3.39595 5.15021 3.24218 5.01062 3.06636 4.90897C2.8832 4.803 2.66923 4.74876 2.45759 4.76355V4.76355ZM1.22001 5.1653C1.10126 5.16912 0.985611 5.20174 0.8742 5.24078C0.618992 5.34132 0.410254 5.53646 0.254872 5.75898C0.372916 5.81786 0.498112 5.86204 0.626422 5.89192C0.800334 5.93159 0.983806 5.94366 1.15871 5.9028C1.31663 5.86063 1.46003 5.77498 1.58544 5.67143C1.70369 5.5727 1.80885 5.45807 1.89561 5.33076C1.6886 5.22236 1.45501 5.15645 1.22001 5.1653ZM3.03335 6.00868C3.1507 6.04058 3.27308 6.05597 3.39466 6.04954C3.51804 6.04299 3.64293 6.01179 3.74588 5.94124C3.90419 5.83597 4.02377 5.67938 4.10407 5.50859C3.86747 5.44428 3.60227 5.45595 3.38701 5.58116C3.22387 5.67687 3.10521 5.83608 3.03335 6.00867V6.00868ZM8.75015 5.54422C8.82553 5.74107 8.94942 5.92715 9.12725 6.04479C9.32783 6.14957 9.56656 6.15933 9.78515 6.11545C9.73684 5.99075 9.66871 5.87331 9.58175 5.77156C9.49872 5.67565 9.39556 5.59192 9.27238 5.55498C9.10361 5.50285 8.92164 5.50868 8.75016 5.54422H8.75015ZM7.02496 5.93681C6.89404 5.76764 6.72133 5.61658 6.50978 5.56273C6.29381 5.50607 6.06033 5.54854 5.86478 5.6513C5.99008 5.82832 6.16681 5.9837 6.38359 6.03091C6.59956 6.08022 6.82903 6.03473 7.02496 5.93682V5.93681ZM9.1975 6.44776C9.03104 6.18922 8.8209 5.95362 8.56045 5.78696C8.2868 5.60893 7.95478 5.53939 7.63153 5.5428C7.39543 5.54492 7.15912 5.58085 6.93359 5.65119C7.01038 5.82631 7.11141 5.99026 7.22786 6.14162C7.4073 6.37319 7.63304 6.57437 7.90105 6.69715C8.09327 6.78762 8.30451 6.83261 8.51606 6.84419C8.79977 6.85818 9.08608 6.82155 9.35773 6.73852C9.31152 6.63778 9.25708 6.54106 9.1975 6.44778V6.44776ZM5.85693 5.80155C5.70627 5.65764 5.50057 5.58155 5.29545 5.56183C5.30531 5.78183 5.37718 6.00726 5.52945 6.1706C5.6806 6.31713 5.89327 6.38125 6.09846 6.40057C6.0892 6.18258 6.02228 5.95302 5.85693 5.80155V5.80155ZM1.71143 5.81816C1.53602 5.90763 1.38546 6.04007 1.25715 6.18831C1.04238 6.44143 0.886086 6.74235 0.789466 7.05926C0.892012 7.07507 0.995681 7.08311 1.09944 7.08613C1.44837 7.09479 1.80584 7.04637 2.12305 6.89412C2.29948 6.81008 2.45206 6.68206 2.58118 6.53653C2.79927 6.28645 2.95626 5.98563 3.05297 5.66911C2.92971 5.64465 2.8042 5.63258 2.6787 5.62815C2.34819 5.61769 2.00853 5.6668 1.71143 5.81816V5.81816ZM4.46195 6.34391C4.39049 6.5012 4.34421 6.6725 4.34642 6.8462C4.35044 6.96264 4.3599 7.08019 4.39392 7.19231C4.46235 7.42408 4.59439 7.63482 4.76186 7.80793C4.85213 7.69269 4.9264 7.56498 4.98378 7.43022C5.05472 7.26225 5.09639 7.07898 5.083 6.89602C5.07575 6.71436 5.01618 6.53783 4.92741 6.38024C4.85374 6.2498 4.76226 6.12914 4.65497 6.02447C4.57799 6.12259 4.51388 6.23059 4.46195 6.34391V6.34391ZM5.61187 6.45049C5.54897 6.29711 5.43222 6.17 5.29596 6.07792C5.20538 6.24759 5.15073 6.44082 5.16291 6.63426C5.16674 6.72664 5.20347 6.81389 5.24775 6.89381C5.32364 7.02635 5.4278 7.14158 5.54575 7.23799C5.6314 7.06802 5.68504 6.87559 5.66511 6.68427C5.65243 6.60537 5.64327 6.52466 5.61187 6.45047V6.45049ZM3.33568 6.98931C3.47627 6.87499 3.58587 6.72614 3.66769 6.56522C3.73663 6.42824 3.78887 6.28242 3.81875 6.13196C3.66961 6.12692 3.51985 6.14132 3.37413 6.17302C3.19921 6.21176 3.02752 6.27889 2.88541 6.3899C2.74451 6.50031 2.63945 6.65066 2.56416 6.81188C2.49885 6.95247 2.45266 7.10214 2.42801 7.25531C2.57181 7.26024 2.71623 7.24515 2.85643 7.21264C3.02893 7.17208 3.19689 7.10122 3.33568 6.98931V6.98931ZM7.737 7.02372C7.6582 6.80725 7.53241 6.60567 7.36383 6.44776C7.21015 6.30425 7.01399 6.20875 6.80779 6.16999C6.60248 6.13125 6.38902 6.13809 6.18572 6.1852C6.2773 6.44264 6.43421 6.68256 6.654 6.84811C6.78373 6.9414 6.93007 7.01497 7.08746 7.04708C7.30163 7.09187 7.52606 7.07968 7.737 7.02374V7.02372ZM4.28171 6.34531C4.18388 6.37361 4.09048 6.41545 4.00424 6.46961C3.872 6.55283 3.75415 6.66978 3.69838 6.81833C3.63509 6.98529 3.62965 7.16966 3.65693 7.34467C3.8099 7.29968 3.95572 7.22199 4.06904 7.10868C4.12933 7.04919 4.17422 6.97624 4.21397 6.90197C4.29761 6.73057 4.31049 6.53171 4.28171 6.34531ZM7.16617 8.33599C7.17361 8.02843 7.12621 7.71443 6.99155 7.43555C6.90883 7.26346 6.79088 7.10978 6.6531 6.97815C6.41328 6.7515 6.12222 6.58102 5.81204 6.4701C5.76887 6.6728 5.75287 6.88103 5.76031 7.08804C5.77219 7.39258 5.84064 7.70204 6.00226 7.96362C6.11004 8.13551 6.25355 8.28285 6.41317 8.40713C6.62432 8.56988 6.86193 8.69839 7.11312 8.78726C7.14614 8.63911 7.16194 8.48755 7.16617 8.33599V8.33599ZM8.5068 7.56076C8.64941 7.54877 8.78819 7.50258 8.91279 7.43283C8.82463 7.31498 8.71371 7.21354 8.58651 7.13937C8.49705 7.08864 8.39871 7.04828 8.29485 7.04326C8.10706 7.03199 7.92066 7.08493 7.7525 7.16523C7.85585 7.31066 7.99413 7.43576 8.16 7.50519C8.26959 7.54857 8.38885 7.57151 8.5068 7.56075V7.56076ZM2.26968 7.09398C2.04003 7.05795 1.78369 7.08573 1.59731 7.23548C1.44604 7.35817 1.3449 7.53398 1.28804 7.71835C1.40257 7.73697 1.52002 7.73918 1.63505 7.72298C1.75955 7.70416 1.88615 7.6632 1.98075 7.57686C2.12356 7.45024 2.21575 7.27512 2.26969 7.09399L2.26968 7.09398ZM3.44064 9.06633C3.68792 8.92564 3.91285 8.73312 4.05657 8.48474C4.17643 8.27892 4.22474 8.03819 4.22433 7.80179C4.22313 7.61037 4.19535 7.41885 4.13909 7.23578C4.04922 7.27402 3.96328 7.32103 3.88105 7.37346C3.65149 7.5204 3.44719 7.71644 3.32149 7.96061C3.214 8.16863 3.17284 8.40533 3.17435 8.63801C3.17646 8.81444 3.19981 8.99106 3.24741 9.16114C3.31394 9.13396 3.37825 9.10176 3.44064 9.06634V9.06633ZM2.58772 8.45434C2.7273 8.39214 2.85079 8.29936 2.96028 8.19378C3.08508 8.07151 3.1815 7.92266 3.25506 7.76484C3.32742 7.60815 3.38006 7.442 3.40935 7.27181C3.13409 7.2526 2.8514 7.29475 2.60009 7.4113C2.45245 7.47873 2.32444 7.58149 2.2075 7.69269C1.96938 7.93474 1.82899 8.26 1.76921 8.59101C2.04717 8.60973 2.33269 8.56948 2.58773 8.45434H2.58772ZM7.58261 8.2429C7.7839 8.41599 8.04507 8.50838 8.30643 8.53767C8.30734 8.39264 8.2874 8.24753 8.24897 8.10774C8.20649 7.95687 8.13826 7.81034 8.03229 7.69339C7.82074 7.45467 7.51248 7.31871 7.20119 7.27151C7.19515 7.47047 7.22887 7.67175 7.30525 7.85593C7.36645 8.00396 7.46266 8.13691 7.58261 8.2429V8.2429ZM5.06831 7.71524C4.98378 7.91007 4.92983 8.12182 4.93828 8.33549C4.94542 8.45917 4.9736 8.58115 5.01457 8.69799C5.11099 8.9663 5.27291 9.20975 5.47439 9.41072C5.62736 9.20391 5.74692 8.97063 5.81587 8.72234C5.86217 8.54753 5.88682 8.36154 5.84637 8.18301C5.77461 7.8353 5.58016 7.52109 5.33168 7.27121C5.22551 7.40717 5.13755 7.55732 5.06831 7.71524V7.71524ZM4.64692 8.72195C4.70983 8.60771 4.75431 8.47799 4.74464 8.34605C4.73458 8.15423 4.66806 7.96723 4.56591 7.80541C4.44806 7.91702 4.34732 8.05147 4.29348 8.20586C4.26732 8.28003 4.26077 8.35914 4.25513 8.43713C4.24909 8.63398 4.32518 8.82672 4.44113 8.9834C4.52283 8.90742 4.59226 8.81922 4.64692 8.72195ZM6.63086 9.04923C6.61657 8.93128 6.57157 8.81775 6.50093 8.72234C6.39898 8.58345 6.25527 8.47758 6.09706 8.41116C6.06234 8.54401 6.04946 8.68329 6.06536 8.81996C6.08376 8.9822 6.15725 9.13719 6.26895 9.25595C6.36255 9.35597 6.47537 9.43699 6.59674 9.49979C6.63519 9.35346 6.64987 9.19968 6.63086 9.04921V9.04923ZM4.93741 4.64369C5.01684 4.64358 5.09501 4.6636 5.16461 4.70188C5.19954 4.60583 5.21278 4.50273 5.21082 4.40074C5.20197 4.21364 5.12185 4.03601 5.01135 3.88727C4.8463 4.05554 4.72261 4.28118 4.72492 4.5219C4.72631 4.57683 4.7339 4.63101 4.74628 4.6841C4.80646 4.6574 4.87157 4.64363 4.93741 4.64367V4.64369ZM5.95566 3.99445C5.74149 4.04739 5.52854 4.1605 5.40847 4.35193C5.3285 4.4844 5.29049 4.63652 5.27928 4.79033C5.32118 4.83427 5.35421 4.88587 5.37656 4.94231C5.54681 4.87694 5.70588 4.77414 5.81044 4.62305C5.93221 4.43949 5.96803 4.21103 5.95566 3.99445ZM3.72767 4.26246C3.79068 4.47159 3.9045 4.67751 4.09018 4.80098C4.21344 4.87987 4.35576 4.921 4.50085 4.93575C4.53051 4.86404 4.57735 4.80073 4.63723 4.75137C4.56975 4.61091 4.47345 4.48427 4.3429 4.39761C4.16547 4.27443 3.93902 4.23942 3.72767 4.26246V4.26246ZM4.16969 5.45313C4.2936 5.44059 4.41238 5.39904 4.52091 5.33854C4.48422 5.27008 4.46508 5.19359 4.46518 5.11592C4.46518 5.08926 4.46749 5.06318 4.47174 5.03772C4.42316 5.01232 4.37261 4.99079 4.32035 4.97399C4.20068 4.93533 4.07026 4.92668 3.94807 4.95868C3.78453 5.00076 3.63719 5.09284 3.51381 5.20657C3.69386 5.36044 3.92715 5.47648 4.16969 5.45314V5.45313ZM5.6641 5.03951C5.57729 5.0201 5.48872 5.01705 5.40102 5.02616C5.40674 5.05574 5.40963 5.08579 5.40966 5.11592C5.40979 5.22266 5.37359 5.32626 5.30702 5.40969C5.32645 5.42257 5.34639 5.43465 5.36681 5.44589C5.45055 5.49279 5.54545 5.51342 5.63934 5.52861C5.82774 5.55136 6.01967 5.50486 6.18784 5.42043C6.06153 5.24199 5.8828 5.0861 5.66411 5.03951H5.6641ZM4.75864 5.88438C4.82547 6.05276 4.94301 6.19817 5.08271 6.312C5.15999 6.18087 5.21132 6.03272 5.22169 5.88036C5.22873 5.78726 5.21212 5.69448 5.1915 5.6042C5.18426 5.57879 5.17567 5.55378 5.16578 5.52927C5.0959 5.56799 5.0173 5.58825 4.93741 5.58815C4.86522 5.58823 4.79398 5.5717 4.72922 5.53982C4.7219 5.58233 4.71768 5.6254 4.71727 5.66881C4.71536 5.74268 4.73096 5.81604 4.75864 5.88438V5.88438ZM4.49476 6.02627C4.59997 5.8664 4.6397 5.67272 4.64013 5.48276C4.6165 5.46358 4.59476 5.44218 4.57521 5.41885C4.38911 5.47525 4.21175 5.57905 4.10115 5.74188C3.97303 5.92081 3.93026 6.14846 3.94174 6.36503C4.154 6.31281 4.36232 6.20462 4.49475 6.02629L4.49476 6.02627Z" />
    </>,
    <>
      <path d="M5.14337 2.9222C5.37667 3.25123 5.4754 3.63072 5.44865 3.92602C5.70155 3.73995 6.12912 3.65508 6.58149 3.66676C6.65961 3.65836 6.74544 3.64508 6.82952 3.63095C6.95703 3.24072 7.00695 2.77733 6.93384 2.30218C6.81444 1.86272 6.98094 1.36894 7.04536 1.2532C7.04536 1.2532 6.61369 1.67959 6.28122 1.94464C5.81069 2.22688 5.40468 2.56888 5.14337 2.9222V2.9222ZM3.02615 3.79104C3.08587 3.7866 3.14655 3.77639 3.20518 3.75708C3.63603 3.66724 4.06025 3.75019 4.33808 3.91737C4.3016 3.62584 4.40371 3.24612 4.58899 2.87874C4.28853 2.55239 3.85981 2.26291 3.35175 2.10231C2.90484 2.01472 2.53578 1.64681 2.46054 1.53776L2.46051 1.5378C2.46051 1.5378 2.65162 2.11369 2.74203 2.52915C2.77971 2.99089 2.87608 3.43019 3.02615 3.79104ZM8.36364 4.74896C7.80613 4.41533 7.21737 4.20096 6.73136 4.18577C6.54837 4.52315 6.27054 4.77138 6.0057 4.88591C6.27635 5.03158 6.53814 5.35672 6.7326 5.74391C6.80117 5.84451 6.89024 5.95934 6.96494 6.05261C7.41573 6.00405 7.91717 5.82273 8.35619 5.4932C8.68734 5.18058 9.20128 5.09438 9.33373 5.09655C9.33373 5.09655 8.75418 4.91708 8.36364 4.74896V4.74896ZM3.25422 6.20687C3.27206 6.15004 3.2849 6.09018 3.28868 6.02893C3.37728 5.5257 3.67887 5.11717 3.98365 4.9551C3.70444 4.90743 3.39946 4.66334 3.14052 4.3321V4.33209C2.63543 4.39447 2.0521 4.65335 1.5833 5.10945C1.29464 5.46169 0.795882 5.61251 0.664215 5.62721C0.664215 5.62721 1.26195 5.73149 1.67071 5.84848C2.2229 6.08949 2.78878 6.2255 3.25422 6.20687ZM7.5431 8.60319C7.5431 8.60319 7.34558 8.02946 7.25054 7.61503C7.1982 7.05157 7.05882 6.52224 6.84228 6.12976C6.73574 6.10551 6.61191 6.09274 6.49107 6.11604C6.12571 6.14452 5.78006 6.05472 5.52777 5.90774C5.52019 6.18401 5.41851 6.51311 5.25605 6.83022C5.17133 7.06915 5.0873 7.42101 5.0873 7.42101C5.08342 7.34212 5.01195 7.03975 4.81299 6.85497C4.59203 6.59777 4.46283 6.29442 4.42063 6.02049C4.22037 6.15995 3.95049 6.26929 3.65598 6.33988C3.46868 6.84927 3.46415 7.57067 3.74498 8.25039C3.96511 8.64906 3.92029 9.16824 3.88512 9.29597C3.88512 9.29597 4.20358 8.77942 4.46379 8.44315C4.85518 8.05641 5.16955 7.62651 5.33953 7.22032C5.64569 7.57011 6.10157 7.88328 6.6457 8.04861C7.09355 8.13119 7.46664 8.49502 7.5431 8.60319Z" />
      <path d="M5.52772 5.90772L5.52776 5.90774V5.9077L5.52772 5.90772ZM4.9468 2.99333C5.0987 2.60215 5.45079 2.20287 5.90779 1.85155C5.82456 1.65416 5.7194 1.4589 5.58962 1.2728C5.26648 0.905556 5.19326 0.350614 5.20062 0.208496C5.20057 0.2086 4.98613 0.824005 4.79102 1.23691C4.58123 1.56118 4.4102 1.89713 4.29334 2.22092C4.58383 2.45507 4.80873 2.72531 4.94681 2.99333H4.9468ZM2.15382 4.41718C2.46922 4.28376 2.78537 4.21301 3.06838 4.2061C2.79789 3.87879 2.60745 3.37913 2.50477 2.81361C2.31893 2.80137 2.1272 2.80505 1.93296 2.82766C1.45653 2.93852 0.933091 2.74035 0.811356 2.66663C0.811819 2.66714 1.25218 3.14703 1.52344 3.51418C1.70955 3.85195 1.92431 4.16097 2.15382 4.41719V4.41718ZM8.15196 4.41879C8.2739 4.26993 8.38196 4.11024 8.47479 3.94169C8.66094 3.48931 9.1261 3.17794 9.25675 3.12156H9.25677C9.25677 3.12156 8.60995 3.20189 8.1533 3.20983C7.76848 3.16522 7.39063 3.1611 7.04766 3.20004C6.9729 3.53458 6.84659 3.83323 6.6875 4.06749C7.11184 4.03675 7.63056 4.17258 8.15196 4.41879V4.41879ZM8.78552 7.96373C8.78552 7.96373 8.40962 7.43134 8.18721 7.03243C8.045 6.67206 7.87052 6.33656 7.67436 6.05263V6.0526C7.45843 6.11294 7.24558 6.14653 7.04535 6.15425C7.2784 6.54425 7.4345 7.07694 7.50522 7.65275C7.56749 7.65725 7.63016 7.66046 7.69353 7.6612C8.18022 7.61193 8.6742 7.87509 8.78553 7.96373H8.78552ZM1.99718 6.30482H1.99715C1.85413 6.54344 1.73587 6.81164 1.65734 7.10234C1.58365 7.58593 1.20549 7.99863 1.09189 8.08432C1.09189 8.08432 1.70128 7.8531 2.14307 7.73721C2.52628 7.68955 2.89333 7.60446 3.21649 7.48591C3.20688 7.02909 3.30206 6.61254 3.4729 6.31134C3.09269 6.47075 2.56302 6.45166 1.99718 6.30482V6.30482ZM4.46593 8.73196C4.79315 9.09557 4.87258 9.64964 4.86682 9.79183C4.86682 9.79183 5.07437 9.17399 5.26486 8.75889C5.47143 8.43162 5.63863 8.09307 5.75193 7.76737C5.60975 7.65568 5.48254 7.53546 5.37337 7.41073C5.19321 7.84125 4.86182 8.29651 4.44921 8.7076C4.45487 8.71569 4.46019 8.7239 4.46593 8.73196V8.73196ZM4.78988 2.96655V2.96657V2.96655Z" />
      <path d="M3.68576 5.75482C3.67345 5.95428 3.53467 6.13603 3.49159 6.17504C3.49159 6.17504 3.73112 6.05864 3.90663 5.99535C4.1426 5.94423 4.3602 5.85899 4.51876 5.74855C4.54982 5.95015 4.64494 6.17349 4.80755 6.36278C4.95398 6.49875 5.00656 6.72125 5.00941 6.7793C5.00941 6.7793 5.07122 6.52038 5.13357 6.34453C5.25313 6.11116 5.32801 5.86889 5.33359 5.66555C5.51926 5.77374 5.7736 5.83987 6.04252 5.81891C6.23873 5.78106 6.44935 5.87007 6.49786 5.90206C6.49786 5.90206 6.32544 5.69916 6.22036 5.545C6.07724 5.26004 5.88455 5.02074 5.68538 4.91353C5.90463 4.81871 6.13631 4.59958 6.26672 4.30232C6.32592 4.11147 6.50374 3.96779 6.55483 3.94008C6.55483 3.94008 6.2946 3.99644 6.10909 4.01637C5.77617 4.00778 5.46156 4.07017 5.27543 4.20712C5.29742 3.96452 5.20467 3.64445 4.98707 3.38533C4.84218 3.24774 4.7921 3.02469 4.78988 2.96658C4.78981 2.96687 4.72514 3.22487 4.66088 3.39992C4.51266 3.68142 4.43011 3.97668 4.45818 4.20088C4.25371 4.07784 3.94152 4.01672 3.62444 4.08282C3.43464 4.14534 3.21443 4.08386 3.16222 4.05832C3.16222 4.05832 3.35903 4.2376 3.4829 4.37714C3.6905 4.68509 3.95694 4.92356 4.19725 4.96459C3.97297 5.08386 3.75095 5.38448 3.68576 5.75482V5.75482ZM4.36275 4.60607C4.32112 4.53804 4.25178 4.44778 4.25178 4.44778C4.27182 4.46245 4.35988 4.50489 4.44446 4.49287C4.58289 4.4889 4.70967 4.5381 4.78648 4.60525C4.79152 4.50879 4.84848 4.39075 4.93203 4.28342C4.97226 4.21456 5.01891 4.11078 5.01892 4.11074C5.01548 4.13537 5.01977 4.23302 5.0704 4.30183C5.14249 4.42724 5.15745 4.56892 5.12995 4.66937C5.21858 4.62574 5.35569 4.62315 5.49514 4.6518C5.57472 4.65738 5.68848 4.65323 5.68848 4.65323C5.66489 4.66105 5.57925 4.70813 5.53998 4.78401C5.46274 4.89929 5.34874 4.9741 5.24933 4.99751C5.32509 5.05761 5.38819 5.17282 5.42698 5.30352C5.45961 5.37632 5.51691 5.47466 5.51691 5.47466C5.49889 5.45754 5.41695 5.40425 5.33153 5.40541C5.21678 5.394 5.1147 5.34703 5.0447 5.28754C5.02707 5.37269 4.97732 5.46903 4.90944 5.55825C4.86998 5.62757 4.82448 5.73188 4.82448 5.73188C4.82766 5.70723 4.82226 5.60964 4.77086 5.5414C4.71667 5.4495 4.69343 5.34835 4.69553 5.26117C4.62049 5.29573 4.52249 5.31522 4.41935 5.31899C4.34071 5.33242 4.23115 5.36339 4.23115 5.36339C4.25222 5.35021 4.3243 5.28416 4.34448 5.20114C4.39979 5.05018 4.51583 4.94038 4.6192 4.90705C4.52115 4.87171 4.42695 4.75129 4.36275 4.60607V4.60607Z" />
    </>,
    <path d="M6.96361 2.69732C6.94614 2.70717 6.93147 2.72131 6.92097 2.73839C6.7639 2.99326 6.60361 3.24612 6.44012 3.49692C6.56423 2.74746 6.18888 1.81795 5.28004 1.29004C4.5298 1.99147 4.66384 3.68091 5.97169 4.19663C5.41122 5.01136 4.82609 5.78332 4.21305 6.51737C4.43979 5.74196 4.08172 4.69623 3.0955 4.12337C2.34698 4.82319 2.47861 6.50665 3.77815 7.02649C2.98241 7.93665 2.14009 8.78702 1.24354 9.58624C1.19451 9.62987 1.19027 9.70513 1.23392 9.75424C1.27766 9.80327 1.35281 9.80759 1.40193 9.76384C1.89879 9.3209 2.38034 8.86108 2.84574 8.38519C3.49539 9.17743 5.1703 9.23498 5.81782 7.95207C5.34756 7.35121 4.35943 7.21346 3.51284 7.68007C3.98462 7.16451 4.44027 6.62942 4.88133 6.07325C5.52682 6.87214 7.2098 6.93369 7.8592 5.64702C7.33967 4.98323 6.18808 4.88456 5.29357 5.5417C5.93313 4.69827 6.54168 3.80747 7.12361 2.86328C7.13067 2.85165 7.13568 2.83889 7.13842 2.82557C8.09265 2.72938 8.92312 1.56628 8.59773 0.212657C7.57826 0.154613 6.45568 1.40319 6.96361 2.69732V2.69732Z" />,
    <path d="M1.99861 5.72991C2.50627 5.40304 3.05396 5.14296 3.66161 5.09658C4.27515 5.05335 4.94277 5.22069 5.43946 5.52382C5.59218 5.62053 5.72959 5.73178 5.84892 5.8485C5.76346 5.58333 5.68662 5.33033 5.6039 5.0742C5.41925 4.49867 5.20556 3.89249 4.89441 3.35537C4.5864 2.81236 4.18369 2.34746 4.09301 2.27632C4.00233 2.20516 4.21461 2.53052 4.43709 2.92185C4.6627 3.3073 4.88631 3.76738 5.05141 4.18107C5.21652 4.59478 5.32314 4.96209 5.19308 5.0213C5.05715 5.07739 4.68771 4.81951 4.35876 4.49999C4.02665 4.18635 3.73819 3.80518 3.58566 3.36793C3.43589 2.93972 3.413 2.45816 3.46161 1.98449C3.5161 1.51398 3.63617 1.04822 3.77071 0.711296C3.91427 0.371632 4.06915 0.166701 4.10957 0.218576C4.15 0.270428 4.06693 0.581851 4.36557 1.02902C4.65831 1.47303 5.33275 2.05279 5.70038 2.71091C6.06213 3.36589 6.12295 4.10238 6.1356 4.63147C6.14235 5.15739 6.1068 5.47905 6.29226 6.02474C6.47772 6.57041 6.8928 7.35229 7.39121 8.03484C7.89552 8.72055 8.48 9.31282 9.0406 9.7939C9.0406 9.7939 8.42403 9.4305 7.78667 9.43454C7.62301 9.43558 6.55393 7.17887 6.03852 6.68405C5.84028 6.50247 5.54893 6.33929 5.1649 6.1796C4.78675 6.02303 4.31865 5.879 3.84692 5.86928C3.3811 5.86272 2.90575 5.98733 2.91907 6.04745C2.93239 6.10754 3.43162 6.09409 3.86051 6.1415C4.2894 6.18888 4.65383 6.30025 4.92322 6.39115C5.19259 6.48204 5.37284 6.5556 5.28282 6.68163C5.19279 6.80767 4.83881 6.97437 4.45028 7.09236C4.0649 7.20446 3.64498 7.26784 3.16783 7.12655C2.68481 6.9821 2.15045 6.63614 1.70744 6.55849C1.26443 6.48085 0.912789 6.67152 0.969409 6.56552C1.03192 6.46265 1.49368 6.06583 1.9986 5.72993L1.99861 5.72991Z" />,
    <path d="M3.42766 8.31027C3.42766 9.05247 3.82526 9.79468 5.01812 9.79468C6.21094 9.79468 6.60854 9.05247 6.60854 8.31027C6.60854 7.56805 5.41572 6.82584 5.01812 5.34146C4.62051 6.82584 3.42766 7.56805 3.42766 8.31027ZM9.21464 7.3784C9.81108 6.34536 9.3671 5.62991 8.72434 5.2588C8.08158 4.88772 6.84236 5.54964 5.35802 5.15174C6.44476 6.23832 6.49112 7.64242 7.13389 8.01355C7.77668 8.38466 8.61822 8.41142 9.21464 7.3784ZM9.21464 2.58625C8.61823 1.55322 7.77668 1.57995 7.13389 1.95106C6.49112 2.32219 6.44477 3.72633 5.35803 4.81287C6.84236 4.41501 8.08158 5.0769 8.72435 4.70581C9.3671 4.33469 9.81108 3.61928 9.21463 2.58625H9.21464ZM5.01823 0.211342C3.82538 0.211377 3.42778 0.953552 3.42778 1.69579C3.42778 2.43798 4.62063 3.18019 5.01823 4.66459C5.41584 3.18019 6.60866 2.43798 6.60866 1.69579C6.60866 0.953552 6.21106 0.211377 5.01823 0.211353V0.211342ZM1.25949 4.70582C1.90224 5.0769 3.14145 4.41501 4.62581 4.81287C3.53905 3.72633 3.49269 2.32219 2.84992 1.95107C2.20714 1.57996 1.36559 1.55323 0.769145 2.58626C0.172733 3.61928 0.616691 4.33469 1.25949 4.70582V4.70582ZM2.84992 8.01353C3.49269 7.64242 3.53904 6.2383 4.6258 5.15175C3.14145 5.54964 1.90224 4.88772 1.25949 5.25881C0.616691 5.62993 0.172733 6.34536 0.769145 7.37838C1.36559 8.41139 2.20714 8.38466 2.84992 8.01355V8.01353Z" />,
  ];
  return svgItems[id];
}
ReactDOM.render(<App />,
document.getElementById("root"))

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap');

body{
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100vh;
  overflow: hidden;
  background:#F4F4F4;

}


svg{
  width: 100vw;
  height: 100vh;
  background: #F4F4F4;
}

.btn-refresh{


position: fixed;
right: 16px;
top: 16px;
padding: 12px 16px;

background: #FFFFFF;
box-shadow: inset -2px -2px 6px rgba(108, 104, 104, 0.25);
border-radius: 100px;
color: rgb(240, 157, 215);
cursor: pointer;
border: none;
font-family: 'Lobster Two', cursive;
font-size: 18px;
}
.btn-refresh:hover{
  box-shadow: inset -1px -1px 6px rgba(108, 104, 104, 0.25);
  color: rgb(235, 139, 206);
}