airboardgame/src/gameComponents/Jewel.jsx

import React, { memo } from "react";
import { lighten } from "color2k";

const Token = ({ size = 50, color = "#b3b3b3" }) => {
  const colorLighten = lighten(color, 0.8);
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      viewBox="2.5 2.5 8.5 8.5"
      height={size}
      width={size}
    >
      <defs id="defs3685">
        <radialGradient
          r="1.0880001"
          cy="475.54001"
          cx="380.53"
          gradientTransform="matrix(1.8393294,0.00469212,-0.00492122,2.3353478,-661.56887,-1111.6718)"
          gradientUnits="userSpaceOnUse"
          id="radialGradient3015"
          xlinkHref="#radialGradient4076"
        />
        <radialGradient
          id="radialGradient4076"
          gradientUnits="userSpaceOnUse"
          cy="475.54001"
          cx="380.53"
          gradientTransform="matrix(1.8393294,0.00469212,-0.00492122,2.3353478,-661.56887,-1111.6718)"
          r="1.0880001"
        >
          <stop id="stop6498" style={{ stopColor: colorLighten }} offset="0" />
          <stop id="stop6500" style={{ stopColor: color }} offset="1" />
        </radialGradient>
        <linearGradient
          id="linearGradient4078"
          y2="202.36"
          xlinkHref="#linearGradient3136"
          gradientUnits="userSpaceOnUse"
          x2="216.73"
          gradientTransform="matrix(0.00385777,0.00311843,-0.00283191,0.00424809,35.667375,-2.5714022)"
          y1="1019.8"
          x1="986.21997"
        />
        <linearGradient id="linearGradient3136">
          <stop id="stop3138" style={{ stopColor: "#ffffff" }} offset="0" />
          <stop
            id="stop3140"
            style={{ stopColor: "#ffffff", stopOpacity: 0 }}
            offset="1"
          />
        </linearGradient>
        <linearGradient
          id="linearGradient4080"
          y2="529.76001"
          xlinkHref="#linearGradient3136"
          gradientUnits="userSpaceOnUse"
          x2="532.85999"
          gradientTransform="matrix(0.00349882,0.00282831,-0.00256844,0.00385282,35.678605,-2.3314541)"
          y1="69.929001"
          x1="221.35001"
        />
        <linearGradient
          id="linearGradient4082"
          y2="175.06"
          xlinkHref="#linearGradient3136"
          gradientUnits="userSpaceOnUse"
          x2="158.99001"
          gradientTransform="matrix(0.0458054,0.0172213,-0.01563899,0.05043988,29.51956,-10.705203)"
          y1="135.85001"
          x1="158.99001"
        />
        <linearGradient
          id="linearGradient4084"
          y2="175.06"
          xlinkHref="#linearGradient3136"
          gradientUnits="userSpaceOnUse"
          x2="158.99001"
          gradientTransform="matrix(-0.04579635,0.01724993,0.01566499,0.05042991,42.371555,-10.799952)"
          y1="138.49001"
          x1="158.83"
        />
        <filter id="filter6492" style={{ colorInterpolationFilters: "sRGB" }}>
          <feGaussianBlur id="feGaussianBlur6494" stdDeviation="0.043946149" />
        </filter>
        <linearGradient
          id="linearGradient4086"
          y2="152.28999"
          xlinkHref="#linearGradient3136"
          gradientUnits="userSpaceOnUse"
          x2="181.50999"
          gradientTransform="matrix(-0.01563899,0.05043988,-0.0458054,-0.0172213,45.640205,-7.1194999)"
          y1="156.59"
          x1="165.82001"
        />
        <linearGradient
          id="linearGradient4088"
          y2="175.06"
          xlinkHref="#linearGradient3136"
          gradientUnits="userSpaceOnUse"
          x2="158.99001"
          gradientTransform="matrix(0.02910292,-0.04258689,0.03867396,0.03204748,24.41571,3.5467109)"
          y1="127.12"
          x1="159.77"
        />
        <linearGradient
          id="linearGradient4090"
          y2="175.59"
          xlinkHref="#linearGradient3136"
          gradientUnits="userSpaceOnUse"
          x2="156.44"
          gradientTransform="matrix(6.2504071e-4,-0.05329363,-0.04839695,-6.8828031e-4,44.728044,10.735592)"
          y1="143.06"
          x1="179.50999"
        />
      </defs>
      <g transform="translate(0,-283.77082)" id="layer1">
        <g
          transform="matrix(1.6555981,0,0,1.6361873,-52.480585,288.99102)"
          id="g2969"
        >
          <path
            d="m 35.807852,3.3274129 -2.305335,-1.8494935 0.884886,-2.9858606 2.852233,0.00413 0.877876,2.988332 -2.309776,1.8429199 z"
            style={{
              opacity: 0.85,
              fill: color,
            }}
            id="path3558"
          />
          <path
            d="m 35.970531,1.9742201 -1.446237,-1.16032486 0.554734,-1.87339284 1.789436,0.0026 0.550693,1.87482594 -1.449067,1.15612596 z"
            style={{
              opacity: 0.65,
              fill: "url(#linearGradient4078)",
            }}
            id="path3560"
          />
          <path
            d="m 34.639699,0.74312174 0.503823,-1.69883754 1.622922,0.002369 0.499477,1.70039214 c -0.679782,0.175614 -0.668071,-0.2508661 -1.200182,-0.4875302 -0.53213,-0.2366006 -0.958557,0.1820903 -1.426058,0.4834583 z"
            style={{ opacity: 0.65, fill: "url(#linearGradient4080)" }}
            id="path3562"
          />
          <path
            d="m 34.468019,-1.3958118 0.553758,0.368724 -0.555675,1.83362524 -0.825385,0.55291086 c 0.170208,-0.61800926 0.790241,-2.6329677 0.826733,-2.7554974 z"
            style={{
              opacity: 0.65,
              fill: "url(#linearGradient4082)",
            }}
            id="path3564"
          />
          <path
            d="m 37.216108,-1.3526704 -0.2503,0.2873943 0.526407,1.89702324 0.52647,0.53136936 z"
            style={{ opacity: 0.65, fill: "url(#linearGradient4084)" }}
            id="path3566"
          />
          <path
            transform="matrix(1.3480117,0.50680741,-0.46024138,1.4844,-312.56644,-608.10608)"
            style={{
              opacity: 0.93,
              fill: "#ffffff",
              filter: "url(#filter6492)",
            }}
            d="m 356.48,289.56 c -0.51417,-0.15953 -0.93591,-0.29111 -0.9372,-0.29241 -0.003,-0.002 -0.0289,-1.8607 -0.0273,-1.9258 l 9.2e-4,-0.0387 0.92775,-0.31547 c 0.8661,-0.2945 0.92816,-0.31503 0.93418,-0.30892 0.005,0.005 0.7695,1.027 1.0882,1.4547 l 0.0836,0.11222 -0.56317,0.79794 c -0.30975,0.43886 -0.5652,0.79986 -0.56766,0.80222 -0.003,0.003 -0.25515,-0.0735 -0.93932,-0.28576 z m 0.85464,0.23362 c -5.7e-4,-0.0271 -0.0811,-0.71259 -0.084,-0.71529 -0.005,-0.005 -1.2245,-0.37613 -1.2306,-0.37473 -0.006,0.001 -0.44059,0.54598 -0.43808,0.54849 0.002,0.002 1.742,0.54775 1.7479,0.54809 0.003,1.5e-4 0.005,-0.003 0.005,-0.007 z m 0.62123,-0.75924 c 0.29542,-0.4126 0.5384,-0.75248 0.53998,-0.75528 0.002,-0.004 -0.0619,-0.0357 -0.24185,-0.12091 -0.1346,-0.0637 -0.24596,-0.11444 -0.24748,-0.11275 -0.002,0.002 -0.15441,0.22279 -0.3398,0.49135 -0.18538,0.26855 -0.34204,0.49531 -0.34813,0.5039 l -0.0111,0.0156 0.0527,0.36046 c 0.029,0.19826 0.0527,0.36217 0.0527,0.36426 0,0.002 10e-4,0.004 0.003,0.004 0.002,-7e-5 0.24463,-0.33771 0.54004,-0.75032 z m -2.1679,-0.11478 0.21531,-0.25781 -0.003,-0.4961 c -0.002,-0.27285 -0.004,-0.55132 -0.005,-0.61882 l -0.002,-0.12273 -0.20898,-0.0457 c -0.11495,-0.0251 -0.215,-0.047 -0.22233,-0.0486 l -0.0134,-0.003 0.003,0.52096 c 0.004,0.80115 0.0116,1.3331 0.0185,1.3307 0.002,-6.2e-4 0.10005,-0.11713 0.21847,-0.25893 z m 1.8131,-0.39922 c 0.19836,-0.2808 0.36118,-0.51256 0.36181,-0.51501 9.1e-4,-0.004 -0.73008,-0.98691 -0.7471,-1.005 -0.004,-0.004 -0.11223,0.0314 -0.59819,0.19653 -0.32634,0.11091 -0.59439,0.20287 -0.59567,0.20435 -0.003,0.003 0.0145,1.2544 0.0173,1.2573 0.002,0.002 1.1898,0.37147 1.1966,0.37202 0.003,2e-4 0.16688,-0.22938 0.36523,-0.51018 z m 0.87926,-0.33418 c -0.002,-0.003 -0.24687,-0.3292 -0.54393,-0.72559 -0.29704,-0.39638 -0.54219,-0.72296 -0.54476,-0.72572 -0.004,-0.004 -0.016,0.0192 -0.0586,0.111 -0.0498,0.10717 -0.0535,0.11671 -0.0486,0.12488 0.003,0.005 0.16958,0.23617 0.37027,0.51402 l 0.36487,0.50518 0.22888,0.10043 c 0.12588,0.0552 0.23041,0.10049 0.23228,0.10056 0.002,7e-5 0.002,-0.002 -4.2e-4,-0.005 z m -1.8708,-1.0219 0.61655,-0.222 0.0625,-0.1122 c 0.0344,-0.0617 0.0619,-0.11279 0.0612,-0.11349 -7.6e-4,-7.1e-4 -0.33096,0.10754 -0.7338,0.24056 -0.40283,0.13302 -0.80243,0.26482 -0.88801,0.29289 -0.0856,0.0281 -0.15445,0.0522 -0.15306,0.0536 0.001,0.001 0.0951,0.0204 0.20833,0.0422 0.11319,0.0218 0.20667,0.0398 0.20774,0.04 0.001,2.2e-4 0.27941,-0.0995 0.61852,-0.22161 z"
            id="path3568"
          />
          <path
            d="m 37.18431,-1.388198 -0.270118,0.2684634 -1.863205,0.033854 -0.531401,-0.3325029 z"
            style={{ opacity: 0.66, fill: "url(#linearGradient4086)" }}
            id="path3570"
          />
          <path
            style={{ opacity: 0.65, fill: "url(#linearGradient4088)" }}
            d="M 34.472303,0.86876674 35.960878,2.0517512 35.739038,3.1635473 33.63094,1.4615427 Z"
            id="path3572"
          />
          <path
            d="M 37.457465,0.90674944 36.04806,2.0552279 35.856538,3.1879931 38.007983,1.4958136 Z"
            style={{ opacity: 0.65, fill: "url(#linearGradient4090)" }}
            id="path3574"
          />
        </g>
      </g>
    </svg>
  );
};

export default memo(Token);