Skip to main content

getPointAtLength()

Part of the @remotion/paths package.

Gets the coordinates 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.

An object containing x and y is returned if the path is valid and the length is between 0 and the return value of getLength():

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

const point = getPointAtLength("M 0 0 L 100 0", 50);
console.log(point); // { x: 50, 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 end point of the path. See the migration guide.

The function will throw if the path is invalid:

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

Example: Getting the middle point of a path​

Use getLength() to get the total length of a path and then multiply it with a number between 0 and 1 to get any point on the path. For example, length * 0.5 to get the coordinates in the middle of the path.

import { getLength, getPointAtLength } from "@remotion/paths";

const path = "M 0 0 L 100 0";
const length = getLength(path);
const point = getPointAtLength(path, length * 0.5);

console.log(point); // { x: 50, y: 0 }

Credits​

Source code stems mostly from svg-path-properties.

See also​