getPointAtLength(distance: number): Point {
   const t = distance / this.getPathLength();
   const { x: x1, y: y1 } = this.p1;
   const { x: x2, y: y2 } = this.p2;
   return {
     x: MathUtil.lerp(x1, x2, t),
     y: MathUtil.lerp(y1, y2, t),
   };
 }

 split(t1: number, t2: number) {
   const { x: x1, y: y1 } = this.p1;
   const { x: x2, y: y2 } = this.p2;
   const p1 = { x: MathUtil.lerp(x1, x2, t1), y: MathUtil.lerp(y1, y2, t1) };
   const p2 = { x: MathUtil.lerp(x1, x2, t2), y: MathUtil.lerp(y1, y2, t2) };
   if (MathUtil.arePointsEqual(p1, p2)) {
     return new PointCalculator(this.id, this.svgChar, p1);
   }
   return new LineCalculator(this.id, this.svgChar, p1, p2);
 }

 // @Override
 interpolateValue(start: string, end: string, f: number) {
   if (!start || !end) {
     return undefined;
   }
   const s = ColorUtil.parseAndroidColor(start);
   const e = ColorUtil.parseAndroidColor(end);
   return ColorUtil.toAndroidString({
     r: _.clamp(Math.round(MathUtil.lerp(s.r, e.r, f)), 0, 0xff),
     g: _.clamp(Math.round(MathUtil.lerp(s.g, e.g, f)), 0, 0xff),
     b: _.clamp(Math.round(MathUtil.lerp(s.b, e.b, f)), 0, 0xff),
     a: _.clamp(Math.round(MathUtil.lerp(s.a, e.a, f)), 0, 0xff),
   });
 }

 intersects(line: Line): number[] {
   if (MathUtil.arePointsEqual(_.first(this.points), _.last(this.points))) {
     // Points can't be intersected.
     return [];
   }
   return this.bezierJs.intersects(line);
 }

 project(point: Point) {
   const x = this.point.x;
   const y = this.point.y;
   const t = 0.5;
   const d = MathUtil.distance(this.point, point);
   return { x, y, t, d } as Projection;
 }

 start.getCommands().forEach((startCmd, i) => {
   const endCmd = end.getCommands()[i];
   const points: Point[] = [];
   for (let j = 0; j < startCmd.points.length; j++) {
     const p1 = startCmd.points[j];
     const p2 = endCmd.points[j];
     if (p1 && p2) {
       // The 'start' point of the first Move command in a path
       // will be undefined. Skip it.
       const px = MathUtil.lerp(p1.x, p2.x, fraction);
       const py = MathUtil.lerp(p1.y, p2.y, fraction);
       points.push({ x: px, y: py });
     } else {
       points.push(undefined);
     }
   }
   // TODO: avoid re-generating unique ids on each animation frame.
   newCommands.push(new Command(startCmd.type, points));
 });

 const getScoreFn = (a: Command, b: Command) => {
   const charA = a.type;
   const charB = b.type;
   if (charA !== charB && !a.canConvertTo(charB) && !b.canConvertTo(charA)) {
     return MISMATCH;
   }
   const { x, y } = a.end;
   const start = { x, y };
   const end = b.end;
   return 1 / Math.max(MATCH, MathUtil.distance(start, end));
 };

 toCommand() {
   let points: Point[];
   switch (this.svgChar) {
     case 'L':
     case 'Z':
       points = [this.p1, this.p2];
       break;
     case 'Q':
       const cp = {
         x: MathUtil.lerp(this.p1.x, this.p2.x, 0.5),
         y: MathUtil.lerp(this.p1.y, this.p2.y, 0.5),
       };
       points = [this.p1, cp, this.p2];
       break;
     case 'C':
       const cp1 = {
         x: MathUtil.lerp(this.p1.x, this.p2.x, 1 / 3),
         y: MathUtil.lerp(this.p1.y, this.p2.y, 1 / 3),
       };
       const cp2 = {
         x: MathUtil.lerp(this.p1.x, this.p2.x, 2 / 3),
         y: MathUtil.lerp(this.p1.y, this.p2.y, 2 / 3),
       };
       points = [this.p1, cp1, cp2, this.p2];
       break;
     default:
       throw new Error('Invalid command type: ' + this.svgChar);
   }
   return new CommandBuilder(this.svgChar, points).setId(this.id).build();
 }

  commands.forEach(cmd => {
    const start = cmd.start;
    const end = cmd.end;

    if (start && !MathUtil.arePointsEqual(start, previousEndPoint)) {
      // This is to support the case where the list of commands
      // is size fragmented.
      ctx.moveTo(start.x, start.y);
    }

    if (cmd.type === 'M') {
      ctx.moveTo(end.x, end.y);
    } else if (cmd.type === 'L') {
      ctx.lineTo(end.x, end.y);
    } else if (cmd.type === 'Q') {
      ctx.quadraticCurveTo(cmd.points[1].x, cmd.points[1].y, cmd.points[2].x, cmd.points[2].y);
    } else if (cmd.type === 'C') {
      ctx.bezierCurveTo(
        cmd.points[1].x,
        cmd.points[1].y,
        cmd.points[2].x,
        cmd.points[2].y,
        cmd.points[3].x,
        cmd.points[3].y,
      );
    } else if (cmd.type === 'Z') {
      if (MathUtil.arePointsEqual(start, previousEndPoint)) {
        ctx.closePath();
      } else {
        // This is to support the case where the list of commands
        // is size fragmented.
        ctx.lineTo(end.x, end.y);
      }
    }
    previousEndPoint = end;
  });

 private shift(subIdx: number, calcOffsetFn: (offset: number, numCommands: number) => number) {
   const sps = this.findSubPathStateLeaf(subIdx);
   const numCmdsInSubPath = _.sumBy(sps.getCommandStates(), cs => cs.getCommands().length);
   if (numCmdsInSubPath <= 1) {
     return this;
   }
   const firstCmd = sps.getCommandStates()[0].getCommands()[0];
   const lastCmd = _.last(_.last(sps.getCommandStates()).getCommands());
   if (!MathUtil.arePointsEqual(firstCmd.end, lastCmd.end)) {
     // TODO: in some cases there may be rounding errors that cause a closed subpath
     // to show up as non-closed. is there anything we can do to alleviate this?
     console.warn('Ignoring attempt to shift a non-closed subpath');
     return this;
   }
   this.setSubPathStateLeaf(
     subIdx,
     sps
       .mutate()
       .setShiftOffset(calcOffsetFn(sps.getShiftOffset(), numCmdsInSubPath))
       .build(),
   );
   return this;
 }