Skip to main content

<Polygon />

Part of the @remotion/shapes package.

Renders an SVG element containing a polygon.

Explorer​

Drag current shape into a layer in the Studio

Example​

src/Polygon.tsx
import { Polygon } from "@remotion/shapes";
import { AbsoluteFill } from "remotion";

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "white",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Polygon points={5} radius={80} />
    </AbsoluteFill>
  );
};

Props​

points

number

The number of points in the polygon.

radius

number

The radius of the polygon.

edgeRoundness

number | null

Allows to modify the shape by rounding the edges using bezier curves. Default null.

cornerRadius

number

Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness. Default 0.

fill

string

The color of the shape.

stroke

string

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

strokeWidth

number | string

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

style

React.CSSProperties

CSS properties that will be applied to the <svg> tag, or to the generated <canvas> if effects are passed. Default style: overflow: 'visible'

pathStyle

React.CSSProperties

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.

debug

boolean

If enabled, draws the lines for Bézier curves. This is meant for debugging, note that the visuals may change in any version.

effects

EffectsProp

Apply effects after the shape has been painted to a canvas. Available from v4.0.474. If this is a non-empty array, the shape is wrapped in <HtmlInCanvas>.

effectsOutputSize

EffectsOutputSize

The pixel dimensions used by the effect chain. See Effect resolution. Available from v4.0.536.

pixelDensity

number

Controls the backing bitmap density when effects are passed. Default: 1. Available from v4.0.474.

Inherited propsv4.0.474

<Polygon> inherits from, durationInFrames, trimBefore (from v4.0.482), playbackRate, loop, freeze, name, showInTimeline and hidden from <Sequence>.

From v4.0.528, it also inherits premountFor, postmountFor, styleWhilePremounted and styleWhilePostmounted from <Sequence>.

Premounting styles apply to the SVG element, or the canvas when using effects.

Other props

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

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​