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><SkillGaugeCirclestroke={gaugeColor(xp)}fill='transparent'r={radius}circumference={circumference}offset={offset}cx='60'cy='60'/></SkillGauge>;