first commit

node_modules/lottie-web/player/js/elements/AudioElement.js

@@ -0,0 +1,102 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import PropertyFactory from '../utils/PropertyFactory';
+import RenderableElement from './helpers/RenderableElement';
+import BaseElement from './BaseElement';
+import FrameElement from './helpers/FrameElement';
+
+function AudioElement(data, globalData, comp) {
+  this.initFrame();
+  this.initRenderable();
+  this.assetData = globalData.getAssetData(data.refId);
+  this.initBaseData(data, globalData, comp);
+  this._isPlaying = false;
+  this._canPlay = false;
+  var assetPath = this.globalData.getAssetsPath(this.assetData);
+  this.audio = this.globalData.audioController.createAudio(assetPath);
+  this._currentTime = 0;
+  this.globalData.audioController.addAudio(this);
+  this._volumeMultiplier = 1;
+  this._volume = 1;
+  this._previousVolume = null;
+  this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
+  this.lv = PropertyFactory.getProp(this, data.au && data.au.lv ? data.au.lv : { k: [100] }, 1, 0.01, this);
+}
+
+AudioElement.prototype.prepareFrame = function (num) {
+  this.prepareRenderableFrame(num, true);
+  this.prepareProperties(num, true);
+  if (!this.tm._placeholder) {
+    var timeRemapped = this.tm.v;
+    this._currentTime = timeRemapped;
+  } else {
+    this._currentTime = num / this.data.sr;
+  }
+  this._volume = this.lv.v[0];
+  var totalVolume = this._volume * this._volumeMultiplier;
+  if (this._previousVolume !== totalVolume) {
+    this._previousVolume = totalVolume;
+    this.audio.volume(totalVolume);
+  }
+};
+
+extendPrototype([RenderableElement, BaseElement, FrameElement], AudioElement);
+
+AudioElement.prototype.renderFrame = function () {
+  if (this.isInRange && this._canPlay) {
+    if (!this._isPlaying) {
+      this.audio.play();
+      this.audio.seek(this._currentTime / this.globalData.frameRate);
+      this._isPlaying = true;
+    } else if (!this.audio.playing()
+      || Math.abs(this._currentTime / this.globalData.frameRate - this.audio.seek()) > 0.1
+    ) {
+      this.audio.seek(this._currentTime / this.globalData.frameRate);
+    }
+  }
+};
+
+AudioElement.prototype.show = function () {
+  // this.audio.play()
+};
+
+AudioElement.prototype.hide = function () {
+  this.audio.pause();
+  this._isPlaying = false;
+};
+
+AudioElement.prototype.pause = function () {
+  this.audio.pause();
+  this._isPlaying = false;
+  this._canPlay = false;
+};
+
+AudioElement.prototype.resume = function () {
+  this._canPlay = true;
+};
+
+AudioElement.prototype.setRate = function (rateValue) {
+  this.audio.rate(rateValue);
+};
+
+AudioElement.prototype.volume = function (volumeValue) {
+  this._volumeMultiplier = volumeValue;
+  this._previousVolume = volumeValue * this._volume;
+  this.audio.volume(this._previousVolume);
+};
+
+AudioElement.prototype.getBaseElement = function () {
+  return null;
+};
+
+AudioElement.prototype.destroy = function () {
+};
+
+AudioElement.prototype.sourceRectAtTime = function () {
+};
+
+AudioElement.prototype.initExpressions = function () {
+};
+
+export default AudioElement;

node_modules/lottie-web/player/js/elements/BaseElement.js

@@ -0,0 +1,78 @@
+import {
+  createElementID,
+  getExpressionInterfaces,
+} from '../utils/common';
+import getBlendMode from '../utils/helpers/blendModes';
+import EffectsManager from '../EffectsManager';
+
+function BaseElement() {
+}
+
+BaseElement.prototype = {
+  checkMasks: function () {
+    if (!this.data.hasMask) {
+      return false;
+    }
+    var i = 0;
+    var len = this.data.masksProperties.length;
+    while (i < len) {
+      if ((this.data.masksProperties[i].mode !== 'n' && this.data.masksProperties[i].cl !== false)) {
+        return true;
+      }
+      i += 1;
+    }
+    return false;
+  },
+  initExpressions: function () {
+    const expressionsInterfaces = getExpressionInterfaces();
+    if (!expressionsInterfaces) {
+      return;
+    }
+    const LayerExpressionInterface = expressionsInterfaces('layer');
+    const EffectsExpressionInterface = expressionsInterfaces('effects');
+    const ShapeExpressionInterface = expressionsInterfaces('shape');
+    const TextExpressionInterface = expressionsInterfaces('text');
+    const CompExpressionInterface = expressionsInterfaces('comp');
+    this.layerInterface = LayerExpressionInterface(this);
+    if (this.data.hasMask && this.maskManager) {
+      this.layerInterface.registerMaskInterface(this.maskManager);
+    }
+    var effectsInterface = EffectsExpressionInterface.createEffectsInterface(this, this.layerInterface);
+    this.layerInterface.registerEffectsInterface(effectsInterface);
+
+    if (this.data.ty === 0 || this.data.xt) {
+      this.compInterface = CompExpressionInterface(this);
+    } else if (this.data.ty === 4) {
+      this.layerInterface.shapeInterface = ShapeExpressionInterface(this.shapesData, this.itemsData, this.layerInterface);
+      this.layerInterface.content = this.layerInterface.shapeInterface;
+    } else if (this.data.ty === 5) {
+      this.layerInterface.textInterface = TextExpressionInterface(this);
+      this.layerInterface.text = this.layerInterface.textInterface;
+    }
+  },
+  setBlendMode: function () {
+    var blendModeValue = getBlendMode(this.data.bm);
+    var elem = this.baseElement || this.layerElement;
+
+    elem.style['mix-blend-mode'] = blendModeValue;
+  },
+  initBaseData: function (data, globalData, comp) {
+    this.globalData = globalData;
+    this.comp = comp;
+    this.data = data;
+    this.layerId = createElementID();
+
+    // Stretch factor for old animations missing this property.
+    if (!this.data.sr) {
+      this.data.sr = 1;
+    }
+    // effects manager
+    this.effectsManager = new EffectsManager(this.data, this, this.dynamicProperties);
+  },
+  getType: function () {
+    return this.type;
+  },
+  sourceRectAtTime: function () {},
+};
+
+export default BaseElement;

node_modules/lottie-web/player/js/elements/BaseTextElement.js

@@ -0,0 +1,4 @@
+const BaseTextElement = function () {
+};
+
+export default BaseTextElement;

node_modules/lottie-web/player/js/elements/CompElement.js

@@ -0,0 +1,107 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import BaseElement from './BaseElement';
+import TransformElement from './helpers/TransformElement';
+import HierarchyElement from './helpers/HierarchyElement';
+import FrameElement from './helpers/FrameElement';
+import RenderableDOMElement from './helpers/RenderableDOMElement';
+
+function ICompElement() {}
+
+extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement, RenderableDOMElement], ICompElement);
+
+ICompElement.prototype.initElement = function (data, globalData, comp) {
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.initTransform(data, globalData, comp);
+  this.initRenderable();
+  this.initHierarchy();
+  this.initRendererElement();
+  this.createContainerElements();
+  this.createRenderableComponents();
+  if (this.data.xt || !globalData.progressiveLoad) {
+    this.buildAllItems();
+  }
+  this.hide();
+};
+
+/* ICompElement.prototype.hide = function(){
+    if(!this.hidden){
+        this.hideElement();
+        var i,len = this.elements.length;
+        for( i = 0; i < len; i+=1 ){
+            if(this.elements[i]){
+                this.elements[i].hide();
+            }
+        }
+    }
+}; */
+
+ICompElement.prototype.prepareFrame = function (num) {
+  this._mdf = false;
+  this.prepareRenderableFrame(num);
+  this.prepareProperties(num, this.isInRange);
+  if (!this.isInRange && !this.data.xt) {
+    return;
+  }
+
+  if (!this.tm._placeholder) {
+    var timeRemapped = this.tm.v;
+    if (timeRemapped === this.data.op) {
+      timeRemapped = this.data.op - 1;
+    }
+    this.renderedFrame = timeRemapped;
+  } else {
+    this.renderedFrame = num / this.data.sr;
+  }
+  var i;
+  var len = this.elements.length;
+  if (!this.completeLayers) {
+    this.checkLayers(this.renderedFrame);
+  }
+  // This iteration needs to be backwards because of how expressions connect between each other
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].prepareFrame(this.renderedFrame - this.layers[i].st);
+      if (this.elements[i]._mdf) {
+        this._mdf = true;
+      }
+    }
+  }
+};
+
+ICompElement.prototype.renderInnerContent = function () {
+  var i;
+  var len = this.layers.length;
+  for (i = 0; i < len; i += 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].renderFrame();
+    }
+  }
+};
+
+ICompElement.prototype.setElements = function (elems) {
+  this.elements = elems;
+};
+
+ICompElement.prototype.getElements = function () {
+  return this.elements;
+};
+
+ICompElement.prototype.destroyElements = function () {
+  var i;
+  var len = this.layers.length;
+  for (i = 0; i < len; i += 1) {
+    if (this.elements[i]) {
+      this.elements[i].destroy();
+    }
+  }
+};
+
+ICompElement.prototype.destroy = function () {
+  this.destroyElements();
+  this.destroyBaseElement();
+};
+
+export default ICompElement;

node_modules/lottie-web/player/js/elements/FootageElement.js

@@ -0,0 +1,47 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import {
+  getExpressionInterfaces,
+} from '../utils/common';
+import RenderableElement from './helpers/RenderableElement';
+import BaseElement from './BaseElement';
+import FrameElement from './helpers/FrameElement';
+
+function FootageElement(data, globalData, comp) {
+  this.initFrame();
+  this.initRenderable();
+  this.assetData = globalData.getAssetData(data.refId);
+  this.footageData = globalData.imageLoader.getAsset(this.assetData);
+  this.initBaseData(data, globalData, comp);
+}
+
+FootageElement.prototype.prepareFrame = function () {
+};
+
+extendPrototype([RenderableElement, BaseElement, FrameElement], FootageElement);
+
+FootageElement.prototype.getBaseElement = function () {
+  return null;
+};
+
+FootageElement.prototype.renderFrame = function () {
+};
+
+FootageElement.prototype.destroy = function () {
+};
+
+FootageElement.prototype.initExpressions = function () {
+  const expressionsInterfaces = getExpressionInterfaces();
+  if (!expressionsInterfaces) {
+    return;
+  }
+  const FootageInterface = expressionsInterfaces('footage');
+  this.layerInterface = FootageInterface(this);
+};
+
+FootageElement.prototype.getFootageData = function () {
+  return this.footageData;
+};
+
+export default FootageElement;

node_modules/lottie-web/player/js/elements/ImageElement.js

@@ -0,0 +1,42 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+
+import createNS from '../utils/helpers/svg_elements';
+import BaseElement from './BaseElement';
+import TransformElement from './helpers/TransformElement';
+import SVGBaseElement from './svgElements/SVGBaseElement';
+import HierarchyElement from './helpers/HierarchyElement';
+import FrameElement from './helpers/FrameElement';
+import RenderableDOMElement from './helpers/RenderableDOMElement';
+
+function IImageElement(data, globalData, comp) {
+  this.assetData = globalData.getAssetData(data.refId);
+  if (this.assetData && this.assetData.sid) {
+    this.assetData = globalData.slotManager.getProp(this.assetData);
+  }
+  this.initElement(data, globalData, comp);
+  this.sourceRect = {
+    top: 0, left: 0, width: this.assetData.w, height: this.assetData.h,
+  };
+}
+
+extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], IImageElement);
+
+IImageElement.prototype.createContent = function () {
+  var assetPath = this.globalData.getAssetsPath(this.assetData);
+
+  this.innerElem = createNS('image');
+  this.innerElem.setAttribute('width', this.assetData.w + 'px');
+  this.innerElem.setAttribute('height', this.assetData.h + 'px');
+  this.innerElem.setAttribute('preserveAspectRatio', this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio);
+  this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
+
+  this.layerElement.appendChild(this.innerElem);
+};
+
+IImageElement.prototype.sourceRectAtTime = function () {
+  return this.sourceRect;
+};
+
+export default IImageElement;

node_modules/lottie-web/player/js/elements/NullElement.js

@@ -0,0 +1,39 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import BaseElement from './BaseElement';
+import TransformElement from './helpers/TransformElement';
+import HierarchyElement from './helpers/HierarchyElement';
+import FrameElement from './helpers/FrameElement';
+
+function NullElement(data, globalData, comp) {
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.initFrame();
+  this.initTransform(data, globalData, comp);
+  this.initHierarchy();
+}
+
+NullElement.prototype.prepareFrame = function (num) {
+  this.prepareProperties(num, true);
+};
+
+NullElement.prototype.renderFrame = function () {
+};
+
+NullElement.prototype.getBaseElement = function () {
+  return null;
+};
+
+NullElement.prototype.destroy = function () {
+};
+
+NullElement.prototype.sourceRectAtTime = function () {
+};
+
+NullElement.prototype.hide = function () {
+};
+
+extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement], NullElement);
+
+export default NullElement;

node_modules/lottie-web/player/js/elements/ShapeElement.js

@@ -0,0 +1,76 @@
+import ProcessedElement from './helpers/shapes/ProcessedElement';
+
+function IShapeElement() {
+}
+
+IShapeElement.prototype = {
+  addShapeToModifiers: function (data) {
+    var i;
+    var len = this.shapeModifiers.length;
+    for (i = 0; i < len; i += 1) {
+      this.shapeModifiers[i].addShape(data);
+    }
+  },
+  isShapeInAnimatedModifiers: function (data) {
+    var i = 0;
+    var len = this.shapeModifiers.length;
+    while (i < len) {
+      if (this.shapeModifiers[i].isAnimatedWithShape(data)) {
+        return true;
+      }
+    }
+    return false;
+  },
+  renderModifiers: function () {
+    if (!this.shapeModifiers.length) {
+      return;
+    }
+    var i;
+    var len = this.shapes.length;
+    for (i = 0; i < len; i += 1) {
+      this.shapes[i].sh.reset();
+    }
+
+    len = this.shapeModifiers.length;
+    var shouldBreakProcess;
+    for (i = len - 1; i >= 0; i -= 1) {
+      shouldBreakProcess = this.shapeModifiers[i].processShapes(this._isFirstFrame);
+      // workaround to fix cases where a repeater resets the shape so the following processes get called twice
+      // TODO: find a better solution for this
+      if (shouldBreakProcess) {
+        break;
+      }
+    }
+  },
+
+  searchProcessedElement: function (elem) {
+    var elements = this.processedElements;
+    var i = 0;
+    var len = elements.length;
+    while (i < len) {
+      if (elements[i].elem === elem) {
+        return elements[i].pos;
+      }
+      i += 1;
+    }
+    return 0;
+  },
+  addProcessedElement: function (elem, pos) {
+    var elements = this.processedElements;
+    var i = elements.length;
+    while (i) {
+      i -= 1;
+      if (elements[i].elem === elem) {
+        elements[i].pos = pos;
+        return;
+      }
+    }
+    elements.push(new ProcessedElement(elem, pos));
+  },
+  prepareFrame: function (num) {
+    this.prepareRenderableFrame(num);
+    this.prepareProperties(num, this.isInRange);
+  },
+};
+
+export default IShapeElement;

node_modules/lottie-web/player/js/elements/SolidElement.js

@@ -0,0 +1,23 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import createNS from '../utils/helpers/svg_elements';
+import IImageElement from './ImageElement';
+
+function ISolidElement(data, globalData, comp) {
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([IImageElement], ISolidElement);
+
+ISolidElement.prototype.createContent = function () {
+  var rect = createNS('rect');
+  /// /rect.style.width = this.data.sw;
+  /// /rect.style.height = this.data.sh;
+  /// /rect.style.fill = this.data.sc;
+  rect.setAttribute('width', this.data.sw);
+  rect.setAttribute('height', this.data.sh);
+  rect.setAttribute('fill', this.data.sc);
+  this.layerElement.appendChild(rect);
+};
+
+export default ISolidElement;

node_modules/lottie-web/player/js/elements/TextElement.js

@@ -0,0 +1,94 @@
+import LetterProps from '../utils/text/LetterProps';
+import TextProperty from '../utils/text/TextProperty';
+import TextAnimatorProperty from '../utils/text/TextAnimatorProperty';
+import buildShapeString from '../utils/shapes/shapePathBuilder';
+
+function ITextElement() {
+}
+
+ITextElement.prototype.initElement = function (data, globalData, comp) {
+  this.lettersChangedFlag = true;
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.textProperty = new TextProperty(this, data.t, this.dynamicProperties);
+  this.textAnimator = new TextAnimatorProperty(data.t, this.renderType, this);
+  this.initTransform(data, globalData, comp);
+  this.initHierarchy();
+  this.initRenderable();
+  this.initRendererElement();
+  this.createContainerElements();
+  this.createRenderableComponents();
+  this.createContent();
+  this.hide();
+  this.textAnimator.searchProperties(this.dynamicProperties);
+};
+
+ITextElement.prototype.prepareFrame = function (num) {
+  this._mdf = false;
+  this.prepareRenderableFrame(num);
+  this.prepareProperties(num, this.isInRange);
+};
+
+ITextElement.prototype.createPathShape = function (matrixHelper, shapes) {
+  var j;
+  var jLen = shapes.length;
+  var pathNodes;
+  var shapeStr = '';
+  for (j = 0; j < jLen; j += 1) {
+    if (shapes[j].ty === 'sh') {
+      pathNodes = shapes[j].ks.k;
+      shapeStr += buildShapeString(pathNodes, pathNodes.i.length, true, matrixHelper);
+    }
+  }
+  return shapeStr;
+};
+
+ITextElement.prototype.updateDocumentData = function (newData, index) {
+  this.textProperty.updateDocumentData(newData, index);
+};
+
+ITextElement.prototype.canResizeFont = function (_canResize) {
+  this.textProperty.canResizeFont(_canResize);
+};
+
+ITextElement.prototype.setMinimumFontSize = function (_fontSize) {
+  this.textProperty.setMinimumFontSize(_fontSize);
+};
+
+ITextElement.prototype.applyTextPropertiesToMatrix = function (documentData, matrixHelper, lineNumber, xPos, yPos) {
+  if (documentData.ps) {
+    matrixHelper.translate(documentData.ps[0], documentData.ps[1] + documentData.ascent, 0);
+  }
+  matrixHelper.translate(0, -documentData.ls, 0);
+  switch (documentData.j) {
+    case 1:
+      matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]), 0, 0);
+      break;
+    case 2:
+      matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]) / 2, 0, 0);
+      break;
+    default:
+      break;
+  }
+  matrixHelper.translate(xPos, yPos, 0);
+};
+
+ITextElement.prototype.buildColor = function (colorData) {
+  return 'rgb(' + Math.round(colorData[0] * 255) + ',' + Math.round(colorData[1] * 255) + ',' + Math.round(colorData[2] * 255) + ')';
+};
+
+ITextElement.prototype.emptyProp = new LetterProps();
+
+ITextElement.prototype.destroy = function () {
+
+};
+
+ITextElement.prototype.validateText = function () {
+  if (this.textProperty._mdf || this.textProperty._isFirstFrame) {
+    this.buildNewText();
+    this.textProperty._isFirstFrame = false;
+    this.textProperty._mdf = false;
+  }
+};
+
+export default ITextElement;

node_modules/lottie-web/player/js/elements/canvasElements/CVBaseElement.js

@@ -0,0 +1,170 @@
+import assetManager from '../../utils/helpers/assetManager';
+import getBlendMode from '../../utils/helpers/blendModes';
+import Matrix from '../../3rd_party/transformation-matrix';
+import CVEffects from './CVEffects';
+import CVMaskElement from './CVMaskElement';
+import effectTypes from '../../utils/helpers/effectTypes';
+
+function CVBaseElement() {
+}
+
+var operationsMap = {
+  1: 'source-in',
+  2: 'source-out',
+  3: 'source-in',
+  4: 'source-out',
+};
+
+CVBaseElement.prototype = {
+  createElements: function () {},
+  initRendererElement: function () {},
+  createContainerElements: function () {
+    // If the layer is masked we will use two buffers to store each different states of the drawing
+    // This solution is not ideal for several reason. But unfortunately, because of the recursive
+    // nature of the render tree, it's the only simple way to make sure one inner mask doesn't override an outer mask.
+    // TODO: try to reduce the size of these buffers to the size of the composition contaning the layer
+    // It might be challenging because the layer most likely is transformed in some way
+    if (this.data.tt >= 1) {
+      this.buffers = [];
+      var canvasContext = this.globalData.canvasContext;
+      var bufferCanvas = assetManager.createCanvas(canvasContext.canvas.width, canvasContext.canvas.height);
+      this.buffers.push(bufferCanvas);
+      var bufferCanvas2 = assetManager.createCanvas(canvasContext.canvas.width, canvasContext.canvas.height);
+      this.buffers.push(bufferCanvas2);
+      if (this.data.tt >= 3 && !document._isProxy) {
+        assetManager.loadLumaCanvas();
+      }
+    }
+    this.canvasContext = this.globalData.canvasContext;
+    this.transformCanvas = this.globalData.transformCanvas;
+    this.renderableEffectsManager = new CVEffects(this);
+    this.searchEffectTransforms();
+  },
+  createContent: function () {},
+  setBlendMode: function () {
+    var globalData = this.globalData;
+    if (globalData.blendMode !== this.data.bm) {
+      globalData.blendMode = this.data.bm;
+      var blendModeValue = getBlendMode(this.data.bm);
+      globalData.canvasContext.globalCompositeOperation = blendModeValue;
+    }
+  },
+  createRenderableComponents: function () {
+    this.maskManager = new CVMaskElement(this.data, this);
+    this.transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);
+  },
+  hideElement: function () {
+    if (!this.hidden && (!this.isInRange || this.isTransparent)) {
+      this.hidden = true;
+    }
+  },
+  showElement: function () {
+    if (this.isInRange && !this.isTransparent) {
+      this.hidden = false;
+      this._isFirstFrame = true;
+      this.maskManager._isFirstFrame = true;
+    }
+  },
+  clearCanvas: function (canvasContext) {
+    canvasContext.clearRect(
+      this.transformCanvas.tx,
+      this.transformCanvas.ty,
+      this.transformCanvas.w * this.transformCanvas.sx,
+      this.transformCanvas.h * this.transformCanvas.sy
+    );
+  },
+  prepareLayer: function () {
+    if (this.data.tt >= 1) {
+      var buffer = this.buffers[0];
+      var bufferCtx = buffer.getContext('2d');
+      this.clearCanvas(bufferCtx);
+      // on the first buffer we store the current state of the global drawing
+      bufferCtx.drawImage(this.canvasContext.canvas, 0, 0);
+      // The next four lines are to clear the canvas
+      // TODO: Check if there is a way to clear the canvas without resetting the transform
+      this.currentTransform = this.canvasContext.getTransform();
+      this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
+      this.clearCanvas(this.canvasContext);
+      this.canvasContext.setTransform(this.currentTransform);
+    }
+  },
+  exitLayer: function () {
+    if (this.data.tt >= 1) {
+      var buffer = this.buffers[1];
+      // On the second buffer we store the current state of the global drawing
+      // that only contains the content of this layer
+      // (if it is a composition, it also includes the nested layers)
+      var bufferCtx = buffer.getContext('2d');
+      this.clearCanvas(bufferCtx);
+      bufferCtx.drawImage(this.canvasContext.canvas, 0, 0);
+      // We clear the canvas again
+      this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
+      this.clearCanvas(this.canvasContext);
+      this.canvasContext.setTransform(this.currentTransform);
+      // We draw the mask
+      const mask = this.comp.getElementById('tp' in this.data ? this.data.tp : this.data.ind - 1);
+      mask.renderFrame(true);
+      // We draw the second buffer (that contains the content of this layer)
+      this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
+
+      // If the mask is a Luma matte, we need to do two extra painting operations
+      // the _isProxy check is to avoid drawing a fake canvas in workers that will throw an error
+      if (this.data.tt >= 3 && !document._isProxy) {
+        // We copy the painted mask to a buffer that has a color matrix filter applied to it
+        // that applies the rgb values to the alpha channel
+        var lumaBuffer = assetManager.getLumaCanvas(this.canvasContext.canvas);
+        var lumaBufferCtx = lumaBuffer.getContext('2d');
+        lumaBufferCtx.drawImage(this.canvasContext.canvas, 0, 0);
+        this.clearCanvas(this.canvasContext);
+        // we repaint the context with the mask applied to it
+        this.canvasContext.drawImage(lumaBuffer, 0, 0);
+      }
+      this.canvasContext.globalCompositeOperation = operationsMap[this.data.tt];
+      this.canvasContext.drawImage(buffer, 0, 0);
+      // We finally draw the first buffer (that contains the content of the global drawing)
+      // We use destination-over to draw the global drawing below the current layer
+      this.canvasContext.globalCompositeOperation = 'destination-over';
+      this.canvasContext.drawImage(this.buffers[0], 0, 0);
+      this.canvasContext.setTransform(this.currentTransform);
+      // We reset the globalCompositeOperation to source-over, the standard type of operation
+      this.canvasContext.globalCompositeOperation = 'source-over';
+    }
+  },
+  renderFrame: function (forceRender) {
+    if (this.hidden || this.data.hd) {
+      return;
+    }
+    if (this.data.td === 1 && !forceRender) {
+      return;
+    }
+    this.renderTransform();
+    this.renderRenderable();
+    this.renderLocalTransform();
+    this.setBlendMode();
+    var forceRealStack = this.data.ty === 0;
+    this.prepareLayer();
+    this.globalData.renderer.save(forceRealStack);
+    this.globalData.renderer.ctxTransform(this.finalTransform.localMat.props);
+    this.globalData.renderer.ctxOpacity(this.finalTransform.localOpacity);
+    this.renderInnerContent();
+    this.globalData.renderer.restore(forceRealStack);
+    this.exitLayer();
+    if (this.maskManager.hasMasks) {
+      this.globalData.renderer.restore(true);
+    }
+    if (this._isFirstFrame) {
+      this._isFirstFrame = false;
+    }
+  },
+  destroy: function () {
+    this.canvasContext = null;
+    this.data = null;
+    this.globalData = null;
+    this.maskManager.destroy();
+  },
+  mHelper: new Matrix(),
+};
+CVBaseElement.prototype.hide = CVBaseElement.prototype.hideElement;
+CVBaseElement.prototype.show = CVBaseElement.prototype.showElement;
+
+export default CVBaseElement;

