Polygon

The <Polygon> primitive draws a closed shape from an array of [x, y] coordinate pairs. It supports fill, stroke, and a built-in draw animation that progressively traces the outline over a given number of frames.

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
`draw`	`number`	`undefined`	Number of frames for the draw-in animation
`opacity`	`number`	`1`	Opacity from 0 to 1

import { Player, Draw, Polygon } from '@elucim/core';

<Player width={500} height={300} fps={30} durationInFrames={60}>
  <Draw duration={30}>
    <Polygon
      points={[[150, 40], [50, 180], [250, 180]]}
      stroke="#ff6b6b" strokeWidth={2.5} fill="rgba(255,107,107,0.1)"
    />
  </Draw>
  <Draw duration={30}>
    <Polygon
      points={[[350, 40], [280, 130], [310, 240], [390, 240], [420, 130]]}
      stroke="#6c5ce7" strokeWidth={2.5} fill="rgba(108,92,231,0.1)"
    />
  </Draw>
</Player>

{
  "width": 500, "height": 300, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "type": "polygon",
      "points": [[150, 40], [50, 180], [250, 180]],
      "stroke": "#ff6b6b", "strokeWidth": 2.5, "fill": "rgba(255,107,107,0.1)",
      "draw": { "duration": 30 }
    },
    {
      "type": "polygon",
      "points": [[350, 40], [280, 130], [310, 240], [390, 240], [420, 130]],
      "stroke": "#6c5ce7", "strokeWidth": 2.5, "fill": "rgba(108,92,231,0.1)",
      "draw": { "duration": 30 }
    }
  ]
}