Skip to main content

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.
tsx
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"
tsx
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.

See also​