Skip to content


Composable for working with arcs.

useArc({radius: 100, startAngle: 0, endAngle: 235})



useArc works clockwise, and doesn't accept negative numbers. The starting angle of 0 is at the right hand position. If you need to adjust the start position, consider using the rotation property.

The useArc function accepts a single configuration object as an argument, where each property has a default value if not provided.

radius100The radius of the arc.
startAngle0The start angle of the arc, in degrees (0 to 360).
endAngle360The end angle of the arc, in degrees (0 to 360).

extends Primitive Configuration

The following configuration parameters are applicable to all primitive shapes.

position{ x: 0, y: 0 }A 2D vector representing the position of the primitive.
rotation0The rotation of the primitive (in degrees).
scale1The scale factor of the primitive.

Example Usage

import {useArc} from 'vuexyz'

const radius: Ref<number> = ref(50)
const startAngle: Ref<number> = ref(0)
const endAngle: Ref<number> = ref(235)
const {vertices, edges, faces} = useArc({radius, startAngle, endAngle})


All primitive shapes return the following reactive members:

PropertyType DeclarationDescription
verticesComputedRef<Vertex[]>An array of all vertices.
edgesComputedRef<Edge[]>An array of all edges.
facesComputedRef<Face[]>An array of all faces.
centroidComputedRef<Vertex[]>The centroid (geometric center) of all vertices.
boundingBoxComputedRef<BoundingBox>The bounding box of the primitive, with properties x, y, width, height, maxX and maxY
svgPathComputedRef<string>An SVG path representing the shape of the primitive.
drawToCanvas(ctx: CanvasRenderingContext2D) => voidA method that draws the primitive to a canvas context.

Released under the MIT License.