warpPath()
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.tstsx
import {warpPath ,WarpPathFn } from "@remotion/paths";constfn :WarpPathFn = ({x ,y }) => ({x :x +Math .sin (y / 4) * 5,y :y ,});constnewPath =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.tstsx
import {warpPath ,WarpPathFn } from "@remotion/paths";constfn :WarpPathFn = ({x ,y }) => ({x :x +Math .sin (y / 4) * 5,y :y ,});constnewPath =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";constfn :WarpPathFn = ({x ,y }) => ({x :x +Math .sin (y / 4) * 5,y :y ,});
tsx
import {WarpPathFn } from "@remotion/paths";constfn :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.