Component shape/polygon

Component ID: shape/polygon

Renders up to 10 SVG polygons with customizable points, fill, stroke, and keyframe animations. Each polygon is defined by a set of SVG points in a 0-100 coordinate space. Can animate polygon shape (points morphing), fill color, position, and size. Use for custom shapes, geometric patterns, or animated decorative elements.

Section	Animated geometric shapes, rectangles, polygons, cutouts, and custom HTML/SVG
Animation	Each polygon has its own 'animate' block. Can animate container position/size and SVG points/fill/stroke independently.
Intro duration	0 s

Preview

Element schema

Minimal shape of a shape/polygon component element:

{
    "type": "component",
    "component": "shape/polygon",
    "settings": {}
}

See the full component element reference for shared properties like duration, start, x, y, etc.

Settings

The settings property accepts the following groups. Each group contains CSS-like properties; see component CSS properties for the full list of supported keys.

`polygon1`

First polygon. Use polygon2-polygon10 for additional polygons with the same structure.

Property	Type	Default	Description
`left`	string	—	Container left position.
`top`	string	—	Container top position.
`width`	string	—	Container width.
`height`	string	—	Container height.
`points`	string	—	SVG polygon points in 0-100 space (e.g. '0,0 100,0 80,100 0,100').
`fill`	string	`#00FF00`	Fill color.
`stroke-color`	string	—	Stroke color.
`stroke-width`	string	—	Stroke width.
`animate`	object	—	Keyframe animation for position, size, points, fill, stroke.