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"