Shapes

Presenter.js provides four general-purpose filled and stroked shapes: Rectangle, Circle, Polygon, and Path.

import { Anchor, Circle, Color, Path, Polygon, Rectangle } from "presenter";
const rectangle = Rectangle({  x: 330,  y: 500,  width: 1300,  height: 520,  cornerRadius: 80,  fillColor: Color("#3b82f6"),});
const circle = Circle({  x: 2860,  y: 760,  radius: 300,  anchor: Anchor.CENTER,  fillColor: Color("#34d399"),});
const polygon = Polygon({  points: [    { x: 380, y: 1940 },    { x: 980, y: 1390 },    { x: 1580, y: 1940 },  ],  fillColor: Color("#f59e0b"),});
const path = Path({  path: "M 50 6.58 L 60.78 39.75 L 95.65 39.75 ... Z",  x: 2550,  y: 1390,  width: 620,  height: 620,  viewboxWidth: 100,  viewboxHeight: 100,  fillColor: Color("#f472b6"),});

These shapes support fillColor, strokeColor, strokeWidth, and drawn properties. Animate drawn from 0 to 1 to reveal the outline. Fill can then be animated separately:

import { Animate, Color, Slide } from "presenter";
const slide = Slide({  objects: [star],  animations: [    [      Animate(star, { drawn: 1 }, { block: true }),      Animate(star, { fillColor: Color("#fde68a") }, { duration: 500 }),    ],  ],});

Rectangle

Set x, y, width, and height. Use cornerRadius for rounded corners.

The full list of available Rectangle properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of shape sits at (x, y)	Anchor.TOP_LEFT
cornerRadius	number	Amount of corner rounding, in pixels	0
description	string | null	Accessible description of shape	null
drawn	number	Proportion of the shape that is drawn	1
height	number	Height of shape, in pixels	100
fillColor	Color	Color of shape's fill	Color.BLACK
opacity	number	Opacity of shape	1
strokeColor	Color	Color of shape's border	Color.BLACK
strokeWidth	number	Size of shape's border in pixels	0
width	number	Width of shape, in pixels	100
x	number	Horizontal position of shape	0
y	number	Vertical position of shape	0

Circle

Set the center with x and y, then use radius for size.

The full list of available Circle properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of shape sits at (x, y)	Anchor.TOP_LEFT
drawn	number	Proportion of the shape that is drawn	1
description	string | null	Accessible description of shape	null
fillColor	Color	Color of shape's fill	Color.BLACK
opacity	number	Opacity of shape	1
radius	number	Radius of circle, in pixels	50
strokeColor	Color	Color of shape's border	Color.BLACK
strokeWidth	number	Size of shape's border in pixels	0
x	number	Horizontal position of shape	0
y	number	Vertical position of shape	0

Polygon

points is an array of { x, y } coordinates in slide space. Presenter.js connects the final point back to the first, so the polygon is always closed.

The full list of available Polygon properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of shape sits at (x, y)	Anchor.TOP_LEFT
description	string | null	Accessible description of shape	null
drawn	number	Proportion of the shape that is drawn	1
fillColor	Color	Color of shape's fill	Color.BLACK
opacity	number	Opacity of shape	1
points	Position[]	{ x, y } coordinates of polygon vertices	[{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 100 }]
strokeColor	Color	Color of shape's border	Color.BLACK
strokeWidth	number	Size of shape's border in pixels	0

Path

path accepts SVG path data. viewboxWidth and viewboxHeight describe the coordinate system used by that data; width and height control its rendered size. This makes one path easy to reuse at different sizes.

The full list of available Path properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of shape sits at (x, y)	Anchor.TOP_LEFT
description	string | null	Accessible description of shape	null
drawn	number	Proportion of the shape that is drawn	1
fillColor	Color	Color of shape's fill	Transparent()
height	number	Height of shape, in pixels	100
isRounded	boolean	Whether stroke has rounded line caps	false
opacity	number	Opacity of shape	1
path	string	SVG path string	M 0 0 L 100 100
pathLength	number	Length of SVG path	Computed path length
strokeColor	Color	Color of shape's border	Color.BLACK
strokeWidth	number	Size of shape's border in pixels	4
viewboxHeight	number	Coordinate height of SVG viewbox	height
viewboxWidth	number	Coordinate width of SVG viewbox	width
width	number	Width of shape, in pixels	100
x	number	Horizontal position of shape	0
y	number	Vertical position of shape	0