# RegularPolygon

```ts
import { RegularPolygon } from "@pibbl/core";
```

`RegularPolygon` uses [`RegularPolygonProps`](/reference/types/elements-components/#regularpolygonprops) and [`RegularPolygonStyle`](/reference/types/styles/#regularpolygonstyle). It
requires integer `sides >= 3` and exactly one of `circumradius`, `inradius`, or
`sideLength`. It rejects children; invalid sizes or nonfinite geometry produce
a contextual layout diagnostic.

```tsx
<RegularPolygon
  style={{ cx: 80, cy: 70, sides: 6, circumradius: 54, fill: "#22c55e" }}
/>
```

See the [Regular polygon live example](/playground/#/examples/drawing/regular-polygon).

## API details from source

<span id="api-RegularPolygon"></span>

Describes a regular-polygon primitive for JSX or createElement authoring.

```ts
RegularPolygon: PibblPrimitiveComponent<RegularPolygonProps, PrimitiveInput<RegularPolygonProps, RegularPolygonStyle>>
```

Related API: [RegularPolygon](/reference/components/regular-polygon/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [RegularPolygonProps](/reference/types/elements-components/#regularpolygonprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [RegularPolygonStyle](/reference/types/styles/#regularpolygonstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[RegularPolygonProps](/reference/types/elements-components/#regularpolygonprops)

[RegularPolygonStyle](/reference/types/styles/#regularpolygonstyle)

[View source — packages/core/src/lib/components/regular-polygon.ts:202](/source/packages/core/src/lib/components/regular-polygon-ts/#L202)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal example

Compile this TSX module with `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`, then load it from a browser entry point after the document body exists. It creates and mounts one canvas; dispose the controller before removing or replacing that canvas. The interactive study linked below adds controls beyond this minimal use case.

[Download source](/minimal/regular-polygon.tsx)

```tsx
/** @jsxImportSource @pibbl/core */
import { pibbl, RegularPolygon } from '@pibbl/core';

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 240;
document.body.append(canvas);

const controller = pibbl(canvas, (
<RegularPolygon
  style={{ cx: 80, cy: 70, sides: 6, circumradius: 54, fill: "#22c55e" }}
/>
));

window.addEventListener('pagehide', () => controller.dispose(), { once: true });
```

## Complete minimal examples

- [Polygon marks](/minimal-examples/drawing/polygons/): Draw a rounded triangle, regular hexagon, and five-point star. [Plain source](/minimal/drawing/polygons.tsx)
## Interactive examples

- [Regular polygon](/examples/regular-polygon/) · [Full page](/experience/regular-polygon/)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.