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 at which length the point should be sampled. It must be between 0 and the return value of getLength().

An object containing x and y is returned if the path is valid:

tsx
import { getPointAtLength } from "@remotion/paths";
 
const point = getPointAtLength("M 0 0 L 100 0", 50);
console.log(point); // { x: 50, y: 0 }
tsx
import { getPointAtLength } from "@remotion/paths";
 
const point = getPointAtLength("M 0 0 L 100 0", 50);
console.log(point); // { x: 50, y: 0 }

The function will throw if the path is invalid:

tsx
getPointAtLength("remotion", 50); // Error: Malformed path data: ...
tsx
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.

tsx
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 }
tsx
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​