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

These utilities can be used outside a Remotion composition.

npm i @remotion/paths

Functions​

getLength()
Obtain length of an SVG path
cutPath()
Cut an SVG path at a specified length
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
interpolatePaths()
Interpolate SVG paths across multiple keyframes
evolvePath()
Animate an SVG path
centerPath()
Translates an SVG path to center it around a target point
translatePath()
Translates the position of an path against X/Y coordinates
warpPath()
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