Skip to main content

parsePath()

Part of the @remotion/paths package. Available from v3.3.40

Parses an SVG string path into an array of Instruction's.

reset-path.ts
tsx
import { parsePath } from "@remotion/paths";
 
const newPath = parsePath("M 10 10 L 20 20");
 
/*
  [
    { type: "M", x: 10, y: 10 },
    { type: "L", x: 20, y: 20 },
  ]
*/
reset-path.ts
tsx
import { parsePath } from "@remotion/paths";
 
const newPath = parsePath("M 10 10 L 20 20");
 
/*
  [
    { type: "M", x: 10, y: 10 },
    { type: "L", x: 20, y: 20 },
  ]
*/

This function will throw if the SVG path is invalid.

Return type type​

An array of Instruction's. The Instruction type can also be imported from @remotion/paths:

ts
import type { Instruction } from "@remotion/paths";
ts
import type { Instruction } from "@remotion/paths";

The type has the following shape:

ts
export type Instruction =
  | {
      type: "M";
      x: number;
      y: number;
    }
  | {
      type: "L";
      x: number;
      y: number;
    }
  | {
      type: "H";
      x: number;
    }
  | {
      type: "V";
      y: number;
    }
  | {
      type: "C";
      cp1x: number;
      cp1y: number;
      cp2x: number;
      cp2y: number;
      x: number;
      y: number;
    }
  | {
      type: "S";
      cpx: number;
      cpy: number;
      x: number;
      y: number;
    }
  | {
      type: "Q";
      cpx: number;
      cpy: number;
      x: number;
      y: number;
    }
  | {
      type: "T";
      x: number;
      y: number;
    }
  | {
      type: "A";
      rx: number;
      ry: number;
      xAxisRotation: number;
      largeArcFlag: boolean;
      sweepFlag: boolean;
      x: number;
      y: number;
    }
  | {
      type: "m";
      dx: number;
      dy: number;
    }
  | {
      type: "l";
      dx: number;
      dy: number;
    }
  | {
      type: "h";
      dx: number;
    }
  | {
      type: "v";
      dy: number;
    }
  | {
      type: "c";
      cp1dx: number;
      cp1dy: number;
      cp2dx: number;
      cp2dy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "s";
      cpdx: number;
      cpdy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "q";
      cpdx: number;
      cpdy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "t";
      dx: number;
      dy: number;
    }
  | {
      type: "a";
      rx: number;
      ry: number;
      xAxisRotation: number;
      largeArcFlag: boolean;
      sweepFlag: boolean;
      dx: number;
      dy: number;
    }
  | {
      type: "Z";
    }
  | {
      type: "z";
    };
ts
export type Instruction =
  | {
      type: "M";
      x: number;
      y: number;
    }
  | {
      type: "L";
      x: number;
      y: number;
    }
  | {
      type: "H";
      x: number;
    }
  | {
      type: "V";
      y: number;
    }
  | {
      type: "C";
      cp1x: number;
      cp1y: number;
      cp2x: number;
      cp2y: number;
      x: number;
      y: number;
    }
  | {
      type: "S";
      cpx: number;
      cpy: number;
      x: number;
      y: number;
    }
  | {
      type: "Q";
      cpx: number;
      cpy: number;
      x: number;
      y: number;
    }
  | {
      type: "T";
      x: number;
      y: number;
    }
  | {
      type: "A";
      rx: number;
      ry: number;
      xAxisRotation: number;
      largeArcFlag: boolean;
      sweepFlag: boolean;
      x: number;
      y: number;
    }
  | {
      type: "m";
      dx: number;
      dy: number;
    }
  | {
      type: "l";
      dx: number;
      dy: number;
    }
  | {
      type: "h";
      dx: number;
    }
  | {
      type: "v";
      dy: number;
    }
  | {
      type: "c";
      cp1dx: number;
      cp1dy: number;
      cp2dx: number;
      cp2dy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "s";
      cpdx: number;
      cpdy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "q";
      cpdx: number;
      cpdy: number;
      dx: number;
      dy: number;
    }
  | {
      type: "t";
      dx: number;
      dy: number;
    }
  | {
      type: "a";
      rx: number;
      ry: number;
      xAxisRotation: number;
      largeArcFlag: boolean;
      sweepFlag: boolean;
      dx: number;
      dy: number;
    }
  | {
      type: "Z";
    }
  | {
      type: "z";
    };

See also​