@remotion/paths 4.0.175 → 4.0.176

package/dist/helpers/split-curve.d.ts

@@ -0,0 +1,47 @@
+/**
+ * List of params for each command type in a path `d` attribute
+ */
+export declare const typeMap: {
+    M: string[];
+    L: string[];
+    H: string[];
+    V: string[];
+    C: string[];
+    S: string[];
+    Q: string[];
+    T: string[];
+    A: string[];
+    Z: never[];
+    m: string[];
+    l: string[];
+    h: string[];
+    v: string[];
+    c: string[];
+    s: string[];
+    q: string[];
+    t: string[];
+    a: string[];
+    z: never[];
+};
+export type Command = {
+    x2?: number | undefined;
+    y2?: number | undefined;
+    x1?: number | undefined;
+    y1?: number | undefined;
+    x?: number;
+    y?: number;
+    xAxisRotate?: number;
+    largeArcFlag?: boolean;
+    sweepFlag?: boolean;
+    type: keyof typeof typeMap;
+};
+/**
+ * Convert command objects to arrays of points, run de Casteljau's algorithm on it
+ * to split into to the desired number of segments.
+ *
+ * @param {Object} commandStart The start command object
+ * @param {Object} commandEnd The end command object
+ * @param {Number} segmentCount The number of segments to create
+ * @return {Object[]} An array of commands representing the segments in sequence
+ */
+export declare const splitCurve: (commandStart: Command, commandEnd: Command, segmentCount: number) => Command[];

package/dist/helpers/split-curve.js