node_modules/lottie-web/player/js/elements/canvasElements/CVCompBaseElement.js

@@ -0,0 +1,11 @@
+import BaseRenderer from '../../renderers/BaseRenderer';
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+
+function CVCompBaseElement() {
+
+}
+extendPrototype([BaseRenderer], CVCompBaseElement);
+
+export default CVCompBaseElement;

node_modules/lottie-web/player/js/elements/canvasElements/CVCompElement.js

@@ -0,0 +1,57 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import PropertyFactory from '../../utils/PropertyFactory';
+import CanvasRendererBase from '../../renderers/CanvasRendererBase';
+import CVBaseElement from './CVBaseElement';
+import ICompElement from '../CompElement';
+
+function CVCompElement(data, globalData, comp) {
+  this.completeLayers = false;
+  this.layers = data.layers;
+  this.pendingElements = [];
+  this.elements = createSizedArray(this.layers.length);
+  this.initElement(data, globalData, comp);
+  this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
+}
+
+extendPrototype([CanvasRendererBase, ICompElement, CVBaseElement], CVCompElement);
+
+CVCompElement.prototype.renderInnerContent = function () {
+  var ctx = this.canvasContext;
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(this.data.w, 0);
+  ctx.lineTo(this.data.w, this.data.h);
+  ctx.lineTo(0, this.data.h);
+  ctx.lineTo(0, 0);
+  ctx.clip();
+  var i;
+  var len = this.layers.length;
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].renderFrame();
+    }
+  }
+};
+
+CVCompElement.prototype.destroy = function () {
+  var i;
+  var len = this.layers.length;
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.elements[i]) {
+      this.elements[i].destroy();
+    }
+  }
+  this.layers = null;
+  this.elements = null;
+};
+
+CVCompElement.prototype.createComp = function (data) {
+  return new CVCompElement(data, this.globalData, this);
+};
+
+export default CVCompElement;

node_modules/lottie-web/player/js/elements/canvasElements/CVContextData.js

@@ -0,0 +1,239 @@
+import {
+  createTypedArray,
+} from '../../utils/helpers/arrays';
+import Matrix from '../../3rd_party/transformation-matrix';
+
+function CanvasContext() {
+  this.opacity = -1;
+  this.transform = createTypedArray('float32', 16);
+  this.fillStyle = '';
+  this.strokeStyle = '';
+  this.lineWidth = '';
+  this.lineCap = '';
+  this.lineJoin = '';
+  this.miterLimit = '';
+  this.id = Math.random();
+}
+
+function CVContextData() {
+  this.stack = [];
+  this.cArrPos = 0;
+  this.cTr = new Matrix();
+  var i;
+  var len = 15;
+  for (i = 0; i < len; i += 1) {
+    var canvasContext = new CanvasContext();
+    this.stack[i] = canvasContext;
+  }
+  this._length = len;
+  this.nativeContext = null;
+  this.transformMat = new Matrix();
+  this.currentOpacity = 1;
+  //
+  this.currentFillStyle = '';
+  this.appliedFillStyle = '';
+  //
+  this.currentStrokeStyle = '';
+  this.appliedStrokeStyle = '';
+  //
+  this.currentLineWidth = '';
+  this.appliedLineWidth = '';
+  //
+  this.currentLineCap = '';
+  this.appliedLineCap = '';
+  //
+  this.currentLineJoin = '';
+  this.appliedLineJoin = '';
+  //
+  this.appliedMiterLimit = '';
+  this.currentMiterLimit = '';
+}
+
+CVContextData.prototype.duplicate = function () {
+  var newLength = this._length * 2;
+  var i = 0;
+  for (i = this._length; i < newLength; i += 1) {
+    this.stack[i] = new CanvasContext();
+  }
+  this._length = newLength;
+};
+
+CVContextData.prototype.reset = function () {
+  this.cArrPos = 0;
+  this.cTr.reset();
+  this.stack[this.cArrPos].opacity = 1;
+};
+
+CVContextData.prototype.restore = function (forceRestore) {
+  this.cArrPos -= 1;
+  var currentContext = this.stack[this.cArrPos];
+  var transform = currentContext.transform;
+  var i;
+  var arr = this.cTr.props;
+  for (i = 0; i < 16; i += 1) {
+    arr[i] = transform[i];
+  }
+  if (forceRestore) {
+    this.nativeContext.restore();
+    var prevStack = this.stack[this.cArrPos + 1];
+    this.appliedFillStyle = prevStack.fillStyle;
+    this.appliedStrokeStyle = prevStack.strokeStyle;
+    this.appliedLineWidth = prevStack.lineWidth;
+    this.appliedLineCap = prevStack.lineCap;
+    this.appliedLineJoin = prevStack.lineJoin;
+    this.appliedMiterLimit = prevStack.miterLimit;
+  }
+  this.nativeContext.setTransform(transform[0], transform[1], transform[4], transform[5], transform[12], transform[13]);
+  if (forceRestore || (currentContext.opacity !== -1 && this.currentOpacity !== currentContext.opacity)) {
+    this.nativeContext.globalAlpha = currentContext.opacity;
+    this.currentOpacity = currentContext.opacity;
+  }
+  this.currentFillStyle = currentContext.fillStyle;
+  this.currentStrokeStyle = currentContext.strokeStyle;
+  this.currentLineWidth = currentContext.lineWidth;
+  this.currentLineCap = currentContext.lineCap;
+  this.currentLineJoin = currentContext.lineJoin;
+  this.currentMiterLimit = currentContext.miterLimit;
+};
+
+CVContextData.prototype.save = function (saveOnNativeFlag) {
+  if (saveOnNativeFlag) {
+    this.nativeContext.save();
+  }
+  var props = this.cTr.props;
+  if (this._length <= this.cArrPos) {
+    this.duplicate();
+  }
+
+  var currentStack = this.stack[this.cArrPos];
+  var i;
+  for (i = 0; i < 16; i += 1) {
+    currentStack.transform[i] = props[i];
+  }
+  this.cArrPos += 1;
+  var newStack = this.stack[this.cArrPos];
+  newStack.opacity = currentStack.opacity;
+  newStack.fillStyle = currentStack.fillStyle;
+  newStack.strokeStyle = currentStack.strokeStyle;
+  newStack.lineWidth = currentStack.lineWidth;
+  newStack.lineCap = currentStack.lineCap;
+  newStack.lineJoin = currentStack.lineJoin;
+  newStack.miterLimit = currentStack.miterLimit;
+};
+
+CVContextData.prototype.setOpacity = function (value) {
+  this.stack[this.cArrPos].opacity = value;
+};
+
+CVContextData.prototype.setContext = function (value) {
+  this.nativeContext = value;
+};
+
+CVContextData.prototype.fillStyle = function (value) {
+  if (this.stack[this.cArrPos].fillStyle !== value) {
+    this.currentFillStyle = value;
+    this.stack[this.cArrPos].fillStyle = value;
+  }
+};
+
+CVContextData.prototype.strokeStyle = function (value) {
+  if (this.stack[this.cArrPos].strokeStyle !== value) {
+    this.currentStrokeStyle = value;
+    this.stack[this.cArrPos].strokeStyle = value;
+  }
+};
+
+CVContextData.prototype.lineWidth = function (value) {
+  if (this.stack[this.cArrPos].lineWidth !== value) {
+    this.currentLineWidth = value;
+    this.stack[this.cArrPos].lineWidth = value;
+  }
+};
+
+CVContextData.prototype.lineCap = function (value) {
+  if (this.stack[this.cArrPos].lineCap !== value) {
+    this.currentLineCap = value;
+    this.stack[this.cArrPos].lineCap = value;
+  }
+};
+
+CVContextData.prototype.lineJoin = function (value) {
+  if (this.stack[this.cArrPos].lineJoin !== value) {
+    this.currentLineJoin = value;
+    this.stack[this.cArrPos].lineJoin = value;
+  }
+};
+
+CVContextData.prototype.miterLimit = function (value) {
+  if (this.stack[this.cArrPos].miterLimit !== value) {
+    this.currentMiterLimit = value;
+    this.stack[this.cArrPos].miterLimit = value;
+  }
+};
+
+CVContextData.prototype.transform = function (props) {
+  this.transformMat.cloneFromProps(props);
+  // Taking the last transform value from the stored stack of transforms
+  var currentTransform = this.cTr;
+  // Applying the last transform value after the new transform to respect the order of transformations
+  this.transformMat.multiply(currentTransform);
+  // Storing the new transformed value in the stored transform
+  currentTransform.cloneFromProps(this.transformMat.props);
+  var trProps = currentTransform.props;
+  // Applying the new transform to the canvas
+  this.nativeContext.setTransform(trProps[0], trProps[1], trProps[4], trProps[5], trProps[12], trProps[13]);
+};
+
+CVContextData.prototype.opacity = function (op) {
+  var currentOpacity = this.stack[this.cArrPos].opacity;
+  currentOpacity *= op < 0 ? 0 : op;
+  if (this.stack[this.cArrPos].opacity !== currentOpacity) {
+    if (this.currentOpacity !== op) {
+      this.nativeContext.globalAlpha = op;
+      this.currentOpacity = op;
+    }
+    this.stack[this.cArrPos].opacity = currentOpacity;
+  }
+};
+
+CVContextData.prototype.fill = function (rule) {
+  if (this.appliedFillStyle !== this.currentFillStyle) {
+    this.appliedFillStyle = this.currentFillStyle;
+    this.nativeContext.fillStyle = this.appliedFillStyle;
+  }
+  this.nativeContext.fill(rule);
+};
+
+CVContextData.prototype.fillRect = function (x, y, w, h) {
+  if (this.appliedFillStyle !== this.currentFillStyle) {
+    this.appliedFillStyle = this.currentFillStyle;
+    this.nativeContext.fillStyle = this.appliedFillStyle;
+  }
+  this.nativeContext.fillRect(x, y, w, h);
+};
+
+CVContextData.prototype.stroke = function () {
+  if (this.appliedStrokeStyle !== this.currentStrokeStyle) {
+    this.appliedStrokeStyle = this.currentStrokeStyle;
+    this.nativeContext.strokeStyle = this.appliedStrokeStyle;
+  }
+  if (this.appliedLineWidth !== this.currentLineWidth) {
+    this.appliedLineWidth = this.currentLineWidth;
+    this.nativeContext.lineWidth = this.appliedLineWidth;
+  }
+  if (this.appliedLineCap !== this.currentLineCap) {
+    this.appliedLineCap = this.currentLineCap;
+    this.nativeContext.lineCap = this.appliedLineCap;
+  }
+  if (this.appliedLineJoin !== this.currentLineJoin) {
+    this.appliedLineJoin = this.currentLineJoin;
+    this.nativeContext.lineJoin = this.appliedLineJoin;
+  }
+  if (this.appliedMiterLimit !== this.currentMiterLimit) {
+    this.appliedMiterLimit = this.currentMiterLimit;
+    this.nativeContext.miterLimit = this.appliedMiterLimit;
+  }
+  this.nativeContext.stroke();
+};
+
+export default CVContextData;

node_modules/lottie-web/player/js/elements/canvasElements/CVEffects.js

@@ -0,0 +1,50 @@
+var registeredEffects = {};
+
+function CVEffects(elem) {
+  var i;
+  var len = elem.data.ef ? elem.data.ef.length : 0;
+  this.filters = [];
+  var filterManager;
+  for (i = 0; i < len; i += 1) {
+    filterManager = null;
+    var type = elem.data.ef[i].ty;
+    if (registeredEffects[type]) {
+      var Effect = registeredEffects[type].effect;
+      filterManager = new Effect(elem.effectsManager.effectElements[i], elem);
+    }
+    if (filterManager) {
+      this.filters.push(filterManager);
+    }
+  }
+  if (this.filters.length) {
+    elem.addRenderableComponent(this);
+  }
+}
+
+CVEffects.prototype.renderFrame = function (_isFirstFrame) {
+  var i;
+  var len = this.filters.length;
+  for (i = 0; i < len; i += 1) {
+    this.filters[i].renderFrame(_isFirstFrame);
+  }
+};
+
+CVEffects.prototype.getEffects = function (type) {
+  var i;
+  var len = this.filters.length;
+  var effects = [];
+  for (i = 0; i < len; i += 1) {
+    if (this.filters[i].type === type) {
+      effects.push(this.filters[i]);
+    }
+  }
+  return effects;
+};
+
+export function registerEffect(id, effect) {
+  registeredEffects[id] = {
+    effect,
+  };
+}
+
+export default CVEffects;

node_modules/lottie-web/player/js/elements/canvasElements/CVImageElement.js

@@ -0,0 +1,58 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createTag from '../../utils/helpers/html_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import CVBaseElement from './CVBaseElement';
+import IImageElement from '../ImageElement';
+import SVGShapeElement from '../svgElements/SVGShapeElement';
+
+function CVImageElement(data, globalData, comp) {
+  this.assetData = globalData.getAssetData(data.refId);
+  this.img = globalData.imageLoader.getAsset(this.assetData);
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);
+
+CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement;
+CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
+
+CVImageElement.prototype.createContent = function () {
+  if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) {
+    var canvas = createTag('canvas');
+    canvas.width = this.assetData.w;
+    canvas.height = this.assetData.h;
+    var ctx = canvas.getContext('2d');
+
+    var imgW = this.img.width;
+    var imgH = this.img.height;
+    var imgRel = imgW / imgH;
+    var canvasRel = this.assetData.w / this.assetData.h;
+    var widthCrop;
+    var heightCrop;
+    var par = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio;
+    if ((imgRel > canvasRel && par === 'xMidYMid slice') || (imgRel < canvasRel && par !== 'xMidYMid slice')) {
+      heightCrop = imgH;
+      widthCrop = heightCrop * canvasRel;
+    } else {
+      widthCrop = imgW;
+      heightCrop = widthCrop / canvasRel;
+    }
+    ctx.drawImage(this.img, (imgW - widthCrop) / 2, (imgH - heightCrop) / 2, widthCrop, heightCrop, 0, 0, this.assetData.w, this.assetData.h);
+    this.img = canvas;
+  }
+};
+
+CVImageElement.prototype.renderInnerContent = function () {
+  this.canvasContext.drawImage(this.img, 0, 0);
+};
+
+CVImageElement.prototype.destroy = function () {
+  this.img = null;
+};
+
+export default CVImageElement;

node_modules/lottie-web/player/js/elements/canvasElements/CVMaskElement.js

@@ -0,0 +1,72 @@
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+
+import ShapePropertyFactory from '../../utils/shapes/ShapeProperty';
+import MaskElement from '../../mask';
+
+function CVMaskElement(data, element) {
+  this.data = data;
+  this.element = element;
+  this.masksProperties = this.data.masksProperties || [];
+  this.viewData = createSizedArray(this.masksProperties.length);
+  var i;
+  var len = this.masksProperties.length;
+  var hasMasks = false;
+  for (i = 0; i < len; i += 1) {
+    if (this.masksProperties[i].mode !== 'n') {
+      hasMasks = true;
+    }
+    this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element, this.masksProperties[i], 3);
+  }
+  this.hasMasks = hasMasks;
+  if (hasMasks) {
+    this.element.addRenderableComponent(this);
+  }
+}
+
+CVMaskElement.prototype.renderFrame = function () {
+  if (!this.hasMasks) {
+    return;
+  }
+  var transform = this.element.finalTransform.mat;
+  var ctx = this.element.canvasContext;
+  var i;
+  var len = this.masksProperties.length;
+  var pt;
+  var pts;
+  var data;
+  ctx.beginPath();
+  for (i = 0; i < len; i += 1) {
+    if (this.masksProperties[i].mode !== 'n') {
+      if (this.masksProperties[i].inv) {
+        ctx.moveTo(0, 0);
+        ctx.lineTo(this.element.globalData.compSize.w, 0);
+        ctx.lineTo(this.element.globalData.compSize.w, this.element.globalData.compSize.h);
+        ctx.lineTo(0, this.element.globalData.compSize.h);
+        ctx.lineTo(0, 0);
+      }
+      data = this.viewData[i].v;
+      pt = transform.applyToPointArray(data.v[0][0], data.v[0][1], 0);
+      ctx.moveTo(pt[0], pt[1]);
+      var j;
+      var jLen = data._length;
+      for (j = 1; j < jLen; j += 1) {
+        pts = transform.applyToTriplePoints(data.o[j - 1], data.i[j], data.v[j]);
+        ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
+      }
+      pts = transform.applyToTriplePoints(data.o[j - 1], data.i[0], data.v[0]);
+      ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
+    }
+  }
+  this.element.globalData.renderer.save(true);
+  ctx.clip();
+};
+
+CVMaskElement.prototype.getMaskProperty = MaskElement.prototype.getMaskProperty;
+
+CVMaskElement.prototype.destroy = function () {
+  this.element = null;
+};
+
+export default CVMaskElement;

node_modules/lottie-web/player/js/elements/canvasElements/CVShapeElement.js

