# Polygon marks
Draw a rounded triangle, regular hexagon, and five-point star.

## APIs demonstrated

- [Polygon](/reference/components/polygon/) from `@pibbl/core`
- [PolygonProps](/reference/types/elements-components/) from `@pibbl/core`
- [PolygonStyle](/reference/types/styles/) from `@pibbl/core`
- [RegularPolygon](/reference/components/regular-polygon/) from `@pibbl/core`
- [RegularPolygonProps](/reference/types/elements-components/) from `@pibbl/core`
- [RegularPolygonStyle](/reference/types/styles/) from `@pibbl/core`
- [Star](/reference/components/star/) from `@pibbl/core`
- [StarProps](/reference/types/elements-components/) from `@pibbl/core`
- [StarStyle](/reference/types/styles/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/drawing/polygons.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import {
  Polygon,
  RegularPolygon,
  Star,
  pibbl,
  type PolygonProps,
  type PolygonStyle,
  type RegularPolygonProps,
  type RegularPolygonStyle,
  type StarProps,
  type StarStyle,
} from "@pibbl/core";

const triangleProps: PolygonProps = { pointerEvents: "auto" };
const triangleStyle: PolygonStyle = {
  coords: [
    [30, 170],
    [80, 35],
    [130, 170],
  ],
  cornerRadius: 7,
  fill: "#0f766e",
};
const hexProps: RegularPolygonProps = { pointerEvents: "auto" };
const hexStyle: RegularPolygonStyle = {
  sides: 6,
  cx: 185,
  cy: 105,
  circumradius: 60,
  fill: "#f97316",
  stroke: "#9a3412",
  strokeWidth: 2,
};
const starProps: StarProps = { pointerEvents: "auto" };
const starStyle: StarStyle = {
  points: 5,
  cx: 280,
  cy: 105,
  outerRadius: 34,
  innerRadius: 17,
  fill: "#7c3aed",
};
const canvas = document.createElement("canvas");
canvas.width = 340;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <>
    <Polygon {...triangleProps} style={triangleStyle} />
    <RegularPolygon {...hexProps} style={hexStyle} />
    <Star {...starProps} style={starStyle} />
  </>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Creates its own canvas and disposes the Pibbl mount on pagehide.

## Documentation version

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