Polygon
Regular polygon with adjustable sides and corner rounding
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| origin | origin | center | Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. |
| color | color | #ffffff | Fill color of the polygon |
| center | position | {"x":0.5,"y":0.5} | Center position of the polygon |
| radius | range | 0.4 | Inradius — distance from the center to the middle of each side, in UV space (the vertices sit a little farther out) |
| sides | range | 6 | Number of sides (3 = triangle, 4 = square, 6 = hexagon, etc.) |
| rounding | range | 0 | Corner rounding — 0 is sharp vertices, 1 morphs into a circle |
| rotation | range | 0 | Rotation in degrees |
| softness | range | 0 | Edge softness for antialiasing |
| strokeThickness | range | 0 | Stroke thickness. Zero means no stroke. |
| strokeColor | color | #000000 | Color of the stroke outline |
| strokePosition | "outside" | "center" | "inside" | center | Position of the stroke relative to the shape edge |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for blending fill and stroke colors |
Usage
vue
<Shader>
<Polygon
color="#ffffff"
:radius="0.4"
/>
</Shader>