@gorazdo/react-svg-donut

Basics

Minimal reproduction

import { SvgDonut } from '@gorazdo/react-svg-donut'

const JustDonut = () => <SvgDonut innerRadius={90} outerRadius={100} />

Relative units

import { SvgDonut } from '@gorazdo/react-svg-donut'

const RelativeUnitsDonut = () => <SvgDonut innerRadius={5} outerRadius={5.5} unit="em" />

value property is for partial circle and animation

import { SvgDonut } from '@gorazdo/react-svg-donut'
const AlmostClosedDonut = () => <SvgDonut value={0.9} innerRadius={90} outerRadius={100} />

Each circle is a Donut with zero innerRadius

import { SvgDonut } from '@gorazdo/react-svg-donut'
const AlmostClosedCircle = () => <SvgDonut value={0.9} innerRadius={0} outerRadius={100} />

Animated example

import { SvgDonut } from '@gorazdo/react-svg-donut'
import { useTween } from 'react-use'

const AnimatedDonut = () => {
  // changes 0 to 1 using requestAnimationFrameRate
  const tween = useTween('quadratic', 1000)
  return <SvgDonut innerRadius={90} outerRadius={100} value={tween} color="#0047FF" />
}

Note

This package is meant to be super simple. If you'd like to have multiple concentric donuts, just use css grid or absolute positioning

.donut-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  place-items: center;
}

.donut-wrapper svg {
  grid-row-start: 1,
  grid-column-start: 1,
}

import { SvgDonut } from '@gorazdo/react-svg-donut'
import { useTween } from 'react-use'


const ConcentricDonuts = () => {
  // changes 0 to 1 using requestAnimationFrameRate
  const tween = useTween('quadratic', 1000)
  return (
    <div className="donut-wrapper">
      <SvgDonut value={tween} innerRadius={90} outerRadius={100} value={tween} color="#0047FF" />
      <SvgDonut value={tween} innerRadius={70} outerRadius={80} value={tween} color="#00FF47" />
      <SvgDonut value={tween} innerRadius={0} outerRadius={50} value={tween} color="#FF4700" />
    </div>
  )
}