Back to Remotion

Arrow

packages/docs/docs/shapes/arrow.mdx

4.0.464780 B
Original Source

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

Part of the @remotion/shapes package.

Renders an SVG element containing an arrow shape.

Explorer

<Demo type="arrow" />

Example

tsx
import {Arrow} from '@remotion/shapes';
import {AbsoluteFill} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Arrow length={300} headWidth={185} headLength={120} shaftWidth={80} fill="red" direction="right" />
    </AbsoluteFill>
  );
};

Props

<ShapeOptions shape="arrow" all />

See also

<ShapeSeeAlso shape="arrow" />