Skip to main content

<Star />

Part of the @remotion/shapes package.

Renders an SVG element containing a star.

Explorer​

Drag current shape into a layer in the Studio

Example​

src/Star.tsx
import {Star} from '@remotion/shapes';
import {AbsoluteFill} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Star points={5} innerRadius={100} outerRadius={200} fill="red" />
    </AbsoluteFill>
  );
};

Props​

points

number

The amount of points of the star.

innerRadius

number

The inner radius of the star.

outerRadius

number

The outer radius of the star.

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.

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

<Star> inherits from, durationInFrames, trimBeforev4.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​