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​