CapDrive
User guide

Path

Build paths with commands such as move, line, quad, cubic, arc, and close. Suitable for customizing pointers, curves and combined outlines, and setting fill rules and strokes.

Example

function main() {
  return (
    <Path
      commands={[
        { op: 'move', x: 10, y: 80 },
        { op: 'line', x: 60, y: 10 },
        { op: 'line', x: 110, y: 80 },
        { op: 'close' },
      ]}
      background={$env.accent}
      stroke={$env.foreground}
      lineWidth={2}
    />
  );
}

Usage

  • commands execute in order: move starts a subpath; line/quad/cubic/arc add segments; close closes it. An arc command’s x/y is its center. evenOdd can cut holes in nested contours. Returning to the first point is not equivalent to close.
  • contentAnimation transitions text, images or structured data rather than scalar properties. interpolate needs compatible structure: matching Polyline point count/closed state, Path command sequence or chart samples. Structural changes update immediately.

Properties

commandsReadonlyArray<PathCommand>

Local path commands in points. An empty array draws nothing.

Example[{op: "move", x: 0, y: 0}, {op: "line", x: 100, y: 80}]
fillRule?"nonZero" | "evenOdd"

Path fill rule: nonZero or evenOdd.

Example"nonZero"
background?Paint

Fill paint for the path interior. Transparent by default.

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
lineCap?"round" | "butt" | "square"

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

Example"round"
lineJoin?"round" | "miter" | "bevel"

Shape of joined stroke segments: miter, round or bevel.

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
trimStart?number

Visible path interval from trimStart to trimEnd, within 0–1. Circle/Ellipse/Arc use angles instead.

Example0
trimEnd?number

Visible path interval from trimStart to trimEnd, within 0–1. Circle/Ellipse/Arc use angles instead.

Example1
contentAnimation?ContentAnimation

Optional content transition. Interpolate requires the same command count and operation sequence; otherwise updates immediately.

Example{type: "interpolate", duration: 0.25}
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?Animation[]

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 (
    <Path
      width={140}
      height={100}
      fillRule="evenOdd"
      background={$env.accent}
      commands={[
        { op: 'move', x: 0, y: 0 },
        { op: 'line', x: 140, y: 0 },
        { op: 'line', x: 140, y: 100 },
        { op: 'line', x: 0, y: 100 },
        { op: 'close' },
        { op: 'move', x: 35, y: 25 },
        { op: 'line', x: 105, y: 25 },
        { op: 'line', x: 105, y: 75 },
        { op: 'line', x: 35, y: 75 },
        { op: 'close' },
      ]}
    />
  );
}

Animation

Animation

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.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.

PropertiesWhen omitted
commands[]
fillRule"nonZero"
background"clear"
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')

Polyline

Color / Gradient

Map

Previous

BarChart

Next step

On this page

ExampleUsagePropertiesPractical exampleAnimationWhen omittedRelated APIs