API Reference

interpolate(paths, options)

Returns a function that interpolates between two or more paths.

// create function to interpolate between the two paths
const interpolator = polymorph.interpolate(['#play', '#pause'], {
   addPoints: 0,
   origin: { x: 0, y: 0 },
   optimize: 'fill',
   precision: 0

// pass a number between 0 and 1. 0.5 is 50% in the middle.
const midway = interpolator(0.5)


An array of path data. Each item can be a PathElement, a CSS selector, or a path string ('M0,0 ...')


addPointsAdds additional points to each side of the tween over what is required. This takes effect when optimize is set to fill. The default value is 0.
originThere are two modes to origin: absolute and relative. When absolute is true, x and y are exact coordinates in the SVG space. When absolute is false, x and y are values between 0 and 1 representing 0% to 100% of the bounding box of the path. This is similar to transform-origin in CSS. The default value is { x: 0, y: 0, absolute: false } (upper left corner of the bounding box of the path)
optimizeDetermines the strategy for aligning two disparate shapes. none does nothing and should be used when the paths are optimized by hand. fill creates new subpaths as needed and inserts additional points as needed. The default value is fill.
precisionThe number of decimal places to use when rendering paths. Increasing this value smooths out shapes at the cost of browser rendering speed on some platforms. The default value is 0
Last Updated:
Contributors: B1t