Skip to main content

@remotion/paths

A package providing utility functions for dealing with SVG paths. This package includes code from svg-path-properties, svg-path-reverse, svgpath, svg-path-bbox, translate-svg-path and d3-interpolate-path with the following improvements:

Functional style APIs
First class Typescript types
Documentation with examples
ESM import style

This package has no dependencies, meaning this package can be used without Remotion.

npm
pnpm
yarn

bash
npm i @remotion/paths

bash
npm i @remotion/paths

bash
pnpm i @remotion/paths

bash
pnpm i @remotion/paths

bash
yarn add @remotion/paths

bash
yarn add @remotion/paths

Functions

getLength()

Obtain length of an SVG path

getPointAtLength()

Get coordinates at a certain point of an SVG path

getTangentAtLength()

Gets tangents x and y of a point which is on an SVG path

reversePath()

Switch direction of an SVG path

normalizePath()

Replace relative with absolute coordinates

interpolatePath()

Interpolates between two SVG paths

evolvePath()

Animate an SVG path

translatePath()

Translates the position of an path against X/Y coordinates

Remap the coordinates of a path

scalePath()

Grow or shrink the size of the path

getBoundingBox()

Get the bounding box of a SVG path

resetPath()

Translates an SVG path to (0, 0)

extendViewBox()

Widen an SVG viewBox in all directions

getSubpaths()

Split SVG path into its parts

parsePath()

Parse a string into an array of instructions

serializeInstructions()

Turn an array of instructions into a SVG path

reduceInstructions()

Reduce the amount of instruction types

License

MIT

Functions
License