Skip to main content

getInstructionIndexAtLength()

Part of the @remotion/paths package.

available from v4.0.84

Gets the index of the instruction that is at the length of the path.
The first argument is an SVG path, the second one is the length at which the point should be sampled.
It must be between 0 and the return value of getLength().

An object containing index and lengthIntoInstruction is returned if the path is valid:

Example
tsx
import { getInstructionIndexAtLength } from "@remotion/paths";
 
const { index, lengthIntoInstruction } = getInstructionIndexAtLength(
  "M 0 0 L 100 0 L 200 0",
  105,
);
console.log(index); // 1
console.log(lengthIntoInstruction); // 5
Example
tsx
import { getInstructionIndexAtLength } from "@remotion/paths";
 
const { index, lengthIntoInstruction } = getInstructionIndexAtLength(
  "M 0 0 L 100 0 L 200 0",
  105,
);
console.log(index); // 1
console.log(lengthIntoInstruction); // 5

To get the instruction at a specific index, you can use parsePath():

Get instruction
tsx
import { getInstructionIndexAtLength, parsePath } from "@remotion/paths";
 
const path = "M 0 0 L 100 0 L 200 0";
const { index } = getInstructionIndexAtLength(path, 105);
 
const parsed = parsePath(path);
const instruction = parsed[index]; // {type: 'L', x: 100, y: 0}
Get instruction
tsx
import { getInstructionIndexAtLength, parsePath } from "@remotion/paths";
 
const path = "M 0 0 L 100 0 L 200 0";
const { index } = getInstructionIndexAtLength(path, 105);
 
const parsed = parsePath(path);
const instruction = parsed[index]; // {type: 'L', x: 100, y: 0}

The function will throw if the path is invalid:

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

The function will throw if the sample length is bigger than the length of the path:

tsx
getInstructionIndexAtLength("M 0 0 L 100 0", 105); // Error: A length of 105 was passed to getInstructionIndexAtLength() but the total length of the path is only 100;
tsx
getInstructionIndexAtLength("M 0 0 L 100 0", 105); // Error: A length of 105 was passed to getInstructionIndexAtLength() but the total length of the path is only 100;

Credits​

This function was adapted from svg-path-properties.

See also​