@@ -0,0 +1,521 @@
+import {
+  degToRads,
+  bmFloor,
+} from '../../utils/common';
+
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import PropertyFactory from '../../utils/PropertyFactory';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import ShapeTransformManager from '../helpers/shapes/ShapeTransformManager';
+import CVBaseElement from './CVBaseElement';
+import IShapeElement from '../ShapeElement';
+import GradientProperty from '../../utils/shapes/GradientProperty';
+import DashProperty from '../../utils/shapes/DashProperty';
+import TransformPropertyFactory from '../../utils/TransformProperty';
+import CVShapeData from '../helpers/shapes/CVShapeData';
+import { ShapeModifiers } from '../../utils/shapes/ShapeModifiers';
+import {
+  lineCapEnum,
+  lineJoinEnum,
+} from '../../utils/helpers/shapeEnums';
+
+function CVShapeElement(data, globalData, comp) {
+  this.shapes = [];
+  this.shapesData = data.shapes;
+  this.stylesList = [];
+  this.itemsData = [];
+  this.prevViewData = [];
+  this.shapeModifiers = [];
+  this.processedElements = [];
+  this.transformsManager = new ShapeTransformManager();
+  this.initElement(data, globalData, comp);
+}
+
+extendPrototype([BaseElement, TransformElement, CVBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableElement], CVShapeElement);
+
+CVShapeElement.prototype.initElement = RenderableDOMElement.prototype.initElement;
+
+CVShapeElement.prototype.transformHelper = { opacity: 1, _opMdf: false };
+
+CVShapeElement.prototype.dashResetter = [];
+
+CVShapeElement.prototype.createContent = function () {
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, true, []);
+};
+
+CVShapeElement.prototype.createStyleElement = function (data, transforms) {
+  var styleElem = {
+    data: data,
+    type: data.ty,
+    preTransforms: this.transformsManager.addTransformSequence(transforms),
+    transforms: [],
+    elements: [],
+    closed: data.hd === true,
+  };
+  var elementData = {};
+  if (data.ty === 'fl' || data.ty === 'st') {
+    elementData.c = PropertyFactory.getProp(this, data.c, 1, 255, this);
+    if (!elementData.c.k) {
+      styleElem.co = 'rgb(' + bmFloor(elementData.c.v[0]) + ',' + bmFloor(elementData.c.v[1]) + ',' + bmFloor(elementData.c.v[2]) + ')';
+    }
+  } else if (data.ty === 'gf' || data.ty === 'gs') {
+    elementData.s = PropertyFactory.getProp(this, data.s, 1, null, this);
+    elementData.e = PropertyFactory.getProp(this, data.e, 1, null, this);
+    elementData.h = PropertyFactory.getProp(this, data.h || { k: 0 }, 0, 0.01, this);
+    elementData.a = PropertyFactory.getProp(this, data.a || { k: 0 }, 0, degToRads, this);
+    elementData.g = new GradientProperty(this, data.g, this);
+  }
+  elementData.o = PropertyFactory.getProp(this, data.o, 0, 0.01, this);
+  if (data.ty === 'st' || data.ty === 'gs') {
+    styleElem.lc = lineCapEnum[data.lc || 2];
+    styleElem.lj = lineJoinEnum[data.lj || 2];
+    if (data.lj == 1) { // eslint-disable-line eqeqeq
+      styleElem.ml = data.ml;
+    }
+    elementData.w = PropertyFactory.getProp(this, data.w, 0, null, this);
+    if (!elementData.w.k) {
+      styleElem.wi = elementData.w.v;
+    }
+    if (data.d) {
+      var d = new DashProperty(this, data.d, 'canvas', this);
+      elementData.d = d;
+      if (!elementData.d.k) {
+        styleElem.da = elementData.d.dashArray;
+        styleElem.do = elementData.d.dashoffset[0];
+      }
+    }
+  } else {
+    styleElem.r = data.r === 2 ? 'evenodd' : 'nonzero';
+  }
+  this.stylesList.push(styleElem);
+  elementData.style = styleElem;
+  return elementData;
+};
+
+CVShapeElement.prototype.createGroupElement = function () {
+  var elementData = {
+    it: [],
+    prevViewData: [],
+  };
+  return elementData;
+};
+
+CVShapeElement.prototype.createTransformElement = function (data) {
+  var elementData = {
+    transform: {
+      opacity: 1,
+      _opMdf: false,
+      key: this.transformsManager.getNewKey(),
+      op: PropertyFactory.getProp(this, data.o, 0, 0.01, this),
+      mProps: TransformPropertyFactory.getTransformProperty(this, data, this),
+    },
+  };
+  return elementData;
+};
+
+CVShapeElement.prototype.createShapeElement = function (data) {
+  var elementData = new CVShapeData(this, data, this.stylesList, this.transformsManager);
+
+  this.shapes.push(elementData);
+  this.addShapeToModifiers(elementData);
+  return elementData;
+};
+
+CVShapeElement.prototype.reloadShapes = function () {
+  this._isFirstFrame = true;
+  var i;
+  var len = this.itemsData.length;
+  for (i = 0; i < len; i += 1) {
+    this.prevViewData[i] = this.itemsData[i];
+  }
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, true, []);
+  len = this.dynamicProperties.length;
+  for (i = 0; i < len; i += 1) {
+    this.dynamicProperties[i].getValue();
+  }
+  this.renderModifiers();
+  this.transformsManager.processSequences(this._isFirstFrame);
+};
+
+CVShapeElement.prototype.addTransformToStyleList = function (transform) {
+  var i;
+  var len = this.stylesList.length;
+  for (i = 0; i < len; i += 1) {
+    if (!this.stylesList[i].closed) {
+      this.stylesList[i].transforms.push(transform);
+    }
+  }
+};
+
+CVShapeElement.prototype.removeTransformFromStyleList = function () {
+  var i;
+  var len = this.stylesList.length;
+  for (i = 0; i < len; i += 1) {
+    if (!this.stylesList[i].closed) {
+      this.stylesList[i].transforms.pop();
+    }
+  }
+};
+
+CVShapeElement.prototype.closeStyles = function (styles) {
+  var i;
+  var len = styles.length;
+  for (i = 0; i < len; i += 1) {
+    styles[i].closed = true;
+  }
+};
+
+CVShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, shouldRender, transforms) {
+  var i;
+  var len = arr.length - 1;
+  var j;
+  var jLen;
+  var ownStyles = [];
+  var ownModifiers = [];
+  var processedPos;
+  var modifier;
+  var currentTransform;
+  var ownTransforms = [].concat(transforms);
+  for (i = len; i >= 0; i -= 1) {
+    processedPos = this.searchProcessedElement(arr[i]);
+    if (!processedPos) {
+      arr[i]._shouldRender = shouldRender;
+    } else {
+      itemsData[i] = prevViewData[processedPos - 1];
+    }
+    if (arr[i].ty === 'fl' || arr[i].ty === 'st' || arr[i].ty === 'gf' || arr[i].ty === 'gs') {
+      if (!processedPos) {
+        itemsData[i] = this.createStyleElement(arr[i], ownTransforms);
+      } else {
+        itemsData[i].style.closed = false;
+      }
+
+      ownStyles.push(itemsData[i].style);
+    } else if (arr[i].ty === 'gr') {
+      if (!processedPos) {
+        itemsData[i] = this.createGroupElement(arr[i]);
+      } else {
+        jLen = itemsData[i].it.length;
+        for (j = 0; j < jLen; j += 1) {
+          itemsData[i].prevViewData[j] = itemsData[i].it[j];
+        }
+      }
+      this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, shouldRender, ownTransforms);
+    } else if (arr[i].ty === 'tr') {
+      if (!processedPos) {
+        currentTransform = this.createTransformElement(arr[i]);
+        itemsData[i] = currentTransform;
+      }
+      ownTransforms.push(itemsData[i]);
+      this.addTransformToStyleList(itemsData[i]);
+    } else if (arr[i].ty === 'sh' || arr[i].ty === 'rc' || arr[i].ty === 'el' || arr[i].ty === 'sr') {
+      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' || arr[i].ty === 'op') {
+      if (!processedPos) {
+        modifier = ShapeModifiers.getModifier(arr[i].ty);
+        modifier.init(this, arr[i]);
+        itemsData[i] = modifier;
+        this.shapeModifiers.push(modifier);
+      } else {
+        modifier = itemsData[i];
+        modifier.closed = false;
+      }
+      ownModifiers.push(modifier);
+    } else if (arr[i].ty === 'rp') {
+      if (!processedPos) {
+        modifier = ShapeModifiers.getModifier(arr[i].ty);
+        itemsData[i] = modifier;
+        modifier.init(this, arr, i, itemsData);
+        this.shapeModifiers.push(modifier);
+        shouldRender = false;
+      } else {
+        modifier = itemsData[i];
+        modifier.closed = true;
+      }
+      ownModifiers.push(modifier);
+    }
+    this.addProcessedElement(arr[i], i + 1);
+  }
+  this.removeTransformFromStyleList();
+  this.closeStyles(ownStyles);
+  len = ownModifiers.length;
+  for (i = 0; i < len; i += 1) {
+    ownModifiers[i].closed = true;
+  }
+};
+
+CVShapeElement.prototype.renderInnerContent = function () {
+  this.transformHelper.opacity = 1;
+  this.transformHelper._opMdf = false;
+  this.renderModifiers();
+  this.transformsManager.processSequences(this._isFirstFrame);
+  this.renderShape(this.transformHelper, this.shapesData, this.itemsData, true);
+};
+
+CVShapeElement.prototype.renderShapeTransform = function (parentTransform, groupTransform) {
+  if (parentTransform._opMdf || groupTransform.op._mdf || this._isFirstFrame) {
+    groupTransform.opacity = parentTransform.opacity;
+    groupTransform.opacity *= groupTransform.op.v;
+    groupTransform._opMdf = true;
+  }
+};
+
+CVShapeElement.prototype.drawLayer = function () {
+  var i;
+  var len = this.stylesList.length;
+  var j;
+  var jLen;
+  var k;
+  var kLen;
+  var elems;
+  var nodes;
+  var renderer = this.globalData.renderer;
+  var ctx = this.globalData.canvasContext;
+  var type;
+  var currentStyle;
+  for (i = 0; i < len; i += 1) {
+    currentStyle = this.stylesList[i];
+    type = currentStyle.type;
+
+    // Skipping style when
+    // Stroke width equals 0
+    // style should not be rendered (extra unused repeaters)
+    // current opacity equals 0
+    // global opacity equals 0
+    if (!(((type === 'st' || type === 'gs') && currentStyle.wi === 0) || !currentStyle.data._shouldRender || currentStyle.coOp === 0 || this.globalData.currentGlobalAlpha === 0)) {
+      renderer.save();
+      elems = currentStyle.elements;
+      if (type === 'st' || type === 'gs') {
+        renderer.ctxStrokeStyle(type === 'st' ? currentStyle.co : currentStyle.grd);
+        // ctx.strokeStyle = type === 'st' ? currentStyle.co : currentStyle.grd;
+        renderer.ctxLineWidth(currentStyle.wi);
+        // ctx.lineWidth = currentStyle.wi;
+        renderer.ctxLineCap(currentStyle.lc);
+        // ctx.lineCap = currentStyle.lc;
+        renderer.ctxLineJoin(currentStyle.lj);
+        // ctx.lineJoin = currentStyle.lj;
+        renderer.ctxMiterLimit(currentStyle.ml || 0);
+        // ctx.miterLimit = currentStyle.ml || 0;
+      } else {
+        renderer.ctxFillStyle(type === 'fl' ? currentStyle.co : currentStyle.grd);
+        // ctx.fillStyle = type === 'fl' ? currentStyle.co : currentStyle.grd;
+      }
+      renderer.ctxOpacity(currentStyle.coOp);
+      if (type !== 'st' && type !== 'gs') {
+        ctx.beginPath();
+      }
+      renderer.ctxTransform(currentStyle.preTransforms.finalTransform.props);
+      jLen = elems.length;
+      for (j = 0; j < jLen; j += 1) {
+        if (type === 'st' || type === 'gs') {
+          ctx.beginPath();
+          if (currentStyle.da) {
+            ctx.setLineDash(currentStyle.da);
+            ctx.lineDashOffset = currentStyle.do;
+          }
+        }
+        nodes = elems[j].trNodes;
+        kLen = nodes.length;
+
+        for (k = 0; k < kLen; k += 1) {
+          if (nodes[k].t === 'm') {
+            ctx.moveTo(nodes[k].p[0], nodes[k].p[1]);
+          } else if (nodes[k].t === 'c') {
+            ctx.bezierCurveTo(nodes[k].pts[0], nodes[k].pts[1], nodes[k].pts[2], nodes[k].pts[3], nodes[k].pts[4], nodes[k].pts[5]);
+          } else {
+            ctx.closePath();
+          }
+        }
+        if (type === 'st' || type === 'gs') {
+          // ctx.stroke();
+          renderer.ctxStroke();
+          if (currentStyle.da) {
+            ctx.setLineDash(this.dashResetter);
+          }
+        }
+      }
+      if (type !== 'st' && type !== 'gs') {
+        // ctx.fill(currentStyle.r);
+        this.globalData.renderer.ctxFill(currentStyle.r);
+      }
+      renderer.restore();
+    }
+  }
+};
+
+CVShapeElement.prototype.renderShape = function (parentTransform, items, data, isMain) {
+  var i;
+  var len = items.length - 1;
+  var groupTransform;
+  groupTransform = parentTransform;
+  for (i = len; i >= 0; i -= 1) {
+    if (items[i].ty === 'tr') {
+      groupTransform = data[i].transform;
+      this.renderShapeTransform(parentTransform, groupTransform);
+    } else if (items[i].ty === 'sh' || items[i].ty === 'el' || items[i].ty === 'rc' || items[i].ty === 'sr') {
+      this.renderPath(items[i], data[i]);
+    } else if (items[i].ty === 'fl') {
+      this.renderFill(items[i], data[i], groupTransform);
+    } else if (items[i].ty === 'st') {
+      this.renderStroke(items[i], data[i], groupTransform);
+    } else if (items[i].ty === 'gf' || items[i].ty === 'gs') {
+      this.renderGradientFill(items[i], data[i], groupTransform);
+    } else if (items[i].ty === 'gr') {
+      this.renderShape(groupTransform, items[i].it, data[i].it);
+    } else if (items[i].ty === 'tm') {
+      //
+    }
+  }
+  if (isMain) {
+    this.drawLayer();
+  }
+};
+
+CVShapeElement.prototype.renderStyledShape = function (styledShape, shape) {
+  if (this._isFirstFrame || shape._mdf || styledShape.transforms._mdf) {
+    var shapeNodes = styledShape.trNodes;
+    var paths = shape.paths;
+    var i;
+    var len;
+    var j;
+    var jLen = paths._length;
+    shapeNodes.length = 0;
+    var groupTransformMat = styledShape.transforms.finalTransform;
+    for (j = 0; j < jLen; j += 1) {
+      var pathNodes = paths.shapes[j];
+      if (pathNodes && pathNodes.v) {
+        len = pathNodes._length;
+        for (i = 1; i < len; i += 1) {
+          if (i === 1) {
+            shapeNodes.push({
+              t: 'm',
+              p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0),
+            });
+          }
+          shapeNodes.push({
+            t: 'c',
+            pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[i], pathNodes.v[i]),
+          });
+        }
+        if (len === 1) {
+          shapeNodes.push({
+            t: 'm',
+            p: groupTransformMat.applyToPointArray(pathNodes.v[0][0], pathNodes.v[0][1], 0),
+          });
+        }
+        if (pathNodes.c && len) {
+          shapeNodes.push({
+            t: 'c',
+            pts: groupTransformMat.applyToTriplePoints(pathNodes.o[i - 1], pathNodes.i[0], pathNodes.v[0]),
+          });
+          shapeNodes.push({
+            t: 'z',
+          });
+        }
+      }
+    }
+    styledShape.trNodes = shapeNodes;
+  }
+};
+
+CVShapeElement.prototype.renderPath = function (pathData, itemData) {
+  if (pathData.hd !== true && pathData._shouldRender) {
+    var i;
+    var len = itemData.styledShapes.length;
+    for (i = 0; i < len; i += 1) {
+      this.renderStyledShape(itemData.styledShapes[i], itemData.sh);
+    }
+  }
+};
+
+CVShapeElement.prototype.renderFill = function (styleData, itemData, groupTransform) {
+  var styleElem = itemData.style;
+
+  if (itemData.c._mdf || this._isFirstFrame) {
+    styleElem.co = 'rgb('
+        + bmFloor(itemData.c.v[0]) + ','
+        + bmFloor(itemData.c.v[1]) + ','
+        + bmFloor(itemData.c.v[2]) + ')';
+  }
+  if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {
+    styleElem.coOp = itemData.o.v * groupTransform.opacity;
+  }
+};
+
+CVShapeElement.prototype.renderGradientFill = function (styleData, itemData, groupTransform) {
+  var styleElem = itemData.style;
+  var grd;
+  if (!styleElem.grd || itemData.g._mdf || itemData.s._mdf || itemData.e._mdf || (styleData.t !== 1 && (itemData.h._mdf || itemData.a._mdf))) {
+    var ctx = this.globalData.canvasContext;
+    var pt1 = itemData.s.v;
+    var pt2 = itemData.e.v;
+    if (styleData.t === 1) {
+      grd = ctx.createLinearGradient(pt1[0], pt1[1], pt2[0], pt2[1]);
+    } else {
+      var rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
+      var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);
+
+      var percent = itemData.h.v;
+      if (percent >= 1) {
+        percent = 0.99;
+      } else if (percent <= -1) {
+        percent = -0.99;
+      }
+      var dist = rad * percent;
+      var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
+      var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
+      grd = ctx.createRadialGradient(x, y, 0, pt1[0], pt1[1], rad);
+    }
+
+    var i;
+    var len = styleData.g.p;
+    var cValues = itemData.g.c;
+    var opacity = 1;
+
+    for (i = 0; i < len; i += 1) {
+      if (itemData.g._hasOpacity && itemData.g._collapsable) {
+        opacity = itemData.g.o[i * 2 + 1];
+      }
+      grd.addColorStop(cValues[i * 4] / 100, 'rgba(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ',' + opacity + ')');
+    }
+    styleElem.grd = grd;
+  }
+  styleElem.coOp = itemData.o.v * groupTransform.opacity;
+};
+
+CVShapeElement.prototype.renderStroke = function (styleData, itemData, groupTransform) {
+  var styleElem = itemData.style;
+  var d = itemData.d;
+  if (d && (d._mdf || this._isFirstFrame)) {
+    styleElem.da = d.dashArray;
+    styleElem.do = d.dashoffset[0];
+  }
+  if (itemData.c._mdf || this._isFirstFrame) {
+    styleElem.co = 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')';
+  }
+  if (itemData.o._mdf || groupTransform._opMdf || this._isFirstFrame) {
+    styleElem.coOp = itemData.o.v * groupTransform.opacity;
+  }
+  if (itemData.w._mdf || this._isFirstFrame) {
+    styleElem.wi = itemData.w.v;
+  }
+};
+
+CVShapeElement.prototype.destroy = function () {
+  this.shapesData = null;
+  this.globalData = null;
+  this.canvasContext = null;
+  this.stylesList.length = 0;
+  this.itemsData.length = 0;
+};
+
+export default CVShapeElement;

node_modules/lottie-web/player/js/elements/canvasElements/CVSolidElement.js

@@ -0,0 +1,30 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import CVBaseElement from './CVBaseElement';
+import IImageElement from '../ImageElement';
+import SVGShapeElement from '../svgElements/SVGShapeElement';
+
+function CVSolidElement(data, globalData, comp) {
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVSolidElement);
+
+CVSolidElement.prototype.initElement = SVGShapeElement.prototype.initElement;
+CVSolidElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
+
+CVSolidElement.prototype.renderInnerContent = function () {
+  // var ctx = this.canvasContext;
+  this.globalData.renderer.ctxFillStyle(this.data.sc);
+  // ctx.fillStyle = this.data.sc;
+  this.globalData.renderer.ctxFillRect(0, 0, this.data.sw, this.data.sh);
+  // ctx.fillRect(0, 0, this.data.sw, this.data.sh);
+  //
+};
+
+export default CVSolidElement;

node_modules/lottie-web/player/js/elements/canvasElements/CVTextElement.js

