Skip to main content

getTangentAtLength()

Part of the @remotion/paths package.

Gets tangent values x and y of a point which is on an SVG path. The first argument is an SVG path, the second one is the at which length the point should be sampled. It must be between 0 and the return value of getLength().

Returns a point if the path is valid:

tsx
import { getTangentAtLength } from "@remotion/paths";
 
const tangent = getTangentAtLength("M 50 50 L 150 50", 50);
console.log(tangent); // { x: 1, y: 0}
tsx
import { getTangentAtLength } from "@remotion/paths";
 
const tangent = getTangentAtLength("M 50 50 L 150 50", 50);
console.log(tangent); // { x: 1, y: 0}

The function will throw if the path is invalid:

tsx
getTangentAtLength("remotion", 50); // Error: Malformed path data: ...
tsx
getTangentAtLength("remotion", 50); // Error: Malformed path data: ...

Credits​

Source code stems mostly from svg-path-properties.

See also​