Skip to main content

ArcData

interface ArcData {
startingAngle: number
endingAngle: number
innerRadius: number
}

This data controls the "arc" properties of the Ellipse component:

The angles are in radians and the inner radius value is from 0 to 1. For the angles, 0° is the x axis and increasing angles rotate clockwise.

Examples:

Half-circle
// Make a half-circle
<Ellipse
arcData={{
startingAngle: 0,
endingAngle: Math.PI,
innerRadius: 0
}}
/>
Donut
// Make a donut
<Ellipse
arcData={{
startingAngle: 0,
endingAngle: 2 * Math.PI,
innerRadius: 0.5
}}
/>