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.

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​

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​

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​

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​