@@ -0,0 +1,190 @@
+"use strict";
+/*
+
+Copied and adapted from https://github.com/pbeshai/d3-interpolate-path:
+Copyright 2016, Peter Beshai
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the author nor the names of contributors may be used to
+  endorse or promote products derived from this software without specific prior
+  written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitCurve = exports.typeMap = void 0;
+/**
+ * de Casteljau's algorithm for drawing and splitting bezier curves.
+ * Inspired by https://pomax.github.io/bezierinfo/
+ *
+ * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+ *   The original segment to split.
+ * @param {Number} t Where to split the curve (value between [0, 1])
+ * @return {Object} An object { left, right } where left is the segment from 0..t and
+ *   right is the segment from t..1.
+ */
+function decasteljau(points, t) {
+    const left = [];
+    const right = [];
+    function decasteljauRecurse(_points, _t) {
+        if (_points.length === 1) {
+            left.push(_points[0]);
+            right.push(_points[0]);
+        }
+        else {
+            const newPoints = Array(_points.length - 1);
+            for (let i = 0; i < newPoints.length; i++) {
+                if (i === 0) {
+                    left.push(_points[0]);
+                }
+                if (i === newPoints.length - 1) {
+                    right.push(_points[i + 1]);
+                }
+                newPoints[i] = [
+                    (1 - _t) * _points[i][0] + _t * _points[i + 1][0],
+                    (1 - _t) * _points[i][1] + _t * _points[i + 1][1],
+                ];
+            }
+            decasteljauRecurse(newPoints, _t);
+        }
+    }
+    if (points.length) {
+        decasteljauRecurse(points, t);
+    }
+    return { left, right: right.reverse() };
+}
+/**
+ * List of params for each command type in a path `d` attribute
+ */
+exports.typeMap = {
+    M: ['x', 'y'],
+    L: ['x', 'y'],
+    H: ['x'],
+    V: ['y'],
+    C: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
+    S: ['x2', 'y2', 'x', 'y'],
+    Q: ['x1', 'y1', 'x', 'y'],
+    T: ['x', 'y'],
+    A: ['rx', 'ry', 'xAxisRotation', 'largeArcFlag', 'sweepFlag', 'x', 'y'],
+    Z: [],
+    m: ['x', 'y'],
+    l: ['x', 'y'],
+    h: ['x'],
+    v: ['y'],
+    c: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
+    s: ['x2', 'y2', 'x', 'y'],
+    q: ['x1', 'y1', 'x', 'y'],
+    t: ['x', 'y'],
+    a: ['rx', 'ry', 'xAxisRotation', 'largeArcFlag', 'sweepFlag', 'x', 'y'],
+    z: [],
+};
+/**
+ * Convert segments represented as points back into a command object
+ *
+ * @param {Number[][]} points Array of [x,y] points: [start, control1, control2, ..., end]
+ *   Represents a segment
+ * @return {Object} A command object representing the segment.
+ */
+function pointsToCommand(points) {
+    let x2;
+    let y2;
+    let x1;
+    let y1;
+    if (points.length === 4) {
+        x2 = points[2][0];
+        y2 = points[2][1];
+    }
+    if (points.length >= 3) {
+        x1 = points[1][0];
+        y1 = points[1][1];
+    }
+    const x = points[points.length - 1][0];
+    const y = points[points.length - 1][1];
+    let type = 'L';
+    if (points.length === 4) {
+        // start, control1, control2, end
+        type = 'C';
+    }
+    else if (points.length === 3) {
+        // start, control, end
+        type = 'Q';
+    }
+    return { x2, y2, x1, y1, x, y, type };
+}
+/**
+ * Runs de Casteljau's algorithm enough times to produce the desired number of segments.
+ *
+ * @param {Number[][]} points Array of [x,y] points for de Casteljau (the initial segment to split)
+ * @param {Number} segmentCount Number of segments to split the original into
+ * @return {Number[][][]} Array of segments
+ */
+function splitCurveAsPoints(points, segmentCount) {
+    segmentCount = segmentCount || 2;
+    const segments = [];
+    let remainingCurve = points;
+    const tIncrement = 1 / segmentCount;
+    // x-----x-----x-----x
+    // t=  0.33   0.66   1
+    // x-----o-----------x
+    // r=  0.33
+    //       x-----o-----x
+    // r=         0.5  (0.33 / (1 - 0.33))  === tIncrement / (1 - (tIncrement * (i - 1))
+    // x-----x-----x-----x----x
+    // t=  0.25   0.5   0.75  1
+    // x-----o----------------x
+    // r=  0.25
+    //       x-----o----------x
+    // r=         0.33  (0.25 / (1 - 0.25))
+    //             x-----o----x
+    // r=         0.5  (0.25 / (1 - 0.5))
+    for (let i = 0; i < segmentCount - 1; i++) {
+        const tRelative = tIncrement / (1 - tIncrement * i);
+        const split = decasteljau(remainingCurve, tRelative);
+        segments.push(split.left);
+        remainingCurve = split.right;
+    }
+    // last segment is just to the end from the last point
+    segments.push(remainingCurve);
+    return segments;
+}
+/**
+ * Convert command objects to arrays of points, run de Casteljau's algorithm on it
+ * to split into to the desired number of segments.
+ *
+ * @param {Object} commandStart The start command object
+ * @param {Object} commandEnd The end command object
+ * @param {Number} segmentCount The number of segments to create
+ * @return {Object[]} An array of commands representing the segments in sequence
+ */
+const splitCurve = (commandStart, commandEnd, segmentCount) => {
+    const points = [[commandStart.x, commandStart.y]];
+    if (commandEnd.x1 !== null && commandEnd.x1 !== undefined) {
+        points.push([commandEnd.x1, commandEnd.y1]);
+    }
+    if (commandEnd.x2 !== null && commandEnd.x2 !== undefined) {
+        points.push([commandEnd.x2, commandEnd.y2]);
+    }
+    points.push([commandEnd.x, commandEnd.y]);
+    return splitCurveAsPoints(points, segmentCount).map(pointsToCommand);
+};
+exports.splitCurve = splitCurve;

package/dist/interpolate-path/array-of-length.d.ts

@@ -0,0 +1 @@
+export declare function arrayOfLength<T>(length: number, value: T): T[];

package/dist/interpolate-path/array-of-length.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.arrayOfLength = void 0;
+function arrayOfLength(length, value) {
+    const array = Array(length);
+    for (let i = 0; i < length; i++) {
+        array[i] = value;
+    }
+    return array;
+}
+exports.arrayOfLength = arrayOfLength;

package/dist/interpolate-path/command-to-string.d.ts

@@ -0,0 +1,7 @@
+import type { Command } from './command';
+/**
+ * Converts a command object to a string to be used in a `d` attribute
+ * @param {Object} command A command object
+ * @return {String} The string for the `d` attribute
+ */
+export declare function commandToString(command: Command): string;

package/dist/interpolate-path/command-to-string.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commandToString = void 0;
+const command_1 = require("./command");
+/**
+ * Converts a command object to a string to be used in a `d` attribute
+ * @param {Object} command A command object
+ * @return {String} The string for the `d` attribute
+ */
+function commandToString(command) {
+    return `${command.type} ${command_1.typeMap[command.type]
+        .map((p) => command[p])
+        .join(' ')}`;
+}
+exports.commandToString = commandToString;