@@ -0,0 +1,244 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import createTag from '../../utils/helpers/html_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import ITextElement from '../TextElement';
+import CVBaseElement from './CVBaseElement';
+
+function CVTextElement(data, globalData, comp) {
+  this.textSpans = [];
+  this.yOffset = 0;
+  this.fillColorAnim = false;
+  this.strokeColorAnim = false;
+  this.strokeWidthAnim = false;
+  this.stroke = false;
+  this.fill = false;
+  this.justifyOffset = 0;
+  this.currentRender = null;
+  this.renderType = 'canvas';
+  this.values = {
+    fill: 'rgba(0,0,0,0)',
+    stroke: 'rgba(0,0,0,0)',
+    sWidth: 0,
+    fValue: '',
+  };
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement, ITextElement], CVTextElement);
+
+CVTextElement.prototype.tHelper = createTag('canvas').getContext('2d');
+
+CVTextElement.prototype.buildNewText = function () {
+  var documentData = this.textProperty.currentData;
+  this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
+
+  var hasFill = false;
+  if (documentData.fc) {
+    hasFill = true;
+    this.values.fill = this.buildColor(documentData.fc);
+  } else {
+    this.values.fill = 'rgba(0,0,0,0)';
+  }
+  this.fill = hasFill;
+  var hasStroke = false;
+  if (documentData.sc) {
+    hasStroke = true;
+    this.values.stroke = this.buildColor(documentData.sc);
+    this.values.sWidth = documentData.sw;
+  }
+  var fontData = this.globalData.fontManager.getFontByName(documentData.f);
+  var i;
+  var len;
+  var letters = documentData.l;
+  var matrixHelper = this.mHelper;
+  this.stroke = hasStroke;
+  this.values.fValue = documentData.finalSize + 'px ' + this.globalData.fontManager.getFontByName(documentData.f).fFamily;
+  len = documentData.finalText.length;
+  // this.tHelper.font = this.values.fValue;
+  var charData;
+  var shapeData;
+  var k;
+  var kLen;
+  var shapes;
+  var j;
+  var jLen;
+  var pathNodes;
+  var commands;
+  var pathArr;
+  var singleShape = this.data.singleShape;
+  var trackingOffset = documentData.tr * 0.001 * documentData.finalSize;
+  var xPos = 0;
+  var yPos = 0;
+  var firstLine = true;
+  var cnt = 0;
+  for (i = 0; i < len; i += 1) {
+    charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
+    shapeData = (charData && charData.data) || {};
+    matrixHelper.reset();
+    if (singleShape && letters[i].n) {
+      xPos = -trackingOffset;
+      yPos += documentData.yOffset;
+      yPos += firstLine ? 1 : 0;
+      firstLine = false;
+    }
+    shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
+    jLen = shapes.length;
+    matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
+    if (singleShape) {
+      this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
+    }
+    commands = createSizedArray(jLen - 1);
+    var commandsCounter = 0;
+    for (j = 0; j < jLen; j += 1) {
+      if (shapes[j].ty === 'sh') {
+        kLen = shapes[j].ks.k.i.length;
+        pathNodes = shapes[j].ks.k;
+        pathArr = [];
+        for (k = 1; k < kLen; k += 1) {
+          if (k === 1) {
+            pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
+          }
+          pathArr.push(matrixHelper.applyToX(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToY(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToX(pathNodes.i[k][0], pathNodes.i[k][1], 0), matrixHelper.applyToY(pathNodes.i[k][0], pathNodes.i[k][1], 0), matrixHelper.applyToX(pathNodes.v[k][0], pathNodes.v[k][1], 0), matrixHelper.applyToY(pathNodes.v[k][0], pathNodes.v[k][1], 0));
+        }
+        pathArr.push(matrixHelper.applyToX(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToY(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToX(pathNodes.i[0][0], pathNodes.i[0][1], 0), matrixHelper.applyToY(pathNodes.i[0][0], pathNodes.i[0][1], 0), matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
+        commands[commandsCounter] = pathArr;
+        commandsCounter += 1;
+      }
+    }
+    if (singleShape) {
+      xPos += letters[i].l;
+      xPos += trackingOffset;
+    }
+    if (this.textSpans[cnt]) {
+      this.textSpans[cnt].elem = commands;
+    } else {
+      this.textSpans[cnt] = { elem: commands };
+    }
+    cnt += 1;
+  }
+};
+
+CVTextElement.prototype.renderInnerContent = function () {
+  this.validateText();
+  var ctx = this.canvasContext;
+  ctx.font = this.values.fValue;
+  this.globalData.renderer.ctxLineCap('butt');
+  // ctx.lineCap = 'butt';
+  this.globalData.renderer.ctxLineJoin('miter');
+  // ctx.lineJoin = 'miter';
+  this.globalData.renderer.ctxMiterLimit(4);
+  // ctx.miterLimit = 4;
+
+  if (!this.data.singleShape) {
+    this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
+  }
+
+  var i;
+  var len;
+  var j;
+  var jLen;
+  var k;
+  var kLen;
+  var renderedLetters = this.textAnimator.renderedLetters;
+
+  var letters = this.textProperty.currentData.l;
+
+  len = letters.length;
+  var renderedLetter;
+  var lastFill = null;
+  var lastStroke = null;
+  var lastStrokeW = null;
+  var commands;
+  var pathArr;
+  var renderer = this.globalData.renderer;
+  for (i = 0; i < len; i += 1) {
+    if (!letters[i].n) {
+      renderedLetter = renderedLetters[i];
+      if (renderedLetter) {
+        renderer.save();
+        renderer.ctxTransform(renderedLetter.p);
+        renderer.ctxOpacity(renderedLetter.o);
+      }
+      if (this.fill) {
+        if (renderedLetter && renderedLetter.fc) {
+          if (lastFill !== renderedLetter.fc) {
+            renderer.ctxFillStyle(renderedLetter.fc);
+            lastFill = renderedLetter.fc;
+            // ctx.fillStyle = renderedLetter.fc;
+          }
+        } else if (lastFill !== this.values.fill) {
+          lastFill = this.values.fill;
+          renderer.ctxFillStyle(this.values.fill);
+          // ctx.fillStyle = this.values.fill;
+        }
+        commands = this.textSpans[i].elem;
+        jLen = commands.length;
+        this.globalData.canvasContext.beginPath();
+        for (j = 0; j < jLen; j += 1) {
+          pathArr = commands[j];
+          kLen = pathArr.length;
+          this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
+          for (k = 2; k < kLen; k += 6) {
+            this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
+          }
+        }
+        this.globalData.canvasContext.closePath();
+        renderer.ctxFill();
+        // this.globalData.canvasContext.fill();
+        /// ctx.fillText(this.textSpans[i].val,0,0);
+      }
+      if (this.stroke) {
+        if (renderedLetter && renderedLetter.sw) {
+          if (lastStrokeW !== renderedLetter.sw) {
+            lastStrokeW = renderedLetter.sw;
+            renderer.ctxLineWidth(renderedLetter.sw);
+            // ctx.lineWidth = renderedLetter.sw;
+          }
+        } else if (lastStrokeW !== this.values.sWidth) {
+          lastStrokeW = this.values.sWidth;
+          renderer.ctxLineWidth(this.values.sWidth);
+          // ctx.lineWidth = this.values.sWidth;
+        }
+        if (renderedLetter && renderedLetter.sc) {
+          if (lastStroke !== renderedLetter.sc) {
+            lastStroke = renderedLetter.sc;
+            renderer.ctxStrokeStyle(renderedLetter.sc);
+            // ctx.strokeStyle = renderedLetter.sc;
+          }
+        } else if (lastStroke !== this.values.stroke) {
+          lastStroke = this.values.stroke;
+          renderer.ctxStrokeStyle(this.values.stroke);
+          // ctx.strokeStyle = this.values.stroke;
+        }
+        commands = this.textSpans[i].elem;
+        jLen = commands.length;
+        this.globalData.canvasContext.beginPath();
+        for (j = 0; j < jLen; j += 1) {
+          pathArr = commands[j];
+          kLen = pathArr.length;
+          this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
+          for (k = 2; k < kLen; k += 6) {
+            this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
+          }
+        }
+        this.globalData.canvasContext.closePath();
+        renderer.ctxStroke();
+        // this.globalData.canvasContext.stroke();
+        /// ctx.strokeText(letters[i].val,0,0);
+      }
+      if (renderedLetter) {
+        this.globalData.renderer.restore();
+      }
+    }
+  }
+};
+
+export default CVTextElement;

node_modules/lottie-web/player/js/elements/canvasElements/effects/CVTransformEffect.js

@@ -0,0 +1,9 @@
+import TransformEffect from '../../../effects/TransformEffect';
+import { extendPrototype } from '../../../utils/functionExtensions';
+
+function CVTransformEffect(effectsManager) {
+  this.init(effectsManager);
+}
+extendPrototype([TransformEffect], CVTransformEffect);
+
+export default CVTransformEffect;

node_modules/lottie-web/player/js/elements/helpers/FrameElement.js

@@ -0,0 +1,54 @@
+/**
+ * @file
+ * Handles element's layer frame update.
+ * Checks layer in point and out point
+ *
+ */
+
+function FrameElement() {}
+
+FrameElement.prototype = {
+  /**
+     * @function
+     * Initializes frame related properties.
+     *
+     */
+  initFrame: function () {
+    // set to true when inpoint is rendered
+    this._isFirstFrame = false;
+    // list of animated properties
+    this.dynamicProperties = [];
+    // If layer has been modified in current tick this will be true
+    this._mdf = false;
+  },
+  /**
+     * @function
+     * Calculates all dynamic values
+     *
+     * @param {number} num
+     * current frame number in Layer's time
+     * @param {boolean} isVisible
+     * if layers is currently in range
+     *
+     */
+  prepareProperties: function (num, isVisible) {
+    var i;
+    var len = this.dynamicProperties.length;
+    for (i = 0; i < len; i += 1) {
+      if (isVisible || (this._isParent && this.dynamicProperties[i].propType === 'transform')) {
+        this.dynamicProperties[i].getValue();
+        if (this.dynamicProperties[i]._mdf) {
+          this.globalData._mdf = true;
+          this._mdf = true;
+        }
+      }
+    }
+  },
+  addDynamicProperty: function (prop) {
+    if (this.dynamicProperties.indexOf(prop) === -1) {
+      this.dynamicProperties.push(prop);
+    }
+  },
+};
+
+export default FrameElement;

node_modules/lottie-web/player/js/elements/helpers/HierarchyElement.js

@@ -0,0 +1,52 @@
+/**
+ * @file
+ * Handles AE's layer parenting property.
+ *
+ */
+
+function HierarchyElement() {}
+
+HierarchyElement.prototype = {
+  /**
+     * @function
+     * Initializes hierarchy properties
+     *
+     */
+  initHierarchy: function () {
+    // element's parent list
+    this.hierarchy = [];
+    // if element is parent of another layer _isParent will be true
+    this._isParent = false;
+    this.checkParenting();
+  },
+  /**
+     * @function
+     * Sets layer's hierarchy.
+     * @param {array} hierarch
+     * layer's parent list
+     *
+     */
+  setHierarchy: function (hierarchy) {
+    this.hierarchy = hierarchy;
+  },
+  /**
+     * @function
+     * Sets layer as parent.
+     *
+     */
+  setAsParent: function () {
+    this._isParent = true;
+  },
+  /**
+     * @function
+     * Searches layer's parenting chain
+     *
+     */
+  checkParenting: function () {
+    if (this.data.parent !== undefined) {
+      this.comp.buildElementParenting(this, this.data.parent, []);
+    }
+  },
+};
+
+export default HierarchyElement;

node_modules/lottie-web/player/js/elements/helpers/RenderableDOMElement.js

@@ -0,0 +1,72 @@
+import {
+  extendPrototype,
+  createProxyFunction,
+} from '../../utils/functionExtensions';
+import RenderableElement from './RenderableElement';
+
+function RenderableDOMElement() {}
+
+(function () {
+  var _prototype = {
+    initElement: function (data, globalData, comp) {
+      this.initFrame();
+      this.initBaseData(data, globalData, comp);
+      this.initTransform(data, globalData, comp);
+      this.initHierarchy();
+      this.initRenderable();
+      this.initRendererElement();
+      this.createContainerElements();
+      this.createRenderableComponents();
+      this.createContent();
+      this.hide();
+    },
+    hide: function () {
+      // console.log('HIDE', this);
+      if (!this.hidden && (!this.isInRange || this.isTransparent)) {
+        var elem = this.baseElement || this.layerElement;
+        elem.style.display = 'none';
+        this.hidden = true;
+      }
+    },
+    show: function () {
+      // console.log('SHOW', this);
+      if (this.isInRange && !this.isTransparent) {
+        if (!this.data.hd) {
+          var elem = this.baseElement || this.layerElement;
+          elem.style.display = 'block';
+        }
+        this.hidden = false;
+        this._isFirstFrame = true;
+      }
+    },
+    renderFrame: function () {
+      // If it is exported as hidden (data.hd === true) no need to render
+      // If it is not visible no need to render
+      if (this.data.hd || this.hidden) {
+        return;
+      }
+      this.renderTransform();
+      this.renderRenderable();
+      this.renderLocalTransform();
+      this.renderElement();
+      this.renderInnerContent();
+      if (this._isFirstFrame) {
+        this._isFirstFrame = false;
+      }
+    },
+    renderInnerContent: function () {},
+    prepareFrame: function (num) {
+      this._mdf = false;
+      this.prepareRenderableFrame(num);
+      this.prepareProperties(num, this.isInRange);
+      this.checkTransparency();
+    },
+    destroy: function () {
+      this.innerElem = null;
+      this.destroyBaseElement();
+    },
+  };
+  extendPrototype([RenderableElement, createProxyFunction(_prototype)], RenderableDOMElement);
+}());
+
+export default RenderableDOMElement;

node_modules/lottie-web/player/js/elements/helpers/RenderableElement.js

@@ -0,0 +1,87 @@
+function RenderableElement() {
+
+}
+
+RenderableElement.prototype = {
+  initRenderable: function () {
+    // layer's visibility related to inpoint and outpoint. Rename isVisible to isInRange
+    this.isInRange = false;
+    // layer's display state
+    this.hidden = false;
+    // If layer's transparency equals 0, it can be hidden
+    this.isTransparent = false;
+    // list of animated components
+    this.renderableComponents = [];
+  },
+  addRenderableComponent: function (component) {
+    if (this.renderableComponents.indexOf(component) === -1) {
+      this.renderableComponents.push(component);
+    }
+  },
+  removeRenderableComponent: function (component) {
+    if (this.renderableComponents.indexOf(component) !== -1) {
+      this.renderableComponents.splice(this.renderableComponents.indexOf(component), 1);
+    }
+  },
+  prepareRenderableFrame: function (num) {
+    this.checkLayerLimits(num);
+  },
+  checkTransparency: function () {
+    if (this.finalTransform.mProp.o.v <= 0) {
+      if (!this.isTransparent && this.globalData.renderConfig.hideOnTransparent) {
+        this.isTransparent = true;
+        this.hide();
+      }
+    } else if (this.isTransparent) {
+      this.isTransparent = false;
+      this.show();
+    }
+  },
+  /**
+     * @function
+     * Initializes frame related properties.
+     *
+     * @param {number} num
+     * current frame number in Layer's time
+     *
+     */
+  checkLayerLimits: function (num) {
+    if (this.data.ip - this.data.st <= num && this.data.op - this.data.st > num) {
+      if (this.isInRange !== true) {
+        this.globalData._mdf = true;
+        this._mdf = true;
+        this.isInRange = true;
+        this.show();
+      }
+    } else if (this.isInRange !== false) {
+      this.globalData._mdf = true;
+      this.isInRange = false;
+      this.hide();
+    }
+  },
+  renderRenderable: function () {
+    var i;
+    var len = this.renderableComponents.length;
+    for (i = 0; i < len; i += 1) {
+      this.renderableComponents[i].renderFrame(this._isFirstFrame);
+    }
+    /* this.maskManager.renderFrame(this.finalTransform.mat);
+        this.renderableEffectsManager.renderFrame(this._isFirstFrame); */
+  },
+  sourceRectAtTime: function () {
+    return {
+      top: 0,
+      left: 0,
+      width: 100,
+      height: 100,
+    };
+  },
+  getLayerSize: function () {
+    if (this.data.ty === 5) {
+      return { w: this.data.textData.width, h: this.data.textData.height };
+    }
+    return { w: this.data.width, h: this.data.height };
+  },
+};
+
+export default RenderableElement;

node_modules/lottie-web/player/js/elements/helpers/TransformElement.js

@@ -0,0 +1,140 @@
+import Matrix from '../../3rd_party/transformation-matrix';
+import TransformPropertyFactory from '../../utils/TransformProperty';
+import effectTypes from '../../utils/helpers/effectTypes';
+
+function TransformElement() {}
+
+TransformElement.prototype = {
+  initTransform: function () {
+    var mat = new Matrix();
+    this.finalTransform = {
+      mProp: this.data.ks ? TransformPropertyFactory.getTransformProperty(this, this.data.ks, this) : { o: 0 },
+      _matMdf: false,
+      _localMatMdf: false,
+      _opMdf: false,
+      mat: mat,
+      localMat: mat,
+      localOpacity: 1,
+    };
+    if (this.data.ao) {
+      this.finalTransform.mProp.autoOriented = true;
+    }
+
+    // TODO: check TYPE 11: Guided elements
+    if (this.data.ty !== 11) {
+      // this.createElements();
+    }
+  },
+  renderTransform: function () {
+    this.finalTransform._opMdf = this.finalTransform.mProp.o._mdf || this._isFirstFrame;
+    this.finalTransform._matMdf = this.finalTransform.mProp._mdf || this._isFirstFrame;
+
+    if (this.hierarchy) {
+      var mat;
+      var finalMat = this.finalTransform.mat;
+      var i = 0;
+      var len = this.hierarchy.length;
+      // Checking if any of the transformation matrices in the hierarchy chain has changed.
+      if (!this.finalTransform._matMdf) {
+        while (i < len) {
+          if (this.hierarchy[i].finalTransform.mProp._mdf) {
+            this.finalTransform._matMdf = true;
+            break;
+          }
+          i += 1;
+        }
+      }
+
+      if (this.finalTransform._matMdf) {
+        mat = this.finalTransform.mProp.v.props;
+        finalMat.cloneFromProps(mat);
+        for (i = 0; i < len; i += 1) {
+          finalMat.multiply(this.hierarchy[i].finalTransform.mProp.v);
+        }
+      }
+    }
+    if (this.finalTransform._matMdf) {
+      this.finalTransform._localMatMdf = this.finalTransform._matMdf;
+    }
+    if (this.finalTransform._opMdf) {
+      this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;
+    }
+  },
+  renderLocalTransform: function () {
+    if (this.localTransforms) {
+      var i = 0;
+      var len = this.localTransforms.length;
+      this.finalTransform._localMatMdf = this.finalTransform._matMdf;
+      if (!this.finalTransform._localMatMdf || !this.finalTransform._opMdf) {
+        while (i < len) {
+          if (this.localTransforms[i]._mdf) {
+            this.finalTransform._localMatMdf = true;
+          }
+          if (this.localTransforms[i]._opMdf && !this.finalTransform._opMdf) {
+            this.finalTransform.localOpacity = this.finalTransform.mProp.o.v;
+            this.finalTransform._opMdf = true;
+          }
+          i += 1;
+        }
+      }
+      if (this.finalTransform._localMatMdf) {
+        var localMat = this.finalTransform.localMat;
+        this.localTransforms[0].matrix.clone(localMat);
+        for (i = 1; i < len; i += 1) {
+          var lmat = this.localTransforms[i].matrix;
+          localMat.multiply(lmat);
+        }
+        localMat.multiply(this.finalTransform.mat);
+      }
+      if (this.finalTransform._opMdf) {
+        var localOp = this.finalTransform.localOpacity;
+        for (i = 0; i < len; i += 1) {
+          localOp *= this.localTransforms[i].opacity * 0.01;
+        }
+        this.finalTransform.localOpacity = localOp;
+      }
+    }
+  },
+  searchEffectTransforms: function () {
+    if (this.renderableEffectsManager) {
+      var transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);
+      if (transformEffects.length) {
+        this.localTransforms = [];
+        this.finalTransform.localMat = new Matrix();
+        var i = 0;
+        var len = transformEffects.length;
+        for (i = 0; i < len; i += 1) {
+          this.localTransforms.push(transformEffects[i]);
+        }
+      }
+    }
+  },
+  globalToLocal: function (pt) {
+    var transforms = [];
+    transforms.push(this.finalTransform);
+    var flag = true;
+    var comp = this.comp;
+    while (flag) {
+      if (comp.finalTransform) {
+        if (comp.data.hasMask) {
+          transforms.splice(0, 0, comp.finalTransform);
+        }
+        comp = comp.comp;
+      } else {
+        flag = false;
+      }
+    }
+    var i;
+    var len = transforms.length;
+    var ptNew;
+    for (i = 0; i < len; i += 1) {
+      ptNew = transforms[i].mat.applyToPointArray(0, 0, 0);
+      // ptNew = transforms[i].mat.applyToPointArray(pt[0],pt[1],pt[2]);
+      pt = [pt[0] - ptNew[0], pt[1] - ptNew[1], 0];
+    }
+    return pt;
+  },
+  mHelper: new Matrix(),
+};
+
+export default TransformElement;

node_modules/lottie-web/player/js/elements/helpers/shapes/CVShapeData.js

@@ -0,0 +1,33 @@
+import ShapePropertyFactory from '../../../utils/shapes/ShapeProperty';
+import SVGShapeData from './SVGShapeData';
+
+function CVShapeData(element, data, styles, transformsManager) {
+  this.styledShapes = [];
+  this.tr = [0, 0, 0, 0, 0, 0];
+  var ty = 4;
+  if (data.ty === 'rc') {
+    ty = 5;
+  } else if (data.ty === 'el') {
+    ty = 6;
+  } else if (data.ty === 'sr') {
+    ty = 7;
+  }
+  this.sh = ShapePropertyFactory.getShapeProp(element, data, ty, element);
+  var i;
+  var len = styles.length;
+  var styledShape;
+  for (i = 0; i < len; i += 1) {
+    if (!styles[i].closed) {
+      styledShape = {
+        transforms: transformsManager.addTransformSequence(styles[i].transforms),
+        trNodes: [],
+      };
+      this.styledShapes.push(styledShape);
+      styles[i].elements.push(styledShape);
+    }
+  }
+}
+
+CVShapeData.prototype.setAsAnimated = SVGShapeData.prototype.setAsAnimated;
+
+export default CVShapeData;

node_modules/lottie-web/player/js/elements/helpers/shapes/ProcessedElement.js

@@ -0,0 +1,6 @@
+function ProcessedElement(element, position) {
+  this.elem = element;
+  this.pos = position;
+}
+
+export default ProcessedElement;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGElementsRenderer.js

@@ -0,0 +1,239 @@
+import Matrix from '../../../3rd_party/transformation-matrix';
+import buildShapeString from '../../../utils/shapes/shapePathBuilder';
+import { bmFloor } from '../../../utils/common';
+
+const SVGElementsRenderer = (function () {
+  var _identityMatrix = new Matrix();
+  var _matrixHelper = new Matrix();
+
+  var ob = {
+    createRenderFunction: createRenderFunction,
+  };
+
+  function createRenderFunction(data) {
+    switch (data.ty) {
+      case 'fl':
+        return renderFill;
+      case 'gf':
+        return renderGradient;
+      case 'gs':
+        return renderGradientStroke;
+      case 'st':
+        return renderStroke;
+      case 'sh':
+      case 'el':
+      case 'rc':
+      case 'sr':
+        return renderPath;
+      case 'tr':
+        return renderContentTransform;
+      case 'no':
+        return renderNoop;
+      default:
+        return null;
+    }
+  }
+
+  function renderContentTransform(styleData, itemData, isFirstFrame) {
+    if (isFirstFrame || itemData.transform.op._mdf) {
+      itemData.transform.container.setAttribute('opacity', itemData.transform.op.v);
+    }
+    if (isFirstFrame || itemData.transform.mProps._mdf) {
+      itemData.transform.container.setAttribute('transform', itemData.transform.mProps.v.to2dCSS());
+    }
+  }
+
+  function renderNoop() {
+
+  }
+
+  function renderPath(styleData, itemData, isFirstFrame) {
+    var j;
+    var jLen;
+    var pathStringTransformed;
+    var redraw;
+    var pathNodes;
+    var l;
+    var lLen = itemData.styles.length;
+    var lvl = itemData.lvl;
+    var paths;
+    var mat;
+    var iterations;
+    var k;
+    for (l = 0; l < lLen; l += 1) {
+      redraw = itemData.sh._mdf || isFirstFrame;
+      if (itemData.styles[l].lvl < lvl) {
+        mat = _matrixHelper.reset();
+        iterations = lvl - itemData.styles[l].lvl;
+        k = itemData.transformers.length - 1;
+        while (!redraw && iterations > 0) {
+          redraw = itemData.transformers[k].mProps._mdf || redraw;
+          iterations -= 1;
+          k -= 1;
+        }
+        if (redraw) {
+          iterations = lvl - itemData.styles[l].lvl;
+          k = itemData.transformers.length - 1;
+          while (iterations > 0) {
+            mat.multiply(itemData.transformers[k].mProps.v);
+            iterations -= 1;
+            k -= 1;
+          }
+        }
+      } else {
+        mat = _identityMatrix;
+      }
+      paths = itemData.sh.paths;
+      jLen = paths._length;
+      if (redraw) {
+        pathStringTransformed = '';
+        for (j = 0; j < jLen; j += 1) {
+          pathNodes = paths.shapes[j];
+          if (pathNodes && pathNodes._length) {
+            pathStringTransformed += buildShapeString(pathNodes, pathNodes._length, pathNodes.c, mat);
+          }
+        }
+        itemData.caches[l] = pathStringTransformed;
+      } else {
+        pathStringTransformed = itemData.caches[l];
+      }
+      itemData.styles[l].d += styleData.hd === true ? '' : pathStringTransformed;
+      itemData.styles[l]._mdf = redraw || itemData.styles[l]._mdf;
+    }
+  }
+
+  function renderFill(styleData, itemData, isFirstFrame) {
+    var styleElem = itemData.style;
+
+    if (itemData.c._mdf || isFirstFrame) {
+      styleElem.pElem.setAttribute('fill', 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')');
+    }
+    if (itemData.o._mdf || isFirstFrame) {
+      styleElem.pElem.setAttribute('fill-opacity', itemData.o.v);
+    }
+  }
+
+  function renderGradientStroke(styleData, itemData, isFirstFrame) {
+    renderGradient(styleData, itemData, isFirstFrame);
+    renderStroke(styleData, itemData, isFirstFrame);
+  }
+
+  function renderGradient(styleData, itemData, isFirstFrame) {
+    var gfill = itemData.gf;
+    var hasOpacity = itemData.g._hasOpacity;
+    var pt1 = itemData.s.v;
+    var pt2 = itemData.e.v;
+
+    if (itemData.o._mdf || isFirstFrame) {
+      var attr = styleData.ty === 'gf' ? 'fill-opacity' : 'stroke-opacity';
+      itemData.style.pElem.setAttribute(attr, itemData.o.v);
+    }
+    if (itemData.s._mdf || isFirstFrame) {
+      var attr1 = styleData.t === 1 ? 'x1' : 'cx';
+      var attr2 = attr1 === 'x1' ? 'y1' : 'cy';
+      gfill.setAttribute(attr1, pt1[0]);
+      gfill.setAttribute(attr2, pt1[1]);
+      if (hasOpacity && !itemData.g._collapsable) {
+        itemData.of.setAttribute(attr1, pt1[0]);
+        itemData.of.setAttribute(attr2, pt1[1]);
+      }
+    }
+    var stops;
+    var i;
+    var len;
+    var stop;
+    if (itemData.g._cmdf || isFirstFrame) {
+      stops = itemData.cst;
+      var cValues = itemData.g.c;
+      len = stops.length;
+      for (i = 0; i < len; i += 1) {
+        stop = stops[i];
+        stop.setAttribute('offset', cValues[i * 4] + '%');
+        stop.setAttribute('stop-color', 'rgb(' + cValues[i * 4 + 1] + ',' + cValues[i * 4 + 2] + ',' + cValues[i * 4 + 3] + ')');
+      }
+    }
+    if (hasOpacity && (itemData.g._omdf || isFirstFrame)) {
+      var oValues = itemData.g.o;
+      if (itemData.g._collapsable) {
+        stops = itemData.cst;
+      } else {
+        stops = itemData.ost;
+      }
+      len = stops.length;
+      for (i = 0; i < len; i += 1) {
+        stop = stops[i];
+        if (!itemData.g._collapsable) {
+          stop.setAttribute('offset', oValues[i * 2] + '%');
+        }
+        stop.setAttribute('stop-opacity', oValues[i * 2 + 1]);
+      }
+    }
+    if (styleData.t === 1) {
+      if (itemData.e._mdf || isFirstFrame) {
+        gfill.setAttribute('x2', pt2[0]);
+        gfill.setAttribute('y2', pt2[1]);
+        if (hasOpacity && !itemData.g._collapsable) {
+          itemData.of.setAttribute('x2', pt2[0]);
+          itemData.of.setAttribute('y2', pt2[1]);
+        }
+      }
+    } else {
+      var rad;
+      if (itemData.s._mdf || itemData.e._mdf || isFirstFrame) {
+        rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
+        gfill.setAttribute('r', rad);
+        if (hasOpacity && !itemData.g._collapsable) {
+          itemData.of.setAttribute('r', rad);
+        }
+      }
+      if (itemData.e._mdf || itemData.h._mdf || itemData.a._mdf || isFirstFrame) {
+        if (!rad) {
+          rad = Math.sqrt(Math.pow(pt1[0] - pt2[0], 2) + Math.pow(pt1[1] - pt2[1], 2));
+        }
+        var ang = Math.atan2(pt2[1] - pt1[1], pt2[0] - pt1[0]);
+
+        var percent = itemData.h.v;
+        if (percent >= 1) {
+          percent = 0.99;
+        } else if (percent <= -1) {
+          percent = -0.99;
+        }
+        var dist = rad * percent;
+        var x = Math.cos(ang + itemData.a.v) * dist + pt1[0];
+        var y = Math.sin(ang + itemData.a.v) * dist + pt1[1];
+        gfill.setAttribute('fx', x);
+        gfill.setAttribute('fy', y);
+        if (hasOpacity && !itemData.g._collapsable) {
+          itemData.of.setAttribute('fx', x);
+          itemData.of.setAttribute('fy', y);
+        }
+      }
+      // gfill.setAttribute('fy','200');
+    }
+  }
+
+  function renderStroke(styleData, itemData, isFirstFrame) {
+    var styleElem = itemData.style;
+    var d = itemData.d;
+    if (d && (d._mdf || isFirstFrame) && d.dashStr) {
+      styleElem.pElem.setAttribute('stroke-dasharray', d.dashStr);
+      styleElem.pElem.setAttribute('stroke-dashoffset', d.dashoffset[0]);
+    }
+    if (itemData.c && (itemData.c._mdf || isFirstFrame)) {
+      styleElem.pElem.setAttribute('stroke', 'rgb(' + bmFloor(itemData.c.v[0]) + ',' + bmFloor(itemData.c.v[1]) + ',' + bmFloor(itemData.c.v[2]) + ')');
+    }
+    if (itemData.o._mdf || isFirstFrame) {
+      styleElem.pElem.setAttribute('stroke-opacity', itemData.o.v);
+    }
+    if (itemData.w._mdf || isFirstFrame) {
+      styleElem.pElem.setAttribute('stroke-width', itemData.w.v);
+      if (styleElem.msElem) {
+        styleElem.msElem.setAttribute('stroke-width', itemData.w.v);
+      }
+    }
+  }
+
+  return ob;
+}());
+
+export default SVGElementsRenderer;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGFillStyleData.js

@@ -0,0 +1,18 @@
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+import PropertyFactory from '../../../utils/PropertyFactory';
+
+function SVGFillStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
+  this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);
+  this.style = styleOb;
+}
+
+extendPrototype([DynamicPropertyContainer], SVGFillStyleData);
+
+export default SVGFillStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGGradientFillStyleData.js

@@ -0,0 +1,100 @@
+import {
+  degToRads,
+  createElementID,
+} from '../../../utils/common';
+import { getLocationHref } from '../../../main';
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+import PropertyFactory from '../../../utils/PropertyFactory';
+import createNS from '../../../utils/helpers/svg_elements';
+import GradientProperty from '../../../utils/shapes/GradientProperty';
+import {
+  lineCapEnum,
+  lineJoinEnum,
+} from '../../../utils/helpers/shapeEnums';
+
+function SVGGradientFillStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.initGradientData(elem, data, styleOb);
+}
+
+SVGGradientFillStyleData.prototype.initGradientData = function (elem, data, styleOb) {
+  this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
+  this.s = PropertyFactory.getProp(elem, data.s, 1, null, this);
+  this.e = PropertyFactory.getProp(elem, data.e, 1, null, this);
+  this.h = PropertyFactory.getProp(elem, data.h || { k: 0 }, 0, 0.01, this);
+  this.a = PropertyFactory.getProp(elem, data.a || { k: 0 }, 0, degToRads, this);
+  this.g = new GradientProperty(elem, data.g, this);
+  this.style = styleOb;
+  this.stops = [];
+  this.setGradientData(styleOb.pElem, data);
+  this.setGradientOpacity(data, styleOb);
+  this._isAnimated = !!this._isAnimated;
+};
+
+SVGGradientFillStyleData.prototype.setGradientData = function (pathElement, data) {
+  var gradientId = createElementID();
+  var gfill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
+  gfill.setAttribute('id', gradientId);
+  gfill.setAttribute('spreadMethod', 'pad');
+  gfill.setAttribute('gradientUnits', 'userSpaceOnUse');
+  var stops = [];
+  var stop;
+  var j;
+  var jLen;
+  jLen = data.g.p * 4;
+  for (j = 0; j < jLen; j += 4) {
+    stop = createNS('stop');
+    gfill.appendChild(stop);
+    stops.push(stop);
+  }
+  pathElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + gradientId + ')');
+  this.gf = gfill;
+  this.cst = stops;
+};
+
+SVGGradientFillStyleData.prototype.setGradientOpacity = function (data, styleOb) {
+  if (this.g._hasOpacity && !this.g._collapsable) {
+    var stop;
+    var j;
+    var jLen;
+    var mask = createNS('mask');
+    var maskElement = createNS('path');
+    mask.appendChild(maskElement);
+    var opacityId = createElementID();
+    var maskId = createElementID();
+    mask.setAttribute('id', maskId);
+    var opFill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
+    opFill.setAttribute('id', opacityId);
+    opFill.setAttribute('spreadMethod', 'pad');
+    opFill.setAttribute('gradientUnits', 'userSpaceOnUse');
+    jLen = data.g.k.k[0].s ? data.g.k.k[0].s.length : data.g.k.k.length;
+    var stops = this.stops;
+    for (j = data.g.p * 4; j < jLen; j += 2) {
+      stop = createNS('stop');
+      stop.setAttribute('stop-color', 'rgb(255,255,255)');
+      opFill.appendChild(stop);
+      stops.push(stop);
+    }
+    maskElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + opacityId + ')');
+    if (data.ty === 'gs') {
+      maskElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
+      maskElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
+      if (data.lj === 1) {
+        maskElement.setAttribute('stroke-miterlimit', data.ml);
+      }
+    }
+    this.of = opFill;
+    this.ms = mask;
+    this.ost = stops;
+    this.maskId = maskId;
+    styleOb.msElem = maskElement;
+  }
+};
+
+extendPrototype([DynamicPropertyContainer], SVGGradientFillStyleData);
+
+export default SVGGradientFillStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGGradientStrokeStyleData.js

@@ -0,0 +1,20 @@
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+import PropertyFactory from '../../../utils/PropertyFactory';
+import DashProperty from '../../../utils/shapes/DashProperty';
+import SVGGradientFillStyleData from './SVGGradientFillStyleData';
+
+function SVGGradientStrokeStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);
+  this.d = new DashProperty(elem, data.d || {}, 'svg', this);
+  this.initGradientData(elem, data, styleOb);
+  this._isAnimated = !!this._isAnimated;
+}
+
+extendPrototype([SVGGradientFillStyleData, DynamicPropertyContainer], SVGGradientStrokeStyleData);
+
+export default SVGGradientStrokeStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGNoStyleData.js

@@ -0,0 +1,15 @@
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+
+function SVGNoStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.style = styleOb;
+}
+
+extendPrototype([DynamicPropertyContainer], SVGNoStyleData);
+
+export default SVGNoStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGShapeData.js

@@ -0,0 +1,28 @@
+function SVGShapeData(transformers, level, shape) {
+  this.caches = [];
+  this.styles = [];
+  this.transformers = transformers;
+  this.lStr = '';
+  this.sh = shape;
+  this.lvl = level;
+  // TODO find if there are some cases where _isAnimated can be false.
+  // For now, since shapes add up with other shapes. They have to be calculated every time.
+  // One way of finding out is checking if all styles associated to this shape depend only of this shape
+  this._isAnimated = !!shape.k;
+  // TODO: commenting this for now since all shapes are animated
+  var i = 0;
+  var len = transformers.length;
+  while (i < len) {
+    if (transformers[i].mProps.dynamicProperties.length) {
+      this._isAnimated = true;
+      break;
+    }
+    i += 1;
+  }
+}
+
+SVGShapeData.prototype.setAsAnimated = function () {
+  this._isAnimated = true;
+};
+
+export default SVGShapeData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGStrokeStyleData.js

@@ -0,0 +1,21 @@
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
+import PropertyFactory from '../../../utils/PropertyFactory';
+import DashProperty from '../../../utils/shapes/DashProperty';
+
+function SVGStrokeStyleData(elem, data, styleOb) {
+  this.initDynamicPropertyContainer(elem);
+  this.getValue = this.iterateDynamicProperties;
+  this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
+  this.w = PropertyFactory.getProp(elem, data.w, 0, null, this);
+  this.d = new DashProperty(elem, data.d || {}, 'svg', this);
+  this.c = PropertyFactory.getProp(elem, data.c, 1, 255, this);
+  this.style = styleOb;
+  this._isAnimated = !!this._isAnimated;
+}
+
+extendPrototype([DynamicPropertyContainer], SVGStrokeStyleData);
+
+export default SVGStrokeStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGStyleData.js

