React Gauge with Emotion Props

April 26, 2020

Made an awesome React SVG circle gauge with emotion props.

const SkillGauge = styled.svg`
  width: 120px;
  height: 120px;
  grid-column: 1/1;
  grid-row: 1/1;
`;

const SkillGaugeCircle = styled.circle`
  stroke-width: 4px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: ${props => props.circumference} ${props =>
      props.circumference};
  stroke-dashoffset: ${props => props.offset};
  stroke-linecap: 'round';
`;

const radius = 58;
const circumference = radius * 2 * Math.PI;
const offset = circumference - (xp / 100) * circumference;

const gaugeColor = xp => {
  if (xp <= 33) {
    return '#afb6c0';
  } else if (xp > 33 && xp < 66) {
    return '#637184';
  } else {
    return '#1a344d';
  }
};

<SkillGauge>
  <SkillGaugeCircle
    stroke={gaugeColor(xp)}
    fill='transparent'
    r={radius}
    circumference={circumference}
    offset={offset}
    cx='60'
    cy='60'
  />
</SkillGauge>;