ValueRing

Code Snippet

<svg width="100" height="100" viewBox="0 0 100 100">
  <ValueRing
    cx={50}
    cy={50}
    radius={50}
    normalizedValue={0.65}
    roundness={true}
    fgArcStyle={{
      stroke: "var(--audioui-adaptive-default-color)",
    }}
    bgArcStyle={{
      stroke: "color-mix(in srgb, var(--audioui-adaptive-default-color) 50%, transparent)",
      opacity: 1
    }}
  />
</svg>

Properties

Examples