@@ -0,0 +1,19 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function SVGStyleData(data, level) {
+  this.data = data;
+  this.type = data.ty;
+  this.d = '';
+  this.lvl = level;
+  this._mdf = false;
+  this.closed = data.hd === true;
+  this.pElem = createNS('path');
+  this.msElem = null;
+}
+
+SVGStyleData.prototype.reset = function () {
+  this.d = '';
+  this._mdf = false;
+};
+
+export default SVGStyleData;

node_modules/lottie-web/player/js/elements/helpers/shapes/SVGTransformData.js

@@ -0,0 +1,11 @@
+function SVGTransformData(mProps, op, container) {
+  this.transform = {
+    mProps: mProps,
+    op: op,
+    container: container,
+  };
+  this.elements = [];
+  this._isAnimated = this.transform.mProps.dynamicProperties.length || this.transform.op.effectsSequence.length;
+}
+
+export default SVGTransformData;

node_modules/lottie-web/player/js/elements/helpers/shapes/ShapeElement.js

@@ -0,0 +1,5 @@
+function ShapeElementData() {
+
+}
+
+export default ShapeElementData;

node_modules/lottie-web/player/js/elements/helpers/shapes/ShapeGroupData.js

@@ -0,0 +1,9 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function ShapeGroupData() {
+  this.it = [];
+  this.prevViewData = [];
+  this.gr = createNS('g');
+}
+
+export default ShapeGroupData;

node_modules/lottie-web/player/js/elements/helpers/shapes/ShapeTransformManager.js

@@ -0,0 +1,61 @@
+import Matrix from '../../../3rd_party/transformation-matrix';
+
+function ShapeTransformManager() {
+  this.sequences = {};
+  this.sequenceList = [];
+  this.transform_key_count = 0;
+}
+
+ShapeTransformManager.prototype = {
+  addTransformSequence: function (transforms) {
+    var i;
+    var len = transforms.length;
+    var key = '_';
+    for (i = 0; i < len; i += 1) {
+      key += transforms[i].transform.key + '_';
+    }
+    var sequence = this.sequences[key];
+    if (!sequence) {
+      sequence = {
+        transforms: [].concat(transforms),
+        finalTransform: new Matrix(),
+        _mdf: false,
+      };
+      this.sequences[key] = sequence;
+      this.sequenceList.push(sequence);
+    }
+    return sequence;
+  },
+  processSequence: function (sequence, isFirstFrame) {
+    var i = 0;
+    var len = sequence.transforms.length;
+    var _mdf = isFirstFrame;
+    while (i < len && !isFirstFrame) {
+      if (sequence.transforms[i].transform.mProps._mdf) {
+        _mdf = true;
+        break;
+      }
+      i += 1;
+    }
+    if (_mdf) {
+      sequence.finalTransform.reset();
+      for (i = len - 1; i >= 0; i -= 1) {
+        sequence.finalTransform.multiply(sequence.transforms[i].transform.mProps.v);
+      }
+    }
+    sequence._mdf = _mdf;
+  },
+  processSequences: function (isFirstFrame) {
+    var i;
+    var len = this.sequenceList.length;
+    for (i = 0; i < len; i += 1) {
+      this.processSequence(this.sequenceList[i], isFirstFrame);
+    }
+  },
+  getNewKey: function () {
+    this.transform_key_count += 1;
+    return '_' + this.transform_key_count;
+  },
+};
+
+export default ShapeTransformManager;

node_modules/lottie-web/player/js/elements/htmlElements/HBaseElement.js

@@ -0,0 +1,88 @@
+import {
+  styleDiv,
+} from '../../utils/common';
+import createNS from '../../utils/helpers/svg_elements';
+import createTag from '../../utils/helpers/html_elements';
+import BaseRenderer from '../../renderers/BaseRenderer';
+import SVGBaseElement from '../svgElements/SVGBaseElement';
+import CVEffects from '../canvasElements/CVEffects';
+import MaskElement from '../../mask';
+
+function HBaseElement() {}
+HBaseElement.prototype = {
+  checkBlendMode: function () {},
+  initRendererElement: function () {
+    this.baseElement = createTag(this.data.tg || 'div');
+    if (this.data.hasMask) {
+      this.svgElement = createNS('svg');
+      this.layerElement = createNS('g');
+      this.maskedElement = this.layerElement;
+      this.svgElement.appendChild(this.layerElement);
+      this.baseElement.appendChild(this.svgElement);
+    } else {
+      this.layerElement = this.baseElement;
+    }
+    styleDiv(this.baseElement);
+  },
+  createContainerElements: function () {
+    this.renderableEffectsManager = new CVEffects(this);
+    this.transformedElement = this.baseElement;
+    this.maskedElement = this.layerElement;
+    if (this.data.ln) {
+      this.layerElement.setAttribute('id', this.data.ln);
+    }
+    if (this.data.cl) {
+      this.layerElement.setAttribute('class', this.data.cl);
+    }
+    if (this.data.bm !== 0) {
+      this.setBlendMode();
+    }
+  },
+  renderElement: function () {
+    var transformedElementStyle = this.transformedElement ? this.transformedElement.style : {};
+    if (this.finalTransform._matMdf) {
+      var matrixValue = this.finalTransform.mat.toCSS();
+      transformedElementStyle.transform = matrixValue;
+      transformedElementStyle.webkitTransform = matrixValue;
+    }
+    if (this.finalTransform._opMdf) {
+      transformedElementStyle.opacity = this.finalTransform.mProp.o.v;
+    }
+  },
+  renderFrame: function () {
+    // If it is exported as hidden (data.hd === true) no need to render
+    // If it is not visible no need to render
+    if (this.data.hd || this.hidden) {
+      return;
+    }
+    this.renderTransform();
+    this.renderRenderable();
+    this.renderElement();
+    this.renderInnerContent();
+    if (this._isFirstFrame) {
+      this._isFirstFrame = false;
+    }
+  },
+  destroy: function () {
+    this.layerElement = null;
+    this.transformedElement = null;
+    if (this.matteElement) {
+      this.matteElement = null;
+    }
+    if (this.maskManager) {
+      this.maskManager.destroy();
+      this.maskManager = null;
+    }
+  },
+  createRenderableComponents: function () {
+    this.maskManager = new MaskElement(this.data, this, this.globalData);
+  },
+  addEffects: function () {
+  },
+  setMatte: function () {},
+};
+HBaseElement.prototype.getBaseElement = SVGBaseElement.prototype.getBaseElement;
+HBaseElement.prototype.destroyBaseElement = HBaseElement.prototype.destroy;
+HBaseElement.prototype.buildElementParenting = BaseRenderer.prototype.buildElementParenting;
+
+export default HBaseElement;

node_modules/lottie-web/player/js/elements/htmlElements/HCameraElement.js

@@ -0,0 +1,170 @@
+import {
+  degToRads,
+} from '../../utils/common';
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import PropertyFactory from '../../utils/PropertyFactory';
+import BaseElement from '../BaseElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import Matrix from '../../3rd_party/transformation-matrix';
+
+function HCameraElement(data, globalData, comp) {
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.initHierarchy();
+  var getProp = PropertyFactory.getProp;
+  this.pe = getProp(this, data.pe, 0, 0, this);
+  if (data.ks.p.s) {
+    this.px = getProp(this, data.ks.p.x, 1, 0, this);
+    this.py = getProp(this, data.ks.p.y, 1, 0, this);
+    this.pz = getProp(this, data.ks.p.z, 1, 0, this);
+  } else {
+    this.p = getProp(this, data.ks.p, 1, 0, this);
+  }
+  if (data.ks.a) {
+    this.a = getProp(this, data.ks.a, 1, 0, this);
+  }
+  if (data.ks.or.k.length && data.ks.or.k[0].to) {
+    var i;
+    var len = data.ks.or.k.length;
+    for (i = 0; i < len; i += 1) {
+      data.ks.or.k[i].to = null;
+      data.ks.or.k[i].ti = null;
+    }
+  }
+  this.or = getProp(this, data.ks.or, 1, degToRads, this);
+  this.or.sh = true;
+  this.rx = getProp(this, data.ks.rx, 0, degToRads, this);
+  this.ry = getProp(this, data.ks.ry, 0, degToRads, this);
+  this.rz = getProp(this, data.ks.rz, 0, degToRads, this);
+  this.mat = new Matrix();
+  this._prevMat = new Matrix();
+  this._isFirstFrame = true;
+
+  // TODO: find a better way to make the HCamera element to be compatible with the LayerInterface and TransformInterface.
+  this.finalTransform = {
+    mProp: this,
+  };
+}
+extendPrototype([BaseElement, FrameElement, HierarchyElement], HCameraElement);
+
+HCameraElement.prototype.setup = function () {
+  var i;
+  var len = this.comp.threeDElements.length;
+  var comp;
+  var perspectiveStyle;
+  var containerStyle;
+  for (i = 0; i < len; i += 1) {
+    // [perspectiveElem,container]
+    comp = this.comp.threeDElements[i];
+    if (comp.type === '3d') {
+      perspectiveStyle = comp.perspectiveElem.style;
+      containerStyle = comp.container.style;
+      var perspective = this.pe.v + 'px';
+      var origin = '0px 0px 0px';
+      var matrix = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
+      perspectiveStyle.perspective = perspective;
+      perspectiveStyle.webkitPerspective = perspective;
+      containerStyle.transformOrigin = origin;
+      containerStyle.mozTransformOrigin = origin;
+      containerStyle.webkitTransformOrigin = origin;
+      perspectiveStyle.transform = matrix;
+      perspectiveStyle.webkitTransform = matrix;
+    }
+  }
+};
+
+HCameraElement.prototype.createElements = function () {
+};
+
+HCameraElement.prototype.hide = function () {
+};
+
+HCameraElement.prototype.renderFrame = function () {
+  var _mdf = this._isFirstFrame;
+  var i;
+  var len;
+  if (this.hierarchy) {
+    len = this.hierarchy.length;
+    for (i = 0; i < len; i += 1) {
+      _mdf = this.hierarchy[i].finalTransform.mProp._mdf || _mdf;
+    }
+  }
+  if (_mdf || this.pe._mdf || (this.p && this.p._mdf) || (this.px && (this.px._mdf || this.py._mdf || this.pz._mdf)) || this.rx._mdf || this.ry._mdf || this.rz._mdf || this.or._mdf || (this.a && this.a._mdf)) {
+    this.mat.reset();
+
+    if (this.hierarchy) {
+      len = this.hierarchy.length - 1;
+      for (i = len; i >= 0; i -= 1) {
+        var mTransf = this.hierarchy[i].finalTransform.mProp;
+        this.mat.translate(-mTransf.p.v[0], -mTransf.p.v[1], mTransf.p.v[2]);
+        this.mat.rotateX(-mTransf.or.v[0]).rotateY(-mTransf.or.v[1]).rotateZ(mTransf.or.v[2]);
+        this.mat.rotateX(-mTransf.rx.v).rotateY(-mTransf.ry.v).rotateZ(mTransf.rz.v);
+        this.mat.scale(1 / mTransf.s.v[0], 1 / mTransf.s.v[1], 1 / mTransf.s.v[2]);
+        this.mat.translate(mTransf.a.v[0], mTransf.a.v[1], mTransf.a.v[2]);
+      }
+    }
+    if (this.p) {
+      this.mat.translate(-this.p.v[0], -this.p.v[1], this.p.v[2]);
+    } else {
+      this.mat.translate(-this.px.v, -this.py.v, this.pz.v);
+    }
+    if (this.a) {
+      var diffVector;
+      if (this.p) {
+        diffVector = [this.p.v[0] - this.a.v[0], this.p.v[1] - this.a.v[1], this.p.v[2] - this.a.v[2]];
+      } else {
+        diffVector = [this.px.v - this.a.v[0], this.py.v - this.a.v[1], this.pz.v - this.a.v[2]];
+      }
+      var mag = Math.sqrt(Math.pow(diffVector[0], 2) + Math.pow(diffVector[1], 2) + Math.pow(diffVector[2], 2));
+      // var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v));
+      var lookDir = [diffVector[0] / mag, diffVector[1] / mag, diffVector[2] / mag];
+      var lookLengthOnXZ = Math.sqrt(lookDir[2] * lookDir[2] + lookDir[0] * lookDir[0]);
+      var mRotationX = (Math.atan2(lookDir[1], lookLengthOnXZ));
+      var mRotationY = (Math.atan2(lookDir[0], -lookDir[2]));
+      this.mat.rotateY(mRotationY).rotateX(-mRotationX);
+    }
+    this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
+    this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]);
+    this.mat.translate(this.globalData.compSize.w / 2, this.globalData.compSize.h / 2, 0);
+    this.mat.translate(0, 0, this.pe.v);
+
+    var hasMatrixChanged = !this._prevMat.equals(this.mat);
+    if ((hasMatrixChanged || this.pe._mdf) && this.comp.threeDElements) {
+      len = this.comp.threeDElements.length;
+      var comp;
+      var perspectiveStyle;
+      var containerStyle;
+      for (i = 0; i < len; i += 1) {
+        comp = this.comp.threeDElements[i];
+        if (comp.type === '3d') {
+          if (hasMatrixChanged) {
+            var matValue = this.mat.toCSS();
+            containerStyle = comp.container.style;
+            containerStyle.transform = matValue;
+            containerStyle.webkitTransform = matValue;
+          }
+          if (this.pe._mdf) {
+            perspectiveStyle = comp.perspectiveElem.style;
+            perspectiveStyle.perspective = this.pe.v + 'px';
+            perspectiveStyle.webkitPerspective = this.pe.v + 'px';
+          }
+        }
+      }
+      this.mat.clone(this._prevMat);
+    }
+  }
+  this._isFirstFrame = false;
+};
+
+HCameraElement.prototype.prepareFrame = function (num) {
+  this.prepareProperties(num, true);
+};
+
+HCameraElement.prototype.destroy = function () {
+};
+HCameraElement.prototype.getBaseElement = function () { return null; };
+
+export default HCameraElement;

node_modules/lottie-web/player/js/elements/htmlElements/HCompElement.js

@@ -0,0 +1,61 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import PropertyFactory from '../../utils/PropertyFactory';
+import HybridRendererBase from '../../renderers/HybridRendererBase';
+import HBaseElement from './HBaseElement';
+import ICompElement from '../CompElement';
+import SVGCompElement from '../svgElements/SVGCompElement';
+
+function HCompElement(data, globalData, comp) {
+  this.layers = data.layers;
+  this.supports3d = !data.hasMask;
+  this.completeLayers = false;
+  this.pendingElements = [];
+  this.elements = this.layers ? createSizedArray(this.layers.length) : [];
+  this.initElement(data, globalData, comp);
+  this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
+}
+
+extendPrototype([HybridRendererBase, ICompElement, HBaseElement], HCompElement);
+HCompElement.prototype._createBaseContainerElements = HCompElement.prototype.createContainerElements;
+
+HCompElement.prototype.createContainerElements = function () {
+  this._createBaseContainerElements();
+  // divElement.style.clip = 'rect(0px, '+this.data.w+'px, '+this.data.h+'px, 0px)';
+  if (this.data.hasMask) {
+    this.svgElement.setAttribute('width', this.data.w);
+    this.svgElement.setAttribute('height', this.data.h);
+    this.transformedElement = this.baseElement;
+  } else {
+    this.transformedElement = this.layerElement;
+  }
+};
+
+HCompElement.prototype.addTo3dContainer = function (elem, pos) {
+  var j = 0;
+  var nextElement;
+  while (j < pos) {
+    if (this.elements[j] && this.elements[j].getBaseElement) {
+      nextElement = this.elements[j].getBaseElement();
+    }
+    j += 1;
+  }
+  if (nextElement) {
+    this.layerElement.insertBefore(elem, nextElement);
+  } else {
+    this.layerElement.appendChild(elem);
+  }
+};
+
+HCompElement.prototype.createComp = function (data) {
+  if (!this.supports3d) {
+    return new SVGCompElement(data, this.globalData, this);
+  }
+  return new HCompElement(data, this.globalData, this);
+};
+
+export default HCompElement;

node_modules/lottie-web/player/js/elements/htmlElements/HEffects.js

@@ -0,0 +1,3 @@
+function HEffects() {
+}
+HEffects.prototype.renderFrame = function () {};

node_modules/lottie-web/player/js/elements/htmlElements/HImageElement.js

@@ -0,0 +1,42 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import HBaseElement from './HBaseElement';
+import HSolidElement from './HSolidElement';
+
+function HImageElement(data, globalData, comp) {
+  this.assetData = globalData.getAssetData(data.refId);
+  this.initElement(data, globalData, comp);
+}
+
+extendPrototype([BaseElement, TransformElement, HBaseElement, HSolidElement, HierarchyElement, FrameElement, RenderableElement], HImageElement);
+
+HImageElement.prototype.createContent = function () {
+  var assetPath = this.globalData.getAssetsPath(this.assetData);
+  var img = new Image();
+
+  if (this.data.hasMask) {
+    this.imageElem = createNS('image');
+    this.imageElem.setAttribute('width', this.assetData.w + 'px');
+    this.imageElem.setAttribute('height', this.assetData.h + 'px');
+    this.imageElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
+    this.layerElement.appendChild(this.imageElem);
+    this.baseElement.setAttribute('width', this.assetData.w);
+    this.baseElement.setAttribute('height', this.assetData.h);
+  } else {
+    this.layerElement.appendChild(img);
+  }
+  img.crossOrigin = 'anonymous';
+  img.src = assetPath;
+  if (this.data.ln) {
+    this.baseElement.setAttribute('id', this.data.ln);
+  }
+};
+
+export default HImageElement;

node_modules/lottie-web/player/js/elements/htmlElements/HShapeElement.js

@@ -0,0 +1,261 @@
+import {
+  bmPow,
+  bmMax,
+  bmMin,
+  bmSqrt,
+} from '../../utils/common';
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import HBaseElement from './HBaseElement';
+import HSolidElement from './HSolidElement';
+import SVGShapeElement from '../svgElements/SVGShapeElement';
+
+function HShapeElement(data, globalData, comp) {
+  // List of drawable elements
+  this.shapes = [];
+  // Full shape data
+  this.shapesData = data.shapes;
+  // List of styles that will be applied to shapes
+  this.stylesList = [];
+  // List of modifiers that will be applied to shapes
+  this.shapeModifiers = [];
+  // List of items in shape tree
+  this.itemsData = [];
+  // List of items in previous shape tree
+  this.processedElements = [];
+  // List of animated components
+  this.animatedContents = [];
+  this.shapesContainer = createNS('g');
+  this.initElement(data, globalData, comp);
+  // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
+  // List of elements that have been created
+  this.prevViewData = [];
+  this.currentBBox = {
+    x: 999999,
+    y: -999999,
+    h: 0,
+    w: 0,
+  };
+}
+extendPrototype([BaseElement, TransformElement, HSolidElement, SVGShapeElement, HBaseElement, HierarchyElement, FrameElement, RenderableElement], HShapeElement);
+HShapeElement.prototype._renderShapeFrame = HShapeElement.prototype.renderInnerContent;
+
+HShapeElement.prototype.createContent = function () {
+  var cont;
+  this.baseElement.style.fontSize = 0;
+  if (this.data.hasMask) {
+    this.layerElement.appendChild(this.shapesContainer);
+    cont = this.svgElement;
+  } else {
+    cont = createNS('svg');
+    var size = this.comp.data ? this.comp.data : this.globalData.compSize;
+    cont.setAttribute('width', size.w);
+    cont.setAttribute('height', size.h);
+    cont.appendChild(this.shapesContainer);
+    this.layerElement.appendChild(cont);
+  }
+
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.shapesContainer, 0, [], true);
+  this.filterUniqueShapes();
+  this.shapeCont = cont;
+};
+
+HShapeElement.prototype.getTransformedPoint = function (transformers, point) {
+  var i;
+  var len = transformers.length;
+  for (i = 0; i < len; i += 1) {
+    point = transformers[i].mProps.v.applyToPointArray(point[0], point[1], 0);
+  }
+  return point;
+};
+
+HShapeElement.prototype.calculateShapeBoundingBox = function (item, boundingBox) {
+  var shape = item.sh.v;
+  var transformers = item.transformers;
+  var i;
+  var len = shape._length;
+  var vPoint;
+  var oPoint;
+  var nextIPoint;
+  var nextVPoint;
+  if (len <= 1) {
+    return;
+  }
+  for (i = 0; i < len - 1; i += 1) {
+    vPoint = this.getTransformedPoint(transformers, shape.v[i]);
+    oPoint = this.getTransformedPoint(transformers, shape.o[i]);
+    nextIPoint = this.getTransformedPoint(transformers, shape.i[i + 1]);
+    nextVPoint = this.getTransformedPoint(transformers, shape.v[i + 1]);
+    this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
+  }
+  if (shape.c) {
+    vPoint = this.getTransformedPoint(transformers, shape.v[i]);
+    oPoint = this.getTransformedPoint(transformers, shape.o[i]);
+    nextIPoint = this.getTransformedPoint(transformers, shape.i[0]);
+    nextVPoint = this.getTransformedPoint(transformers, shape.v[0]);
+    this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
+  }
+};
+
+HShapeElement.prototype.checkBounds = function (vPoint, oPoint, nextIPoint, nextVPoint, boundingBox) {
+  this.getBoundsOfCurve(vPoint, oPoint, nextIPoint, nextVPoint);
+  var bounds = this.shapeBoundingBox;
+  boundingBox.x = bmMin(bounds.left, boundingBox.x);
+  boundingBox.xMax = bmMax(bounds.right, boundingBox.xMax);
+  boundingBox.y = bmMin(bounds.top, boundingBox.y);
+  boundingBox.yMax = bmMax(bounds.bottom, boundingBox.yMax);
+};
+
+HShapeElement.prototype.shapeBoundingBox = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
+
+HShapeElement.prototype.tempBoundingBox = {
+  x: 0,
+  xMax: 0,
+  y: 0,
+  yMax: 0,
+  width: 0,
+  height: 0,
+};
+
+HShapeElement.prototype.getBoundsOfCurve = function (p0, p1, p2, p3) {
+  var bounds = [[p0[0], p3[0]], [p0[1], p3[1]]];
+
+  for (var a, b, c, t, b2ac, t1, t2, i = 0; i < 2; ++i) { // eslint-disable-line no-plusplus
+    b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
+    a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
+    c = 3 * p1[i] - 3 * p0[i];
+
+    b |= 0; // eslint-disable-line no-bitwise
+    a |= 0; // eslint-disable-line no-bitwise
+    c |= 0; // eslint-disable-line no-bitwise
+
+    if (a === 0 && b === 0) {
+      //
+    } else if (a === 0) {
+      t = -c / b;
+
+      if (t > 0 && t < 1) {
+        bounds[i].push(this.calculateF(t, p0, p1, p2, p3, i));
+      }
+    } else {
+      b2ac = b * b - 4 * c * a;
+
+      if (b2ac >= 0) {
+        t1 = (-b + bmSqrt(b2ac)) / (2 * a);
+        if (t1 > 0 && t1 < 1) bounds[i].push(this.calculateF(t1, p0, p1, p2, p3, i));
+        t2 = (-b - bmSqrt(b2ac)) / (2 * a);
+        if (t2 > 0 && t2 < 1) bounds[i].push(this.calculateF(t2, p0, p1, p2, p3, i));
+      }
+    }
+  }
+
+  this.shapeBoundingBox.left = bmMin.apply(null, bounds[0]);
+  this.shapeBoundingBox.top = bmMin.apply(null, bounds[1]);
+  this.shapeBoundingBox.right = bmMax.apply(null, bounds[0]);
+  this.shapeBoundingBox.bottom = bmMax.apply(null, bounds[1]);
+};
+
+HShapeElement.prototype.calculateF = function (t, p0, p1, p2, p3, i) {
+  return bmPow(1 - t, 3) * p0[i]
+        + 3 * bmPow(1 - t, 2) * t * p1[i]
+        + 3 * (1 - t) * bmPow(t, 2) * p2[i]
+        + bmPow(t, 3) * p3[i];
+};
+
+HShapeElement.prototype.calculateBoundingBox = function (itemsData, boundingBox) {
+  var i;
+  var len = itemsData.length;
+  for (i = 0; i < len; i += 1) {
+    if (itemsData[i] && itemsData[i].sh) {
+      this.calculateShapeBoundingBox(itemsData[i], boundingBox);
+    } else if (itemsData[i] && itemsData[i].it) {
+      this.calculateBoundingBox(itemsData[i].it, boundingBox);
+    } else if (itemsData[i] && itemsData[i].style && itemsData[i].w) {
+      this.expandStrokeBoundingBox(itemsData[i].w, boundingBox);
+    }
+  }
+};
+
+HShapeElement.prototype.expandStrokeBoundingBox = function (widthProperty, boundingBox) {
+  var width = 0;
+  if (widthProperty.keyframes) {
+    for (var i = 0; i < widthProperty.keyframes.length; i += 1) {
+      var kfw = widthProperty.keyframes[i].s;
+      if (kfw > width) {
+        width = kfw;
+      }
+    }
+    width *= widthProperty.mult;
+  } else {
+    width = widthProperty.v * widthProperty.mult;
+  }
+
+  boundingBox.x -= width;
+  boundingBox.xMax += width;
+  boundingBox.y -= width;
+  boundingBox.yMax += width;
+};
+
+HShapeElement.prototype.currentBoxContains = function (box) {
+  return this.currentBBox.x <= box.x
+    && this.currentBBox.y <= box.y
+    && this.currentBBox.width + this.currentBBox.x >= box.x + box.width
+    && this.currentBBox.height + this.currentBBox.y >= box.y + box.height;
+};
+
+HShapeElement.prototype.renderInnerContent = function () {
+  this._renderShapeFrame();
+
+  if (!this.hidden && (this._isFirstFrame || this._mdf)) {
+    var tempBoundingBox = this.tempBoundingBox;
+    var max = 999999;
+    tempBoundingBox.x = max;
+    tempBoundingBox.xMax = -max;
+    tempBoundingBox.y = max;
+    tempBoundingBox.yMax = -max;
+    this.calculateBoundingBox(this.itemsData, tempBoundingBox);
+    tempBoundingBox.width = tempBoundingBox.xMax < tempBoundingBox.x ? 0 : tempBoundingBox.xMax - tempBoundingBox.x;
+    tempBoundingBox.height = tempBoundingBox.yMax < tempBoundingBox.y ? 0 : tempBoundingBox.yMax - tempBoundingBox.y;
+    // var tempBoundingBox = this.shapeCont.getBBox();
+    if (this.currentBoxContains(tempBoundingBox)) {
+      return;
+    }
+    var changed = false;
+    if (this.currentBBox.w !== tempBoundingBox.width) {
+      this.currentBBox.w = tempBoundingBox.width;
+      this.shapeCont.setAttribute('width', tempBoundingBox.width);
+      changed = true;
+    }
+    if (this.currentBBox.h !== tempBoundingBox.height) {
+      this.currentBBox.h = tempBoundingBox.height;
+      this.shapeCont.setAttribute('height', tempBoundingBox.height);
+      changed = true;
+    }
+    if (changed || this.currentBBox.x !== tempBoundingBox.x || this.currentBBox.y !== tempBoundingBox.y) {
+      this.currentBBox.w = tempBoundingBox.width;
+      this.currentBBox.h = tempBoundingBox.height;
+      this.currentBBox.x = tempBoundingBox.x;
+      this.currentBBox.y = tempBoundingBox.y;
+
+      this.shapeCont.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
+      var shapeStyle = this.shapeCont.style;
+      var shapeTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
+      shapeStyle.transform = shapeTransform;
+      shapeStyle.webkitTransform = shapeTransform;
+    }
+  }
+};
+
+export default HShapeElement;

