makeTriangle()

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

Part of the @remotion/shapes package.

Generates an SVG path for a triangle with the same length on all sides.

Example

triangle.ts
tsx
import { makeTriangle } from "@remotion/shapes";
 
const { path, width, height, transformOrigin } = makeTriangle({
  length: 100,
  direction: "right",
});
 
console.log(path); // M 0 0 L 0 100 L 86.60254037844386 50 z
console.log(width); // 86.60254037844386
console.log(height); // 100
console.log(transformOrigin); // '28.867513459481287 50'

triangle.ts
tsx
import { makeTriangle } from "@remotion/shapes";
 
const { path, width, height, transformOrigin } = makeTriangle({
  length: 100,
  direction: "right",
});
 
console.log(path); // M 0 0 L 0 100 L 86.60254037844386 50 z
console.log(width); // 86.60254037844386
console.log(height); // 100
console.log(transformOrigin); // '28.867513459481287 50'

Arguments

Return type

Credits

Source code partially taken from this StackBlitz.

See also