<Pie />

import {ShapeSeeAlso, ShapeOptions} from "../../components/shapes/shapes-info"

Part of the @remotion/shapes package.

Renders an SVG element drawing a pie piece.

Explorer

Example

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

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

Props

See also