Ellipse

Circles, ovals, and arcs. Control the arc extent with startAngle and sweep.

0.0s / 4.0s

Usage

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

export default createScene(function* (stage) {
  // Full circle
  stage.add(<Ellipse width={200} height={200} fill="#6990DD" />);

  // Arc (progress ring)
  stage.add(
    <Ellipse
      width={360}
      height={360}
      startAngle={-90}
      sweep={270}
      stroke={{ fill: '#6990DD', weight: 24 }}
    />
  );
});

Props

Prop	Type	Default	Description
`startAngle`	`number`	`0`	Starting angle of the arc in degrees (0 = right/3 o'clock, clockwise)
`sweep`	`number`	`360`	Angular extent of the arc in degrees. `360` = full ellipse
`ratio`	`number`	`1`	Width-to-height ratio override

Animating

All props animate with .to(). Animate sweep to create a progress ring or pie chart:

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

export default createScene(function* (stage) {
  const ring = createRef<Ellipse>();

  stage.add(
    <Ellipse
      ref={ring}
      width={360}
      height={360}
      startAngle={-90}
      sweep={0}
      stroke={{ fill: '#6990DD', weight: 24 }}
    />
  );

  // Draw ring from 0 to full circle
  yield* ring().to({ sweep: 360 }, 1.5, easeInOut);
});

Animate startAngle to spin the arc opening around the circle:

yield* ring().to({ startAngle: ring().startAngle + 360 }, 2);

Notes

Angles are in degrees, measured clockwise from the 3 o'clock position.
For a progress ring, set startAngle: -90 so the arc starts at 12 o'clock.
The start/end draw props inherited from ShapeNode trace the outline; sweep controls the geometric arc extent.