Skip to main content

warpPath()

import {WarpTextTutorial} from '../../src/components/tutorials';

Part of the @remotion/paths package. Available from v3.3.43

Allows you to remap the coordinates of an SVG using a function in order to create a warp effect.

warp-path.ts
tsx
import { warpPath, WarpPathFn } from "@remotion/paths";
 
const fn: WarpPathFn = ({ x, y }) => ({
x: x + Math.sin(y / 4) * 5,
y: y,
});
 
const newPath = warpPath("M 0 0 L 0 100", fn); // M 0 0 L 0.970365514464549 0.78125 L 1.9038320449619508 1.5625 L 2.7649037231526368 2.34375...;
warp-path.ts
tsx
import { warpPath, WarpPathFn } from "@remotion/paths";
 
const fn: WarpPathFn = ({ x, y }) => ({
x: x + Math.sin(y / 4) * 5,
y: y,
});
 
const newPath = warpPath("M 0 0 L 0 100", fn); // M 0 0 L 0.970365514464549 0.78125 L 1.9038320449619508 1.5625 L 2.7649037231526368 2.34375...;
Input Output

How it works

This function works by splitting SVG instructions into many smaller SVG instructions and then remapping the coordinates of each instruction. This will result in the output being a much SVG path than the input.

Arguments

path

An SVG path string.

fn

A function that takes the coordinates of the SVG path and returns the new coordinates. The type of the function is WarpPathFn which can also be imported from @remotion/paths.

tsx
import { WarpPathFn } from "@remotion/paths";
 
const fn: WarpPathFn = ({ x, y }) => ({
x: x + Math.sin(y / 4) * 5,
y: y,
});
tsx
import { WarpPathFn } from "@remotion/paths";
 
const fn: WarpPathFn = ({ x, y }) => ({
x: x + Math.sin(y / 4) * 5,
y: y,
});

options

interpolationThreshold

The interpolation algorithm will split the SVG path recursively into smaller SVG paths. This option allows you to specify the distance of a segment at which the algorithm should stop dividing the path into smaller segments.

Since SVG is unitless, the threshold is measured in SVG units.

By default the threshold is the 1% width or height of the bounding box of the path, whichever is bigger. In other terms, it is Math.max(width, height) * 0.01.

Credits

This function is based on the WarpJS library and has been converted to use TypeScript and a pure functional programming API.

See also