VS_CODE/Qwixx/frontend-example/generated-dice/four-wht.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="400mm"
   height="400mm"
   viewBox="0 0 400 400"
   version="1.1"
   id="svg2403"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   sodipodi:docname="diceGenerator.svg">
  <defs
     id="defs2397">
    <inkscape:path-effect
       effect="powerclip"
       id="path-effect4439"
       is_visible="true"
       lpeversion="1"
       inverse="true"
       flatten="false"
       hide_clip="false"
       message="Use fill-rule evenodd on &lt;b&gt;fill and stroke&lt;/b&gt; dialog if no flatten result after convert clip to paths." />
    <inkscape:path-effect
       effect="powerclip"
       id="path-effect5747"
       is_visible="true"
       lpeversion="1"
       inverse="true"
       flatten="false"
       hide_clip="false"
       message="Use fill-rule evenodd on &lt;b&gt;fill and stroke&lt;/b&gt; dialog if no flatten result after convert clip to paths." />
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="-4.3425461e-14 : 236.40501 : 0"
       inkscape:vp_y="-435.35778 : -4.8707947 : 0"
       inkscape:vp_z="317.51924 : 120.63248 : 1"
       inkscape:persp3d-origin="197.66619 : 47.764227 : 1"
       id="perspective2405" />
    <filter
       style="color-interpolation-filters:sRGB"
       id="filter5561"
       inkscape:label="filter0">
      <feBlend
         mode="normal"
         in2="SourceGraphic"
         id="feBlend5563" />
    </filter>
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath5743">
      <path
         id="path5745"
         style="display:none;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z" />
      <path
         id="lpe_path-effect5747"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         class="powerclip"
         d="M -4.2088941,2.4505682 H 207.45595 V 194.56314 H -4.2088941 Z M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z" />
    </clipPath>
    <clipPath
       id="clipPath67"
       clipPathUnits="userSpaceOnUse">
      <path
         id="path69"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z" />
    </clipPath>
    <inkscape:perspective
       id="perspective2405-9"
       inkscape:persp3d-origin="-222.74973 : -88.752136 : 1"
       inkscape:vp_z="275.62925 : -308.48353 : 0"
       inkscape:vp_y="-204.00173 : 38.986614 : 0"
       inkscape:vp_x="284.56184 : 428.79838 : 0"
       sodipodi:type="inkscape:persp3d" />
    <meshgradient
       y="9.0146418"
       x="2.3031054"
       gradientUnits="userSpaceOnUse"
       id="meshgradient3465"
       inkscape:collect="always">
      <meshrow
         id="meshrow3467">
        <meshpatch
           id="meshpatch3469">
          <stop
             id="stop3471"
             style="stop-color:#ffffff;stop-opacity:1"
             path="c 66.2131,0  132.426,0  198.639,0" />
          <stop
             id="stop3473"
             style="stop-color:#b3b3b3;stop-opacity:1"
             path="c 0,59.6624  0,119.325  0,178.987" />
          <stop
             id="stop3475"
             style="stop-color:#ffffff;stop-opacity:1"
             path="c -66.2131,0  -132.426,0  -198.639,0" />
          <stop
             id="stop3477"
             style="stop-color:#b3b3b3;stop-opacity:1"
             path="c 0,-59.6624  0,-119.325  0,-178.987" />
        </meshpatch>
      </meshrow>
    </meshgradient>
    <filter
       inkscape:label="filter0"
       id="filter5561-5"
       style="color-interpolation-filters:sRGB">
      <feBlend
         id="feBlend5563-5"
         in2="SourceGraphic"
         mode="normal" />
    </filter>
    <clipPath
       id="clipPath5743-8"
       clipPathUnits="userSpaceOnUse">
      <path
         d="M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         style="display:none;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="path5745-9" />
      <path
         d="M -4.2088941,2.4505682 H 207.45595 V 194.56314 H -4.2088941 Z M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         class="powerclip"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="lpe_path-effect5747-3" />
    </clipPath>
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath67-1">
      <path
         d="M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="path69-2" />
    </clipPath>
    <inkscape:perspective
       id="perspective2405-5"
       inkscape:persp3d-origin="57.788625 : -110.47831 : 1"
       inkscape:vp_z="275.62925 : -308.48353 : 0"
       inkscape:vp_y="-204.00173 : 38.986614 : 0"
       inkscape:vp_x="284.56184 : 428.79838 : 0"
       sodipodi:type="inkscape:persp3d" />
    <filter
       inkscape:label="filter0"
       id="filter5561-2"
       style="color-interpolation-filters:sRGB">
      <feBlend
         id="feBlend5563-1"
         in2="SourceGraphic"
         mode="normal" />
    </filter>
    <clipPath
       id="clipPath5743-3"
       clipPathUnits="userSpaceOnUse">
      <path
         d="M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         style="display:none;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="path5745-2" />
      <path
         d="M -4.2088941,2.4505682 H 207.45595 V 194.56314 H -4.2088941 Z M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         class="powerclip"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="lpe_path-effect5747-2" />
    </clipPath>
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath67-6">
      <path
         d="M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="path69-6" />
    </clipPath>
    <inkscape:perspective
       id="perspective2405-94"
       inkscape:persp3d-origin="125.27281 : -57.712259 : 1"
       inkscape:vp_z="275.62925 : -308.48353 : 0"
       inkscape:vp_y="-204.00173 : 38.986614 : 0"
       inkscape:vp_x="284.56184 : 428.79838 : 0"
       sodipodi:type="inkscape:persp3d" />
    <filter
       inkscape:label="filter0"
       id="filter5561-7"
       style="color-interpolation-filters:sRGB">
      <feBlend
         id="feBlend5563-8"
         in2="SourceGraphic"
         mode="normal" />
    </filter>
    <clipPath
       id="clipPath5743-7"
       clipPathUnits="userSpaceOnUse">
      <path
         d="M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         style="display:none;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="path5745-0" />
      <path
         d="M -4.2088941,2.4505682 H 207.45595 V 194.56314 H -4.2088941 Z M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         class="powerclip"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="lpe_path-effect5747-7" />
    </clipPath>
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath67-5">
      <path
         d="M 64.745179,9.015 C 43.931136,40.37911 23.117041,71.742827 2.303,103.10695 c 21.142461,23.66263 42.285184,47.32537 63.427649,70.98796 l 72.769731,13.90716 C 159.31442,156.63796 180.12852,125.27373 200.94256,93.909563 179.8001,70.246976 158.65737,46.58424 137.51491,22.921651 113.25832,18.285991 89.001772,13.650661 64.745179,9.015 Z"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="path69-5" />
    </clipPath>
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath4435">
      <path
         d="m 107.14643,236.39074 -55.052969,0.61598 -17.445448,4.11189 v 72.1398 l 68.643877,-0.76843 3.85454,-18.2423 z"
         style="display:none;opacity:1;fill:#800080;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linejoin:round"
         id="path4437" />
      <path
         id="lpe_path-effect4439"
         style="opacity:1;fill:#800080;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linejoin:round"
         class="powerclip"
         d="m 28.565739,230.32398 h 84.640921 v 89.01353 H 28.565739 Z m 78.580691,6.06676 -55.052969,0.61598 -17.445448,4.11189 v 72.1398 l 68.643877,-0.76843 3.85454,-18.2423 z" />
    </clipPath>
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipPath4509">
      <path
         d="m 107.14643,236.39074 -55.052969,0.61598 -17.445448,4.11189 v 72.1398 l 68.643877,-0.76843 3.85454,-18.2423 z"
         style="opacity:1;fill:#ff0000;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linejoin:round"
         id="path4511" />
    </clipPath>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.28111979"
     inkscape:cx="430.19671"
     inkscape:cy="1072.0362"
     inkscape:document-units="mm"
     inkscape:current-layer="g4711"
     inkscape:document-rotation="0"
     showgrid="false"
     inkscape:window-width="1410"
     inkscape:window-height="1040"
     inkscape:window-x="208"
     inkscape:window-y="0"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata2400">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:groupmode="layer"
     id="layer4"
     inkscape:label="base0"
     style="display:none"
     sodipodi:insensitive="true">
    <g
       sodipodi:type="inkscape:box3d"
       id="g2729-4"
       style="fill:#b3b3b3;stroke-width:50"
       inkscape:perspectiveID="#perspective2405-94"
       inkscape:corner0="0.7979643 : 0.51434472 : 0 : 1"
       inkscape:corner7="0.57853176 : 0.15763317 : 0.23011852 : 1"
       inkscape:transform-center-x="-57.720495"
       inkscape:transform-center-y="33.351485">
      <path
         d="m 247.41579,95.493898 -62.44213,94.092322 72.76977,13.90697 62.44213,-94.09232 z"
         sodipodi:type="inkscape:box3dside"
         id="path2735-2"
         style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
         inkscape:box3dsidetype="3"
         points="184.97366,189.58622 257.74343,203.49319 320.18556,109.40087 247.41579,95.493898 " />
      <path
         d="m 184.97366,189.58622 72.76977,13.90697 63.4274,70.98778 -72.76977,-13.90698 z"
         sodipodi:type="inkscape:box3dside"
         id="path2737-6"
         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
         inkscape:box3dsidetype="14"
         points="257.74343,203.49319 321.17083,274.48097 248.40106,260.57399 184.97366,189.58622 " />
      <path
         d="m 320.18556,109.40087 -62.44213,94.09232 63.4274,70.98778 62.44213,-94.09232 z"
         sodipodi:type="inkscape:box3dside"
         id="path2739-1"
         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
         inkscape:box3dsidetype="13"
         points="257.74343,203.49319 321.17083,274.48097 383.61296,180.38865 320.18556,109.40087 " />
      <path
         d="m 247.41579,95.493898 -62.44213,94.092322 63.4274,70.98777 62.44212,-94.09232 z"
         sodipodi:type="inkscape:box3dside"
         id="path2733-3"
         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
         inkscape:box3dsidetype="5"
         points="184.97366,189.58622 248.40106,260.57399 310.84318,166.48167 247.41579,95.493898 " />
      <path
         d="m 247.41579,95.493898 72.76977,13.906972 63.4274,70.98778 -72.76978,-13.90698 z"
         sodipodi:type="inkscape:box3dside"
         id="path2731-0"
         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
         inkscape:box3dsidetype="6"
         points="320.18556,109.40087 383.61296,180.38865 310.84318,166.48167 247.41579,95.493898 " />
      <path
         d="m 310.84318,166.48167 -62.44212,94.09232 72.76977,13.90698 62.44213,-94.09232 z"
         sodipodi:type="inkscape:box3dside"
         id="path2741-2"
         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
         inkscape:box3dsidetype="11"
         points="248.40106,260.57399 321.17083,274.48097 383.61296,180.38865 310.84318,166.48167 " />
    </g>
    <ellipse
       style="fill:#b3b3b3;stroke-width:18.127"
       id="path2837-8"
       cy="143.44583"
       cx="275.21497"
       rx="43.326023"
       ry="58.370235"
       transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)" />
    <ellipse
       style="fill:#b3b3b3;stroke-width:27.1643"
       id="path2839-0"
       cx="372.40372"
       cy="386.34595"
       rx="52.985146"
       ry="42.078251"
       transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
    <ellipse
       style="fill:#b3b3b3;stroke-width:27.3889"
       id="path2841-3"
       cx="-73.222923"
       cy="336.94769"
       rx="19.549366"
       ry="53.173599"
       transform="matrix(-0.56188005,0.82721872,0.81012106,0.58626262,0,0)" />
  </g>
  <g
     style="display:none"
     inkscape:label="variant 0 base 0"
     id="g2864"
     transform="translate(-263.72916,16.029054)"
     sodipodi:insensitive="true">
    <g
       style="display:none"
       inkscape:label="outset"
       id="layer34"
       inkscape:groupmode="layer"
       sodipodi:insensitive="true">
      <path
         id="path5737"
         style="display:inline;opacity:1;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 334.26806,1.9805184 c -1.39752,0.29774 -1.79259,1.84606 -2.60265,2.82286 -20.33492,30.6417296 -40.66985,61.2834596 -61.00477,91.9251896 -0.59659,1.16905 0.35119,2.30724 1.16211,3.07226 20.79207,23.293882 41.60583,46.568862 62.40625,69.855472 1.39732,0.90677 3.15371,0.79831 4.71628,1.22981 22.97934,4.3915 45.95868,8.78299 68.93801,13.17449 1.39269,0.0707 2.07685,-1.32274 2.69798,-2.32857 10.94821,-16.42934 21.83935,-32.89858 32.76561,-49.34326 9.54394,-14.39924 19.12294,-28.77884 28.64497,-43.190342 0.52688,-1.20289 -0.48039,-2.27256 -1.26969,-3.05721 -20.77266,-23.26656 -41.56182,-46.51879 -62.34082,-69.77984 -1.39733,-0.90678 -3.15371,-0.79832 -4.71629,-1.22982 -23.01318,-4.3886 -46.02195,-8.8137796 -69.03788,-13.1795396 -0.11987,-0.008 -0.23952,0.0228 -0.35911,0.0285 z" />
    </g>
    <g
       id="g5655"
       inkscape:groupmode="layer"
       inkscape:label="border"
       style="display:none"
       sodipodi:insensitive="true">
      <path
         inkscape:original-d="M 64.585938,7.4804688 C 63.188421,7.7782062 62.793351,9.32653 61.983291,10.303326 41.648366,40.945056 21.313441,71.586786 0.97851562,102.22852 c -0.59658869,1.16905 0.35118958,2.30724 1.16210938,3.07226 20.792077,23.29388 41.605835,46.56886 62.40625,69.85547 1.397324,0.90677 3.153713,0.79831 4.716288,1.22981 22.979336,4.3915 45.958677,8.78299 68.938007,13.17449 1.39269,0.0707 2.07685,-1.32274 2.69798,-2.32857 10.94821,-16.42934 21.83935,-32.89858 32.76561,-49.34326 9.54394,-14.39924 19.12294,-28.77884 28.64497,-43.190341 0.52688,-1.202887 -0.48039,-2.272555 -1.26969,-3.057204 C 180.26738,68.374609 159.47822,45.12238 138.69922,21.861328 137.30189,20.954553 135.54551,21.063013 133.98293,20.631515 110.96975,16.242906 87.960976,11.817726 64.94505,7.4519744 c -0.11987,-0.00833 -0.239523,0.02283 -0.359112,0.028494 z"
         inkscape:path-effect="#path-effect5747"
         clip-path="url(#clipPath5743-8)"
         d="M 64.585938,7.4804688 C 63.188421,7.7782062 62.793351,9.32653 61.983291,10.303326 41.648366,40.945056 21.313441,71.586786 0.97851562,102.22852 c -0.59658869,1.16905 0.35118958,2.30724 1.16210938,3.07226 20.792077,23.29388 41.605835,46.56886 62.40625,69.85547 1.397324,0.90677 3.153713,0.79831 4.716288,1.22981 22.979336,4.3915 45.958677,8.78299 68.938007,13.17449 1.39269,0.0707 2.07685,-1.32274 2.69798,-2.32857 10.94821,-16.42934 21.83935,-32.89858 32.76561,-49.34326 9.54394,-14.39924 19.12294,-28.77884 28.64497,-43.190341 0.52688,-1.202887 -0.48039,-2.272555 -1.26969,-3.057204 C 180.26738,68.374609 159.47822,45.12238 138.69922,21.861328 137.30189,20.954553 135.54551,21.063013 133.98293,20.631515 110.96975,16.242906 87.960976,11.817726 64.94505,7.4519744 c -0.11987,-0.00833 -0.239523,0.02283 -0.359112,0.028494 z"
         style="opacity:1;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="path5702"
         transform="translate(269.68212,-5.4999516)" />
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer10"
       inkscape:label="color 0 and dots"
       style="display:inline">
      <g
         style="display:inline"
         inkscape:label="bg"
         id="layer36"
         inkscape:groupmode="layer"
         sodipodi:insensitive="true">
        <image
           sodipodi:absref="C:\Users\valued-customer\Desktop\VS_CODE\Qwixx\frontend\example\palette\color0.svg"
           xlink:href="../palette/color0.svg"
           transform="translate(269.68212,-5.4999516)"
           clip-path="url(#clipPath67-1)"
           id="image5487"
           height="285.75"
           width="508"
           inkscape:svg-dpi="96"
           preserveAspectRatio="none"
           x="0"
           y="0"
           style="display:inline" />
      </g>
      <g
         inkscape:label="dots"
         id="layer37"
         inkscape:groupmode="layer"
         style="display:inline"
         sodipodi:insensitive="true">
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:5.49161"
           id="ellipse2858"
           cy="37.024464"
           cx="344.99881"
           rx="13.125702"
           ry="17.683376"
           transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393"
           id="ellipse2860"
           cx="470.28589"
           cy="371.44025"
           rx="16.314209"
           ry="12.955958"
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:9.15019"
           id="ellipse2862"
           cx="-200.54121"
           cy="395.24789"
           rx="6.5311246"
           ry="17.764433"
           transform="matrix(-0.56188005,0.82721872,0.81012107,0.58626261,0,0)" />
        <ellipse
           transform="matrix(-0.56188005,0.82721872,0.81012107,0.58626261,0,0)"
           ry="17.764433"
           rx="6.5311246"
           cy="323.96573"
           cx="-198.08272"
           id="ellipse2862-5"
           style="display:inline;fill:#1a1a1a;stroke-width:9.15019" />
        <ellipse
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)"
           ry="12.955959"
           rx="16.314209"
           cy="336.21796"
           cx="467.36121"
           id="ellipse2860-7"
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393" />
        <ellipse
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)"
           ry="12.955959"
           rx="16.314209"
           cy="302.79694"
           cx="461.7587"
           id="ellipse2860-8"
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393" />
      </g>
    </g>
    <g
       style="display:none"
       inkscape:label="color 1 and dots"
       id="g4805"
       inkscape:groupmode="layer">
      <g
         sodipodi:insensitive="true"
         inkscape:groupmode="layer"
         id="g4789"
         inkscape:label="bg"
         style="display:inline">
        <image
           sodipodi:absref="C:\Users\valued-customer\Desktop\VS_CODE\Qwixx\frontend\example\palette\color1.svg"
           xlink:href="../palette/color1.svg"
           style="display:inline"
           y="0"
           x="0"
           preserveAspectRatio="none"
           inkscape:svg-dpi="96"
           width="508"
           height="285.75"
           id="image4787"
           clip-path="url(#clipPath67-1)"
           transform="translate(269.68212,-5.4999516)" />
      </g>
      <g
         sodipodi:insensitive="true"
         style="display:inline"
         inkscape:groupmode="layer"
         id="g4803"
         inkscape:label="dots">
        <ellipse
           transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)"
           ry="17.683376"
           rx="13.125702"
           cx="344.99881"
           cy="37.024464"
           id="ellipse4791"
           style="display:inline;fill:#1a1a1a;stroke-width:5.49161" />
        <ellipse
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)"
           ry="12.955958"
           rx="16.314209"
           cy="371.44025"
           cx="470.28589"
           id="ellipse4793"
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393" />
        <ellipse
           transform="matrix(-0.56188005,0.82721872,0.81012107,0.58626261,0,0)"
           ry="17.764433"
           rx="6.5311246"
           cy="395.24789"
           cx="-200.54121"
           id="ellipse4795"
           style="display:inline;fill:#1a1a1a;stroke-width:9.15019" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:9.15019"
           id="ellipse4797"
           cx="-198.08272"
           cy="323.96573"
           rx="6.5311246"
           ry="17.764433"
           transform="matrix(-0.56188005,0.82721872,0.81012107,0.58626261,0,0)" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393"
           id="ellipse4799"
           cx="467.36121"
           cy="336.21796"
           rx="16.314209"
           ry="12.955959"
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393"
           id="ellipse4801"
           cx="461.7587"
           cy="302.79694"
           rx="16.314209"
           ry="12.955959"
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
      </g>
    </g>
    <g
       style="display:none"
       inkscape:label="color 2 and dots"
       id="g4777"
       inkscape:groupmode="layer">
      <g
         sodipodi:insensitive="true"
         inkscape:groupmode="layer"
         id="g4761"
         inkscape:label="bg"
         style="display:inline">
        <image
           sodipodi:absref="C:\Users\valued-customer\Desktop\VS_CODE\Qwixx\frontend\example\palette\color2.svg"
           xlink:href="../palette/color2.svg"
           style="display:inline"
           y="0"
           x="0"
           preserveAspectRatio="none"
           inkscape:svg-dpi="96"
           width="508"
           height="285.75"
           id="image4759"
           clip-path="url(#clipPath67-1)"
           transform="translate(269.68212,-5.4999516)" />
      </g>
      <g
         sodipodi:insensitive="true"
         style="display:inline"
         inkscape:groupmode="layer"
         id="g4775"
         inkscape:label="dots">
        <ellipse
           transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)"
           ry="17.683376"
           rx="13.125702"
           cx="344.99881"
           cy="37.024464"
           id="ellipse4763"
           style="display:inline;fill:#1a1a1a;stroke-width:5.49161" />
        <ellipse
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)"
           ry="12.955958"
           rx="16.314209"
           cy="371.44025"
           cx="470.28589"
           id="ellipse4765"
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393" />
        <ellipse
           transform="matrix(-0.56188005,0.82721872,0.81012107,0.58626261,0,0)"
           ry="17.764433"
           rx="6.5311246"
           cy="395.24789"
           cx="-200.54121"
           id="ellipse4767"
           style="display:inline;fill:#1a1a1a;stroke-width:9.15019" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:9.15019"
           id="ellipse4769"
           cx="-198.08272"
           cy="323.96573"
           rx="6.5311246"
           ry="17.764433"
           transform="matrix(-0.56188005,0.82721872,0.81012107,0.58626261,0,0)" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393"
           id="ellipse4771"
           cx="467.36121"
           cy="336.21796"
           rx="16.314209"
           ry="12.955959"
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393"
           id="ellipse4773"
           cx="461.7587"
           cy="302.79694"
           rx="16.314209"
           ry="12.955959"
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
      </g>
    </g>
    <g
       style="display:none"
       inkscape:label="color 3 and dots"
       id="g4749"
       inkscape:groupmode="layer">
      <g
         sodipodi:insensitive="true"
         inkscape:groupmode="layer"
         id="g4733"
         inkscape:label="bg"
         style="display:inline">
        <image
           sodipodi:absref="C:\Users\valued-customer\Desktop\VS_CODE\Qwixx\frontend\example\palette\color3.svg"
           xlink:href="../palette/color3.svg"
           style="display:inline"
           y="0"
           x="0"
           preserveAspectRatio="none"
           inkscape:svg-dpi="96"
           width="508"
           height="285.75"
           id="image4731"
           clip-path="url(#clipPath67-1)"
           transform="translate(269.68212,-5.4999516)" />
      </g>
      <g
         sodipodi:insensitive="true"
         style="display:inline"
         inkscape:groupmode="layer"
         id="g4747"
         inkscape:label="dots">
        <ellipse
           transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)"
           ry="17.683376"
           rx="13.125702"
           cx="344.99881"
           cy="37.024464"
           id="ellipse4735"
           style="display:inline;fill:#1a1a1a;stroke-width:5.49161" />
        <ellipse
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)"
           ry="12.955958"
           rx="16.314209"
           cy="371.44025"
           cx="470.28589"
           id="ellipse4737"
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393" />
        <ellipse
           transform="matrix(-0.56188005,0.82721872,0.81012107,0.58626261,0,0)"
           ry="17.764433"
           rx="6.5311246"
           cy="395.24789"
           cx="-200.54121"
           id="ellipse4739"
           style="display:inline;fill:#1a1a1a;stroke-width:9.15019" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:9.15019"
           id="ellipse4741"
           cx="-198.08272"
           cy="323.96573"
           rx="6.5311246"
           ry="17.764433"
           transform="matrix(-0.56188005,0.82721872,0.81012107,0.58626261,0,0)" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393"
           id="ellipse4743"
           cx="467.36121"
           cy="336.21796"
           rx="16.314209"
           ry="12.955959"
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
        <ellipse
           style="display:inline;fill:#1a1a1a;stroke-width:8.36393"
           id="ellipse4745"
           cx="461.7587"
           cy="302.79694"
           rx="16.314209"
           ry="12.955959"
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
      </g>
    </g>
    <g
       style="display:none"
       inkscape:label="mask"
       id="layer33"
       inkscape:groupmode="layer"
       sodipodi:insensitive="true">
      <path
         id="path5729"
         style="display:inline;opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:49.9999;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 163.12448,110.50652 c -20.81404,31.36411 -41.62814,62.72783 -62.44218,94.09195 21.14246,23.66263 42.28519,47.32537 63.42765,70.98796 l 72.76973,13.90716 c 20.81404,-31.36411 41.62814,-62.72834 62.44218,-94.09251 -21.14246,-23.66259 -42.28519,-47.32532 -63.42765,-70.98791 -24.25659,-4.63566 -48.51314,-9.27099 -72.76973,-13.90665 z" />
    </g>
    <g
       style="display:inline"
       inkscape:label="dice"
       id="layer35"
       inkscape:groupmode="layer"
       sodipodi:insensitive="true">
      <g
         sodipodi:type="inkscape:box3d"
         id="g2856"
         style="display:inline;fill:url(#meshgradient3465);fill-opacity:1;stroke-width:50"
         inkscape:perspectiveID="#perspective2405-9"
         inkscape:corner0="1.0871477 : 0.078002608 : 0 : 1"
         inkscape:corner7="0.86771512 : -0.27870894 : 0.23011852 : 1"
         inkscape:transform-center-x="-57.720495"
         inkscape:transform-center-y="33.351485">
        <path
           sodipodi:type="inkscape:box3dside"
           id="path2844"
           style="opacity:0;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
           inkscape:box3dsidetype="3"
           points="271.98537,97.607184 344.75515,111.51416 407.19729,17.421824 334.42751,3.5148489 "
           d="M 334.42751,3.5148489 271.98537,97.607184 344.75515,111.51416 407.19729,17.421824 Z" />
        <path
           sodipodi:type="inkscape:box3dside"
           id="path2846"
           style="opacity:0;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
           inkscape:box3dsidetype="14"
           points="344.75515,111.51416 408.18254,182.50193 335.41277,168.59496 271.98537,97.607184 "
           d="m 271.98537,97.607184 72.76978,13.906976 63.42739,70.98777 -72.76977,-13.90697 z" />
        <path
           sodipodi:type="inkscape:box3dside"
           id="path2848"
           style="opacity:0;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
           inkscape:box3dsidetype="13"
           points="344.75515,111.51416 408.18254,182.50193 470.62468,88.409598 407.19729,17.421824 "
           d="m 407.19729,17.421824 -62.44214,94.092336 63.42739,70.98777 62.44214,-94.092332 z" />
        <path
           sodipodi:type="inkscape:box3dside"
           id="path2850"
           style="opacity:0.2;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
           inkscape:box3dsidetype="5"
           points="271.98537,97.607184 335.41277,168.59496 397.85491,74.502623 334.42751,3.5148489 "
           d="m 334.42751,3.5148489 -62.44214,94.0923351 63.4274,70.987776 62.44214,-94.092337 z" />
        <path
           sodipodi:type="inkscape:box3dside"
           id="path2852"
           style="opacity:0.5;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
           inkscape:box3dsidetype="6"
           points="407.19729,17.421824 470.62468,88.409598 397.85491,74.502623 334.42751,3.5148489 "
           d="M 334.42751,3.5148489 407.19729,17.421824 470.62468,88.409598 397.85491,74.502623 Z" />
        <path
           sodipodi:type="inkscape:box3dside"
           id="path2854"
           style="opacity:0.05;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
           inkscape:box3dsidetype="11"
           points="335.41277,168.59496 408.18254,182.50193 470.62468,88.409598 397.85491,74.502623 "
           d="m 397.85491,74.502623 -62.44214,94.092337 72.76977,13.90697 62.44214,-94.092332 z" />
      </g>
    </g>
  </g>
  <g
     inkscape:label="base 1"
     id="layer2"
     inkscape:groupmode="layer"
     style="display:none"
     sodipodi:insensitive="true">
    <g
       inkscape:corner7="-0.009287638 : -0.23943041 : -0.19798685 : 1"
       inkscape:corner0="0.23544895 : -0.11297481 : 0 : 1"
       inkscape:perspectiveID="#perspective2405"
       style="opacity:0.6;fill:#000000"
       id="g100"
       sodipodi:type="inkscape:box3d">
      <path
         points="229.40524,372.27575 298.04929,371.50776 298.04929,299.3681 229.40524,300.13609 "
         d="m 229.40524,300.13609 v 72.13966 l 68.64405,-0.76799 0,-72.13966 z"
         inkscape:box3dsidetype="11"
         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
         id="path112"
         sodipodi:type="inkscape:box3dside" />
      <path
         points="301.90408,353.2652 298.04929,371.50776 298.04929,299.3681 301.90408,295.40824 "
         d="m 301.90408,295.40824 0,57.85696 -3.85479,18.24256 0,-72.13966 z"
         inkscape:box3dsidetype="13"
         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
         id="path110"
         sodipodi:type="inkscape:box3dside" />
      <path
         points="301.90408,295.40824 298.04929,299.3681 229.40524,300.13609 246.85065,296.02418 "
         d="m 246.85065,296.02418 55.05343,-0.61594 -3.85479,3.95986 -68.64405,0.76799 z"
         inkscape:box3dsidetype="6"
         style="opacity:0.5;fill:#ffff00;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
         id="path102"
         sodipodi:type="inkscape:box3dside" />
      <path
         points="246.85065,353.88114 229.40524,372.27575 229.40524,300.13609 246.85065,296.02418 "
         d="m 246.85065,296.02418 0,57.85696 -17.44541,18.39461 v -72.13966 z"
         inkscape:box3dsidetype="5"
         style="opacity:0;fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
         id="path104"
         sodipodi:type="inkscape:box3dside" />
      <path
         points="301.90408,353.2652 298.04929,371.50776 229.40524,372.27575 246.85065,353.88114 "
         d="m 246.85065,353.88114 55.05343,-0.61594 -3.85479,18.24256 -68.64405,0.76799 z"
         inkscape:box3dsidetype="14"
         style="opacity:0;fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
         id="path108"
         sodipodi:type="inkscape:box3dside" />
      <path
         points="246.85065,353.88114 301.90408,353.2652 301.90408,295.40824 246.85065,296.02418 "
         d="m 246.85065,296.02418 0,57.85696 55.05343,-0.61594 0,-57.85696 z"
         inkscape:box3dsidetype="3"
         style="opacity:0;fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
         id="path106"
         sodipodi:type="inkscape:box3dside" />
    </g>
    <path
       d="m 229.40523,303.10074 a 6.8343072,2.9646406 0 0 1 -6.71342,2.96418 6.8343072,2.9646406 0 0 1 -6.95092,-2.85932 l 6.83003,-0.10486 z"
       sodipodi:arc-type="slice"
       sodipodi:end="3.1062148"
       sodipodi:start="0"
       sodipodi:ry="2.9646406"
       sodipodi:rx="6.8343072"
       sodipodi:cy="303.10074"
       sodipodi:cx="222.57092"
       sodipodi:type="arc"
       id="path262"
       style="opacity:0;fill:#800000;stroke-width:0.264583" />
    <path
       d="m 215.29813,296.78403 a 0.21924452,0.65773362 0 0 1 -0.21536,0.65763 0.21924452,0.65773362 0 0 1 -0.22299,-0.63437 l 0.21911,-0.0233 z"
       sodipodi:arc-type="slice"
       sodipodi:end="3.1062148"
       sodipodi:start="0"
       sodipodi:ry="0.65773362"
       sodipodi:rx="0.21924452"
       sodipodi:cy="296.78403"
       sodipodi:cx="215.07889"
       sodipodi:type="arc"
       id="path264"
       style="opacity:0;fill:#800000;stroke-width:0.264583" />
    <ellipse
       ry="35.883022"
       rx="33.982903"
       cy="336.1019"
       cx="263.89734"
       id="path268"
       style="opacity:1;fill:#800000;stroke-width:0.773267" />
    <ellipse
       transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)"
       ry="22.670742"
       rx="20.907494"
       cy="2387.2815"
       cx="2654.0261"
       id="path270"
       style="opacity:1;fill:#800000;stroke-width:0.518127" />
    <ellipse
       style="opacity:1;fill:#800000;stroke-width:0.518128"
       id="path270-9"
       cx="2353.5027"
       cy="2682.9961"
       rx="20.907494"
       ry="22.670742"
       transform="matrix(0.05943278,-0.99823231,0.05970837,0.99821586,0,0)" />
    <g
       id="g249"
       transform="translate(-263.72916,16.029054)"
       style="display:inline">
      <g
         style="display:none"
         id="layer1"
         inkscape:label="base">
        <g
           inkscape:transform-center-y="33.351485"
           inkscape:transform-center-x="-57.720495"
           inkscape:corner7="0.57853176 : 0.15763317 : 0.23011852 : 1"
           inkscape:corner0="0.7979643 : 0.51434472 : 0 : 1"
           inkscape:perspectiveID="#perspective2405-9"
           style="fill:#b3b3b3;stroke-width:50"
           id="g2729"
           sodipodi:type="inkscape:box3d">
          <path
             points="100.68028,204.59704 173.45005,218.50402 235.89218,124.4117 163.12241,110.50472 "
             d="m 163.12241,110.50472 -62.44213,94.09232 72.76977,13.90698 62.44213,-94.09232 z"
             inkscape:box3dsidetype="3"
             style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
             id="path2735"
             sodipodi:type="inkscape:box3dside" />
          <path
             points="173.45005,218.50402 236.87745,289.49179 164.10767,275.58481 100.68028,204.59704 "
             d="m 100.68028,204.59704 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90698 z"
             inkscape:box3dsidetype="14"
             style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
             id="path2737"
             sodipodi:type="inkscape:box3dside" />
          <path
             points="173.45005,218.50402 236.87745,289.49179 299.31958,195.39947 235.89218,124.4117 "
             d="m 235.89218,124.4117 -62.44213,94.09232 63.4274,70.98777 62.44213,-94.09232 z"
             inkscape:box3dsidetype="13"
             style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
             id="path2739"
             sodipodi:type="inkscape:box3dside" />
          <path
             points="100.68028,204.59704 164.10767,275.58481 226.5498,181.4925 163.12241,110.50472 "
             d="m 163.12241,110.50472 -62.44213,94.09232 63.42739,70.98777 62.44213,-94.09231 z"
             inkscape:box3dsidetype="5"
             style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
             id="path2733"
             sodipodi:type="inkscape:box3dside" />
          <path
             points="235.89218,124.4117 299.31958,195.39947 226.5498,181.4925 163.12241,110.50472 "
             d="m 163.12241,110.50472 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90697 z"
             inkscape:box3dsidetype="6"
             style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
             id="path2731"
             sodipodi:type="inkscape:box3dside" />
          <path
             points="164.10767,275.58481 236.87745,289.49179 299.31958,195.39947 226.5498,181.4925 "
             d="m 226.5498,181.4925 -62.44213,94.09231 72.76978,13.90698 62.44213,-94.09232 z"
             inkscape:box3dsidetype="11"
             style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
             id="path2741"
             sodipodi:type="inkscape:box3dside" />
        </g>
        <ellipse
           transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)"
           ry="58.370235"
           rx="43.326023"
           cx="80.496796"
           cy="82.676537"
           id="path2837"
           style="fill:#b3b3b3;stroke-width:18.127" />
        <ellipse
           transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)"
           ry="42.078251"
           rx="52.985146"
           cy="205.23918"
           cx="159.82744"
           id="path2839"
           style="fill:#b3b3b3;stroke-width:27.1643" />
        <ellipse
           transform="matrix(-0.56188005,0.82721872,0.81012106,0.58626262,0,0)"
           ry="53.173599"
           rx="19.549366"
           cy="137.37201"
           cx="-36.575558"
           id="path2841"
           style="fill:#b3b3b3;stroke-width:27.3889" />
      </g>
    </g>
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer5"
     inkscape:label="variant 0 base 1"
     style="display:inline">
    <g
       sodipodi:insensitive="true"
       inkscape:label="color 0 and 1 dot"
       id="g4603"
       inkscape:groupmode="layer"
       style="display:none">
      <g
         sodipodi:insensitive="true"
         inkscape:label="bg"
         id="g4563"
         inkscape:groupmode="layer"
         style="display:inline">
        <image
           sodipodi:absref="C:\Users\valued-customer\Desktop\VS_CODE\Qwixx\frontend\example\palette\color0.svg"
           xlink:href="../palette/color0.svg"
           clip-path="url(#clipPath4509)"
           id="image4561"
           height="637.97656"
           width="855.26562"
           inkscape:svg-dpi="96"
           preserveAspectRatio="none"
           x="0"
           y="0" />
      </g>
      <g
         inkscape:label="dots"
         id="g4601"
         inkscape:groupmode="layer"
         style="display:inline">
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="277.77039"
           cx="67.744751"
           id="ellipse4565"
           style="opacity:1;fill:#000000;stroke-width:0.20157" />
        <ellipse
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)"
           ry="6.8381009"
           rx="6.3062582"
           cy="1991.7885"
           cx="2041.2469"
           id="ellipse4567"
           style="opacity:1;fill:#000000;stroke-width:0.156281" />
        <ellipse
           style="opacity:1;fill:#000000;stroke-width:0.149534"
           id="ellipse4569"
           cx="552.992"
           cy="808.27002"
           rx="6.0339532"
           ry="6.5429029"
           transform="matrix(0.07673711,-0.99705136,0.0770921,0.99702398,0,0)" />
        <g
           id="g4593"
           transform="translate(-263.72916,16.029054)"
           style="display:inline">
          <g
             style="display:none"
             id="g4591"
             inkscape:label="base">
            <g
               inkscape:transform-center-y="33.351485"
               inkscape:transform-center-x="-57.720495"
               inkscape:corner7="0.57853176 : 0.15763317 : 0.23011852 : 1"
               inkscape:corner0="0.7979643 : 0.51434472 : 0 : 1"
               inkscape:perspectiveID="#perspective2405-9"
               style="fill:#b3b3b3;stroke-width:50"
               id="g4583"
               sodipodi:type="inkscape:box3d">
              <path
                 points="100.68028,204.59704 173.45005,218.50402 235.89218,124.4117 163.12241,110.50472 "
                 d="m 163.12241,110.50472 -62.44213,94.09232 72.76977,13.90698 62.44213,-94.09232 z"
                 inkscape:box3dsidetype="3"
                 style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4571"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="173.45005,218.50402 236.87745,289.49179 164.10767,275.58481 100.68028,204.59704 "
                 d="m 100.68028,204.59704 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90698 z"
                 inkscape:box3dsidetype="14"
                 style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4573"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="173.45005,218.50402 236.87745,289.49179 299.31958,195.39947 235.89218,124.4117 "
                 d="m 235.89218,124.4117 -62.44213,94.09232 63.4274,70.98777 62.44213,-94.09232 z"
                 inkscape:box3dsidetype="13"
                 style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4575"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="100.68028,204.59704 164.10767,275.58481 226.5498,181.4925 163.12241,110.50472 "
                 d="m 163.12241,110.50472 -62.44213,94.09232 63.42739,70.98777 62.44213,-94.09231 z"
                 inkscape:box3dsidetype="5"
                 style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4577"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="235.89218,124.4117 299.31958,195.39947 226.5498,181.4925 163.12241,110.50472 "
                 d="m 163.12241,110.50472 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90697 z"
                 inkscape:box3dsidetype="6"
                 style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4579"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="164.10767,275.58481 236.87745,289.49179 299.31958,195.39947 226.5498,181.4925 "
                 d="m 226.5498,181.4925 -62.44213,94.09231 72.76978,13.90698 62.44213,-94.09232 z"
                 inkscape:box3dsidetype="11"
                 style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4581"
                 sodipodi:type="inkscape:box3dside" />
            </g>
            <ellipse
               transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)"
               ry="58.370235"
               rx="43.326023"
               cx="80.496796"
               cy="82.676537"
               id="ellipse4585"
               style="fill:#b3b3b3;stroke-width:18.127" />
            <ellipse
               transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)"
               ry="42.078251"
               rx="52.985146"
               cy="205.23918"
               cx="159.82744"
               id="ellipse4587"
               style="fill:#b3b3b3;stroke-width:27.1643" />
            <ellipse
               transform="matrix(-0.56188005,0.82721872,0.81012106,0.58626262,0,0)"
               ry="53.173599"
               rx="19.549366"
               cy="137.37201"
               cx="-36.575558"
               id="ellipse4589"
               style="fill:#b3b3b3;stroke-width:27.3889" />
          </g>
        </g>
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.156281"
           id="ellipse4595"
           cx="2045.7782"
           cy="1974.585"
           rx="6.3062582"
           ry="6.8381009"
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)" />
        <ellipse
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)"
           ry="6.8381009"
           rx="6.3062582"
           cy="1956.1146"
           cx="2049.4026"
           id="ellipse4597"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.156281" />
        <ellipse
           transform="matrix(0.08249062,-0.99659184,0.08287187,0.99656021,0,0)"
           ry="6.5459476"
           rx="6.0367355"
           cy="780.70953"
           cx="496.10257"
           id="ellipse4599"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.149603" />
      </g>
    </g>
    <g
       inkscape:groupmode="layer"
       id="layer9"
       inkscape:label="color 1 and 4 dots"
       style="display:inline"
       sodipodi:insensitive="true">
      <g
         style="display:none"
         inkscape:groupmode="layer"
         id="g4445"
         inkscape:label="bg"
         sodipodi:insensitive="true">
        <image
           sodipodi:absref="C:\Users\valued-customer\Desktop\VS_CODE\Qwixx\frontend\example\palette\color1.svg"
           xlink:href="../palette/color1.svg"
           y="0"
           x="0"
           preserveAspectRatio="none"
           inkscape:svg-dpi="96"
           width="855.26562"
           height="637.97656"
           id="image4473"
           clip-path="url(#clipPath4509)" />
      </g>
      <g
         inkscape:label="white"
         id="g329"
         inkscape:groupmode="layer"
         style="display:inline">
        <path
           id="path327"
           style="opacity:1;fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round"
           d="m 404.96289,893.44531 -208.07422,2.32813 -65.93555,15.54101 v 272.65435 l 259.44141,-2.9043 14.56836,-68.9473 z"
           transform="scale(0.26458333)" />
      </g>
      <g
         style="display:inline"
         inkscape:groupmode="layer"
         id="g4268"
         inkscape:label="dots"
         sodipodi:insensitive="true">
        <ellipse
           style="opacity:1;fill:#000000;stroke-width:0.20157"
           id="ellipse4238"
           cx="53.768993"
           cy="261.01755"
           rx="8.858448"
           ry="9.3537588" />
        <ellipse
           style="opacity:1;fill:#000000;stroke-width:0.156281"
           id="ellipse4240"
           cx="2041.2469"
           cy="1991.7885"
           rx="6.3062582"
           ry="6.8381009"
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)" />
        <ellipse
           transform="matrix(0.07673711,-0.99705136,0.0770921,0.99702398,0,0)"
           ry="6.5429029"
           rx="6.0339532"
           cy="808.27002"
           cx="552.992"
           id="ellipse4242"
           style="opacity:1;fill:#000000;stroke-width:0.149534" />
        <g
           style="display:inline"
           transform="translate(-263.72916,16.029054)"
           id="g4266">
          <g
             inkscape:label="base"
             id="g4264"
             style="display:none">
            <g
               sodipodi:type="inkscape:box3d"
               id="g4256"
               style="fill:#b3b3b3;stroke-width:50"
               inkscape:perspectiveID="#perspective2405-9"
               inkscape:corner0="0.7979643 : 0.51434472 : 0 : 1"
               inkscape:corner7="0.57853176 : 0.15763317 : 0.23011852 : 1"
               inkscape:transform-center-x="-57.720495"
               inkscape:transform-center-y="33.351485">
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4244"
                 style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="3"
                 d="m 163.12241,110.50472 -62.44213,94.09232 72.76977,13.90698 62.44213,-94.09232 z"
                 points="100.68028,204.59704 173.45005,218.50402 235.89218,124.4117 163.12241,110.50472 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4246"
                 style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="14"
                 d="m 100.68028,204.59704 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90698 z"
                 points="173.45005,218.50402 236.87745,289.49179 164.10767,275.58481 100.68028,204.59704 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4248"
                 style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="13"
                 d="m 235.89218,124.4117 -62.44213,94.09232 63.4274,70.98777 62.44213,-94.09232 z"
                 points="173.45005,218.50402 236.87745,289.49179 299.31958,195.39947 235.89218,124.4117 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4250"
                 style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="5"
                 d="m 163.12241,110.50472 -62.44213,94.09232 63.42739,70.98777 62.44213,-94.09231 z"
                 points="100.68028,204.59704 164.10767,275.58481 226.5498,181.4925 163.12241,110.50472 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4252"
                 style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="6"
                 d="m 163.12241,110.50472 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90697 z"
                 points="235.89218,124.4117 299.31958,195.39947 226.5498,181.4925 163.12241,110.50472 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4254"
                 style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="11"
                 d="m 226.5498,181.4925 -62.44213,94.09231 72.76978,13.90698 62.44213,-94.09232 z"
                 points="164.10767,275.58481 236.87745,289.49179 299.31958,195.39947 226.5498,181.4925 " />
            </g>
            <ellipse
               style="fill:#b3b3b3;stroke-width:18.127"
               id="ellipse4258"
               cy="82.676537"
               cx="80.496796"
               rx="43.326023"
               ry="58.370235"
               transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)" />
            <ellipse
               style="fill:#b3b3b3;stroke-width:27.1643"
               id="ellipse4260"
               cx="159.82744"
               cy="205.23918"
               rx="52.985146"
               ry="42.078251"
               transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
            <ellipse
               style="fill:#b3b3b3;stroke-width:27.3889"
               id="ellipse4262"
               cx="-36.575558"
               cy="137.37201"
               rx="19.549366"
               ry="53.173599"
               transform="matrix(-0.56188005,0.82721872,0.81012106,0.58626262,0,0)" />
          </g>
        </g>
        <ellipse
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)"
           ry="6.8381009"
           rx="6.3062582"
           cy="1974.585"
           cx="2045.7782"
           id="ellipse4240-1"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.156281" />
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.156281"
           id="ellipse4240-1-7"
           cx="2049.4026"
           cy="1956.1146"
           rx="6.3062582"
           ry="6.8381009"
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)" />
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.149603"
           id="ellipse4242-1"
           cx="496.10257"
           cy="780.70953"
           rx="6.0367355"
           ry="6.5459476"
           transform="matrix(0.08249062,-0.99659184,0.08287187,0.99656021,0,0)" />
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="261.01755"
           cx="85.18557"
           id="ellipse4238-4"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157" />
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="293.01755"
           cx="53.240978"
           id="ellipse4238-5"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157" />
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="293.01755"
           cx="85.18557"
           id="ellipse4238-44"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157" />
      </g>
    </g>
    <g
       style="display:none"
       inkscape:label="color 2 and 5 dots"
       id="g4661"
       inkscape:groupmode="layer"
       sodipodi:insensitive="true">
      <g
         inkscape:label="bg"
         id="g4621"
         inkscape:groupmode="layer"
         style="display:inline"
         sodipodi:insensitive="true">
        <image
           sodipodi:absref="C:\Users\valued-customer\Desktop\VS_CODE\Qwixx\frontend\example\palette\color2.svg"
           xlink:href="../palette/color2.svg"
           clip-path="url(#clipPath4509)"
           id="image4619"
           height="637.97656"
           width="855.26562"
           inkscape:svg-dpi="96"
           preserveAspectRatio="none"
           x="0"
           y="0" />
      </g>
      <g
         inkscape:label="dots"
         id="g4659"
         inkscape:groupmode="layer"
         style="display:inline"
         sodipodi:insensitive="true">
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="277.77039"
           cx="67.744751"
           id="ellipse4623"
           style="opacity:1;fill:#000000;stroke-width:0.20157" />
        <ellipse
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)"
           ry="6.8381009"
           rx="6.3062582"
           cy="1991.7885"
           cx="2041.2469"
           id="ellipse4625"
           style="opacity:1;fill:#000000;stroke-width:0.156281" />
        <ellipse
           style="opacity:1;fill:#000000;stroke-width:0.149534"
           id="ellipse4627"
           cx="552.992"
           cy="808.27002"
           rx="6.0339532"
           ry="6.5429029"
           transform="matrix(0.07673711,-0.99705136,0.0770921,0.99702398,0,0)" />
        <g
           id="g4651"
           transform="translate(-263.72916,16.029054)"
           style="display:inline">
          <g
             style="display:none"
             id="g4649"
             inkscape:label="base">
            <g
               inkscape:transform-center-y="33.351485"
               inkscape:transform-center-x="-57.720495"
               inkscape:corner7="0.57853176 : 0.15763317 : 0.23011852 : 1"
               inkscape:corner0="0.7979643 : 0.51434472 : 0 : 1"
               inkscape:perspectiveID="#perspective2405-9"
               style="fill:#b3b3b3;stroke-width:50"
               id="g4641"
               sodipodi:type="inkscape:box3d">
              <path
                 points="100.68028,204.59704 173.45005,218.50402 235.89218,124.4117 163.12241,110.50472 "
                 d="m 163.12241,110.50472 -62.44213,94.09232 72.76977,13.90698 62.44213,-94.09232 z"
                 inkscape:box3dsidetype="3"
                 style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4629"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="173.45005,218.50402 236.87745,289.49179 164.10767,275.58481 100.68028,204.59704 "
                 d="m 100.68028,204.59704 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90698 z"
                 inkscape:box3dsidetype="14"
                 style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4631"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="173.45005,218.50402 236.87745,289.49179 299.31958,195.39947 235.89218,124.4117 "
                 d="m 235.89218,124.4117 -62.44213,94.09232 63.4274,70.98777 62.44213,-94.09232 z"
                 inkscape:box3dsidetype="13"
                 style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4633"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="100.68028,204.59704 164.10767,275.58481 226.5498,181.4925 163.12241,110.50472 "
                 d="m 163.12241,110.50472 -62.44213,94.09232 63.42739,70.98777 62.44213,-94.09231 z"
                 inkscape:box3dsidetype="5"
                 style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4635"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="235.89218,124.4117 299.31958,195.39947 226.5498,181.4925 163.12241,110.50472 "
                 d="m 163.12241,110.50472 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90697 z"
                 inkscape:box3dsidetype="6"
                 style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4637"
                 sodipodi:type="inkscape:box3dside" />
              <path
                 points="164.10767,275.58481 236.87745,289.49179 299.31958,195.39947 226.5498,181.4925 "
                 d="m 226.5498,181.4925 -62.44213,94.09231 72.76978,13.90698 62.44213,-94.09232 z"
                 inkscape:box3dsidetype="11"
                 style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 id="path4639"
                 sodipodi:type="inkscape:box3dside" />
            </g>
            <ellipse
               transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)"
               ry="58.370235"
               rx="43.326023"
               cx="80.496796"
               cy="82.676537"
               id="ellipse4643"
               style="fill:#b3b3b3;stroke-width:18.127" />
            <ellipse
               transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)"
               ry="42.078251"
               rx="52.985146"
               cy="205.23918"
               cx="159.82744"
               id="ellipse4645"
               style="fill:#b3b3b3;stroke-width:27.1643" />
            <ellipse
               transform="matrix(-0.56188005,0.82721872,0.81012106,0.58626262,0,0)"
               ry="53.173599"
               rx="19.549366"
               cy="137.37201"
               cx="-36.575558"
               id="ellipse4647"
               style="fill:#b3b3b3;stroke-width:27.3889" />
          </g>
        </g>
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.156281"
           id="ellipse4653"
           cx="2045.7782"
           cy="1974.585"
           rx="6.3062582"
           ry="6.8381009"
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)" />
        <ellipse
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)"
           ry="6.8381009"
           rx="6.3062582"
           cy="1956.1146"
           cx="2049.4026"
           id="ellipse4655"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.156281" />
        <ellipse
           transform="matrix(0.08249062,-0.99659184,0.08287187,0.99656021,0,0)"
           ry="6.5459476"
           rx="6.0367355"
           cy="780.70953"
           cx="496.10257"
           id="ellipse4657"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.149603" />
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157"
           id="ellipse4623-1"
           cx="48.998341"
           cy="257.01581"
           rx="8.858448"
           ry="9.3537588" />
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157"
           id="ellipse4623-9"
           cx="86.932533"
           cy="257.51495"
           rx="8.858448"
           ry="9.3537588" />
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="297.3176"
           cx="86.756432"
           id="ellipse4623-9-8"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157" />
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="298.48224"
           cx="48.988605"
           id="ellipse4623-1-2"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157" />
      </g>
    </g>
    <g
       inkscape:groupmode="layer"
       id="g4711"
       inkscape:label="color 3 and 6 dots"
       style="display:none">
      <g
         style="display:inline"
         inkscape:groupmode="layer"
         id="g4671"
         inkscape:label="bg"
         sodipodi:insensitive="true">
        <image
           sodipodi:absref="C:\Users\valued-customer\Desktop\VS_CODE\Qwixx\frontend\example\palette\color3.svg"
           xlink:href="../palette/color3.svg"
           y="0"
           x="0"
           preserveAspectRatio="none"
           inkscape:svg-dpi="96"
           width="855.26562"
           height="637.97656"
           id="image4669"
           clip-path="url(#clipPath4509)"
           transform="translate(-3e-5,2.21e-4)" />
      </g>
      <g
         style="display:inline"
         inkscape:groupmode="layer"
         id="g323"
         inkscape:label="white">
        <path
           transform="scale(0.26458333)"
           d="m 404.96289,893.44531 -208.07422,2.32813 -65.93555,15.54101 v 272.65435 l 259.44141,-2.9043 14.56836,-68.9473 z"
           style="opacity:1;fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round"
           id="path321" />
      </g>
      <g
         style="display:inline"
         inkscape:groupmode="layer"
         id="g4709"
         inkscape:label="dots"
         sodipodi:insensitive="true">
        <ellipse
           style="opacity:1;fill:#000000;stroke-width:0.20157"
           id="ellipse4673"
           cx="53.858448"
           cy="256.35376"
           rx="8.858448"
           ry="9.3537588" />
        <ellipse
           style="opacity:1;fill:#000000;stroke-width:0.156281"
           id="ellipse4675"
           cx="2041.2469"
           cy="1991.7885"
           rx="6.3062582"
           ry="6.8381009"
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)" />
        <ellipse
           transform="matrix(0.07673711,-0.99705136,0.0770921,0.99702398,0,0)"
           ry="6.5429029"
           rx="6.0339532"
           cy="808.27002"
           cx="552.992"
           id="ellipse4677"
           style="opacity:1;fill:#000000;stroke-width:0.149534" />
        <g
           style="display:inline"
           transform="translate(-263.72916,16.029054)"
           id="g4701">
          <g
             inkscape:label="base"
             id="g4699"
             style="display:none">
            <g
               sodipodi:type="inkscape:box3d"
               id="g4691"
               style="fill:#b3b3b3;stroke-width:50"
               inkscape:perspectiveID="#perspective2405-9"
               inkscape:corner0="0.7979643 : 0.51434472 : 0 : 1"
               inkscape:corner7="0.57853176 : 0.15763317 : 0.23011852 : 1"
               inkscape:transform-center-x="-57.720495"
               inkscape:transform-center-y="33.351485">
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4679"
                 style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="3"
                 d="m 163.12241,110.50472 -62.44213,94.09232 72.76977,13.90698 62.44213,-94.09232 z"
                 points="100.68028,204.59704 173.45005,218.50402 235.89218,124.4117 163.12241,110.50472 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4681"
                 style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="14"
                 d="m 100.68028,204.59704 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90698 z"
                 points="173.45005,218.50402 236.87745,289.49179 164.10767,275.58481 100.68028,204.59704 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4683"
                 style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="13"
                 d="m 235.89218,124.4117 -62.44213,94.09232 63.4274,70.98777 62.44213,-94.09232 z"
                 points="173.45005,218.50402 236.87745,289.49179 299.31958,195.39947 235.89218,124.4117 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4685"
                 style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="5"
                 d="m 163.12241,110.50472 -62.44213,94.09232 63.42739,70.98777 62.44213,-94.09231 z"
                 points="100.68028,204.59704 164.10767,275.58481 226.5498,181.4925 163.12241,110.50472 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4687"
                 style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="6"
                 d="m 163.12241,110.50472 72.76977,13.90698 63.4274,70.98777 -72.76978,-13.90697 z"
                 points="235.89218,124.4117 299.31958,195.39947 226.5498,181.4925 163.12241,110.50472 " />
              <path
                 sodipodi:type="inkscape:box3dside"
                 id="path4689"
                 style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:40.5754;stroke-linejoin:round"
                 inkscape:box3dsidetype="11"
                 d="m 226.5498,181.4925 -62.44213,94.09231 72.76978,13.90698 62.44213,-94.09232 z"
                 points="164.10767,275.58481 236.87745,289.49179 299.31958,195.39947 226.5498,181.4925 " />
            </g>
            <ellipse
               style="fill:#b3b3b3;stroke-width:18.127"
               id="ellipse4693"
               cy="82.676537"
               cx="80.496796"
               rx="43.326023"
               ry="58.370235"
               transform="matrix(0.99044852,0.13788305,-0.17420632,0.98470917,0,0)" />
            <ellipse
               style="fill:#b3b3b3;stroke-width:27.1643"
               id="ellipse4695"
               cx="159.82744"
               cy="205.23918"
               rx="52.985146"
               ry="42.078251"
               transform="matrix(0.8963873,-0.44327172,-0.0457121,0.99895466,0,0)" />
            <ellipse
               style="fill:#b3b3b3;stroke-width:27.3889"
               id="ellipse4697"
               cx="-36.575558"
               cy="137.37201"
               rx="19.549366"
               ry="53.173599"
               transform="matrix(-0.56188005,0.82721872,0.81012106,0.58626262,0,0)" />
          </g>
        </g>
        <ellipse
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)"
           ry="6.8381009"
           rx="6.3062582"
           cy="1974.585"
           cx="2045.7782"
           id="ellipse4703"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.156281" />
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.156281"
           id="ellipse4705"
           cx="2049.4026"
           cy="1956.1146"
           rx="6.3062582"
           ry="6.8381009"
           transform="matrix(0.99874704,0.05004342,-0.99761027,0.06909231,0,0)" />
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.149603"
           id="ellipse4707"
           cx="496.10257"
           cy="780.70953"
           rx="6.0367355"
           ry="6.5459476"
           transform="matrix(0.08249062,-0.99659184,0.08287187,0.99656021,0,0)" />
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="256.35376"
           cx="83.858444"
           id="ellipse4673-9"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157" />
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="278.35376"
           cx="53.858448"
           id="ellipse4673-1"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157" />
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157"
           id="ellipse4673-9-5"
           cx="83.858452"
           cy="278.35376"
           rx="8.858448"
           ry="9.3537588" />
        <ellipse
           ry="9.3537588"
           rx="8.858448"
           cy="300.35376"
           cx="53.858448"
           id="ellipse4673-3"
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157" />
        <ellipse
           style="display:inline;opacity:1;fill:#000000;stroke-width:0.20157"
           id="ellipse4673-9-8"
           cx="83.858452"
           cy="300.35376"
           rx="8.858448"
           ry="9.3537588" />
      </g>
    </g>
    <g
       inkscape:label="mask"
       id="g4410"
       inkscape:groupmode="layer"
       style="display:none">
      <path
         id="path4396"
         style="opacity:1;fill:#ff0000;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-linejoin:round"
         d="m 404.96289,893.44531 -208.07422,2.32813 -65.93555,15.54101 v 272.65435 l 259.44141,-2.9043 14.56836,-68.9473 z"
         transform="scale(0.26458333)" />
    </g>
    <g
       style="display:none"
       inkscape:groupmode="layer"
       id="g4423"
       inkscape:label="outset"
       sodipodi:insensitive="true">
      <path
         id="path4421"
         style="opacity:1;fill:#0000ff;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linejoin:round"
         d="m 106.82227,235.33594 c -18.281036,0.21185 -36.563814,0.39556 -54.843754,0.625 -5.86427,1.34491 -11.713656,2.75663 -17.572266,4.12695 -0.733962,0.23931 -0.908655,1.02911 -0.818952,1.71562 0.0059,23.81808 8.48e-4,47.6362 0.0025,71.4543 0.05793,0.78403 0.855875,1.18829 1.574987,1.0544 22.712635,-0.25446 45.425269,-0.50892 68.137895,-0.76338 0.7086,-0.0756 1.10818,-0.72268 1.14339,-1.39283 1.24249,-5.94258 2.52128,-11.87915 3.74919,-17.82397 0.0229,-19.31373 0.003,-38.62761 0.01,-57.94141 -0.0754,-0.70446 -0.68626,-1.14623 -1.38281,-1.05468 z" />
    </g>
    <g
       inkscape:label="border"
       id="g4433"
       inkscape:groupmode="layer"
       style="display:none"
       sodipodi:insensitive="true">
      <path
         d="m 106.82227,235.33594 c -18.281036,0.21185 -36.563814,0.39556 -54.843754,0.625 -5.86427,1.34491 -11.713656,2.75663 -17.572266,4.12695 -0.733962,0.23931 -0.908655,1.02911 -0.818952,1.71562 0.0059,23.81808 8.48e-4,47.6362 0.0025,71.4543 0.05793,0.78403 0.855875,1.18829 1.574987,1.0544 22.712635,-0.25446 45.425269,-0.50892 68.137895,-0.76338 0.7086,-0.0756 1.10818,-0.72268 1.14339,-1.39283 1.24249,-5.94258 2.52128,-11.87915 3.74919,-17.82397 0.0229,-19.31373 0.003,-38.62761 0.01,-57.94141 -0.0754,-0.70446 -0.68626,-1.14623 -1.38281,-1.05468 z"
         style="opacity:1;fill:#0000ff;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linejoin:round"
         id="path4429"
         clip-path="url(#clipPath4435)"
         inkscape:path-effect="#path-effect4439"
         inkscape:original-d="m 106.82227,235.33594 c -18.281036,0.21185 -36.563814,0.39556 -54.843754,0.625 -5.86427,1.34491 -11.713656,2.75663 -17.572266,4.12695 -0.733962,0.23931 -0.908655,1.02911 -0.818952,1.71562 0.0059,23.81808 8.48e-4,47.6362 0.0025,71.4543 0.05793,0.78403 0.855875,1.18829 1.574987,1.0544 22.712635,-0.25446 45.425269,-0.50892 68.137895,-0.76338 0.7086,-0.0756 1.10818,-0.72268 1.14339,-1.39283 1.24249,-5.94258 2.52128,-11.87915 3.74919,-17.82397 0.0229,-19.31373 0.003,-38.62761 0.01,-57.94141 -0.0754,-0.70446 -0.68626,-1.14623 -1.38281,-1.05468 z" />
    </g>
    <g
       sodipodi:insensitive="true"
       inkscape:groupmode="layer"
       id="layer8"
       inkscape:label="dice"
       style="display:inline">
      <g
         id="g4232"
         style="display:inline;opacity:0.6;fill:#000000"
         transform="translate(-194.75743,-59.017559)">
        <path
           d="m 229.40524,300.13609 v 72.13966 l 68.64405,-0.76799 V 299.3681 Z"
           style="opacity:0.05;fill:#000000;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
           id="path4306" />
        <path
           d="m 301.90408,295.40824 v 57.85696 l -3.85479,18.24256 V 299.3681 Z"
           style="opacity:0.85;fill:#000000;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
           id="path4308" />
        <path
           d="m 246.85065,296.02418 55.05343,-0.61594 -3.85479,3.95986 -68.64405,0.76799 z"
           style="opacity:0.55;fill:#000000;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
           id="path4310" />
        <path
           d="m 246.85065,296.02418 v 57.85696 l -17.44541,18.39461 v -72.13966 z"
           style="opacity:0;fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
           id="path4312" />
        <path
           d="m 246.85065,353.88114 55.05343,-0.61594 -3.85479,18.24256 -68.64405,0.76799 z"
           style="opacity:0;fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
           id="path4314" />
        <path
           d="m 246.85065,296.02418 v 57.85696 l 55.05343,-0.61594 v -57.85696 z"
           style="opacity:0;fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
           id="path4316" />
      </g>
    </g>
  </g>
  <script
     type="text/javascript"
     id="mesh_polyfill">
