Skip to main content

cutPath()

Part of the @remotion/paths package.

Cuts an SVG path at a specified length, returning the portion from the start to that length.

tsx
import { cutPath } from "@remotion/paths";
 
const path = "M 0 0 L 100 0 L 100 100";
const cutAtLength = cutPath(path, 50);
console.log(cutAtLength); // "M 0 0 L 50 0"

Arguments​

d​

string

A valid SVG path property. For example:

M 0 0 L 100 0 L 100 100 L 0 100 Z

length​

number

The length at which to cut the path. If the length is greater than the total path length, the entire path is returned. If the length is 0, only the initial move command is returned.

Return value​

A string representing the cut path from the start to the specified length.

Examples​

Cutting a simple line​

tsx
import { cutPath } from "@remotion/paths";
 
const simpleLine = "M 0 0 L 100 0";
const halfLine = cutPath(simpleLine, 50);
console.log(halfLine); // "M 0 0 L 50 0"

Cutting a path with curves​

tsx
import { cutPath } from "@remotion/paths";
 
const curvePath = "M 0 0 C 50 0 50 50 100 50";
const cutCurve = cutPath(curvePath, 30);
console.log(cutCurve); // "M 0 0 C 30 0 30 15 60 15" (approximate)

Handling edge cases​

tsx
import { cutPath } from "@remotion/paths";
 
const path = "M 0 0 L 100 0";
 
// Length greater than path length
const fullPath = cutPath(path, 200);
console.log(fullPath); // "M 0 0 L 100 0"
 
// Zero length
const startOnly = cutPath(path, 0);
console.log(startOnly); // "M 0 0"

See also​