Ripl

Appearance

Polygon ​

A Polygon draws a regular polygon (triangle, pentagon, hexagon, etc.) defined by a center point (cx, cy), radius (distance from center to vertex), and sides count. Polygons are useful for badges, icons, radar chart backgrounds, and decorative shapes. Increase sides to approximate a circle, or use 3 for triangles, 5 for pentagons, 6 for hexagons, and so on.

Example ​

SidesRadius

Usage ​

ts
import {
    createPolygon,
} from '@ripl/web';

const hexagon = createPolygon({
    fill: '#3a86ff',
    cx: 200,
    cy: 150,
    radius: 80,
    sides: 6,
});

Properties ​

The polygon's geometry is defined by cx, cy, radius, and sides.

NOTE

For the full property list, see the Polygon API Reference.