MotionScript

Polygon

A regular convex polygon inscribed within the node's layout rect. All sides and angles are equal.

0.0s / 4.0s

Usage

import { createScene, Polygon } from '@motion-script/core';

export default createScene(function* (stage) {
  // Hexagon
  stage.add(
    <Polygon sides={6} width={370} height={370} fill="#6990DD" />
  );

  // Triangle with rounded vertices
  stage.add(
    <Polygon sides={3} width={370} height={370} fill="#E8617C" cornerRadius={12} />
  );

  // Pentagon with chamfered corners
  stage.add(
    <Polygon sides={5} width={370} height={370} fill="#F5C26B" cornerRadius={16} cornerStyle="angled" />
  );
});

Props

PropTypeDefaultDescription
sidesnumber5Number of sides. Must be ≥ 3
cornerRadiusnumber0Vertex rounding radius in pixels
cornerStyle'rounded' | 'angled''rounded'Vertex shape: circular arc ('rounded') or chamfer cut ('angled')

Animating

All props animate with .to(). Animate sides to morph between polygon shapes, or cornerRadius to round out vertices:

import { createScene, Polygon, createRef, easeInOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const shape = createRef<Polygon>();

  stage.add(
    <Polygon ref={shape} sides={3} width={370} height={370} fill="#6990DD" />
  );

  // Triangle → hexagon
  yield* shape().to({ sides: 6 }, 1.2, easeInOut);

  // Back to a triangle
  yield* shape().to({ sides: 3 }, 1.2, easeInOut);
});

Notes

  • cornerStyle takes a single scalar value (not the per-corner shorthand that Rect accepts) because polygon vertices don't map to named corners.
  • The polygon is always inscribed inside the node's bounding rect: the outermost vertices touch the edges of the rect.