node_modules/lottie-web/player/js/elements/htmlElements/HSolidElement.js

@@ -0,0 +1,36 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import createTag from '../../utils/helpers/html_elements';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import HBaseElement from './HBaseElement';
+
+function HSolidElement(data, globalData, comp) {
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], HSolidElement);
+
+HSolidElement.prototype.createContent = function () {
+  var rect;
+  if (this.data.hasMask) {
+    rect = createNS('rect');
+    rect.setAttribute('width', this.data.sw);
+    rect.setAttribute('height', this.data.sh);
+    rect.setAttribute('fill', this.data.sc);
+    this.svgElement.setAttribute('width', this.data.sw);
+    this.svgElement.setAttribute('height', this.data.sh);
+  } else {
+    rect = createTag('div');
+    rect.style.width = this.data.sw + 'px';
+    rect.style.height = this.data.sh + 'px';
+    rect.style.backgroundColor = this.data.sc;
+  }
+  this.layerElement.appendChild(rect);
+};
+
+export default HSolidElement;

node_modules/lottie-web/player/js/elements/htmlElements/HTextElement.js

@@ -0,0 +1,290 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import createNS from '../../utils/helpers/svg_elements';
+import createTag from '../../utils/helpers/html_elements';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import ITextElement from '../TextElement';
+import HBaseElement from './HBaseElement';
+import {
+  lineCapEnum,
+  lineJoinEnum,
+} from '../../utils/helpers/shapeEnums';
+import {
+  styleDiv,
+} from '../../utils/common';
+
+function HTextElement(data, globalData, comp) {
+  this.textSpans = [];
+  this.textPaths = [];
+  this.currentBBox = {
+    x: 999999,
+    y: -999999,
+    h: 0,
+    w: 0,
+  };
+  this.renderType = 'svg';
+  this.isMasked = false;
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], HTextElement);
+
+HTextElement.prototype.createContent = function () {
+  this.isMasked = this.checkMasks();
+  if (this.isMasked) {
+    this.renderType = 'svg';
+    this.compW = this.comp.data.w;
+    this.compH = this.comp.data.h;
+    this.svgElement.setAttribute('width', this.compW);
+    this.svgElement.setAttribute('height', this.compH);
+    var g = createNS('g');
+    this.maskedElement.appendChild(g);
+    this.innerElem = g;
+  } else {
+    this.renderType = 'html';
+    this.innerElem = this.layerElement;
+  }
+
+  this.checkParenting();
+};
+
+HTextElement.prototype.buildNewText = function () {
+  var documentData = this.textProperty.currentData;
+  this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);
+  var innerElemStyle = this.innerElem.style;
+  var textColor = documentData.fc ? this.buildColor(documentData.fc) : 'rgba(0,0,0,0)';
+  innerElemStyle.fill = textColor;
+  innerElemStyle.color = textColor;
+  if (documentData.sc) {
+    innerElemStyle.stroke = this.buildColor(documentData.sc);
+    innerElemStyle.strokeWidth = documentData.sw + 'px';
+  }
+  var fontData = this.globalData.fontManager.getFontByName(documentData.f);
+  if (!this.globalData.fontManager.chars) {
+    innerElemStyle.fontSize = documentData.finalSize + 'px';
+    innerElemStyle.lineHeight = documentData.finalSize + 'px';
+    if (fontData.fClass) {
+      this.innerElem.className = fontData.fClass;
+    } else {
+      innerElemStyle.fontFamily = fontData.fFamily;
+      var fWeight = documentData.fWeight;
+      var fStyle = documentData.fStyle;
+      innerElemStyle.fontStyle = fStyle;
+      innerElemStyle.fontWeight = fWeight;
+    }
+  }
+  var i;
+  var len;
+
+  var letters = documentData.l;
+  len = letters.length;
+  var tSpan;
+  var tParent;
+  var tCont;
+  var matrixHelper = this.mHelper;
+  var shapes;
+  var shapeStr = '';
+  var cnt = 0;
+  for (i = 0; i < len; i += 1) {
+    if (this.globalData.fontManager.chars) {
+      if (!this.textPaths[cnt]) {
+        tSpan = createNS('path');
+        tSpan.setAttribute('stroke-linecap', lineCapEnum[1]);
+        tSpan.setAttribute('stroke-linejoin', lineJoinEnum[2]);
+        tSpan.setAttribute('stroke-miterlimit', '4');
+      } else {
+        tSpan = this.textPaths[cnt];
+      }
+      if (!this.isMasked) {
+        if (this.textSpans[cnt]) {
+          tParent = this.textSpans[cnt];
+          tCont = tParent.children[0];
+        } else {
+          tParent = createTag('div');
+          tParent.style.lineHeight = 0;
+          tCont = createNS('svg');
+          tCont.appendChild(tSpan);
+          styleDiv(tParent);
+        }
+      }
+    } else if (!this.isMasked) {
+      if (this.textSpans[cnt]) {
+        tParent = this.textSpans[cnt];
+        tSpan = this.textPaths[cnt];
+      } else {
+        tParent = createTag('span');
+        styleDiv(tParent);
+        tSpan = createTag('span');
+        styleDiv(tSpan);
+        tParent.appendChild(tSpan);
+      }
+    } else {
+      tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : createNS('text');
+    }
+    // tSpan.setAttribute('visibility', 'hidden');
+    if (this.globalData.fontManager.chars) {
+      var charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
+      var shapeData;
+      if (charData) {
+        shapeData = charData.data;
+      } else {
+        shapeData = null;
+      }
+      matrixHelper.reset();
+      if (shapeData && shapeData.shapes && shapeData.shapes.length) {
+        shapes = shapeData.shapes[0].it;
+        matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
+        shapeStr = this.createPathShape(matrixHelper, shapes);
+        tSpan.setAttribute('d', shapeStr);
+      }
+      if (!this.isMasked) {
+        this.innerElem.appendChild(tParent);
+        if (shapeData && shapeData.shapes) {
+          // document.body.appendChild is needed to get exact measure of shape
+          document.body.appendChild(tCont);
+          var boundingBox = tCont.getBBox();
+          tCont.setAttribute('width', boundingBox.width + 2);
+          tCont.setAttribute('height', boundingBox.height + 2);
+          tCont.setAttribute('viewBox', (boundingBox.x - 1) + ' ' + (boundingBox.y - 1) + ' ' + (boundingBox.width + 2) + ' ' + (boundingBox.height + 2));
+          var tContStyle = tCont.style;
+          var tContTranslation = 'translate(' + (boundingBox.x - 1) + 'px,' + (boundingBox.y - 1) + 'px)';
+          tContStyle.transform = tContTranslation;
+          tContStyle.webkitTransform = tContTranslation;
+
+          letters[i].yOffset = boundingBox.y - 1;
+        } else {
+          tCont.setAttribute('width', 1);
+          tCont.setAttribute('height', 1);
+        }
+        tParent.appendChild(tCont);
+      } else {
+        this.innerElem.appendChild(tSpan);
+      }
+    } else {
+      tSpan.textContent = letters[i].val;
+      tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+      if (!this.isMasked) {
+        this.innerElem.appendChild(tParent);
+        //
+        var tStyle = tSpan.style;
+        var tSpanTranslation = 'translate3d(0,' + -documentData.finalSize / 1.2 + 'px,0)';
+        tStyle.transform = tSpanTranslation;
+        tStyle.webkitTransform = tSpanTranslation;
+      } else {
+        this.innerElem.appendChild(tSpan);
+      }
+    }
+    //
+    if (!this.isMasked) {
+      this.textSpans[cnt] = tParent;
+    } else {
+      this.textSpans[cnt] = tSpan;
+    }
+    this.textSpans[cnt].style.display = 'block';
+    this.textPaths[cnt] = tSpan;
+    cnt += 1;
+  }
+  while (cnt < this.textSpans.length) {
+    this.textSpans[cnt].style.display = 'none';
+    cnt += 1;
+  }
+};
+
+HTextElement.prototype.renderInnerContent = function () {
+  this.validateText();
+  var svgStyle;
+  if (this.data.singleShape) {
+    if (!this._isFirstFrame && !this.lettersChangedFlag) {
+      return;
+    } if (this.isMasked && this.finalTransform._matMdf) {
+      // Todo Benchmark if using this is better than getBBox
+      this.svgElement.setAttribute('viewBox', -this.finalTransform.mProp.p.v[0] + ' ' + -this.finalTransform.mProp.p.v[1] + ' ' + this.compW + ' ' + this.compH);
+      svgStyle = this.svgElement.style;
+      var translation = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)';
+      svgStyle.transform = translation;
+      svgStyle.webkitTransform = translation;
+    }
+  }
+
+  this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
+  if (!this.lettersChangedFlag && !this.textAnimator.lettersChangedFlag) {
+    return;
+  }
+  var i;
+  var len;
+  var count = 0;
+  var renderedLetters = this.textAnimator.renderedLetters;
+
+  var letters = this.textProperty.currentData.l;
+
+  len = letters.length;
+  var renderedLetter;
+  var textSpan;
+  var textPath;
+  for (i = 0; i < len; i += 1) {
+    if (letters[i].n) {
+      count += 1;
+    } else {
+      textSpan = this.textSpans[i];
+      textPath = this.textPaths[i];
+      renderedLetter = renderedLetters[count];
+      count += 1;
+      if (renderedLetter._mdf.m) {
+        if (!this.isMasked) {
+          textSpan.style.webkitTransform = renderedLetter.m;
+          textSpan.style.transform = renderedLetter.m;
+        } else {
+          textSpan.setAttribute('transform', renderedLetter.m);
+        }
+      }
+      /// /textSpan.setAttribute('opacity',renderedLetter.o);
+      textSpan.style.opacity = renderedLetter.o;
+      if (renderedLetter.sw && renderedLetter._mdf.sw) {
+        textPath.setAttribute('stroke-width', renderedLetter.sw);
+      }
+      if (renderedLetter.sc && renderedLetter._mdf.sc) {
+        textPath.setAttribute('stroke', renderedLetter.sc);
+      }
+      if (renderedLetter.fc && renderedLetter._mdf.fc) {
+        textPath.setAttribute('fill', renderedLetter.fc);
+        textPath.style.color = renderedLetter.fc;
+      }
+    }
+  }
+
+  if (this.innerElem.getBBox && !this.hidden && (this._isFirstFrame || this._mdf)) {
+    var boundingBox = this.innerElem.getBBox();
+
+    if (this.currentBBox.w !== boundingBox.width) {
+      this.currentBBox.w = boundingBox.width;
+      this.svgElement.setAttribute('width', boundingBox.width);
+    }
+    if (this.currentBBox.h !== boundingBox.height) {
+      this.currentBBox.h = boundingBox.height;
+      this.svgElement.setAttribute('height', boundingBox.height);
+    }
+
+    var margin = 1;
+    if (this.currentBBox.w !== (boundingBox.width + margin * 2) || this.currentBBox.h !== (boundingBox.height + margin * 2) || this.currentBBox.x !== (boundingBox.x - margin) || this.currentBBox.y !== (boundingBox.y - margin)) {
+      this.currentBBox.w = boundingBox.width + margin * 2;
+      this.currentBBox.h = boundingBox.height + margin * 2;
+      this.currentBBox.x = boundingBox.x - margin;
+      this.currentBBox.y = boundingBox.y - margin;
+
+      this.svgElement.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
+      svgStyle = this.svgElement.style;
+      var svgTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
+      svgStyle.transform = svgTransform;
+      svgStyle.webkitTransform = svgTransform;
+    }
+  }
+};
+
+export default HTextElement;

node_modules/lottie-web/player/js/elements/svgElements/SVGBaseElement.js

@@ -0,0 +1,181 @@
+import { getLocationHref } from '../../main';
+import {
+  createElementID,
+} from '../../utils/common';
+import createNS from '../../utils/helpers/svg_elements';
+import MaskElement from '../../mask';
+import filtersFactory from '../../utils/filters';
+import featureSupport from '../../utils/featureSupport';
+import SVGEffects from './SVGEffects';
+
+function SVGBaseElement() {
+}
+
+SVGBaseElement.prototype = {
+  initRendererElement: function () {
+    this.layerElement = createNS('g');
+  },
+  createContainerElements: function () {
+    this.matteElement = createNS('g');
+    this.transformedElement = this.layerElement;
+    this.maskedElement = this.layerElement;
+    this._sizeChanged = false;
+    var layerElementParent = null;
+    // If this layer acts as a mask for the following layer
+    if (this.data.td) {
+      this.matteMasks = {};
+      var gg = createNS('g');
+      gg.setAttribute('id', this.layerId);
+      gg.appendChild(this.layerElement);
+      layerElementParent = gg;
+      this.globalData.defs.appendChild(gg);
+    } else if (this.data.tt) {
+      this.matteElement.appendChild(this.layerElement);
+      layerElementParent = this.matteElement;
+      this.baseElement = this.matteElement;
+    } else {
+      this.baseElement = this.layerElement;
+    }
+    if (this.data.ln) {
+      this.layerElement.setAttribute('id', this.data.ln);
+    }
+    if (this.data.cl) {
+      this.layerElement.setAttribute('class', this.data.cl);
+    }
+    // Clipping compositions to hide content that exceeds boundaries. If collapsed transformations is on, component should not be clipped
+    if (this.data.ty === 0 && !this.data.hd) {
+      var cp = createNS('clipPath');
+      var pt = createNS('path');
+      pt.setAttribute('d', 'M0,0 L' + this.data.w + ',0 L' + this.data.w + ',' + this.data.h + ' L0,' + this.data.h + 'z');
+      var clipId = createElementID();
+      cp.setAttribute('id', clipId);
+      cp.appendChild(pt);
+      this.globalData.defs.appendChild(cp);
+
+      if (this.checkMasks()) {
+        var cpGroup = createNS('g');
+        cpGroup.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + clipId + ')');
+        cpGroup.appendChild(this.layerElement);
+        this.transformedElement = cpGroup;
+        if (layerElementParent) {
+          layerElementParent.appendChild(this.transformedElement);
+        } else {
+          this.baseElement = this.transformedElement;
+        }
+      } else {
+        this.layerElement.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + clipId + ')');
+      }
+    }
+    if (this.data.bm !== 0) {
+      this.setBlendMode();
+    }
+  },
+  renderElement: function () {
+    if (this.finalTransform._localMatMdf) {
+      this.transformedElement.setAttribute('transform', this.finalTransform.localMat.to2dCSS());
+    }
+    if (this.finalTransform._opMdf) {
+      this.transformedElement.setAttribute('opacity', this.finalTransform.localOpacity);
+    }
+  },
+  destroyBaseElement: function () {
+    this.layerElement = null;
+    this.matteElement = null;
+    this.maskManager.destroy();
+  },
+  getBaseElement: function () {
+    if (this.data.hd) {
+      return null;
+    }
+    return this.baseElement;
+  },
+  createRenderableComponents: function () {
+    this.maskManager = new MaskElement(this.data, this, this.globalData);
+    this.renderableEffectsManager = new SVGEffects(this);
+    this.searchEffectTransforms();
+  },
+  getMatte: function (matteType) {
+    // This should not be a common case. But for backward compatibility, we'll create the matte object.
+    // It solves animations that have two consecutive layers marked as matte masks.
+    // Which is an undefined behavior in AE.
+    if (!this.matteMasks) {
+      this.matteMasks = {};
+    }
+    if (!this.matteMasks[matteType]) {
+      var id = this.layerId + '_' + matteType;
+      var filId;
+      var fil;
+      var useElement;
+      var gg;
+      if (matteType === 1 || matteType === 3) {
+        var masker = createNS('mask');
+        masker.setAttribute('id', id);
+        masker.setAttribute('mask-type', matteType === 3 ? 'luminance' : 'alpha');
+        useElement = createNS('use');
+        useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + this.layerId);
+        masker.appendChild(useElement);
+        this.globalData.defs.appendChild(masker);
+        if (!featureSupport.maskType && matteType === 1) {
+          masker.setAttribute('mask-type', 'luminance');
+          filId = createElementID();
+          fil = filtersFactory.createFilter(filId);
+          this.globalData.defs.appendChild(fil);
+          fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
+          gg = createNS('g');
+          gg.appendChild(useElement);
+          masker.appendChild(gg);
+          gg.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
+        }
+      } else if (matteType === 2) {
+        var maskGroup = createNS('mask');
+        maskGroup.setAttribute('id', id);
+        maskGroup.setAttribute('mask-type', 'alpha');
+        var maskGrouper = createNS('g');
+        maskGroup.appendChild(maskGrouper);
+        filId = createElementID();
+        fil = filtersFactory.createFilter(filId);
+        /// /
+        var feCTr = createNS('feComponentTransfer');
+        feCTr.setAttribute('in', 'SourceGraphic');
+        fil.appendChild(feCTr);
+        var feFunc = createNS('feFuncA');
+        feFunc.setAttribute('type', 'table');
+        feFunc.setAttribute('tableValues', '1.0 0.0');
+        feCTr.appendChild(feFunc);
+        /// /
+        this.globalData.defs.appendChild(fil);
+        var alphaRect = createNS('rect');
+        alphaRect.setAttribute('width', this.comp.data.w);
+        alphaRect.setAttribute('height', this.comp.data.h);
+        alphaRect.setAttribute('x', '0');
+        alphaRect.setAttribute('y', '0');
+        alphaRect.setAttribute('fill', '#ffffff');
+        alphaRect.setAttribute('opacity', '0');
+        maskGrouper.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
+        maskGrouper.appendChild(alphaRect);
+        useElement = createNS('use');
+        useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + this.layerId);
+        maskGrouper.appendChild(useElement);
+        if (!featureSupport.maskType) {
+          maskGroup.setAttribute('mask-type', 'luminance');
+          fil.appendChild(filtersFactory.createAlphaToLuminanceFilter());
+          gg = createNS('g');
+          maskGrouper.appendChild(alphaRect);
+          gg.appendChild(this.layerElement);
+          maskGrouper.appendChild(gg);
+        }
+        this.globalData.defs.appendChild(maskGroup);
+      }
+      this.matteMasks[matteType] = id;
+    }
+    return this.matteMasks[matteType];
+  },
+  setMatte: function (id) {
+    if (!this.matteElement) {
+      return;
+    }
+    this.matteElement.setAttribute('mask', 'url(' + getLocationHref() + '#' + id + ')');
+  },
+};
+
+export default SVGBaseElement;

node_modules/lottie-web/player/js/elements/svgElements/SVGCompElement.js

@@ -0,0 +1,28 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import PropertyFactory from '../../utils/PropertyFactory';
+import SVGRendererBase from '../../renderers/SVGRendererBase'; // eslint-disable-line
+import SVGBaseElement from './SVGBaseElement';
+import ICompElement from '../CompElement';
+
+function SVGCompElement(data, globalData, comp) {
+  this.layers = data.layers;
+  this.supports3d = true;
+  this.completeLayers = false;
+  this.pendingElements = [];
+  this.elements = this.layers ? createSizedArray(this.layers.length) : [];
+  this.initElement(data, globalData, comp);
+  this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
+}
+
+extendPrototype([SVGRendererBase, ICompElement, SVGBaseElement], SVGCompElement);
+
+SVGCompElement.prototype.createComp = function (data) {
+  return new SVGCompElement(data, this.globalData, this);
+};
+
+export default SVGCompElement;

node_modules/lottie-web/player/js/elements/svgElements/SVGEffects.js

@@ -0,0 +1,70 @@
+import { getLocationHref } from '../../main';
+import {
+  createElementID,
+} from '../../utils/common';
+import filtersFactory from '../../utils/filters';
+
+var registeredEffects = {};
+var idPrefix = 'filter_result_';
+
+function SVGEffects(elem) {
+  var i;
+  var source = 'SourceGraphic';
+  var len = elem.data.ef ? elem.data.ef.length : 0;
+  var filId = createElementID();
+  var fil = filtersFactory.createFilter(filId, true);
+  var count = 0;
+  this.filters = [];
+  var filterManager;
+  for (i = 0; i < len; i += 1) {
+    filterManager = null;
+    var type = elem.data.ef[i].ty;
+    if (registeredEffects[type]) {
+      var Effect = registeredEffects[type].effect;
+      filterManager = new Effect(fil, elem.effectsManager.effectElements[i], elem, idPrefix + count, source);
+      source = idPrefix + count;
+      if (registeredEffects[type].countsAsEffect) {
+        count += 1;
+      }
+    }
+    if (filterManager) {
+      this.filters.push(filterManager);
+    }
+  }
+  if (count) {
+    elem.globalData.defs.appendChild(fil);
+    elem.layerElement.setAttribute('filter', 'url(' + getLocationHref() + '#' + filId + ')');
+  }
+  if (this.filters.length) {
+    elem.addRenderableComponent(this);
+  }
+}
+
+SVGEffects.prototype.renderFrame = function (_isFirstFrame) {
+  var i;
+  var len = this.filters.length;
+  for (i = 0; i < len; i += 1) {
+    this.filters[i].renderFrame(_isFirstFrame);
+  }
+};
+
+SVGEffects.prototype.getEffects = function (type) {
+  var i;
+  var len = this.filters.length;
+  var effects = [];
+  for (i = 0; i < len; i += 1) {
+    if (this.filters[i].type === type) {
+      effects.push(this.filters[i]);
+    }
+  }
+  return effects;
+};
+
+export function registerEffect(id, effect, countsAsEffect) {
+  registeredEffects[id] = {
+    effect,
+    countsAsEffect,
+  };
+}
+
+export default SVGEffects;

node_modules/lottie-web/player/js/elements/svgElements/SVGEffectsPlaceholder.js

@@ -0,0 +1,3 @@
+function SVGEffects() {}
+
+export default SVGEffects;

node_modules/lottie-web/player/js/elements/svgElements/SVGShapeElement.js

