Skip to content


Composable for working with regular and irregular polygons. It is also aliased with preset parameters for all other regular polygon composables such as useSquare, usePentagon, useHexagon, etc.

usePolygon({sides: 7, sideLength: 100}) -> Regular Polygon
usePolygon({vertices: [...]}) -> Irregular Polygon


The usePolygon function accepts a single configuration object as an argument. There are two types of polygon configurations:

1. Regular polygon

sides4The number of sides.
sideLength100The length of each side (optional).
size0Fit the shape to a circumscribed circle of a given diameter (optional).


When defining any regular polygon, you can specify either sideLength or size. If you define both, size will take precedence, and is defined as the diameter of the circumscribed circle around the polygon.

2. Irregular polygon

vertices[]An array of three or more vertices. Will self-close (no need to repeat the first vertex)

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.


import {usePolygon} from 'vuexyz'

const sides = ref(5)
const sideLength = ref(100)
const position = ref({x: 0, y: 0})
const {vertices, edges, faces} = usePolygon({sides, sideLength, position})


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.