Implement OffsetPath
diff --git a/player/js/elements/canvasElements/CVShapeElement.js b/player/js/elements/canvasElements/CVShapeElement.js
index b0f269c..f37cf51 100644
--- a/player/js/elements/canvasElements/CVShapeElement.js
+++ b/player/js/elements/canvasElements/CVShapeElement.js
@@ -219,7 +219,7 @@
       if (!processedPos) {
         itemsData[i] = this.createShapeElement(arr[i]);
       }
-    } else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'pb' || arr[i].ty === 'zz') {
+    } else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'pb' || arr[i].ty === 'zz' || arr[i].ty === 'op') {
       if (!processedPos) {
         modifier = ShapeModifiers.getModifier(arr[i].ty);
         modifier.init(this, arr[i]);
diff --git a/player/js/elements/svgElements/SVGShapeElement.js b/player/js/elements/svgElements/SVGShapeElement.js
index e8e59e0..d71d17c 100644
--- a/player/js/elements/svgElements/SVGShapeElement.js
+++ b/player/js/elements/svgElements/SVGShapeElement.js
@@ -289,7 +289,7 @@
         itemsData[i] = this.createShapeElement(arr[i], ownTransformers, level);
       }
       this.setElementStyles(itemsData[i]);
-    } else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'ms' || arr[i].ty === 'pb' || arr[i].ty === 'zz') {
+    } else if (arr[i].ty === 'tm' || arr[i].ty === 'rd' || arr[i].ty === 'ms' || arr[i].ty === 'pb' || arr[i].ty === 'zz' || arr[i].ty === 'op') {
       if (!processedPos) {
         modifier = ShapeModifiers.getModifier(arr[i].ty);
         modifier.init(this, arr[i]);
diff --git a/player/js/modules/canvas_light.js b/player/js/modules/canvas_light.js
index 9edbe1f..0af0510 100644
--- a/player/js/modules/canvas_light.js
+++ b/player/js/modules/canvas_light.js
@@ -5,6 +5,7 @@
 import RepeaterModifier from '../utils/shapes/RepeaterModifier';
 import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
 import ZigZagModifier from '../utils/shapes/ZigZagModifier';
+import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
 import CanvasRenderer from '../renderers/CanvasRenderer';
 import {
   registerRenderer,
@@ -19,5 +20,6 @@
 ShapeModifiers.registerModifier('rp', RepeaterModifier);
 ShapeModifiers.registerModifier('rd', RoundCornersModifier);
 ShapeModifiers.registerModifier('zz', ZigZagModifier);
+ShapeModifiers.registerModifier('op', OffsetPathModifier);
 
 export default lottie;
diff --git a/player/js/modules/full.js b/player/js/modules/full.js
index 1b5d62c..7e42cb7 100644
--- a/player/js/modules/full.js
+++ b/player/js/modules/full.js
@@ -8,6 +8,7 @@
 import RepeaterModifier from '../utils/shapes/RepeaterModifier';
 import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
 import ZigZagModifier from '../utils/shapes/ZigZagModifier';
+import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
 import CanvasRenderer from '../renderers/CanvasRenderer';
 import HybridRenderer from '../renderers/HybridRenderer';
 import SVGRenderer from '../renderers/SVGRenderer';
@@ -39,6 +40,7 @@
 ShapeModifiers.registerModifier('rp', RepeaterModifier);
 ShapeModifiers.registerModifier('rd', RoundCornersModifier);
 ShapeModifiers.registerModifier('zz', ZigZagModifier);
+ShapeModifiers.registerModifier('op', OffsetPathModifier);
 
 // Registering expression plugin
 setExpressionsPlugin(Expressions);
diff --git a/player/js/modules/html_light.js b/player/js/modules/html_light.js
index 2f322ef..185a795 100644
--- a/player/js/modules/html_light.js
+++ b/player/js/modules/html_light.js
@@ -5,6 +5,7 @@
 import RepeaterModifier from '../utils/shapes/RepeaterModifier';
 import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
 import ZigZagModifier from '../utils/shapes/ZigZagModifier';
+import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
 import HybridRenderer from '../renderers/HybridRenderer';
 import {
   registerRenderer,
@@ -19,5 +20,6 @@
 ShapeModifiers.registerModifier('rp', RepeaterModifier);
 ShapeModifiers.registerModifier('rd', RoundCornersModifier);
 ShapeModifiers.registerModifier('zz', ZigZagModifier);
+ShapeModifiers.registerModifier('op', OffsetPathModifier);
 
 export default lottie;
diff --git a/player/js/modules/svg_light.js b/player/js/modules/svg_light.js
index b4f4165..8df0eba 100644
--- a/player/js/modules/svg_light.js
+++ b/player/js/modules/svg_light.js
@@ -5,6 +5,7 @@
 import RepeaterModifier from '../utils/shapes/RepeaterModifier';
 import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
 import ZigZagModifier from '../utils/shapes/ZigZagModifier';
+import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
 import SVGRenderer from '../renderers/SVGRenderer';
 import {
   registerRenderer,
@@ -19,5 +20,6 @@
 ShapeModifiers.registerModifier('rp', RepeaterModifier);
 ShapeModifiers.registerModifier('rd', RoundCornersModifier);
 ShapeModifiers.registerModifier('zz', ZigZagModifier);
+ShapeModifiers.registerModifier('op', OffsetPathModifier);
 
 export default lottie;
diff --git a/player/js/utils/PolynomialBezier.js b/player/js/utils/PolynomialBezier.js
new file mode 100644
index 0000000..20bc5fe
--- /dev/null
+++ b/player/js/utils/PolynomialBezier.js
@@ -0,0 +1,248 @@
+function floatEqual(a, b) {
+  return Math.abs(a - b) * 100000 <= Math.min(Math.abs(a), Math.abs(b));
+}
+
+function floatZero(f) {
+  return Math.abs(f) <= 0.00001;
+}
+
+function lerp(p0, p1, amount) {
+  return p0 * (1 - amount) + p1 * amount;
+}
+
+function lerpPoint(p0, p1, amount) {
+  return [lerp(p0[0], p1[0], amount), lerp(p0[1], p1[1], amount)];
+}
+
+function quadRoots(a, b, c) {
+  // no root
+  if (a === 0) return [];
+  var s = b * b - 4 * a * c;
+  // Complex roots
+  if (s < 0) return [];
+  var singleRoot = -b / (2 * a);
+  // 1 root
+  if (s === 0) return [singleRoot];
+  var delta = Math.sqrt(s) / (2 * a);
+  // 2 roots
+  return [singleRoot - delta, singleRoot + delta];
+}
+
+function polynomialCoefficients(p0, p1, p2, p3) {
+  return [
+    -p0 + 3 * p1 - 3 * p2 + p3,
+    3 * p0 - 6 * p1 + 3 * p2,
+    -3 * p0 + 3 * p1,
+    p0,
+  ];
+}
+
+function singlePoint(p) {
+  return new PolynomialBezier(p, p, p, p, false);
+}
+
+function PolynomialBezier(p0, p1, p2, p3, linearize) {
+  if (linearize && pointEqual(p0, p1)) {
+    p1 = lerpPoint(p0, p3, 1 / 3);
+  }
+  if (linearize && pointEqual(p2, p3)) {
+    p2 = lerpPoint(p0, p3, 2 / 3);
+  }
+  var coeffx = polynomialCoefficients(p0[0], p1[0], p2[0], p3[0]);
+  var coeffy = polynomialCoefficients(p0[1], p1[1], p2[1], p3[1]);
+  this.a = [coeffx[0], coeffy[0]];
+  this.b = [coeffx[1], coeffy[1]];
+  this.c = [coeffx[2], coeffy[2]];
+  this.d = [coeffx[3], coeffy[3]];
+  this.points = [p0, p1, p2, p3];
+}
+PolynomialBezier.prototype.point = function (t) {
+  return [
+    (((this.a[0] * t) + this.b[0]) * t + this.c[0]) * t + this.d[0],
+    (((this.a[1] * t) + this.b[1]) * t + this.c[1]) * t + this.d[1],
+  ];
+};
+PolynomialBezier.prototype.derivative = function (t) {
+  return [
+    (3 * t * this.a[0] + 2 * this.b[0]) * t + this.c[0],
+    (3 * t * this.a[1] + 2 * this.b[1]) * t + this.c[1],
+  ];
+};
+PolynomialBezier.prototype.tangentAngle = function (t) {
+  var p = this.derivative(t);
+  return Math.atan2(p[1], p[0]);
+};
+PolynomialBezier.prototype.normalAngle = function (t) {
+  var p = this.derivative(t);
+  return Math.atan2(p[0], p[1]);
+};
+
+PolynomialBezier.prototype.inflectionPoints = function () {
+  var denom = this.a[1] * this.b[0] - this.a[0] * this.b[1];
+  if (floatZero(denom)) return [];
+  var tcusp = (-0.5 * (this.a[1] * this.c[0] - this.a[0] * this.c[1])) / denom;
+  var square = tcusp * tcusp - ((1 / 3) * (this.b[1] * this.c[0] - this.b[0] * this.c[1])) / denom;
+  if (square < 0) return [];
+  var root = Math.sqrt(square);
+  if (floatZero(root)) {
+    if (root > 0 && root < 1) return [tcusp];
+    return [];
+  }
+  return [tcusp - root, tcusp + root].filter(function (r) { return r > 0 && r < 1; });
+};
+PolynomialBezier.prototype.split = function (t) {
+  if (t <= 0) return [singlePoint(this.points[0]), this];
+  if (t >= 1) return [this, singlePoint(this.points[this.points.length - 1])];
+  var p10 = lerpPoint(this.points[0], this.points[1], t);
+  var p11 = lerpPoint(this.points[1], this.points[2], t);
+  var p12 = lerpPoint(this.points[2], this.points[3], t);
+  var p20 = lerpPoint(p10, p11, t);
+  var p21 = lerpPoint(p11, p12, t);
+  var p3 = lerpPoint(p20, p21, t);
+  return [
+    new PolynomialBezier(this.points[0], p10, p20, p3, true),
+    new PolynomialBezier(p3, p21, p12, this.points[3], true),
+  ];
+};
+function extrema(bez, comp) {
+  var min = bez.points[0][comp];
+  var max = bez.points[bez.points.length - 1][comp];
+  if (min > max) {
+    var e = max;
+    max = min;
+    min = e;
+  }
+  // Derivative roots to find min/max
+  var f = quadRoots(3 * bez.a[comp], 2 * bez.b[comp], bez.c[comp]);
+  for (var i = 0; i < f.length; i += 1) {
+    if (f[i] > 0 && f[i] < 1) {
+      var val = bez.point(f[i])[comp];
+      if (val < min) min = val;
+      else if (val > max) max = val;
+    }
+  }
+  return {
+    min: min,
+    max: max,
+  };
+}
+PolynomialBezier.prototype.bounds = function () {
+  return {
+    x: extrema(this, 0),
+    y: extrema(this, 1),
+  };
+};
+PolynomialBezier.prototype.boundingBox = function () {
+  var bounds = this.bounds();
+  return {
+    left: bounds.x.min,
+    right: bounds.x.max,
+    top: bounds.y.min,
+    bottom: bounds.y.max,
+    width: bounds.x.max - bounds.x.min,
+    height: bounds.y.max - bounds.y.min,
+    cx: (bounds.x.max + bounds.x.min) / 2,
+    cy: (bounds.y.max + bounds.y.min) / 2,
+  };
+};
+
+function intersectData(bez, t1, t2) {
+  var box = bez.boundingBox();
+  return {
+    cx: box.cx,
+    cy: box.cy,
+    width: box.width,
+    height: box.height,
+    bez: bez,
+    t: (t1 + t2) / 2,
+    t1: t1,
+    t2: t2,
+  };
+}
+function splitData(data) {
+  var split = data.bez.split(0.5);
+  return [
+    intersectData(split[0], data.t1, data.t),
+    intersectData(split[1], data.t, data.t2),
+  ];
+}
+
+function boxIntersect(b1, b2) {
+  return Math.abs(b1.cx - b2.cx) * 2 < b1.width + b2.width
+    && Math.abs(b1.cy - b2.cy) * 2 < b1.height + b2.height;
+}
+
+function intersectsImpl(d1, d2, depth, tolerance, intersections, maxRecursion) {
+  if (!boxIntersect(d1, d2)) return;
+  if (depth >= maxRecursion || (d1.width <= tolerance && d1.height <= tolerance && d2.width <= tolerance && d2.height <= tolerance)) {
+    intersections.push([d1.t, d2.t]);
+    return;
+  }
+  var d1s = splitData(d1);
+  var d2s = splitData(d2);
+  intersectsImpl(d1s[0], d2s[0], depth + 1, tolerance, intersections, maxRecursion);
+  intersectsImpl(d1s[0], d2s[1], depth + 1, tolerance, intersections, maxRecursion);
+  intersectsImpl(d1s[1], d2s[0], depth + 1, tolerance, intersections, maxRecursion);
+  intersectsImpl(d1s[1], d2s[1], depth + 1, tolerance, intersections, maxRecursion);
+}
+
+PolynomialBezier.prototype.intersections = function (other, tolerance, maxRecursion) {
+  if (tolerance === undefined) tolerance = 2;
+  if (maxRecursion === undefined) maxRecursion = 7;
+  var intersections = [];
+  intersectsImpl(intersectData(this, 0, 1), intersectData(other, 0, 1), 0, tolerance, intersections, maxRecursion);
+  return intersections;
+};
+
+PolynomialBezier.shapeSegment = function (shapePath, index) {
+  var nextIndex = (index + 1) % shapePath.length();
+  return new PolynomialBezier(shapePath.v[index], shapePath.o[index], shapePath.i[nextIndex], shapePath.v[nextIndex], true);
+};
+
+function crossProduct(a, b) {
+  return [
+    a[1] * b[2] - a[2] * b[1],
+    a[2] * b[0] - a[0] * b[2],
+    a[0] * b[1] - a[1] * b[0],
+  ];
+}
+
+function lineIntersection(start1, end1, start2, end2) {
+  var v1 = [start1[0], start1[1], 1];
+  var v2 = [end1[0], end1[1], 1];
+  var v3 = [start2[0], start2[1], 1];
+  var v4 = [end2[0], end2[1], 1];
+
+  var r = crossProduct(
+    crossProduct(v1, v2),
+    crossProduct(v3, v4)
+  );
+
+  if (floatZero(r[2])) return null;
+
+  return [r[0] / r[2], r[1] / r[2]];
+}
+
+function polarOffset(p, angle, length) {
+  return [
+    p[0] + Math.cos(angle) * length,
+    p[1] - Math.sin(angle) * length,
+  ];
+}
+
+function pointDistance(p1, p2) {
+  return Math.hypot(p1[0] - p2[0], p1[1] - p2[1]);
+}
+
+function pointEqual(p1, p2) {
+  return floatEqual(p1[0], p2[0]) && floatEqual(p1[1], p2[1]);
+}
+
+export {
+  PolynomialBezier,
+  lineIntersection,
+  polarOffset,
+  pointDistance,
+  pointEqual,
+  floatEqual,
+};
diff --git a/player/js/utils/bez.js b/player/js/utils/bez.js
index ff490ac..658d32f 100644
--- a/player/js/utils/bez.js
+++ b/player/js/utils/bez.js
@@ -236,28 +236,6 @@
     return bezierSegmentPoints;
   }
 
-  function polynomialCoefficients(k0, k1, k2, k3) {
-    if (k1 === k0 && k2 === k3) {
-      k1 = k0 * (2 / 3) + k3 / 3;
-      k2 = k0 / 3 + k3 * (2 / 3);
-    }
-
-    return [
-      -k0 + 3 * k1 - 3 * k2 + k3,
-      3 * k0 - 6 * k1 + 3 * k2,
-      -3 * k0 + 3 * k1,
-      k0,
-    ];
-  }
-
-  function polynomialDerivative(t, a, b, c) {
-    return (a * 3 * t + b * 2) * t + c;
-  }
-
-  function polynomialValue(t, a, b, c, d) {
-    return (((a * t + b) * t + c) * t) + d;
-  }
-
   return {
     getSegmentsLength: getSegmentsLength,
     getNewSegment: getNewSegment,
@@ -265,9 +243,6 @@
     buildBezierData: buildBezierData,
     pointOnLine2D: pointOnLine2D,
     pointOnLine3D: pointOnLine3D,
-    polynomialCoefficients: polynomialCoefficients,
-    polynomialDerivative: polynomialDerivative,
-    polynomialValue: polynomialValue,
   };
 }
 
diff --git a/player/js/utils/shapes/OffsetPathModifier.js b/player/js/utils/shapes/OffsetPathModifier.js
new file mode 100644
index 0000000..a8bfab0
--- /dev/null
+++ b/player/js/utils/shapes/OffsetPathModifier.js
@@ -0,0 +1,290 @@
+import {
+  roundCorner,
+} from '../common';
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import PropertyFactory from '../PropertyFactory';
+import shapePool from '../pooling/shape_pool';
+import {
+  ShapeModifier,
+} from './ShapeModifiers';
+import {
+  PolynomialBezier,
+  polarOffset,
+  lineIntersection,
+  pointDistance,
+  pointEqual,
+  floatEqual,
+} from '../PolynomialBezier';
+
+function linearOffset(p1, p2, amount) {
+  var angle = Math.atan2(p2[0] - p1[0], p2[1] - p1[1]);
+  return [
+    polarOffset(p1, angle, amount),
+    polarOffset(p2, angle, amount),
+  ];
+}
+
+function offsetSegment(segment, amount) {
+  var p0; var p1a; var p1b; var p2b; var p2a; var
+    p3;
+  var e;
+  e = linearOffset(segment.points[0], segment.points[1], amount);
+  p0 = e[0];
+  p1a = e[1];
+  e = linearOffset(segment.points[1], segment.points[2], amount);
+  p1b = e[0];
+  p2b = e[1];
+  e = linearOffset(segment.points[2], segment.points[3], amount);
+  p2a = e[0];
+  p3 = e[1];
+  var p1 = lineIntersection(p0, p1a, p1b, p2b);
+  if (p1 === null) p1 = p1a;
+  var p2 = lineIntersection(p2a, p3, p1b, p2b);
+  if (p2 === null) p2 = p2a;
+
+  return new PolynomialBezier(p0, p1, p2, p3);
+}
+
+function joinLines(outputBezier, seg1, seg2, lineJoin, miterLimit) {
+  var p0 = seg1.points[3];
+  var p1 = seg2.points[0];
+
+  // Bevel
+  if (lineJoin === 3) return p0;
+
+  // Connected, they don't need a joint
+  if (pointEqual(p0, p1)) return p0;
+
+  // Round
+  if (lineJoin === 2) {
+    var angleOut = -seg1.tangentAngle(1);
+    var angleIn = -seg2.tangentAngle(0) + Math.PI;
+    var center = lineIntersection(
+      p0,
+      polarOffset(p0, angleOut + Math.PI / 2, 100),
+      p1,
+      polarOffset(p1, angleOut + Math.PI / 2, 100)
+    );
+    var radius = center ? pointDistance(center, p0) : pointDistance(p0, p1) / 2;
+
+    var tan = polarOffset(p0, angleOut, 2 * radius * roundCorner);
+    outputBezier.setXYAt(tan[0], tan[1], 'o', outputBezier.length() - 1);
+
+    tan = polarOffset(p1, angleIn, 2 * radius * roundCorner);
+    outputBezier.setTripleAt(p1[0], p1[1], p1[0], p1[1], tan[0], tan[1], outputBezier.length());
+
+    return p1;
+  }
+
+  // Miter
+  var t0 = pointEqual(p0, seg1.points[2]) ? seg1.points[0] : seg1.points[2];
+  var t1 = pointEqual(p1, seg2.points[1]) ? seg2.points[3] : seg2.points[1];
+  var intersection = lineIntersection(t0, p0, p1, t1);
+  if (intersection && pointDistance(intersection, p0) < miterLimit) {
+    outputBezier.setTripleAt(
+      intersection[0],
+      intersection[1],
+      intersection[0],
+      intersection[1],
+      intersection[0],
+      intersection[1],
+      outputBezier.length()
+    );
+    return intersection;
+  }
+
+  return p0;
+}
+
+function getIntersection(a, b) {
+  const intersect = a.intersections(b);
+
+  if (intersect.length && floatEqual(intersect[0][0], 1)) intersect.shift();
+
+  if (intersect.length) return intersect[0];
+
+  return null;
+}
+
+function pruneSegmentIntersection(a, b) {
+  var outa = a.slice();
+  var outb = b.slice();
+  var intersect = getIntersection(a[a.length - 1], b[0]);
+  if (intersect) {
+    outa[a.length - 1] = a[a.length - 1].split(intersect[0])[0];
+    outb[0] = b[0].split(intersect[1])[1];
+  }
+  if (a.length > 1 && b.length > 1) {
+    intersect = getIntersection(a[0], b[b.length - 1]);
+    if (intersect) {
+      return [
+        [a[0].split(intersect[0])[0]],
+        [b[b.length - 1].split(intersect[1])[1]],
+      ];
+    }
+  }
+  return [outa, outb];
+}
+
+function pruneIntersections(segments) {
+  var e;
+  for (var i = 1; i < segments.length; i += 1) {
+    e = pruneSegmentIntersection(segments[i - 1], segments[i]);
+    segments[i - 1] = e[0];
+    segments[i] = e[1];
+  }
+
+  if (segments.length > 1) {
+    e = pruneSegmentIntersection(segments[segments.length - 1], segments[0]);
+    segments[segments.length - 1] = e[0];
+    segments[0] = e[1];
+  }
+
+  return segments;
+}
+
+function OffsetPathModifier() {}
+
+extendPrototype([ShapeModifier], OffsetPathModifier);
+OffsetPathModifier.prototype.initModifierProperties = function (elem, data) {
+  this.getValue = this.processKeys;
+  this.amount = PropertyFactory.getProp(elem, data.a, 0, null, this);
+  this.miterLimit = PropertyFactory.getProp(elem, data.ml, 0, null, this);
+  this.lineJoin = data.lj;
+  this._isAnimated = this.amount.effectsSequence.length !== 0;
+};
+
+OffsetPathModifier.prototype.processPath = function (inputBezier, amount, lineJoin, miterLimit) {
+  var outputBezier = shapePool.newElement();
+  outputBezier.c = inputBezier.c;
+  var count = inputBezier.length();
+  if (!inputBezier.c) {
+    count -= 1;
+  }
+  var left; var right; var mid; var split;
+  var i; var j; var segment;
+  var multiSegments = [];
+
+  for (i = 0; i < count; i += 1) {
+    segment = PolynomialBezier.shapeSegment(inputBezier, i);
+    /*
+      We split each bezier segment into smaller pieces based
+      on inflection points, this ensures the control point
+      polygon is convex.
+
+      (A cubic bezier can have none, one, or two inflection points)
+    */
+    var flex = segment.inflectionPoints();
+
+    if (flex.length === 0) {
+      multiSegments.push([offsetSegment(segment, amount)]);
+    } else if (flex.length === 1 || floatEqual(flex[1], 1)) {
+      split = segment.split(flex[0]);
+      left = split[0];
+      right = split[1];
+
+      multiSegments.push([
+        offsetSegment(left, amount),
+        offsetSegment(right, amount),
+      ]);
+    } else {
+      split = segment.split(flex[0]);
+      left = split[0];
+      var t = (flex[1] - flex[0]) / (1 - flex[0]);
+      split = split[1].split(t);
+      mid = split[0];
+      right = split[1];
+
+      multiSegments.push([
+        offsetSegment(left, amount),
+        offsetSegment(mid, amount),
+        offsetSegment(right, amount),
+      ]);
+    }
+  }
+
+  multiSegments = pruneIntersections(multiSegments);
+
+  // Add bezier segments to the output and apply line joints
+  var lastPoint = null;
+  var lastSeg = null;
+
+  for (i = 0; i < multiSegments.length; i += 1) {
+    var multiSegment = multiSegments[i];
+
+    if (lastSeg) lastPoint = joinLines(outputBezier, lastSeg, multiSegment[0], lineJoin, miterLimit);
+
+    lastSeg = multiSegment[multiSegment.length - 1];
+
+    for (j = 0; j < multiSegment.length; j += 1) {
+      segment = multiSegment[j];
+
+      if (lastPoint && pointEqual(segment.points[0], lastPoint)) {
+        outputBezier.setXYAt(segment.points[1][0], segment.points[1][1], 'o', outputBezier.length() - 1);
+      } else {
+        outputBezier.setTripleAt(
+          segment.points[0][0],
+          segment.points[0][1],
+          segment.points[1][0],
+          segment.points[1][1],
+          segment.points[0][0],
+          segment.points[0][1],
+          outputBezier.length()
+        );
+      }
+
+      outputBezier.setTripleAt(
+        segment.points[3][0],
+        segment.points[3][1],
+        segment.points[3][0],
+        segment.points[3][1],
+        segment.points[2][0],
+        segment.points[2][1],
+        outputBezier.length()
+      );
+
+      lastPoint = segment.points[3];
+    }
+  }
+
+  if (inputBezier.c && multiSegments.length) joinLines(outputBezier, lastSeg, multiSegments[0][0], lineJoin, miterLimit);
+
+  return outputBezier;
+};
+
+OffsetPathModifier.prototype.processShapes = function (_isFirstFrame) {
+  var shapePaths;
+  var i;
+  var len = this.shapes.length;
+  var j;
+  var jLen;
+  var amount = this.amount.v;
+  var miterLimit = this.miterLimit.v;
+  var lineJoin = this.lineJoin;
+
+  if (amount !== 0) {
+    var shapeData;
+    var localShapeCollection;
+    for (i = 0; i < len; i += 1) {
+      shapeData = this.shapes[i];
+      localShapeCollection = shapeData.localShapeCollection;
+      if (!(!shapeData.shape._mdf && !this._mdf && !_isFirstFrame)) {
+        localShapeCollection.releaseShapes();
+        shapeData.shape._mdf = true;
+        shapePaths = shapeData.shape.paths.shapes;
+        jLen = shapeData.shape.paths._length;
+        for (j = 0; j < jLen; j += 1) {
+          localShapeCollection.addShape(this.processPath(shapePaths[j], amount, lineJoin, miterLimit));
+        }
+      }
+      shapeData.shape.paths = shapeData.localShapeCollection;
+    }
+  }
+  if (!this.dynamicProperties.length) {
+    this._mdf = false;
+  }
+};
+
+export default OffsetPathModifier;
diff --git a/player/js/utils/shapes/ShapePath.js b/player/js/utils/shapes/ShapePath.js
index 5b06a53..3e55287 100644
--- a/player/js/utils/shapes/ShapePath.js
+++ b/player/js/utils/shapes/ShapePath.js
@@ -93,4 +93,8 @@
   return newPath;
 };
 
+ShapePath.prototype.length = function () {
+  return this._length;
+};
+
 export default ShapePath;
diff --git a/player/js/utils/shapes/ZigZagModifier.js b/player/js/utils/shapes/ZigZagModifier.js
index 79c19c3..2b78ade 100644
--- a/player/js/utils/shapes/ZigZagModifier.js
+++ b/player/js/utils/shapes/ZigZagModifier.js
@@ -6,7 +6,7 @@
 import {
   ShapeModifier,
 } from './ShapeModifiers';
-import bez from '../bez';
+import { PolynomialBezier } from '../PolynomialBezier';
 
 function ZigZagModifier() {}
 extendPrototype([ShapeModifier], ZigZagModifier);
@@ -24,45 +24,34 @@
   var vX;
   var vY;
   var direction = 1;
-  var j = 0;
-  var next;
 
   if (!path.c) {
     pathLength -= 1;
   }
 
   for (var cur = 0; cur < pathLength; cur += 1) {
-    next = (cur + 1) % pathLength;
+    var bez = PolynomialBezier.shapeSegment(path, cur);
 
-    var coeffx = bez.polynomialCoefficients(path.v[cur][0], path.o[cur][0], path.i[next][0], path.v[next][0]);
-    var coeffy = bez.polynomialCoefficients(path.v[cur][1], path.o[cur][1], path.i[next][1], path.v[next][1]);
-
-    vX = path.v[cur][0];
-    vY = path.v[cur][1];
-    clonedPath.setTripleAt(vX, vY, vX, vY, vX, vY, j);
-    j += 1;
+    vX = bez.points[0][0];
+    vY = bez.points[0][1];
+    clonedPath.setTripleAt(vX, vY, vX, vY, vX, vY, clonedPath.length());
 
     for (var i = 0; i < frequency; i += 1) {
       var t = (i + 0.5) / frequency;
-      var dervx = bez.polynomialDerivative(t, coeffx[0], coeffx[1], coeffx[2]);
-      var dervy = bez.polynomialDerivative(t, coeffy[0], coeffy[1], coeffy[2]);
-      var px = bez.polynomialValue(t, coeffx[0], coeffx[1], coeffx[2], coeffx[3]);
-      var py = bez.polynomialValue(t, coeffy[0], coeffy[1], coeffy[2], coeffy[3]);
-      var normal = Math.atan2(dervx, dervy);
-      vX = px + Math.cos(normal) * direction * amplitude;
-      vY = py - Math.sin(normal) * direction * amplitude;
+      var pt = bez.point(t);
+      var normal = bez.normalAngle(t);
+      vX = pt[0] + Math.cos(normal) * direction * amplitude;
+      vY = pt[1] - Math.sin(normal) * direction * amplitude;
 
-      clonedPath.setTripleAt(vX, vY, vX, vY, vX, vY, j);
-      j += 1;
+      clonedPath.setTripleAt(vX, vY, vX, vY, vX, vY, clonedPath.length());
       direction = -direction;
     }
 
     direction = -direction;
 
-    vX = path.v[next][0];
-    vY = path.v[next][1];
-    clonedPath.setTripleAt(vX, vY, vX, vY, vX, vY, j);
-    j += 1;
+    vX = bez.points[3][0];
+    vY = bez.points[3][1];
+    clonedPath.setTripleAt(vX, vY, vX, vY, vX, vY, clonedPath.length());
   }
   return clonedPath;
 };