Skip to main content

makeCallout()

Part of the @remotion/shapes package.

Generates an SVG path for a callout shape.

Example​

callout.ts
import { makeCallout } from "@remotion/shapes";

const { path, width, height, transformOrigin } = makeCallout({
  width: 500,
  height: 200,
  pointerLength: 40,
  pointerBaseWidth: 60,
  pointerDirection: "down",
  cornerRadius: 20,
});

console.log(path);
console.log(width); // 500
console.log(height); // 240
console.log(transformOrigin); // '250 100'

Arguments​

width

number

The width of the callout body. Default 500.

height

number

The height of the callout body. Default 200.

pointerLength

number

The length of the pointer. Default 40.

pointerBaseWidth

number

The width of the pointer where it meets the body. Default 60.

pointerPosition

number

The position of the pointer along its side, from 0 to 1. Default 0.5.

pointerDirection

"left" | "right" | "up" | "down"

The direction the pointer points. Default down.

edgeRoundness

number | null

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

Return type​

path

A string that is suitable as an argument for d in a <path> element.

width

The width of the callout. Suitable for defining the viewBox of an <svg> tag.

height

The height of the callout. Suitable for defining the viewBox of an <svg> tag.

instructions

An array with SVG instructions. The type for a instruction can be seen by importing Instruction from @remotion/shapes.

transformOrigin

A string representing the point of origin if a shape should be rotated around itself.

If you want to rotate the shape around its center, use the transform-origin CSS property and pass this value, and also add transform-box: fill-box.

The transformOrigin is the center of the callout body. The pointer is not included in the calculation.

See also​