Back to Remotion

getTangentAtLength()

packages/docs/docs/paths/get-tangent-at-length.mdx

4.0.5031.3 KB
Original Source

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():

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

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

From <AvailableFrom v="5.0.0" inline />, 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:

tsx
import { getTangentAtLength } from "@remotion/paths";
// ---cut---
getTangentAtLength("remotion", 50); // Error: Malformed path data: ...

Credits

Source code stems mostly from svg-path-properties.

See also