@@ -0,0 +1,366 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import { getLocationHref } from '../../main';
+import ShapePropertyFactory from '../../utils/shapes/ShapeProperty';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import SVGBaseElement from './SVGBaseElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import getBlendMode from '../../utils/helpers/blendModes';
+import Matrix from '../../3rd_party/transformation-matrix';
+import IShapeElement from '../ShapeElement';
+import TransformPropertyFactory from '../../utils/TransformProperty';
+import { ShapeModifiers } from '../../utils/shapes/ShapeModifiers';
+import {
+  lineCapEnum,
+  lineJoinEnum,
+} from '../../utils/helpers/shapeEnums';
+import SVGShapeData from '../helpers/shapes/SVGShapeData';
+import SVGStyleData from '../helpers/shapes/SVGStyleData';
+import SVGStrokeStyleData from '../helpers/shapes/SVGStrokeStyleData';
+import SVGFillStyleData from '../helpers/shapes/SVGFillStyleData';
+import SVGNoStyleData from '../helpers/shapes/SVGNoStyleData';
+import SVGGradientFillStyleData from '../helpers/shapes/SVGGradientFillStyleData';
+import SVGGradientStrokeStyleData from '../helpers/shapes/SVGGradientStrokeStyleData';
+import ShapeGroupData from '../helpers/shapes/ShapeGroupData';
+import SVGTransformData from '../helpers/shapes/SVGTransformData';
+import SVGElementsRenderer from '../helpers/shapes/SVGElementsRenderer';
+
+function SVGShapeElement(data, globalData, comp) {
+  // List of drawable elements
+  this.shapes = [];
+  // Full shape data
+  this.shapesData = data.shapes;
+  // List of styles that will be applied to shapes
+  this.stylesList = [];
+  // List of modifiers that will be applied to shapes
+  this.shapeModifiers = [];
+  // List of items in shape tree
+  this.itemsData = [];
+  // List of items in previous shape tree
+  this.processedElements = [];
+  // List of animated components
+  this.animatedContents = [];
+  this.initElement(data, globalData, comp);
+  // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
+  // List of elements that have been created
+  this.prevViewData = [];
+  // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
+}
+
+extendPrototype([BaseElement, TransformElement, SVGBaseElement, IShapeElement, HierarchyElement, FrameElement, RenderableDOMElement], SVGShapeElement);
+
+SVGShapeElement.prototype.initSecondaryElement = function () {
+};
+
+SVGShapeElement.prototype.identityMatrix = new Matrix();
+
+SVGShapeElement.prototype.buildExpressionInterface = function () {};
+
+SVGShapeElement.prototype.createContent = function () {
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);
+  this.filterUniqueShapes();
+};
+
+/*
+This method searches for multiple shapes that affect a single element and one of them is animated
+*/
+SVGShapeElement.prototype.filterUniqueShapes = function () {
+  var i;
+  var len = this.shapes.length;
+  var shape;
+  var j;
+  var jLen = this.stylesList.length;
+  var style;
+  var tempShapes = [];
+  var areAnimated = false;
+  for (j = 0; j < jLen; j += 1) {
+    style = this.stylesList[j];
+    areAnimated = false;
+    tempShapes.length = 0;
+    for (i = 0; i < len; i += 1) {
+      shape = this.shapes[i];
+      if (shape.styles.indexOf(style) !== -1) {
+        tempShapes.push(shape);
+        areAnimated = shape._isAnimated || areAnimated;
+      }
+    }
+    if (tempShapes.length > 1 && areAnimated) {
+      this.setShapesAsAnimated(tempShapes);
+    }
+  }
+};
+
+SVGShapeElement.prototype.setShapesAsAnimated = function (shapes) {
+  var i;
+  var len = shapes.length;
+  for (i = 0; i < len; i += 1) {
+    shapes[i].setAsAnimated();
+  }
+};
+
+SVGShapeElement.prototype.createStyleElement = function (data, level) {
+  // TODO: prevent drawing of hidden styles
+  var elementData;
+  var styleOb = new SVGStyleData(data, level);
+
+  var pathElement = styleOb.pElem;
+  if (data.ty === 'st') {
+    elementData = new SVGStrokeStyleData(this, data, styleOb);
+  } else if (data.ty === 'fl') {
+    elementData = new SVGFillStyleData(this, data, styleOb);
+  } else if (data.ty === 'gf' || data.ty === 'gs') {
+    var GradientConstructor = data.ty === 'gf' ? SVGGradientFillStyleData : SVGGradientStrokeStyleData;
+    elementData = new GradientConstructor(this, data, styleOb);
+    this.globalData.defs.appendChild(elementData.gf);
+    if (elementData.maskId) {
+      this.globalData.defs.appendChild(elementData.ms);
+      this.globalData.defs.appendChild(elementData.of);
+      pathElement.setAttribute('mask', 'url(' + getLocationHref() + '#' + elementData.maskId + ')');
+    }
+  } else if (data.ty === 'no') {
+    elementData = new SVGNoStyleData(this, data, styleOb);
+  }
+
+  if (data.ty === 'st' || data.ty === 'gs') {
+    pathElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
+    pathElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
+    pathElement.setAttribute('fill-opacity', '0');
+    if (data.lj === 1) {
+      pathElement.setAttribute('stroke-miterlimit', data.ml);
+    }
+  }
+
+  if (data.r === 2) {
+    pathElement.setAttribute('fill-rule', 'evenodd');
+  }
+
+  if (data.ln) {
+    pathElement.setAttribute('id', data.ln);
+  }
+  if (data.cl) {
+    pathElement.setAttribute('class', data.cl);
+  }
+  if (data.bm) {
+    pathElement.style['mix-blend-mode'] = getBlendMode(data.bm);
+  }
+  this.stylesList.push(styleOb);
+  this.addToAnimatedContents(data, elementData);
+  return elementData;
+};
+
+SVGShapeElement.prototype.createGroupElement = function (data) {
+  var elementData = new ShapeGroupData();
+  if (data.ln) {
+    elementData.gr.setAttribute('id', data.ln);
+  }
+  if (data.cl) {
+    elementData.gr.setAttribute('class', data.cl);
+  }
+  if (data.bm) {
+    elementData.gr.style['mix-blend-mode'] = getBlendMode(data.bm);
+  }
+  return elementData;
+};
+
+SVGShapeElement.prototype.createTransformElement = function (data, container) {
+  var transformProperty = TransformPropertyFactory.getTransformProperty(this, data, this);
+  var elementData = new SVGTransformData(transformProperty, transformProperty.o, container);
+  this.addToAnimatedContents(data, elementData);
+  return elementData;
+};
+
+SVGShapeElement.prototype.createShapeElement = function (data, ownTransformers, level) {
+  var ty = 4;
+  if (data.ty === 'rc') {
+    ty = 5;
+  } else if (data.ty === 'el') {
+    ty = 6;
+  } else if (data.ty === 'sr') {
+    ty = 7;
+  }
+  var shapeProperty = ShapePropertyFactory.getShapeProp(this, data, ty, this);
+  var elementData = new SVGShapeData(ownTransformers, level, shapeProperty);
+  this.shapes.push(elementData);
+  this.addShapeToModifiers(elementData);
+  this.addToAnimatedContents(data, elementData);
+  return elementData;
+};
+
+SVGShapeElement.prototype.addToAnimatedContents = function (data, element) {
+  var i = 0;
+  var len = this.animatedContents.length;
+  while (i < len) {
+    if (this.animatedContents[i].element === element) {
+      return;
+    }
+    i += 1;
+  }
+  this.animatedContents.push({
+    fn: SVGElementsRenderer.createRenderFunction(data),
+    element: element,
+    data: data,
+  });
+};
+
+SVGShapeElement.prototype.setElementStyles = function (elementData) {
+  var arr = elementData.styles;
+  var j;
+  var jLen = this.stylesList.length;
+  for (j = 0; j < jLen; j += 1) {
+    if (!this.stylesList[j].closed) {
+      arr.push(this.stylesList[j]);
+    }
+  }
+};
+
+SVGShapeElement.prototype.reloadShapes = function () {
+  this._isFirstFrame = true;
+  var i;
+  var len = this.itemsData.length;
+  for (i = 0; i < len; i += 1) {
+    this.prevViewData[i] = this.itemsData[i];
+  }
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.layerElement, 0, [], true);
+  this.filterUniqueShapes();
+  len = this.dynamicProperties.length;
+  for (i = 0; i < len; i += 1) {
+    this.dynamicProperties[i].getValue();
+  }
+  this.renderModifiers();
+};
+
+SVGShapeElement.prototype.searchShapes = function (arr, itemsData, prevViewData, container, level, transformers, render) {
+  var ownTransformers = [].concat(transformers);
+  var i;
+  var len = arr.length - 1;
+  var j;
+  var jLen;
+  var ownStyles = [];
+  var ownModifiers = [];
+  var currentTransform;
+  var modifier;
+  var processedPos;
+  for (i = len; i >= 0; i -= 1) {
+    processedPos = this.searchProcessedElement(arr[i]);
+    if (!processedPos) {
+      arr[i]._render = render;
+    } else {
+      itemsData[i] = prevViewData[processedPos - 1];
+    }
+    if (arr[i].ty === 'fl' || arr[i].ty === 'st' || arr[i].ty === 'gf' || arr[i].ty === 'gs' || arr[i].ty === 'no') {
+      if (!processedPos) {
+        itemsData[i] = this.createStyleElement(arr[i], level);
+      } else {
+        itemsData[i].style.closed = false;
+      }
+      if (arr[i]._render) {
+        if (itemsData[i].style.pElem.parentNode !== container) {
+          container.appendChild(itemsData[i].style.pElem);
+        }
+      }
+      ownStyles.push(itemsData[i].style);
+    } else if (arr[i].ty === 'gr') {
+      if (!processedPos) {
+        itemsData[i] = this.createGroupElement(arr[i]);
+      } else {
+        jLen = itemsData[i].it.length;
+        for (j = 0; j < jLen; j += 1) {
+          itemsData[i].prevViewData[j] = itemsData[i].it[j];
+        }
+      }
+      this.searchShapes(arr[i].it, itemsData[i].it, itemsData[i].prevViewData, itemsData[i].gr, level + 1, ownTransformers, render);
+      if (arr[i]._render) {
+        if (itemsData[i].gr.parentNode !== container) {
+          container.appendChild(itemsData[i].gr);
+        }
+      }
+    } else if (arr[i].ty === 'tr') {
+      if (!processedPos) {
+        itemsData[i] = this.createTransformElement(arr[i], container);
+      }
+      currentTransform = itemsData[i].transform;
+      ownTransformers.push(currentTransform);
+    } else if (arr[i].ty === 'sh' || arr[i].ty === 'rc' || arr[i].ty === 'el' || arr[i].ty === 'sr') {
+      if (!processedPos) {
+        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' || arr[i].ty === 'op') {
+      if (!processedPos) {
+        modifier = ShapeModifiers.getModifier(arr[i].ty);
+        modifier.init(this, arr[i]);
+        itemsData[i] = modifier;
+        this.shapeModifiers.push(modifier);
+      } else {
+        modifier = itemsData[i];
+        modifier.closed = false;
+      }
+      ownModifiers.push(modifier);
+    } else if (arr[i].ty === 'rp') {
+      if (!processedPos) {
+        modifier = ShapeModifiers.getModifier(arr[i].ty);
+        itemsData[i] = modifier;
+        modifier.init(this, arr, i, itemsData);
+        this.shapeModifiers.push(modifier);
+        render = false;
+      } else {
+        modifier = itemsData[i];
+        modifier.closed = true;
+      }
+      ownModifiers.push(modifier);
+    }
+    this.addProcessedElement(arr[i], i + 1);
+  }
+  len = ownStyles.length;
+  for (i = 0; i < len; i += 1) {
+    ownStyles[i].closed = true;
+  }
+  len = ownModifiers.length;
+  for (i = 0; i < len; i += 1) {
+    ownModifiers[i].closed = true;
+  }
+};
+
+SVGShapeElement.prototype.renderInnerContent = function () {
+  this.renderModifiers();
+  var i;
+  var len = this.stylesList.length;
+  for (i = 0; i < len; i += 1) {
+    this.stylesList[i].reset();
+  }
+  this.renderShape();
+  for (i = 0; i < len; i += 1) {
+    if (this.stylesList[i]._mdf || this._isFirstFrame) {
+      if (this.stylesList[i].msElem) {
+        this.stylesList[i].msElem.setAttribute('d', this.stylesList[i].d);
+        // Adding M0 0 fixes same mask bug on all browsers
+        this.stylesList[i].d = 'M0 0' + this.stylesList[i].d;
+      }
+      this.stylesList[i].pElem.setAttribute('d', this.stylesList[i].d || 'M0 0');
+    }
+  }
+};
+
+SVGShapeElement.prototype.renderShape = function () {
+  var i;
+  var len = this.animatedContents.length;
+  var animatedContent;
+  for (i = 0; i < len; i += 1) {
+    animatedContent = this.animatedContents[i];
+    if ((this._isFirstFrame || animatedContent.element._isAnimated) && animatedContent.data !== true) {
+      animatedContent.fn(animatedContent.data, animatedContent.element, this._isFirstFrame);
+    }
+  }
+};
+
+SVGShapeElement.prototype.destroy = function () {
+  this.destroyBaseElement();
+  this.shapesData = null;
+  this.itemsData = null;
+};
+
+export default SVGShapeElement;

node_modules/lottie-web/player/js/elements/svgElements/SVGTextElement.js

@@ -0,0 +1,322 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import createNS from '../../utils/helpers/svg_elements';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import SVGBaseElement from './SVGBaseElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import ITextElement from '../TextElement';
+import SVGCompElement from './SVGCompElement'; // eslint-disable-line
+import SVGShapeElement from './SVGShapeElement';
+
+var emptyShapeData = {
+  shapes: [],
+};
+
+function SVGTextLottieElement(data, globalData, comp) {
+  this.textSpans = [];
+  this.renderType = 'svg';
+  this.initElement(data, globalData, comp);
+}
+
+extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement, ITextElement], SVGTextLottieElement);
+
+SVGTextLottieElement.prototype.createContent = function () {
+  if (this.data.singleShape && !this.globalData.fontManager.chars) {
+    this.textContainer = createNS('text');
+  }
+};
+
+SVGTextLottieElement.prototype.buildTextContents = function (textArray) {
+  var i = 0;
+  var len = textArray.length;
+  var textContents = [];
+  var currentTextContent = '';
+  while (i < len) {
+    if (textArray[i] === String.fromCharCode(13) || textArray[i] === String.fromCharCode(3)) {
+      textContents.push(currentTextContent);
+      currentTextContent = '';
+    } else {
+      currentTextContent += textArray[i];
+    }
+    i += 1;
+  }
+  textContents.push(currentTextContent);
+  return textContents;
+};
+
+SVGTextLottieElement.prototype.buildShapeData = function (data, scale) {
+  // data should probably be cloned to apply scale separately to each instance of a text on different layers
+  // but since text internal content gets only rendered once and then it's never rerendered,
+  // it's probably safe not to clone data and reuse always the same instance even if the object is mutated.
+  // Avoiding cloning is preferred since cloning each character shape data is expensive
+  if (data.shapes && data.shapes.length) {
+    var shape = data.shapes[0];
+    if (shape.it) {
+      var shapeItem = shape.it[shape.it.length - 1];
+      if (shapeItem.s) {
+        shapeItem.s.k[0] = scale;
+        shapeItem.s.k[1] = scale;
+      }
+    }
+  }
+  return data;
+};
+
+SVGTextLottieElement.prototype.buildNewText = function () {
+  this.addDynamicProperty(this);
+  var i;
+  var len;
+
+  var documentData = this.textProperty.currentData;
+  this.renderedLetters = createSizedArray(documentData ? documentData.l.length : 0);
+  if (documentData.fc) {
+    this.layerElement.setAttribute('fill', this.buildColor(documentData.fc));
+  } else {
+    this.layerElement.setAttribute('fill', 'rgba(0,0,0,0)');
+  }
+  if (documentData.sc) {
+    this.layerElement.setAttribute('stroke', this.buildColor(documentData.sc));
+    this.layerElement.setAttribute('stroke-width', documentData.sw);
+  }
+  this.layerElement.setAttribute('font-size', documentData.finalSize);
+  var fontData = this.globalData.fontManager.getFontByName(documentData.f);
+  if (fontData.fClass) {
+    this.layerElement.setAttribute('class', fontData.fClass);
+  } else {
+    this.layerElement.setAttribute('font-family', fontData.fFamily);
+    var fWeight = documentData.fWeight;
+    var fStyle = documentData.fStyle;
+    this.layerElement.setAttribute('font-style', fStyle);
+    this.layerElement.setAttribute('font-weight', fWeight);
+  }
+  this.layerElement.setAttribute('aria-label', documentData.t);
+
+  var letters = documentData.l || [];
+  var usesGlyphs = !!this.globalData.fontManager.chars;
+  len = letters.length;
+
+  var tSpan;
+  var matrixHelper = this.mHelper;
+  var shapeStr = '';
+  var singleShape = this.data.singleShape;
+  var xPos = 0;
+  var yPos = 0;
+  var firstLine = true;
+  var trackingOffset = documentData.tr * 0.001 * documentData.finalSize;
+  if (singleShape && !usesGlyphs && !documentData.sz) {
+    var tElement = this.textContainer;
+    var justify = 'start';
+    switch (documentData.j) {
+      case 1:
+        justify = 'end';
+        break;
+      case 2:
+        justify = 'middle';
+        break;
+      default:
+        justify = 'start';
+        break;
+    }
+    tElement.setAttribute('text-anchor', justify);
+    tElement.setAttribute('letter-spacing', trackingOffset);
+    var textContent = this.buildTextContents(documentData.finalText);
+    len = textContent.length;
+    yPos = documentData.ps ? documentData.ps[1] + documentData.ascent : 0;
+    for (i = 0; i < len; i += 1) {
+      tSpan = this.textSpans[i].span || createNS('tspan');
+      tSpan.textContent = textContent[i];
+      tSpan.setAttribute('x', 0);
+      tSpan.setAttribute('y', yPos);
+      tSpan.style.display = 'inherit';
+      tElement.appendChild(tSpan);
+      if (!this.textSpans[i]) {
+        this.textSpans[i] = {
+          span: null,
+          glyph: null,
+        };
+      }
+      this.textSpans[i].span = tSpan;
+      yPos += documentData.finalLineHeight;
+    }
+
+    this.layerElement.appendChild(tElement);
+  } else {
+    var cachedSpansLength = this.textSpans.length;
+    var charData;
+    for (i = 0; i < len; i += 1) {
+      if (!this.textSpans[i]) {
+        this.textSpans[i] = {
+          span: null,
+          childSpan: null,
+          glyph: null,
+        };
+      }
+      if (!usesGlyphs || !singleShape || i === 0) {
+        tSpan = cachedSpansLength > i ? this.textSpans[i].span : createNS(usesGlyphs ? 'g' : 'text');
+        if (cachedSpansLength <= i) {
+          tSpan.setAttribute('stroke-linecap', 'butt');
+          tSpan.setAttribute('stroke-linejoin', 'round');
+          tSpan.setAttribute('stroke-miterlimit', '4');
+          this.textSpans[i].span = tSpan;
+          if (usesGlyphs) {
+            var childSpan = createNS('g');
+            tSpan.appendChild(childSpan);
+            this.textSpans[i].childSpan = childSpan;
+          }
+          this.textSpans[i].span = tSpan;
+          this.layerElement.appendChild(tSpan);
+        }
+        tSpan.style.display = 'inherit';
+      }
+
+      matrixHelper.reset();
+      if (singleShape) {
+        if (letters[i].n) {
+          xPos = -trackingOffset;
+          yPos += documentData.yOffset;
+          yPos += firstLine ? 1 : 0;
+          firstLine = false;
+        }
+        this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
+        xPos += letters[i].l || 0;
+        // xPos += letters[i].val === ' ' ? 0 : trackingOffset;
+        xPos += trackingOffset;
+      }
+      if (usesGlyphs) {
+        charData = this.globalData.fontManager.getCharData(
+          documentData.finalText[i],
+          fontData.fStyle,
+          this.globalData.fontManager.getFontByName(documentData.f).fFamily
+        );
+        var glyphElement;
+        // t === 1 means the character has been replaced with an animated shaped
+        if (charData.t === 1) {
+          glyphElement = new SVGCompElement(charData.data, this.globalData, this);
+        } else {
+          var data = emptyShapeData;
+          if (charData.data && charData.data.shapes) {
+            data = this.buildShapeData(charData.data, documentData.finalSize);
+          }
+          glyphElement = new SVGShapeElement(data, this.globalData, this);
+        }
+        if (this.textSpans[i].glyph) {
+          var glyph = this.textSpans[i].glyph;
+          this.textSpans[i].childSpan.removeChild(glyph.layerElement);
+          glyph.destroy();
+        }
+        this.textSpans[i].glyph = glyphElement;
+        glyphElement._debug = true;
+        glyphElement.prepareFrame(0);
+        glyphElement.renderFrame();
+        this.textSpans[i].childSpan.appendChild(glyphElement.layerElement);
+        // when using animated shapes, the layer will be scaled instead of replacing the internal scale
+        // this might have issues with strokes and might need a different solution
+        if (charData.t === 1) {
+          this.textSpans[i].childSpan.setAttribute('transform', 'scale(' + documentData.finalSize / 100 + ',' + documentData.finalSize / 100 + ')');
+        }
+      } else {
+        if (singleShape) {
+          tSpan.setAttribute('transform', 'translate(' + matrixHelper.props[12] + ',' + matrixHelper.props[13] + ')');
+        }
+        tSpan.textContent = letters[i].val;
+        tSpan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+      }
+      //
+    }
+    if (singleShape && tSpan) {
+      tSpan.setAttribute('d', shapeStr);
+    }
+  }
+  while (i < this.textSpans.length) {
+    this.textSpans[i].span.style.display = 'none';
+    i += 1;
+  }
+
+  this._sizeChanged = true;
+};
+
+SVGTextLottieElement.prototype.sourceRectAtTime = function () {
+  this.prepareFrame(this.comp.renderedFrame - this.data.st);
+  this.renderInnerContent();
+  if (this._sizeChanged) {
+    this._sizeChanged = false;
+    var textBox = this.layerElement.getBBox();
+    this.bbox = {
+      top: textBox.y,
+      left: textBox.x,
+      width: textBox.width,
+      height: textBox.height,
+    };
+  }
+  return this.bbox;
+};
+
+SVGTextLottieElement.prototype.getValue = function () {
+  var i;
+  var len = this.textSpans.length;
+  var glyphElement;
+  this.renderedFrame = this.comp.renderedFrame;
+  for (i = 0; i < len; i += 1) {
+    glyphElement = this.textSpans[i].glyph;
+    if (glyphElement) {
+      glyphElement.prepareFrame(this.comp.renderedFrame - this.data.st);
+      if (glyphElement._mdf) {
+        this._mdf = true;
+      }
+    }
+  }
+};
+
+SVGTextLottieElement.prototype.renderInnerContent = function () {
+  this.validateText();
+  if (!this.data.singleShape || this._mdf) {
+    this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
+    if (this.lettersChangedFlag || this.textAnimator.lettersChangedFlag) {
+      this._sizeChanged = true;
+      var i;
+      var len;
+      var renderedLetters = this.textAnimator.renderedLetters;
+
+      var letters = this.textProperty.currentData.l;
+
+      len = letters.length;
+      var renderedLetter;
+      var textSpan;
+      var glyphElement;
+      for (i = 0; i < len; i += 1) {
+        if (!letters[i].n) {
+          renderedLetter = renderedLetters[i];
+          textSpan = this.textSpans[i].span;
+          glyphElement = this.textSpans[i].glyph;
+          if (glyphElement) {
+            glyphElement.renderFrame();
+          }
+          if (renderedLetter._mdf.m) {
+            textSpan.setAttribute('transform', renderedLetter.m);
+          }
+          if (renderedLetter._mdf.o) {
+            textSpan.setAttribute('opacity', renderedLetter.o);
+          }
+          if (renderedLetter._mdf.sw) {
+            textSpan.setAttribute('stroke-width', renderedLetter.sw);
+          }
+          if (renderedLetter._mdf.sc) {
+            textSpan.setAttribute('stroke', renderedLetter.sc);
+          }
+          if (renderedLetter._mdf.fc) {
+            textSpan.setAttribute('fill', renderedLetter.fc);
+          }
+        }
+      }
+    }
+  }
+};
+
+export default SVGTextLottieElement;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGComposableEffect.js

@@ -0,0 +1,22 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function SVGComposableEffect() {
+
+}
+SVGComposableEffect.prototype = {
+  createMergeNode: (resultId, ins) => {
+    var feMerge = createNS('feMerge');
+    feMerge.setAttribute('result', resultId);
+    var feMergeNode;
+    var i;
+    for (i = 0; i < ins.length; i += 1) {
+      feMergeNode = createNS('feMergeNode');
+      feMergeNode.setAttribute('in', ins[i]);
+      feMerge.appendChild(feMergeNode);
+      feMerge.appendChild(feMergeNode);
+    }
+    return feMerge;
+  },
+};
+
+export default SVGComposableEffect;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGDropShadowEffect.js