package/dist/interpolate-path/command.d.ts

@@ -0,0 +1,37 @@
+/**
+ * List of params for each command type in a path `d` attribute
+ */
+export declare const typeMap: {
+    M: string[];
+    L: string[];
+    H: string[];
+    V: string[];
+    C: string[];
+    S: string[];
+    Q: string[];
+    T: string[];
+    A: string[];
+    Z: never[];
+    m: string[];
+    l: string[];
+    h: string[];
+    v: string[];
+    c: string[];
+    s: string[];
+    q: string[];
+    t: string[];
+    a: string[];
+    z: never[];
+};
+export type Command = {
+    x2?: number | undefined;
+    y2?: number | undefined;
+    x1?: number | undefined;
+    y1?: number | undefined;
+    x?: number;
+    y?: number;
+    xAxisRotate?: number;
+    largeArcFlag?: boolean;
+    sweepFlag?: boolean;
+    type: keyof typeof typeMap;
+};

package/dist/interpolate-path/command.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typeMap = void 0;
+/**
+ * List of params for each command type in a path `d` attribute
+ */
+exports.typeMap = {
+    M: ['x', 'y'],
+    L: ['x', 'y'],
+    H: ['x'],
+    V: ['y'],
+    C: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
+    S: ['x2', 'y2', 'x', 'y'],
+    Q: ['x1', 'y1', 'x', 'y'],
+    T: ['x', 'y'],
+    A: ['rx', 'ry', 'xAxisRotation', 'largeArcFlag', 'sweepFlag', 'x', 'y'],
+    Z: [],
+    m: ['x', 'y'],
+    l: ['x', 'y'],
+    h: ['x'],
+    v: ['y'],
+    c: ['x1', 'y1', 'x2', 'y2', 'x', 'y'],
+    s: ['x2', 'y2', 'x', 'y'],
+    q: ['x1', 'y1', 'x', 'y'],
+    t: ['x', 'y'],
+    a: ['rx', 'ry', 'xAxisRotation', 'largeArcFlag', 'sweepFlag', 'x', 'y'],
+    z: [],
+};

package/dist/interpolate-path/convert-to-same-type.d.ts

@@ -0,0 +1,22 @@
+import type { Command } from './command';
+/**
+ * Converts command A to have the same type as command B.
+ *
+ * e.g., L0,5 -> C0,5,0,5,0,5
+ *
+ * Uses these rules:
+ * x1 <- x
+ * x2 <- x
+ * y1 <- y
+ * y2 <- y
+ * rx <- 0
+ * ry <- 0
+ * xAxisRotation <- read from B
+ * largeArcFlag <- read from B
+ * sweepflag <- read from B
+ *
+ * @param {Object} aCommand Command object from path `d` attribute
+ * @param {Object} bCommand Command object from path `d` attribute to match against
+ * @return {Object} aCommand converted to type of bCommand
+ */
+export declare function convertToSameType(aCommand: Command, bCommand: Command): Command;

package/dist/interpolate-path/convert-to-same-type.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToSameType = void 0;
+/**
+ * Converts command A to have the same type as command B.
+ *
+ * e.g., L0,5 -> C0,5,0,5,0,5
+ *
+ * Uses these rules:
+ * x1 <- x
+ * x2 <- x
+ * y1 <- y
+ * y2 <- y
+ * rx <- 0
+ * ry <- 0
+ * xAxisRotation <- read from B
+ * largeArcFlag <- read from B
+ * sweepflag <- read from B
+ *
+ * @param {Object} aCommand Command object from path `d` attribute
+ * @param {Object} bCommand Command object from path `d` attribute to match against
+ * @return {Object} aCommand converted to type of bCommand
+ */
+function convertToSameType(aCommand, bCommand) {
+    const conversionMap = {
+        x1: 'x',
+        y1: 'y',
+        x2: 'x',
+        y2: 'y',
+    };
+    const readFromBKeys = ['xAxisRotation', 'largeArcFlag', 'sweepFlag'];
+    // convert (but ignore M types)
+    if (aCommand.type !== bCommand.type && bCommand.type.toUpperCase() !== 'M') {
+        const aConverted = {
+            type: bCommand.type,
+        };
+        Object.keys(bCommand).forEach((bKey) => {
+            const bValue = bCommand[bKey];
+            // first read from the A command
+            let aValue = aCommand[bKey];
+            // if it is one of these values, read from B no matter what
+            if (aValue === undefined) {
+                if (readFromBKeys.includes(bKey)) {
+                    aValue = bValue;
+                }
+                else {
+                    // if it wasn't in the A command, see if an equivalent was
+                    if (aValue === undefined &&
+                        conversionMap[bKey]) {
+                        aValue =
+                            aCommand[conversionMap[bKey]];
+                    }
+                    // if it doesn't have a converted value, use 0
+                    if (aValue === undefined) {
+                        aValue = 0;
+                    }
+                }
+            }
+            // @ts-expect-error
+            aConverted[bKey] = aValue;
+        });
+        // update the type to match B
+        aConverted.type = bCommand.type;
+        aCommand = aConverted;
+    }
+    return aCommand;
+}
+exports.convertToSameType = convertToSameType;

