Polygon

The polygon primitive draws a closed shape from an array of [x, y] coordinate pairs. It supports fill, stroke, and timeline-friendly opacity/color changes.

0.00s / 2.97s · F0

Props

Prop	Type	Default	Description
`points`	`number[][]`	`[]`	Array of `[x, y]` coordinate pairs
`fill`	`string`	`'none'`	Fill color
`stroke`	`string`	`'currentColor'`	Stroke color
`strokeWidth`	`number`	`1`	Width of the stroke
`opacity`	`number`	`1`	Opacity from 0 to 1

Code Example

elements: {
  triangle: {
    id: 'triangle',
    type: 'polygon',
    props: { type: 'polygon', points: [[150, 40], [50, 180], [250, 180]], stroke: '$secondary', strokeWidth: 2.5, fill: 'rgba(255,107,107,0.1)' },
  },
  pentagon: {
    id: 'pentagon',
    type: 'polygon',
    props: { type: 'polygon', points: [[350, 40], [280, 130], [310, 240], [390, 240], [420, 130]], stroke: '$accent', strokeWidth: 2.5, fill: 'rgba(108,92,231,0.1)' },
  },
}