!function(){const t=&quot;http://www.w3.org/2000/svg&quot;,e=&quot;http://www.w3.org/1999/xlink&quot;,s=&quot;http://www.w3.org/1999/xhtml&quot;,r=2;if(document.createElementNS(t,&quot;meshgradient&quot;).x)return;const n=(t,e,s,r)=&gt;{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=&gt;{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e&gt;s?e:s,i=r&gt;n?r:n;return 18*(o&gt;i?o:i)},i=(t,e)=&gt;Math.sqrt(t.distSquared(e)),a=(t,e)=&gt;t.scale(2/3).add(e.scale(1/3)),h=t=&gt;{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=&gt;{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case&quot;translate&quot;:2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error(&quot;mesh.js: translate does not have 2 arguments!&quot;),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case&quot;scale&quot;:1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error(&quot;mesh.js: scale does not have 1 or 2 arguments!&quot;),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case&quot;rotate&quot;:if(3===l.length&amp;&amp;(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)&lt;1e-16&amp;&amp;(t=0),Math.abs(e)&lt;1e-16&amp;&amp;(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error(&quot;math.js: No argument to rotate transform!&quot;);3===l.length&amp;&amp;(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case&quot;skewX&quot;:l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error(&quot;math.js: No argument to skewX transform!&quot;);break;case&quot;skewY&quot;:l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error(&quot;math.js: No argument to skewY transform!&quot;);break;case&quot;matrix&quot;:6===l.length?h=h.append(new g(...l)):console.error(&quot;math.js: Incorrect number of arguments for matrix!&quot;);break;default:console.error(&quot;mesh.js: Unhandled transform type: &quot;+d)}}),h},l=t=&gt;{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t&lt;r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=&gt;{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=&gt;{let o,i,a=[0,0,0,0];for(let h=0;h&lt;3;++h)e[h]&lt;t[h]&amp;&amp;e[h]&lt;s[h]||t[h]&lt;e[h]&amp;&amp;s[h]&lt;e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]&gt;o?a[h]=o:a[h]&gt;i&amp;&amp;(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=&gt;{let e=[];for(let s=0;s&lt;16;++s){e[s]=0;for(let r=0;r&lt;16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=&gt;{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=&gt;{let e=[],s=[],r=[];for(let s=0;s&lt;4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t&lt;8;++t){s[t]=[];for(let r=0;r&lt;4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t&lt;8;++t){r[t]=[];for(let e=0;e&lt;8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n       ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error(&quot;mesh.js: argument to Affine.append is not affine!&quot;);let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)&gt;r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t&lt;4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s&gt;=0&amp;&amp;s&lt;e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s&lt;4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t&lt;4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t&lt;4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))&gt;r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute(&quot;type&quot;)||&quot;bilinear&quot;}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute(&quot;x&quot;)),n=Number(t.getAttribute(&quot;y&quot;));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t&lt;r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n&lt;o;++n){let o=r[n].children;for(let r=0,i=o.length;r&lt;i;++r){let i=r;0!==t&amp;&amp;++i;let h,d=o[r].getAttribute(&quot;path&quot;),c=&quot;l&quot;;null!=d&amp;&amp;(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case&quot;l&quot;:0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&amp;&amp;(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case&quot;L&quot;:0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&amp;&amp;(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case&quot;c&quot;:0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&amp;&amp;(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case&quot;C&quot;:0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&amp;&amp;(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error(&quot;mesh.js: &quot;+c+&quot; invalid path type.&quot;)}if(0===t&amp;&amp;0===n||r&gt;0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&amp;&amp;(h=Math.floor(255*a)),e&amp;&amp;(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&amp;&amp;(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if(&quot;bilinear&quot;===this.type||s&lt;2||r&lt;2){let n;for(let o=0;o&lt;s;++o)for(let s=0;s&lt;r;++s){let r=[];for(let t=3*o,e=3*o+4;t&lt;e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t&lt;s;++t){w[t]=new Array(r);for(let e=0;e&lt;r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t&lt;s;++t)for(let e=0;e&lt;r;++e)0!==t&amp;&amp;t!==x&amp;&amp;(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&amp;&amp;e!==g&amp;&amp;(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t&lt;r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e&lt;4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n&gt;0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o&gt;0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t&lt;s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e&lt;4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n&gt;0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o&gt;0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s&lt;x;++s)for(let r=0;r&lt;g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t&lt;4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e&lt;9;++e){g[t][e]=[];for(let s=0;s&lt;9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]&gt;255?g[t][e][s]=255:g[t][e][s]&lt;0&amp;&amp;(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t&lt;e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s&lt;8;++s)for(let r=0;r&lt;8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e&lt;s;++e)for(let s=0,r=this.nodes[0].length;s&lt;r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e&lt;s;++e)for(let s=0,r=this.nodes[0].length;s&lt;r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e&lt;s;++e)for(let s=0,r=this.nodes[0].length;s&lt;r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll(&quot;rect,circle,ellipse,path,text&quot;).forEach((r,n)=&gt;{let o=r.getAttribute(&quot;id&quot;);o||(o=&quot;patchjs_shape&quot;+n,r.setAttribute(&quot;id&quot;,o));const i=r.style.fill.match(/^url\(\s*&quot;?\s*#([^\s&quot;]+)&quot;?\s*\)/),a=r.style.stroke.match(/^url\(\s*&quot;?\s*#([^\s&quot;]+)&quot;?\s*\)/);if(i&amp;&amp;i[1]){const a=document.getElementById(i[1]);if(a&amp;&amp;&quot;meshgradient&quot;===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,&quot;canvas&quot;);d(l,{width:i.width,height:i.height});const c=l.getContext(&quot;2d&quot;);let u=c.createImageData(i.width,i.height);const f=new b(a);&quot;objectBoundingBox&quot;===a.getAttribute(&quot;gradientUnits&quot;)&amp;&amp;f.scale(new x(i.width,i.height));const p=a.getAttribute(&quot;gradientTransform&quot;);null!=p&amp;&amp;f.transform(h(p)),&quot;userSpaceOnUse&quot;===a.getAttribute(&quot;gradientUnits&quot;)&amp;&amp;f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,&quot;image&quot;);d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,&quot;xlink:href&quot;,g),r.parentNode.insertBefore(y,r),r.style.fill=&quot;none&quot;;const w=document.createElementNS(t,&quot;use&quot;);w.setAttributeNS(e,&quot;xlink:href&quot;,&quot;#&quot;+o);const m=&quot;patchjs_clip&quot;+n,M=document.createElementNS(t,&quot;clipPath&quot;);M.setAttribute(&quot;id&quot;,m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute(&quot;clip-path&quot;,&quot;url(#&quot;+m+&quot;)&quot;),u=null,l=null,g=null}}if(a&amp;&amp;a[1]){const o=document.getElementById(a[1]);if(o&amp;&amp;&quot;meshgradient&quot;===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute(&quot;stroke-miterlimit&quot;))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,&quot;canvas&quot;);d(p,{width:l,height:c});const y=p.getContext(&quot;2d&quot;);let g=y.createImageData(l,c);const w=new b(o);&quot;objectBoundingBox&quot;===o.getAttribute(&quot;gradientUnits&quot;)&amp;&amp;w.scale(new x(l,c));const m=o.getAttribute(&quot;gradientTransform&quot;);null!=m&amp;&amp;w.transform(h(m)),&quot;userSpaceOnUse&quot;===o.getAttribute(&quot;gradientUnits&quot;)&amp;&amp;w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,&quot;image&quot;);d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,&quot;xlink:href&quot;,S);const k=&quot;pattern_clip&quot;+n,A=document.createElementNS(t,&quot;pattern&quot;);d(A,{id:k,patternUnits:&quot;userSpaceOnUse&quot;,width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke=&quot;url(#&quot;+k+&quot;)&quot;,g=null,p=null,S=null}}})}();
</script>
</svg>