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";
constpath="M 0 0 L 100 0 L 100 100";
constcutAtLength=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";
constsimpleLine="M 0 0 L 100 0";
consthalfLine=cutPath(simpleLine, 50);
console.log(halfLine); // "M 0 0 L 50 0"

Cutting a path with curves

tsx
import { cutPath } from"@remotion/paths";
constcurvePath="M 0 0 C 50 0 50 50 100 50";
constcutCurve=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";
constpath="M 0 0 L 100 0";
// Length greater than path length
constfullPath=cutPath(path, 200);
console.log(fullPath); // "M 0 0 L 100 0"
// Zero length
conststartOnly=cutPath(path, 0);
console.log(startOnly); // "M 0 0"

Arguments​

d​

length​

Return value​

Examples​

Cutting a simple line​

Cutting a path with curves​

Handling edge cases​

See also​