@@ -0,0 +1,83 @@
+import {
+  degToRads,
+  rgbToHex,
+} from '../../../utils/common';
+import createNS from '../../../utils/helpers/svg_elements';
+import SVGComposableEffect from './SVGComposableEffect';
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+
+function SVGDropShadowEffect(filter, filterManager, elem, id, source) {
+  var globalFilterSize = filterManager.container.globalData.renderConfig.filterSize;
+  var filterSize = filterManager.data.fs || globalFilterSize;
+  filter.setAttribute('x', filterSize.x || globalFilterSize.x);
+  filter.setAttribute('y', filterSize.y || globalFilterSize.y);
+  filter.setAttribute('width', filterSize.width || globalFilterSize.width);
+  filter.setAttribute('height', filterSize.height || globalFilterSize.height);
+  this.filterManager = filterManager;
+
+  var feGaussianBlur = createNS('feGaussianBlur');
+  feGaussianBlur.setAttribute('in', 'SourceAlpha');
+  feGaussianBlur.setAttribute('result', id + '_drop_shadow_1');
+  feGaussianBlur.setAttribute('stdDeviation', '0');
+  this.feGaussianBlur = feGaussianBlur;
+  filter.appendChild(feGaussianBlur);
+
+  var feOffset = createNS('feOffset');
+  feOffset.setAttribute('dx', '25');
+  feOffset.setAttribute('dy', '0');
+  feOffset.setAttribute('in', id + '_drop_shadow_1');
+  feOffset.setAttribute('result', id + '_drop_shadow_2');
+  this.feOffset = feOffset;
+  filter.appendChild(feOffset);
+  var feFlood = createNS('feFlood');
+  feFlood.setAttribute('flood-color', '#00ff00');
+  feFlood.setAttribute('flood-opacity', '1');
+  feFlood.setAttribute('result', id + '_drop_shadow_3');
+  this.feFlood = feFlood;
+  filter.appendChild(feFlood);
+
+  var feComposite = createNS('feComposite');
+  feComposite.setAttribute('in', id + '_drop_shadow_3');
+  feComposite.setAttribute('in2', id + '_drop_shadow_2');
+  feComposite.setAttribute('operator', 'in');
+  feComposite.setAttribute('result', id + '_drop_shadow_4');
+  filter.appendChild(feComposite);
+
+  var feMerge = this.createMergeNode(
+    id,
+    [
+      id + '_drop_shadow_4',
+      source,
+    ]
+  );
+  filter.appendChild(feMerge);
+  //
+}
+extendPrototype([SVGComposableEffect], SVGDropShadowEffect);
+
+SVGDropShadowEffect.prototype.renderFrame = function (forceRender) {
+  if (forceRender || this.filterManager._mdf) {
+    if (forceRender || this.filterManager.effectElements[4].p._mdf) {
+      this.feGaussianBlur.setAttribute('stdDeviation', this.filterManager.effectElements[4].p.v / 4);
+    }
+    if (forceRender || this.filterManager.effectElements[0].p._mdf) {
+      var col = this.filterManager.effectElements[0].p.v;
+      this.feFlood.setAttribute('flood-color', rgbToHex(Math.round(col[0] * 255), Math.round(col[1] * 255), Math.round(col[2] * 255)));
+    }
+    if (forceRender || this.filterManager.effectElements[1].p._mdf) {
+      this.feFlood.setAttribute('flood-opacity', this.filterManager.effectElements[1].p.v / 255);
+    }
+    if (forceRender || this.filterManager.effectElements[2].p._mdf || this.filterManager.effectElements[3].p._mdf) {
+      var distance = this.filterManager.effectElements[3].p.v;
+      var angle = (this.filterManager.effectElements[2].p.v - 90) * degToRads;
+      var x = distance * Math.cos(angle);
+      var y = distance * Math.sin(angle);
+      this.feOffset.setAttribute('dx', x);
+      this.feOffset.setAttribute('dy', y);
+    }
+  }
+};
+
+export default SVGDropShadowEffect;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGFillFilter.js

@@ -0,0 +1,22 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function SVGFillFilter(filter, filterManager, elem, id) {
+  this.filterManager = filterManager;
+  var feColorMatrix = createNS('feColorMatrix');
+  feColorMatrix.setAttribute('type', 'matrix');
+  feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
+  feColorMatrix.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
+  feColorMatrix.setAttribute('result', id);
+  filter.appendChild(feColorMatrix);
+  this.matrixFilter = feColorMatrix;
+}
+
+SVGFillFilter.prototype.renderFrame = function (forceRender) {
+  if (forceRender || this.filterManager._mdf) {
+    var color = this.filterManager.effectElements[2].p.v;
+    var opacity = this.filterManager.effectElements[6].p.v;
+    this.matrixFilter.setAttribute('values', '0 0 0 0 ' + color[0] + ' 0 0 0 0 ' + color[1] + ' 0 0 0 0 ' + color[2] + ' 0 0 0 ' + opacity + ' 0');
+  }
+};
+
+export default SVGFillFilter;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGGaussianBlurEffect.js

@@ -0,0 +1,44 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function SVGGaussianBlurEffect(filter, filterManager, elem, id) {
+  // Outset the filter region by 100% on all sides to accommodate blur expansion.
+  filter.setAttribute('x', '-100%');
+  filter.setAttribute('y', '-100%');
+  filter.setAttribute('width', '300%');
+  filter.setAttribute('height', '300%');
+
+  this.filterManager = filterManager;
+  var feGaussianBlur = createNS('feGaussianBlur');
+  feGaussianBlur.setAttribute('result', id);
+  filter.appendChild(feGaussianBlur);
+  this.feGaussianBlur = feGaussianBlur;
+}
+
+SVGGaussianBlurEffect.prototype.renderFrame = function (forceRender) {
+  if (forceRender || this.filterManager._mdf) {
+    // Empirical value, matching AE's blur appearance.
+    var kBlurrinessToSigma = 0.3;
+    var sigma = this.filterManager.effectElements[0].p.v * kBlurrinessToSigma;
+
+    // Dimensions mapping:
+    //
+    //   1 -> horizontal & vertical
+    //   2 -> horizontal only
+    //   3 -> vertical only
+    //
+    var dimensions = this.filterManager.effectElements[1].p.v;
+    var sigmaX = (dimensions == 3) ? 0 : sigma; // eslint-disable-line eqeqeq
+    var sigmaY = (dimensions == 2) ? 0 : sigma; // eslint-disable-line eqeqeq
+
+    this.feGaussianBlur.setAttribute('stdDeviation', sigmaX + ' ' + sigmaY);
+
+    // Repeat edges mapping:
+    //
+    //   0 -> off -> duplicate
+    //   1 -> on  -> wrap
+    var edgeMode = (this.filterManager.effectElements[2].p.v == 1) ? 'wrap' : 'duplicate'; // eslint-disable-line eqeqeq
+    this.feGaussianBlur.setAttribute('edgeMode', edgeMode);
+  }
+};
+
+export default SVGGaussianBlurEffect;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGMatte3Effect.js

@@ -0,0 +1,101 @@
+import {
+  createElementID,
+} from '../../../utils/common';
+import createNS from '../../../utils/helpers/svg_elements';
+
+var _svgMatteSymbols = [];
+
+function SVGMatte3Effect(filterElem, filterManager, elem) {
+  this.initialized = false;
+  this.filterManager = filterManager;
+  this.filterElem = filterElem;
+  this.elem = elem;
+  elem.matteElement = createNS('g');
+  elem.matteElement.appendChild(elem.layerElement);
+  elem.matteElement.appendChild(elem.transformedElement);
+  elem.baseElement = elem.matteElement;
+}
+
+SVGMatte3Effect.prototype.findSymbol = function (mask) {
+  var i = 0;
+  var len = _svgMatteSymbols.length;
+  while (i < len) {
+    if (_svgMatteSymbols[i] === mask) {
+      return _svgMatteSymbols[i];
+    }
+    i += 1;
+  }
+  return null;
+};
+
+SVGMatte3Effect.prototype.replaceInParent = function (mask, symbolId) {
+  var parentNode = mask.layerElement.parentNode;
+  if (!parentNode) {
+    return;
+  }
+  var children = parentNode.children;
+  var i = 0;
+  var len = children.length;
+  while (i < len) {
+    if (children[i] === mask.layerElement) {
+      break;
+    }
+    i += 1;
+  }
+  var nextChild;
+  if (i <= len - 2) {
+    nextChild = children[i + 1];
+  }
+  var useElem = createNS('use');
+  useElem.setAttribute('href', '#' + symbolId);
+  if (nextChild) {
+    parentNode.insertBefore(useElem, nextChild);
+  } else {
+    parentNode.appendChild(useElem);
+  }
+};
+
+SVGMatte3Effect.prototype.setElementAsMask = function (elem, mask) {
+  if (!this.findSymbol(mask)) {
+    var symbolId = createElementID();
+    var masker = createNS('mask');
+    masker.setAttribute('id', mask.layerId);
+    masker.setAttribute('mask-type', 'alpha');
+    _svgMatteSymbols.push(mask);
+    var defs = elem.globalData.defs;
+    defs.appendChild(masker);
+    var symbol = createNS('symbol');
+    symbol.setAttribute('id', symbolId);
+    this.replaceInParent(mask, symbolId);
+    symbol.appendChild(mask.layerElement);
+    defs.appendChild(symbol);
+    var useElem = createNS('use');
+    useElem.setAttribute('href', '#' + symbolId);
+    masker.appendChild(useElem);
+    mask.data.hd = false;
+    mask.show();
+  }
+  elem.setMatte(mask.layerId);
+};
+
+SVGMatte3Effect.prototype.initialize = function () {
+  var ind = this.filterManager.effectElements[0].p.v;
+  var elements = this.elem.comp.elements;
+  var i = 0;
+  var len = elements.length;
+  while (i < len) {
+    if (elements[i] && elements[i].data.ind === ind) {
+      this.setElementAsMask(this.elem, elements[i]);
+    }
+    i += 1;
+  }
+  this.initialized = true;
+};
+
+SVGMatte3Effect.prototype.renderFrame = function () {
+  if (!this.initialized) {
+    this.initialize();
+  }
+};
+
+export default SVGMatte3Effect;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGProLevelsFilter.js

@@ -0,0 +1,108 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function SVGProLevelsFilter(filter, filterManager, elem, id) {
+  this.filterManager = filterManager;
+  var effectElements = this.filterManager.effectElements;
+  var feComponentTransfer = createNS('feComponentTransfer');
+
+  // Red
+  if (effectElements[10].p.k || effectElements[10].p.v !== 0 || effectElements[11].p.k || effectElements[11].p.v !== 1 || effectElements[12].p.k || effectElements[12].p.v !== 1 || effectElements[13].p.k || effectElements[13].p.v !== 0 || effectElements[14].p.k || effectElements[14].p.v !== 1) {
+    this.feFuncR = this.createFeFunc('feFuncR', feComponentTransfer);
+  }
+  // Green
+  if (effectElements[17].p.k || effectElements[17].p.v !== 0 || effectElements[18].p.k || effectElements[18].p.v !== 1 || effectElements[19].p.k || effectElements[19].p.v !== 1 || effectElements[20].p.k || effectElements[20].p.v !== 0 || effectElements[21].p.k || effectElements[21].p.v !== 1) {
+    this.feFuncG = this.createFeFunc('feFuncG', feComponentTransfer);
+  }
+  // Blue
+  if (effectElements[24].p.k || effectElements[24].p.v !== 0 || effectElements[25].p.k || effectElements[25].p.v !== 1 || effectElements[26].p.k || effectElements[26].p.v !== 1 || effectElements[27].p.k || effectElements[27].p.v !== 0 || effectElements[28].p.k || effectElements[28].p.v !== 1) {
+    this.feFuncB = this.createFeFunc('feFuncB', feComponentTransfer);
+  }
+  // Alpha
+  if (effectElements[31].p.k || effectElements[31].p.v !== 0 || effectElements[32].p.k || effectElements[32].p.v !== 1 || effectElements[33].p.k || effectElements[33].p.v !== 1 || effectElements[34].p.k || effectElements[34].p.v !== 0 || effectElements[35].p.k || effectElements[35].p.v !== 1) {
+    this.feFuncA = this.createFeFunc('feFuncA', feComponentTransfer);
+  }
+  // RGB
+  if (this.feFuncR || this.feFuncG || this.feFuncB || this.feFuncA) {
+    feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
+    filter.appendChild(feComponentTransfer);
+  }
+
+  if (effectElements[3].p.k || effectElements[3].p.v !== 0 || effectElements[4].p.k || effectElements[4].p.v !== 1 || effectElements[5].p.k || effectElements[5].p.v !== 1 || effectElements[6].p.k || effectElements[6].p.v !== 0 || effectElements[7].p.k || effectElements[7].p.v !== 1) {
+    feComponentTransfer = createNS('feComponentTransfer');
+    feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
+    feComponentTransfer.setAttribute('result', id);
+    filter.appendChild(feComponentTransfer);
+    this.feFuncRComposed = this.createFeFunc('feFuncR', feComponentTransfer);
+    this.feFuncGComposed = this.createFeFunc('feFuncG', feComponentTransfer);
+    this.feFuncBComposed = this.createFeFunc('feFuncB', feComponentTransfer);
+  }
+}
+
+SVGProLevelsFilter.prototype.createFeFunc = function (type, feComponentTransfer) {
+  var feFunc = createNS(type);
+  feFunc.setAttribute('type', 'table');
+  feComponentTransfer.appendChild(feFunc);
+  return feFunc;
+};
+
+SVGProLevelsFilter.prototype.getTableValue = function (inputBlack, inputWhite, gamma, outputBlack, outputWhite) {
+  var cnt = 0;
+  var segments = 256;
+  var perc;
+  var min = Math.min(inputBlack, inputWhite);
+  var max = Math.max(inputBlack, inputWhite);
+  var table = Array.call(null, { length: segments });
+  var colorValue;
+  var pos = 0;
+  var outputDelta = outputWhite - outputBlack;
+  var inputDelta = inputWhite - inputBlack;
+  while (cnt <= 256) {
+    perc = cnt / 256;
+    if (perc <= min) {
+      colorValue = inputDelta < 0 ? outputWhite : outputBlack;
+    } else if (perc >= max) {
+      colorValue = inputDelta < 0 ? outputBlack : outputWhite;
+    } else {
+      colorValue = (outputBlack + outputDelta * Math.pow((perc - inputBlack) / inputDelta, 1 / gamma));
+    }
+    table[pos] = colorValue;
+    pos += 1;
+    cnt += 256 / (segments - 1);
+  }
+  return table.join(' ');
+};
+
+SVGProLevelsFilter.prototype.renderFrame = function (forceRender) {
+  if (forceRender || this.filterManager._mdf) {
+    var val;
+    var effectElements = this.filterManager.effectElements;
+    if (this.feFuncRComposed && (forceRender || effectElements[3].p._mdf || effectElements[4].p._mdf || effectElements[5].p._mdf || effectElements[6].p._mdf || effectElements[7].p._mdf)) {
+      val = this.getTableValue(effectElements[3].p.v, effectElements[4].p.v, effectElements[5].p.v, effectElements[6].p.v, effectElements[7].p.v);
+      this.feFuncRComposed.setAttribute('tableValues', val);
+      this.feFuncGComposed.setAttribute('tableValues', val);
+      this.feFuncBComposed.setAttribute('tableValues', val);
+    }
+
+    if (this.feFuncR && (forceRender || effectElements[10].p._mdf || effectElements[11].p._mdf || effectElements[12].p._mdf || effectElements[13].p._mdf || effectElements[14].p._mdf)) {
+      val = this.getTableValue(effectElements[10].p.v, effectElements[11].p.v, effectElements[12].p.v, effectElements[13].p.v, effectElements[14].p.v);
+      this.feFuncR.setAttribute('tableValues', val);
+    }
+
+    if (this.feFuncG && (forceRender || effectElements[17].p._mdf || effectElements[18].p._mdf || effectElements[19].p._mdf || effectElements[20].p._mdf || effectElements[21].p._mdf)) {
+      val = this.getTableValue(effectElements[17].p.v, effectElements[18].p.v, effectElements[19].p.v, effectElements[20].p.v, effectElements[21].p.v);
+      this.feFuncG.setAttribute('tableValues', val);
+    }
+
+    if (this.feFuncB && (forceRender || effectElements[24].p._mdf || effectElements[25].p._mdf || effectElements[26].p._mdf || effectElements[27].p._mdf || effectElements[28].p._mdf)) {
+      val = this.getTableValue(effectElements[24].p.v, effectElements[25].p.v, effectElements[26].p.v, effectElements[27].p.v, effectElements[28].p.v);
+      this.feFuncB.setAttribute('tableValues', val);
+    }
+
+    if (this.feFuncA && (forceRender || effectElements[31].p._mdf || effectElements[32].p._mdf || effectElements[33].p._mdf || effectElements[34].p._mdf || effectElements[35].p._mdf)) {
+      val = this.getTableValue(effectElements[31].p.v, effectElements[32].p.v, effectElements[33].p.v, effectElements[34].p.v, effectElements[35].p.v);
+      this.feFuncA.setAttribute('tableValues', val);
+    }
+  }
+};
+
+export default SVGProLevelsFilter;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGStrokeEffect.js

@@ -0,0 +1,119 @@
+import { getLocationHref } from '../../../main';
+import {
+  createElementID,
+  bmFloor,
+} from '../../../utils/common';
+import createNS from '../../../utils/helpers/svg_elements';
+
+function SVGStrokeEffect(fil, filterManager, elem) {
+  this.initialized = false;
+  this.filterManager = filterManager;
+  this.elem = elem;
+  this.paths = [];
+}
+
+SVGStrokeEffect.prototype.initialize = function () {
+  var elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
+  var path;
+  var groupPath;
+  var i;
+  var len;
+  if (this.filterManager.effectElements[1].p.v === 1) {
+    len = this.elem.maskManager.masksProperties.length;
+    i = 0;
+  } else {
+    i = this.filterManager.effectElements[0].p.v - 1;
+    len = i + 1;
+  }
+  groupPath = createNS('g');
+  groupPath.setAttribute('fill', 'none');
+  groupPath.setAttribute('stroke-linecap', 'round');
+  groupPath.setAttribute('stroke-dashoffset', 1);
+  for (i; i < len; i += 1) {
+    path = createNS('path');
+    groupPath.appendChild(path);
+    this.paths.push({ p: path, m: i });
+  }
+  if (this.filterManager.effectElements[10].p.v === 3) {
+    var mask = createNS('mask');
+    var id = createElementID();
+    mask.setAttribute('id', id);
+    mask.setAttribute('mask-type', 'alpha');
+    mask.appendChild(groupPath);
+    this.elem.globalData.defs.appendChild(mask);
+    var g = createNS('g');
+    g.setAttribute('mask', 'url(' + getLocationHref() + '#' + id + ')');
+    while (elemChildren[0]) {
+      g.appendChild(elemChildren[0]);
+    }
+    this.elem.layerElement.appendChild(g);
+    this.masker = mask;
+    groupPath.setAttribute('stroke', '#fff');
+  } else if (this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2) {
+    if (this.filterManager.effectElements[10].p.v === 2) {
+      elemChildren = this.elem.layerElement.children || this.elem.layerElement.childNodes;
+      while (elemChildren.length) {
+        this.elem.layerElement.removeChild(elemChildren[0]);
+      }
+    }
+    this.elem.layerElement.appendChild(groupPath);
+    this.elem.layerElement.removeAttribute('mask');
+    groupPath.setAttribute('stroke', '#fff');
+  }
+  this.initialized = true;
+  this.pathMasker = groupPath;
+};
+
+SVGStrokeEffect.prototype.renderFrame = function (forceRender) {
+  if (!this.initialized) {
+    this.initialize();
+  }
+  var i;
+  var len = this.paths.length;
+  var mask;
+  var path;
+  for (i = 0; i < len; i += 1) {
+    if (this.paths[i].m !== -1) {
+      mask = this.elem.maskManager.viewData[this.paths[i].m];
+      path = this.paths[i].p;
+      if (forceRender || this.filterManager._mdf || mask.prop._mdf) {
+        path.setAttribute('d', mask.lastPath);
+      }
+      if (forceRender || this.filterManager.effectElements[9].p._mdf || this.filterManager.effectElements[4].p._mdf || this.filterManager.effectElements[7].p._mdf || this.filterManager.effectElements[8].p._mdf || mask.prop._mdf) {
+        var dasharrayValue;
+        if (this.filterManager.effectElements[7].p.v !== 0 || this.filterManager.effectElements[8].p.v !== 100) {
+          var s = Math.min(this.filterManager.effectElements[7].p.v, this.filterManager.effectElements[8].p.v) * 0.01;
+          var e = Math.max(this.filterManager.effectElements[7].p.v, this.filterManager.effectElements[8].p.v) * 0.01;
+          var l = path.getTotalLength();
+          dasharrayValue = '0 0 0 ' + l * s + ' ';
+          var lineLength = l * (e - s);
+          var segment = 1 + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v * 0.01;
+          var units = Math.floor(lineLength / segment);
+          var j;
+          for (j = 0; j < units; j += 1) {
+            dasharrayValue += '1 ' + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v * 0.01 + ' ';
+          }
+          dasharrayValue += '0 ' + l * 10 + ' 0 0';
+        } else {
+          dasharrayValue = '1 ' + this.filterManager.effectElements[4].p.v * 2 * this.filterManager.effectElements[9].p.v * 0.01;
+        }
+        path.setAttribute('stroke-dasharray', dasharrayValue);
+      }
+    }
+  }
+  if (forceRender || this.filterManager.effectElements[4].p._mdf) {
+    this.pathMasker.setAttribute('stroke-width', this.filterManager.effectElements[4].p.v * 2);
+  }
+
+  if (forceRender || this.filterManager.effectElements[6].p._mdf) {
+    this.pathMasker.setAttribute('opacity', this.filterManager.effectElements[6].p.v);
+  }
+  if (this.filterManager.effectElements[10].p.v === 1 || this.filterManager.effectElements[10].p.v === 2) {
+    if (forceRender || this.filterManager.effectElements[3].p._mdf) {
+      var color = this.filterManager.effectElements[3].p.v;
+      this.pathMasker.setAttribute('stroke', 'rgb(' + bmFloor(color[0] * 255) + ',' + bmFloor(color[1] * 255) + ',' + bmFloor(color[2] * 255) + ')');
+    }
+  }
+};
+
+export default SVGStrokeEffect;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGTintEffect.js

@@ -0,0 +1,47 @@
+import createNS from '../../../utils/helpers/svg_elements';
+import SVGComposableEffect from './SVGComposableEffect';
+import {
+  extendPrototype,
+} from '../../../utils/functionExtensions';
+
+var linearFilterValue = '0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0';
+
+function SVGTintFilter(filter, filterManager, elem, id, source) {
+  this.filterManager = filterManager;
+  var feColorMatrix = createNS('feColorMatrix');
+  feColorMatrix.setAttribute('type', 'matrix');
+  feColorMatrix.setAttribute('color-interpolation-filters', 'linearRGB');
+  feColorMatrix.setAttribute('values', linearFilterValue + ' 1 0');
+  this.linearFilter = feColorMatrix;
+  feColorMatrix.setAttribute('result', id + '_tint_1');
+  filter.appendChild(feColorMatrix);
+  feColorMatrix = createNS('feColorMatrix');
+  feColorMatrix.setAttribute('type', 'matrix');
+  feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
+  feColorMatrix.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
+  feColorMatrix.setAttribute('result', id + '_tint_2');
+  filter.appendChild(feColorMatrix);
+  this.matrixFilter = feColorMatrix;
+  var feMerge = this.createMergeNode(
+    id,
+    [
+      source,
+      id + '_tint_1',
+      id + '_tint_2',
+    ]
+  );
+  filter.appendChild(feMerge);
+}
+extendPrototype([SVGComposableEffect], SVGTintFilter);
+
+SVGTintFilter.prototype.renderFrame = function (forceRender) {
+  if (forceRender || this.filterManager._mdf) {
+    var colorBlack = this.filterManager.effectElements[0].p.v;
+    var colorWhite = this.filterManager.effectElements[1].p.v;
+    var opacity = this.filterManager.effectElements[2].p.v / 100;
+    this.linearFilter.setAttribute('values', linearFilterValue + ' ' + opacity + ' 0');
+    this.matrixFilter.setAttribute('values', (colorWhite[0] - colorBlack[0]) + ' 0 0 0 ' + colorBlack[0] + ' ' + (colorWhite[1] - colorBlack[1]) + ' 0 0 0 ' + colorBlack[1] + ' ' + (colorWhite[2] - colorBlack[2]) + ' 0 0 0 ' + colorBlack[2] + ' 0 0 0 1 0');
+  }
+};
+
+export default SVGTintFilter;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGTransformEffect.js

@@ -0,0 +1,10 @@
+import TransformEffect from '../../../effects/TransformEffect';
+import { extendPrototype } from '../../../utils/functionExtensions';
+
+function SVGTransformEffect(_, filterManager) {
+  this.init(filterManager);
+}
+
+extendPrototype([TransformEffect], SVGTransformEffect);
+
+export default SVGTransformEffect;

node_modules/lottie-web/player/js/elements/svgElements/effects/SVGTritoneFilter.js

@@ -0,0 +1,43 @@
+import createNS from '../../../utils/helpers/svg_elements';
+
+function SVGTritoneFilter(filter, filterManager, elem, id) {
+  this.filterManager = filterManager;
+  var feColorMatrix = createNS('feColorMatrix');
+  feColorMatrix.setAttribute('type', 'matrix');
+  feColorMatrix.setAttribute('color-interpolation-filters', 'linearRGB');
+  feColorMatrix.setAttribute('values', '0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0');
+  filter.appendChild(feColorMatrix);
+  var feComponentTransfer = createNS('feComponentTransfer');
+  feComponentTransfer.setAttribute('color-interpolation-filters', 'sRGB');
+  feComponentTransfer.setAttribute('result', id);
+  this.matrixFilter = feComponentTransfer;
+  var feFuncR = createNS('feFuncR');
+  feFuncR.setAttribute('type', 'table');
+  feComponentTransfer.appendChild(feFuncR);
+  this.feFuncR = feFuncR;
+  var feFuncG = createNS('feFuncG');
+  feFuncG.setAttribute('type', 'table');
+  feComponentTransfer.appendChild(feFuncG);
+  this.feFuncG = feFuncG;
+  var feFuncB = createNS('feFuncB');
+  feFuncB.setAttribute('type', 'table');
+  feComponentTransfer.appendChild(feFuncB);
+  this.feFuncB = feFuncB;
+  filter.appendChild(feComponentTransfer);
+}
+
+SVGTritoneFilter.prototype.renderFrame = function (forceRender) {
+  if (forceRender || this.filterManager._mdf) {
+    var color1 = this.filterManager.effectElements[0].p.v;
+    var color2 = this.filterManager.effectElements[1].p.v;
+    var color3 = this.filterManager.effectElements[2].p.v;
+    var tableR = color3[0] + ' ' + color2[0] + ' ' + color1[0];
+    var tableG = color3[1] + ' ' + color2[1] + ' ' + color1[1];
+    var tableB = color3[2] + ' ' + color2[2] + ' ' + color1[2];
+    this.feFuncR.setAttribute('tableValues', tableR);
+    this.feFuncG.setAttribute('tableValues', tableG);
+    this.feFuncB.setAttribute('tableValues', tableB);
+  }
+};
+
+export default SVGTritoneFilter;