package/dist/interpolate-path/interpolate-commands.d.ts

@@ -0,0 +1,16 @@
+import { type Command } from './command';
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` command in paths unless both A and B end with it.
+ *
+ * This function works directly with arrays of command objects instead of with
+ * path `d` strings (see interpolatePath for working with `d` strings).
+ *
+ * @param {Object[]} aCommandsInput Array of path commands
+ * @param {Object[]} bCommandsInput Array of path commands
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+ */
+export declare function interpolatePathCommands(aCommandsInput: Command[], bCommandsInput: Command[]): (t: number) => Command[];

package/dist/interpolate-path/interpolate-commands.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolatePathCommands = void 0;
+const command_1 = require("./command");
+const convert_to_same_type_1 = require("./convert-to-same-type");
+const extend_command_1 = require("./extend-command");
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` command in paths unless both A and B end with it.
+ *
+ * This function works directly with arrays of command objects instead of with
+ * path `d` strings (see interpolatePath for working with `d` strings).
+ *
+ * @param {Object[]} aCommandsInput Array of path commands
+ * @param {Object[]} bCommandsInput Array of path commands
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+ */
+function interpolatePathCommands(aCommandsInput, bCommandsInput) {
+    // make a copy so we don't mess with the input arrays
+    let aCommands = aCommandsInput === null || aCommandsInput === undefined
+        ? []
+        : aCommandsInput.slice();
+    let bCommands = bCommandsInput === null || bCommandsInput === undefined
+        ? []
+        : bCommandsInput.slice();
+    // both input sets are empty, so we don't interpolate
+    if (!aCommands.length && !bCommands.length) {
+        return function () {
+            return [];
+        };
+    }
+    // do we add Z during interpolation? yes if both have it. (we'd expect both to have it or not)
+    const addZ = (aCommands.length === 0 || aCommands[aCommands.length - 1].type === 'Z') &&
+        (bCommands.length === 0 || bCommands[bCommands.length - 1].type === 'Z');
+    // we temporarily remove Z
+    if (aCommands.length > 0 && aCommands[aCommands.length - 1].type === 'Z') {
+        aCommands.pop();
+    }
+    if (bCommands.length > 0 && bCommands[bCommands.length - 1].type === 'Z') {
+        bCommands.pop();
+    }
+    // if A is empty, treat it as if it used to contain just the first point
+    // of B. This makes it so the line extends out of from that first point.
+    if (!aCommands.length) {
+        aCommands.push(bCommands[0]);
+        // otherwise if B is empty, treat it as if it contains the first point
+        // of A. This makes it so the line retracts into the first point.
+    }
+    else if (!bCommands.length) {
+        bCommands.push(aCommands[0]);
+    }
+    // extend to match equal size
+    const numPointsToExtend = Math.abs(bCommands.length - aCommands.length);
+    if (numPointsToExtend !== 0) {
+        // B has more points than A, so add points to A before interpolating
+        if (bCommands.length > aCommands.length) {
+            aCommands = (0, extend_command_1.extend)(aCommands, bCommands);
+            // else if A has more points than B, add more points to B
+        }
+        else if (bCommands.length < aCommands.length) {
+            bCommands = (0, extend_command_1.extend)(bCommands, aCommands);
+        }
+    }
+    // commands have same length now.
+    // convert commands in A to the same type as those in B
+    aCommands = aCommands.map((aCommand, i) => (0, convert_to_same_type_1.convertToSameType)(aCommand, bCommands[i]));
+    // create mutable interpolated command objects
+    const interpolatedCommands = aCommands.map((aCommand) => ({ ...aCommand }));
+    if (addZ) {
+        interpolatedCommands.push({ type: 'Z' });
+        aCommands.push({ type: 'Z' }); // required for when returning at t == 0
+    }
+    return function (t) {
+        // at 1 return the final value without the extensions used during interpolation
+        if (t === 1) {
+            return bCommandsInput === null || bCommandsInput === undefined
+                ? []
+                : bCommandsInput;
+        }
+        // work with aCommands directly since interpolatedCommands are mutated
+        if (t === 0) {
+            return aCommands;
+        }
+        // interpolate the commands using the mutable interpolated command objs
+        for (let i = 0; i < interpolatedCommands.length; ++i) {
+            // if (interpolatedCommands[i].type === 'Z') continue;
+            const aCommand = aCommands[i];
+            const bCommand = bCommands[i];
+            const interpolatedCommand = interpolatedCommands[i];
+            for (const arg of command_1.typeMap[interpolatedCommand.type]) {
+                // @ts-expect-error
+                interpolatedCommand[arg] =
+                    (1 - t) * aCommand[arg] +
+                        t * bCommand[arg];
+                // do not use floats for flags (#27), round to integer
+                if (arg === 'largeArcFlag' || arg === 'sweepFlag') {
+                    // @ts-expect-error
+                    interpolatedCommand[arg] = Math.round(interpolatedCommand[arg]);
+                }
+            }
+        }
+        return interpolatedCommands;
+    };
+}
+exports.interpolatePathCommands = interpolatePathCommands;

