arcPathRounded

Generate an arc with natively rounded corners built into the path geometry.

arcPathRounded(cx: number, cy: number, innerR: number, outerR: number, startAngle: number, endAngle: number, cornerRadius: number, inset: boolean): string

cx — X-coordinate of the arc center.

cy — Y-coordinate of the arc center.

innerR — Inner radius. Use 0 for a rounded pie slice, or a positive value for a rounded donut segment.

outerR — Outer radius.

startAngle — Start angle in radians. 0 points up (12 o'clock), increasing clockwise.

endAngle — End angle in radians.

cornerRadius — Radius for the rounded corners at the junctions between arcs and radial edges. When 0, the output is identical to arcPath.

inset — When true, corners round inward (standard rounded corners). When false, corners round outward creating a flange effect.

Returns — A closed SVG path string with quadratic curves (Q commands) at corners and preserved arc geometry (A commands) along the curved edges.

// Rounded donut segment
const d = pathRite.arcPathRounded(100, 100, 40, 80, 0, Math.PI / 2, 6, true);

// Rounded pie chart
const slices = pathRite.pieLayout([30, 20, 50]);
const paths = slices.map(s =>
  pathRite.arcPathRounded(100, 100, 0, 80, s.startAngle, s.endAngle, 4, true)
);

// Flange effect (outward rounding)
const flange = pathRite.arcPathRounded(100, 100, 40, 80, 0, Math.PI / 2, 6, false);