const Target = ({ color }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="250.87 68.05 658.34 658.34"
    width="70px"
  >
    <defs>
      <style>
        {`.cls-11 {
        fill: #fff;
      }

      .cls-21 {
        fill: #9cb3c1;
      }

      .cls-31 {
        fill: ${color};
      }

      .cls-41 {
        fill: #656768;
      }`}
      </style>
    </defs>
    <g>
      <g id="object">
        <circle
          className="cls-41"
          cx="580.04"
          cy="397.23"
          r="232.76"
          transform="translate(-110.99 526.49) rotate(-45)"
        ></circle>
        <circle className="cls-11" cx="577.51" cy="399.7" r="203.06"></circle>
        <circle className="cls-21" cx="577.51" cy="399.7" r="155.78"></circle>
        <circle
          className="cls-31"
          cx="577.51"
          cy="399.7"
          r="78.38"
          transform="translate(-113.48 525.43) rotate(-45)"
        ></circle>
      </g>
    </g>
  </svg>
);

export default Target;