Skip to main content
Path(builder: (path: PathBuilder) => void): Shape;
​
builder
(path: PathBuilder) => void
required
A function that receives a PathBuilder and uses its drawing commands to construct the shape.

​
PathBuilder Methods

The path parameter provides the following drawing commands:
​
path.move(x, y)
(x: number, y: number) => void
Begins a new subpath at the given point.
​
path.line(x, y)
(x: number, y: number) => void
Adds a straight line from the current point to the given point.
​
path.quadCurve(x, y, controlX, controlY)
(x: number, y: number, controlX: number, controlY: number) => void
Adds a quadratic Bezier curve to the given point with one control point.
​
path.curve(x, y, control1X, control1Y, control2X, control2Y)
(x: number, y: number, control1X: number, control1Y: number, control2X: number, control2Y: number) => void
Adds a cubic Bezier curve to the given point with two control points.
​
path.arc(props)
(props: { centerX: number; centerY: number; radius: number; startAngle: number; endAngle: number; clockwise?: boolean }) => void
Adds an arc. Angles are specified in degrees.
​
path.addRect(x, y, width, height)
(x: number, y: number, width: number, height: number) => void
Adds a rectangle subpath.
​
path.addRoundedRect(props)
(props: { x: number; y: number; width: number; height: number; cornerWidth: number; cornerHeight: number }) => void
Adds a rounded rectangle subpath.
​
path.addEllipse(x, y, width, height)
(x: number, y: number, width: number, height: number) => void
Adds an ellipse subpath inscribed in the given rectangle.
​
path.addLines(points)
(points: [number, number][]) => void
Adds a polyline from an array of [x, y] coordinate pairs.
​
path.close()
() => void
Closes the current subpath by drawing a line back to the starting point.

​
Methods

Since Path returns a Shape, it supports the standard shape methods:
​
.fill(style)
(style: Style) => Shape
Fills the path interior with a color, gradient, or other style.
​
.stroke(style)
(style: Style | StrokeOptions) => Shape
Draws the path outline. Pass a Style for a 1-point stroke, or a StrokeOptions object ({ style: Style, lineWidth?: number }) for custom width.

​
Support

​
Usage

​
Triangle

Path((path) => {
    path.move(50, 0)
    path.line(100, 100)
    path.line(0, 100)
    path.close()
})
    .fill(Color("blue"))
    .frame({ width: 100, height: 100 })

​
Star shape

Path((path) => {
    path.move(50, 0)
    path.line(61, 36)
    path.line(100, 36)
    path.line(68, 58)
    path.line(79, 95)
    path.line(50, 72)
    path.line(21, 95)
    path.line(32, 58)
    path.line(0, 36)
    path.line(39, 36)
    path.close()
})
    .fill(Color("yellow"))
    .frame({ width: 100, height: 100 })

​
Curved line

Path((path) => {
    path.move(0, 50)
    path.quadCurve(100, 50, 50, 0)
})
    .stroke(Color("red"), 3)
    .frame({ width: 100, height: 60 })

​
Arc

Path((path) => {
    path.arc({
        centerX: 50,
        centerY: 50,
        radius: 40,
        startAngle: 0,
        endAngle: 270
    })
})
    .stroke(Color("blue"), 4)
    .frame({ width: 100, height: 100 })

​
Polyline chart

Path((path) => {
    path.addLines([
        [0, 80], [20, 60], [40, 70],
        [60, 30], [80, 50], [100, 10]
    ])
})
    .stroke(Color("green"), 2)
    .frame({ width: 200, height: 100 })

​
Notes

  • Coordinates are relative to the Path’s own coordinate space. Use .frame() to set the overall size.
  • Path returns a Shape, so it can be used anywhere shapes are accepted, including .clipShape(), .background(), and .overlay().
  • Multiple subpaths can be created by calling move() multiple times within a single builder.

​
See Also