Skip to main content

<Ellipse />

Part of the @remotion/shapes package.

Renders an SVG element drawing an ellipse.

Explorer​

Example​

src/Ellipse.tsx
tsx
import { Ellipse } from "@remotion/shapes";
import { AbsoluteFill } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "white",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Ellipse rx={100} ry={50} fill="green" stroke="red" strokeWidth={1} />
    </AbsoluteFill>
  );
};
src/Ellipse.tsx
tsx
import { Ellipse } from "@remotion/shapes";
import { AbsoluteFill } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "white",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Ellipse rx={100} ry={50} fill="green" stroke="red" strokeWidth={1} />
    </AbsoluteFill>
  );
};

Props​

rx

number

The radius of the ellipse on the X axis.

ry

number

The radius of the ellipse on the Y axis.

fill

string

The color of the shape.

stroke

string

The color of the stroke. Should be used together with strokeWidth.

strokeWidth

string

The width of the stroke. Should be used together with stroke.

style

string

CSS properties that will be applied to the <svg> tag. Default style: overflow: 'visible'

pathStyle

string

CSS properties that will be applied to the <path> tag. Default style: transform-box: 'fill-box' and a dynamically calculated transform-origin which is the center of the shape, so that the shape rotates around its center by default.

strokeDasharray

string

Allows to animate a path. See evolvePath() for an example.

strokeDashoffset

string

Allows to animate a path. See evolvePath() for an example.

Other props

All other props that can be passed to a <path> are accepted and will be forwarded.

See also​