package/dist/interpolate-path/path-commands-from-string.d.ts

@@ -0,0 +1,8 @@
+import { type Command } from './command';
+/**
+ * Takes a path `d` string and converts it into an array of command
+ * objects. Drops the `Z` character.
+ *
+ * @param {String|null} d A path `d` string
+ */
+export declare function pathCommandsFromString(d: string | null): Command[];

package/dist/interpolate-path/path-commands-from-string.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pathCommandsFromString = void 0;
+const command_1 = require("./command");
+const commandTokenRegex = /[MLCSTQAHVZmlcstqahv]|-?[\d.e+-]+/g;
+/**
+ * Takes a path `d` string and converts it into an array of command
+ * objects. Drops the `Z` character.
+ *
+ * @param {String|null} d A path `d` string
+ */
+function pathCommandsFromString(d) {
+    // split into valid tokens
+    const tokens = (d || '').match(commandTokenRegex) || [];
+    const commands = [];
+    let commandArgs;
+    let command;
+    // iterate over each token, checking if we are at a new command
+    // by presence in the typeMap
+    for (let i = 0; i < tokens.length; ++i) {
+        commandArgs = command_1.typeMap[tokens[i]];
+        // new command found:
+        if (commandArgs) {
+            command = {
+                type: tokens[i],
+            };
+            // add each of the expected args for this command:
+            for (let a = 0; a < commandArgs.length; ++a) {
+                // @ts-expect-error
+                command[commandArgs[a]] = Number(tokens[i + a + 1]);
+            }
+            // need to increment our token index appropriately since
+            // we consumed token args
+            i += commandArgs.length;
+            commands.push(command);
+        }
+    }
+    return commands;
+}
+exports.pathCommandsFromString = pathCommandsFromString;

