interpolatePath()

Part of the @remotion/paths package.

Interpolates between two SVG paths. The function takes three arguments:

• value, which is a number.
  • If it is 0, the first path is returned.
  • If it is 1, the second path is returned.
  • If it is inbetween or outside the range, the path is interpolated.
• firstPath, which must be a valid SVG path.
• secondPath, which must be a valid SVG path.

import {interpolatePath} from '@remotion/paths';

const interpolated = interpolatePath(0.5, 'M 0 0 L 100 0', 'M 100 0 L 0 0');
console.log(interpolated); // "M 50 0 L 50 0"

Credits

Source code stems mostly from d3-interpolate-path.

Compatibility

Browsers			Servers			Environments
Chrome	Firefox	Safari	Node.js	Bun	Serverless Functions	Client-side rendering	Server-side rendering	Player	Studio

See also

• interpolatePaths() for multiple keyframes, easing, and posterization
• @remotion/paths
• Source code for this function