Arc

Draw an elliptical arc according to the starting angle and sweeping angle, suitable for scale arcs and progress display. The border is determined by width and height. The width, endpoint and position of the stroke are configurable, and the background is allowed to fill when fully closed.

Example

function main() {
  return (
    <Arc
      width={120}
      height={120}
      startAngle={-90}
      sweepAngle={240}
      stroke={$env.accent}
      lineWidth={8}
      lineCap="round"
      strokePosition="center"
    />
  );
}

Usage

Ellipse and Arc use the entire width×height bounds; equal dimensions make a circle. Partial sweeps stay open and do not connect to the center as a sector. background fills only a complete closed revolution.
Angles use degrees: 0 right, 90 down, positive sweeps clockwise. startAngle wraps modulo 360; sweepAngle preserves direction and clamps to −360…360. Zero draws nothing; ±360 closes a full turn. startAngle transitions may use wrap:360; sweepAngle cannot.
background and stroke accept Paint: Color or Gradient. Construct gradients with LinearGradient, RadialGradient or AngularGradient. Stop locations and centers use 0–1; radial radii use points. HDR wraps one color; visible brightness depends on device and display environment.

Properties

startAngle?number

Start angle in degrees, wrapped modulo 360 when sampled.

Example-90

sweepAngle?number

Sweep in degrees, clamped to -360…360 when sampled. Positive is clockwise; wrap is unsupported.

Example270

background?Paint

Fill paint for a closed full circle or ellipse. Ignored for partial arcs.

Example"clear"

stroke?Paint

Stroke paint; accepts a color or gradient. Use clear to hide the stroke.

ExampleHDR($env.dark ? "white" : "black")

lineWidth?number

Stroke thickness in points; 0 draws no stroke.

Example2

strokePosition?"inside" | "center" | "outside"

Stroke placement relative to the full circle or ellipse contour. Defaults to inside.

Example"inside"

lineCap?"round" | "butt" | "square"

Stroke end shape: butt stops at the endpoint, square extends it, round rounds it.

Example"round"

dash?number[]

Alternating painted and empty lengths in points; an empty array makes a solid stroke.

Example[]

dashPhase?number

Offset along the dash pattern, in points.

Example0

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example"fill"

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example"fill"

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

blur?number

Blur radius in points; 0 disables blur.

Example4

innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")

shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0

shadowRadius?number

Outer shadow blur radius in points.

Example4

shadowX?number

Outer shadow offset in points: x right, y down.

Example0

shadowY?number

Outer shadow offset in points: x right, y down.

Example2

animations?ArcAnimation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <Arc
      width={180}
      height={100}
      startAngle={180}
      sweepAngle={180}
      background="clear"
      stroke={LinearGradient(['#30B3A2', '#A9E56F'])}
      lineWidth={8}
      strokePosition="inside"
      lineCap="round"
    />
  );
}

Animation

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYdashPhasestrokelineWidthstartAnglesweepAngletransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`startAngle`	`-90`
`sweepAngle`	`270`
`lineWidth`	`2`
`strokePosition`	`"inside"`
`background`	`"clear"`
`stroke`	`HDR($env.dark ? 'white' : 'black')`

Example

Usage

Properties

Practical example

Animation

When omitted

Circle

Ellipse

RadialLayout

Color / Gradient

On this page

Arc

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

Circle

Ellipse

RadialLayout

Color / Gradient

On this page