Geometry Primitives

All geometry classes extend VMobject. They support .stroke(), .fill(), .pos(), and all fluent animation methods.

Import any shape directly from 'anima':

import { Circle, Rectangle, Line, Arrow, Arc, Polygon } from 'anima';

Circle

import { Circle } from 'anima';

new Circle(radius?)   // default radius: 1

A full closed circle centered at its local origin.

const c = new Circle(0.5).fill(Color.BLUE).pos(2, 0);

import { Rectangle } from 'anima';

new Rectangle(width?, height?)   // defaults: 2 × 1

Centered at its local origin.

const r = new Rectangle(3, 2).stroke(Color.RED, 3).fill(Color.BLUE, 0.5);

import { Line } from 'anima';

new Line(x1?, y1?, x2?, y2?)   // defaults: (0,0) → (1,0)

A straight line between two points.

const l = new Line(-2, 0, 2, 0).stroke(Color.WHITE, 2);

import { Arrow } from 'anima';

new Arrow(x1?, y1?, x2?, y2?, tipLength?, tipAngle?)
// defaults: (0,0) → (1,0), tip 0.25 units, 30° angle

A Line with a filled arrowhead at the end point. The tip is automatically filled.

const a = new Arrow(0, 0, 3, 0).stroke(Color.YELLOW, 2);

import { Arc } from 'anima';

new Arc(radius?, startAngle?, endAngle?)
// defaults: radius 1, 0 → π/2 (quarter circle)

An arc segment. Angles are in radians.

const arc = new Arc(2, 0, Math.PI).stroke(Color.GREEN, 3);

import { Polygon } from 'anima';

new Polygon(...points: Array<[number, number]>)

A closed polygon from planar point tuples.

const triangle = new Polygon(
  [0, 1],
  [-1, -0.5],
  [1, -0.5]
).fill(Color.RED);

Setup with chaining:

const circle = new Circle(1)
  .stroke(Color.WHITE, 2)
  .fill(Color.BLUE, 0.6)
  .pos(-3, 0);

All shapes start with opacity 0 until added to the scene via this.add() or an intro animation.