text: import React from "react";
  
  const chakras = [
    { id: 'crown',        fill: "#c9f",    cx: "111.262", cy: "132.993" },
    { id: 'third-eye',    fill: "#A28BE7", cx: "111.262", cy: "142.332" },
    { id: 'throat',       fill: "#0ff",    cx: "111.262", cy: "155.345" },
    { id: 'heart',        fill: "#0f0",    cx: "111.262", cy: "169.516" },
    { id: 'solar-plexus', fill: "#ff0",    cx: "111.262", cy: "182.237" },
    { id: 'sacral',       fill: "#f60",    cx: "111.262", cy: "195.468" },
    { id: 'root',         fill: "red",     cx: "111.262", cy: "205.777" },
  ];
  
  const opacityActive = { false: 0.2, true: 1 };
  
  function Chakras({ width, height, active }) {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={width}
        height={height}
        version="1.1"
        viewBox="0 0 91.414 83.244"
      >
        <g transform="translate(-64.803 -128.314)">
          <path
            fill="#000"
            fillOpacity="1"
            fillRule="nonzero"
            stroke="none"
            strokeWidth="0.035"
            d="M150.317 191.879c-2.423 3.482-.678-5.674.328-2.319.084.83.21 1.598-.328 2.319m-11.4 2.003c-3.752 1.581-7.834 1.646-11.643 2.982-2.659.997-4.801.607-4.39-2.628-1.391-3.54-4.394-6.44-2.082-10.525.66-1.72 1.767-9.708 2.136-4.759.515 3.86 1.864 8.508 5.493 10.303 2.899 2.779 7.016 3.215 10.584 4.604zm-37.144-5.635c-3.01 1.958-1.91 7.392-4.561 8.476-3.785-.42-7.547-1.245-11.306-1.712-1.905-.712-3.66-1.378-.263-1.532 3.909-.612 7.531-2.257 10.94-4.171 1.776-4.09 3.637-8.384 4.1-12.983.158 3.315 1.924 8.241 1.09 11.921m-28.813 3.167c-.766 2.803-2.065-.714-1.683-2.028-.335-2.43 1.019.739 1.634 1.457l.049.571m83.257-.072c-1.89-1.41-5.946 4.08-4.436-.753-.32-1.117.278-3.334-.842-3.606-1.93.09-3.56 3.506-6.23 3.418-3.152 2.004-7.135-2.119-9.794-4.07-4.868-1.96-5.07-7.152-6.101-11.612-.176-4.125.286-8.893-2.854-12.148-2.764-2.866-8.1-.956-9.934-5.203-2.946-3.963 1.988-6.683 2.517-10.467-.92-3.362.59-8.088-2.473-10.766-3.817-2.5-10.645-1.37-11.4 3.813.594 3.92-1.619 7.123.93 10.584 2.522 2.927 1.698 7.66-1.902 9.59-3.267.753-7.408.463-8.664 4.557-2.134 3.925.185 8.564-1.746 12.517-.497 3.817-1.068 8.067-5.155 9.661-3.15 1.759-6.23 4.238-9.918 4.539-3.016-.77-5.28-3.842-7.806-4.788-1.684 1.39.847 5.897-1.536 5.233-1.239-.37-3.167-2.031-4.07-.372 1.417.414 2.025.851 1.94 1.84 3.263.28 4.984 3.335 8.254 2.039-2.893 4.298 1.276 8.384 5.083 10.094 2.944 3.156 7.08 5.37 11.47 5.057 11.455.351 22.91.72 34.364 1.06 5-.835 10.52-2.073 13.717-6.35 2.053-2.262 6.095-2.963 6.094-6.658.449-1.243-2.507-3.249-.712-3.524 1.812-.01 2.254 2.405 4.114 2.274 3.791.66-2.244-1.57.295-1.249 1.647.123 5.608.763 5.496-.86-1.288-.398-6.14.166-2.248-1.167 1.04-1.037 2.657-1.75 3.547-2.682"
          ></path>
          {
            chakras.map(chakra => (
              <circle
                key={chakra.id}
                cx={chakra.cx}
                cy={chakra.cy}
                r="4.679"
                fill={chakra.fill}
                strokeLinejoin="bevel"
                strokeWidth="3.315"
                color="#000"
                overflow="visible"
                opacity={opacityActive[!active || active===chakra.id]}
              ></circle>
            ))
          }
        </g>
      </svg>
    );
  }
  
  export default Chakras;
  