package/dist/interpolate-path.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description Interpolates between two SVG paths.
+ * @param {number} value A number - 0 means first path, 1 means second path, any other values will be interpolated
+ * @param {string} firstPath The first valid SVG path
+ * @param {string} secondPath The second valid SVG path
+ * @see [Documentation](https://remotion.dev/docs/paths/interpolate-path)
+ */
+export declare const interpolatePath: (value: number, firstPath: string, secondPath: string) => string;

package/dist/interpolate-path.js

@@ -0,0 +1,366 @@
+"use strict";
+/*
+
+Copied and adapted from https://github.com/pbeshai/d3-interpolate-path:
+Copyright 2016, Peter Beshai
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the author nor the names of contributors may be used to
+  endorse or promote products derived from this software without specific prior
+  written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolatePath = void 0;
+const split_curve_1 = require("./helpers/split-curve");
+const commandTokenRegex = /[MLCSTQAHVZmlcstqahv]|-?[\d.e+-]+/g;
+function arrayOfLength(length, value) {
+    const array = Array(length);
+    for (let i = 0; i < length; i++) {
+        array[i] = value;
+    }
+    return array;
+}
+/**
+ * Converts a command object to a string to be used in a `d` attribute
+ * @param {Object} command A command object
+ * @return {String} The string for the `d` attribute
+ */
+function commandToString(command) {
+    return `${command.type} ${split_curve_1.typeMap[command.type]
+        .map((p) => command[p])
+        .join(' ')}`;
+}
+/**
+ * Converts command A to have the same type as command B.
+ *
+ * e.g., L0,5 -> C0,5,0,5,0,5
+ *
+ * Uses these rules:
+ * x1 <- x
+ * x2 <- x
+ * y1 <- y
+ * y2 <- y
+ * rx <- 0
+ * ry <- 0
+ * xAxisRotation <- read from B
+ * largeArcFlag <- read from B
+ * sweepflag <- read from B
+ *
+ * @param {Object} aCommand Command object from path `d` attribute
+ * @param {Object} bCommand Command object from path `d` attribute to match against
+ * @return {Object} aCommand converted to type of bCommand
+ */
+function convertToSameType(aCommand, bCommand) {
+    const conversionMap = {
+        x1: 'x',
+        y1: 'y',
+        x2: 'x',
+        y2: 'y',
+    };
+    const readFromBKeys = ['xAxisRotation', 'largeArcFlag', 'sweepFlag'];
+    // convert (but ignore M types)
+    if (aCommand.type !== bCommand.type && bCommand.type.toUpperCase() !== 'M') {
+        const aConverted = {
+            type: bCommand.type,
+        };
+        Object.keys(bCommand).forEach((bKey) => {
+            const bValue = bCommand[bKey];
+            // first read from the A command
+            let aValue = aCommand[bKey];
+            // if it is one of these values, read from B no matter what
+            if (aValue === undefined) {
+                if (readFromBKeys.includes(bKey)) {
+                    aValue = bValue;
+                }
+                else {
+                    // if it wasn't in the A command, see if an equivalent was
+                    if (aValue === undefined &&
+                        conversionMap[bKey]) {
+                        aValue =
+                            aCommand[conversionMap[bKey]];
+                    }
+                    // if it doesn't have a converted value, use 0
+                    if (aValue === undefined) {
+                        aValue = 0;
+                    }
+                }
+            }
+            // @ts-expect-error
+            aConverted[bKey] = aValue;
+        });
+        // update the type to match B
+        aConverted.type = bCommand.type;
+        aCommand = aConverted;
+    }
+    return aCommand;
+}
+/**
+ * Interpolate between command objects commandStart and commandEnd segmentCount times.
+ * If the types are L, Q, or C then the curves are split as per de Casteljau's algorithm.
+ * Otherwise we just copy commandStart segmentCount - 1 times, finally ending with commandEnd.
+ *
+ * @param {Object} commandStart Command object at the beginning of the segment
+ * @param {Object} commandEnd Command object at the end of the segment
+ * @param {Number} segmentCount The number of segments to split this into. If only 1
+ *   Then [commandEnd] is returned.
+ * @return {Object[]} Array of ~segmentCount command objects between commandStart and
+ *   commandEnd. (Can be segmentCount+1 objects if commandStart is type M).
+ */
+function splitSegment(commandStart, commandEnd, segmentCount) {
+    let segments = [];
+    // line, quadratic bezier, or cubic bezier
+    if (commandEnd.type === 'L' ||
+        commandEnd.type === 'Q' ||
+        commandEnd.type === 'C') {
+        segments = segments.concat((0, split_curve_1.splitCurve)(commandStart, commandEnd, segmentCount));
+        // general case - just copy the same point
+    }
+    else {
+        const copyCommand = { ...commandStart };
+        // convert M to L
+        if (copyCommand.type === 'M') {
+            copyCommand.type = 'L';
+        }
+        segments = segments.concat(arrayOfLength(segmentCount - 1, undefined).map(() => copyCommand));
+        segments.push(commandEnd);
+    }
+    return segments;
+}
+/**
+ * Extends an array of commandsToExtend to the length of the referenceCommands by
+ * splitting segments until the number of commands match. Ensures all the actual
+ * points of commandsToExtend are in the extended array.
+ *
+ * @param {Object[]} commandsToExtend The command object array to extend
+ * @param {Object[]} referenceCommands The command object array to match in length
+ * @return {Object[]} The extended commandsToExtend array
+ */
+function extend(commandsToExtend, referenceCommands) {
+    // compute insertion points:
+    // number of segments in the path to extend
+    const numSegmentsToExtend = commandsToExtend.length - 1;
+    // number of segments in the reference path.
+    const numReferenceSegments = referenceCommands.length - 1;
+    // this value is always between [0, 1].
+    const segmentRatio = numSegmentsToExtend / numReferenceSegments;
+    // create a map, mapping segments in referenceCommands to how many points
+    // should be added in that segment (should always be >= 1 since we need each
+    // point itself).
+    // 0 = segment 0-1, 1 = segment 1-2, n-1 = last vertex
+    const countPointsPerSegment = arrayOfLength(numReferenceSegments, undefined).reduce((accum, _d, i) => {
+        const insertIndex = Math.floor(segmentRatio * i);
+        accum[insertIndex] = (accum[insertIndex] || 0) + 1;
+        return accum;
+    }, []);
+    // extend each segment to have the correct number of points for a smooth interpolation
+    const extended = countPointsPerSegment.reduce((_extended, segmentCount, i) => {
+        // if last command, just add `segmentCount` number of times
+        if (i === commandsToExtend.length - 1) {
+            const lastCommandCopies = arrayOfLength(segmentCount, {
+                ...commandsToExtend[commandsToExtend.length - 1],
+            });
+            // convert M to L
+            if (lastCommandCopies[0].type === 'M') {
+                lastCommandCopies.forEach((d) => {
+                    d.type = 'L';
+                });
+            }
+            return _extended.concat(lastCommandCopies);
+        }
+        // otherwise, split the segment segmentCount times.
+        return _extended.concat(splitSegment(commandsToExtend[i], commandsToExtend[i + 1], segmentCount));
+    }, []);
+    // add in the very first point since splitSegment only adds in the ones after it
+    extended.unshift(commandsToExtend[0]);
+    return extended;
+}
+/**
+ * Takes a path `d` string and converts it into an array of command
+ * objects. Drops the `Z` character.
+ *
+ * @param {String|null} d A path `d` string
+ */
+function pathCommandsFromString(d) {
+    // split into valid tokens
+    const tokens = (d || '').match(commandTokenRegex) || [];
+    const commands = [];
+    let commandArgs;
+    let command;
+    // iterate over each token, checking if we are at a new command
+    // by presence in the typeMap
+    for (let i = 0; i < tokens.length; ++i) {
+        commandArgs = split_curve_1.typeMap[tokens[i]];
+        // new command found:
+        if (commandArgs) {
+            command = {
+                type: tokens[i],
+            };
+            // add each of the expected args for this command:
+            for (let a = 0; a < commandArgs.length; ++a) {
+                // @ts-expect-error
+                command[commandArgs[a]] = Number(tokens[i + a + 1]);
+            }
+            // need to increment our token index appropriately since
+            // we consumed token args
+            i += commandArgs.length;
+            commands.push(command);
+        }
+    }
+    return commands;
+}
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` command in paths unless both A and B end with it.
+ *
+ * This function works directly with arrays of command objects instead of with
+ * path `d` strings (see interpolatePath for working with `d` strings).
+ *
+ * @param {Object[]} aCommandsInput Array of path commands
+ * @param {Object[]} bCommandsInput Array of path commands
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+ */
+function interpolatePathCommands(aCommandsInput, bCommandsInput) {
+    // make a copy so we don't mess with the input arrays
+    let aCommands = aCommandsInput === null || aCommandsInput === undefined
+        ? []
+        : aCommandsInput.slice();
+    let bCommands = bCommandsInput === null || bCommandsInput === undefined
+        ? []
+        : bCommandsInput.slice();
+    // both input sets are empty, so we don't interpolate
+    if (!aCommands.length && !bCommands.length) {
+        return function () {
+            return [];
+        };
+    }
+    // do we add Z during interpolation? yes if both have it. (we'd expect both to have it or not)
+    const addZ = (aCommands.length === 0 || aCommands[aCommands.length - 1].type === 'Z') &&
+        (bCommands.length === 0 || bCommands[bCommands.length - 1].type === 'Z');
+    // we temporarily remove Z
+    if (aCommands.length > 0 && aCommands[aCommands.length - 1].type === 'Z') {
+        aCommands.pop();
+    }
+    if (bCommands.length > 0 && bCommands[bCommands.length - 1].type === 'Z') {
+        bCommands.pop();
+    }
+    // if A is empty, treat it as if it used to contain just the first point
+    // of B. This makes it so the line extends out of from that first point.
+    if (!aCommands.length) {
+        aCommands.push(bCommands[0]);
+        // otherwise if B is empty, treat it as if it contains the first point
+        // of A. This makes it so the line retracts into the first point.
+    }
+    else if (!bCommands.length) {
+        bCommands.push(aCommands[0]);
+    }
+    // extend to match equal size
+    const numPointsToExtend = Math.abs(bCommands.length - aCommands.length);
+    if (numPointsToExtend !== 0) {
+        // B has more points than A, so add points to A before interpolating
+        if (bCommands.length > aCommands.length) {
+            aCommands = extend(aCommands, bCommands);
+            // else if A has more points than B, add more points to B
+        }
+        else if (bCommands.length < aCommands.length) {
+            bCommands = extend(bCommands, aCommands);
+        }
+    }
+    // commands have same length now.
+    // convert commands in A to the same type as those in B
+    aCommands = aCommands.map((aCommand, i) => convertToSameType(aCommand, bCommands[i]));
+    // create mutable interpolated command objects
+    const interpolatedCommands = aCommands.map((aCommand) => ({ ...aCommand }));
+    if (addZ) {
+        interpolatedCommands.push({ type: 'Z' });
+        aCommands.push({ type: 'Z' }); // required for when returning at t == 0
+    }
+    return function (t) {
+        // at 1 return the final value without the extensions used during interpolation
+        if (t === 1) {
+            return bCommandsInput === null || bCommandsInput === undefined
+                ? []
+                : bCommandsInput;
+        }
+        // work with aCommands directly since interpolatedCommands are mutated
+        if (t === 0) {
+            return aCommands;
+        }
+        // interpolate the commands using the mutable interpolated command objs
+        for (let i = 0; i < interpolatedCommands.length; ++i) {
+            // if (interpolatedCommands[i].type === 'Z') continue;
+            const aCommand = aCommands[i];
+            const bCommand = bCommands[i];
+            const interpolatedCommand = interpolatedCommands[i];
+            for (const arg of split_curve_1.typeMap[interpolatedCommand.type]) {
+                // @ts-expect-error
+                interpolatedCommand[arg] =
+                    (1 - t) * aCommand[arg] +
+                        t * bCommand[arg];
+                // do not use floats for flags (#27), round to integer
+                if (arg === 'largeArcFlag' || arg === 'sweepFlag') {
+                    // @ts-expect-error
+                    interpolatedCommand[arg] = Math.round(interpolatedCommand[arg]);
+                }
+            }
+        }
+        return interpolatedCommands;
+    };
+}
+/**
+ * @description Interpolates between two SVG paths.
+ * @param {number} value A number - 0 means first path, 1 means second path, any other values will be interpolated
+ * @param {string} firstPath The first valid SVG path
+ * @param {string} secondPath The second valid SVG path
+ * @see [Documentation](https://remotion.dev/docs/paths/interpolate-path)
+ */
+const interpolatePath = (value, firstPath, secondPath) => {
+    // at 1 return the final value without the extensions used during interpolation
+    if (value === 1) {
+        return secondPath;
+    }
+    if (value === 0) {
+        return firstPath;
+    }
+    const aCommands = pathCommandsFromString(firstPath);
+    if (aCommands.length === 0) {
+        throw new TypeError(`SVG Path "${firstPath}" is not valid`);
+    }
+    const bCommands = pathCommandsFromString(secondPath);
+    if (bCommands.length === 0) {
+        throw new TypeError(`SVG Path "${secondPath}" is not valid`);
+    }
+    const commandInterpolator = interpolatePathCommands(aCommands, bCommands);
+    const interpolatedCommands = commandInterpolator(value);
+    // convert to a string (fastest concat: https://jsperf.com/join-concat/150)
+    return interpolatedCommands
+        .map((c) => {
+        return commandToString(c);
+    })
+        .join(' ');
+};
+exports.interpolatePath = interpolatePath;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/paths",
-  "version": "4.0.175",
+  "version": "4.0.176",
   "description": "Utility functions for SVG paths",
   "main": "dist/index.js",
   "sideEffects": false,