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 length at which the point should be sampled.

Returns a point if the path is valid and the length is between 0 and the return value of getLength():

import { getTangentAtLength } from "@remotion/paths";

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

From v5.0.0, the function returns null if the requested length is greater than the length of the path. In Remotion 4.0, it returned the tangent at the end of the path. See the migration guide.

The function will throw if the path is invalid:

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

Credits​

Source code stems mostly from svg-path-properties.

See also​