reordered modules, add es6 build

81 files changed, 10025 insertions, 3486 deletions

diff --git a/.gitignore b/.gitignore
index f58d182..ebf7883 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 .idea
+.importjs.js
 public
 site/
 bleed/
@@ -10,4 +11,4 @@ src/index.js
 node_modules/
 .vscode/
 coverage/
-fonts/
\ No newline at end of file
+fonts/
diff --git a/dist/svg.es6.js b/dist/svg.es6.js
new file mode 100644
index 0000000..6188915
--- /dev/null
+++ b/dist/svg.es6.js
@@ -0,0 +1,6682 @@
+/*!
+* svg.js - A lightweight library for manipulating and animating SVG.
+* @version 3.0.0
+* https://svgdotjs.github.io/
+*
+* @copyright Wout Fierens <wout@mick-wout.com>
+* @license MIT
+*
+* BUILT: Tue Nov 06 2018 13:43:56 GMT+0100 (GMT+01:00)
+*/;
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _superPropBase(object, property) {
+  while (!Object.prototype.hasOwnProperty.call(object, property)) {
+    object = _getPrototypeOf(object);
+    if (object === null) break;
+  }
+
+  return object;
+}
+
+function _get(target, property, receiver) {
+  if (typeof Reflect !== "undefined" && Reflect.get) {
+    _get = Reflect.get;
+  } else {
+    _get = function _get(target, property, receiver) {
+      var base = _superPropBase(target, property);
+
+      if (!base) return;
+      var desc = Object.getOwnPropertyDescriptor(base, property);
+
+      if (desc.get) {
+        return desc.get.call(receiver);
+      }
+
+      return desc.value;
+    };
+  }
+
+  return _get(target, property, receiver || target);
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+var methods = {};
+function registerMethods(name, m) {
+  if (Array.isArray(name)) {
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+      for (var _iterator = name[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var _name = _step.value;
+        registerMethods(_name, m);
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+
+    return;
+  }
+
+  if (_typeof(name) === 'object') {
+    var _arr = Object.entries(name);
+
+    for (var _i = 0; _i < _arr.length; _i++) {
+      var _arr$_i = _slicedToArray(_arr[_i], 2),
+          _name2 = _arr$_i[0],
+          _m = _arr$_i[1];
+
+      registerMethods(_name2, _m);
+    }
+
+    return;
+  }
+
+  methods[name] = Object.assign(methods[name] || {}, m);
+}
+function getMethodsFor(name) {
+  return methods[name] || {};
+}
+
+function siblings() {
+  return this.parent().children();
+} // Get the curent position siblings
+
+function position() {
+  return this.parent().index(this);
+} // Get the next element (will return null if there is none)
+
+function next() {
+  return this.siblings()[this.position() + 1];
+} // Get the next element (will return null if there is none)
+
+function prev() {
+  return this.siblings()[this.position() - 1];
+} // Send given element one step forward
+
+function forward() {
+  var i = this.position() + 1;
+  var p = this.parent(); // move node one step forward
+
+  p.removeElement(this).add(this, i); // make sure defs node is always at the top
+
+  if (typeof p.isRoot === 'function' && p.isRoot()) {
+    p.node.appendChild(p.defs().node);
+  }
+
+  return this;
+} // Send given element one step backward
+
+function backward() {
+  var i = this.position();
+
+  if (i > 0) {
+    this.parent().removeElement(this).add(this, i - 1);
+  }
+
+  return this;
+} // Send given element all the way to the front
+
+function front() {
+  var p = this.parent(); // Move node forward
+
+  p.node.appendChild(this.node); // Make sure defs node is always at the top
+
+  if (typeof p.isRoot === 'function' && p.isRoot()) {
+    p.node.appendChild(p.defs().node);
+  }
+
+  return this;
+} // Send given element all the way to the back
+
+function back() {
+  if (this.position() > 0) {
+    this.parent().removeElement(this).add(this, 0);
+  }
+
+  return this;
+} // Inserts a given element before the targeted element
+
+function before(element) {
+  element.remove();
+  var i = this.position();
+  this.parent().add(element, i);
+  return this;
+} // Inserts a given element after the targeted element
+
+function after(element) {
+  element.remove();
+  var i = this.position();
+  this.parent().add(element, i + 1);
+  return this;
+}
+registerMethods('Dom', {
+  siblings: siblings,
+  position: position,
+  next: next,
+  prev: prev,
+  forward: forward,
+  backward: backward,
+  front: front,
+  back: back,
+  before: before,
+  after: after
+});
+
+// Parse unit value
+var numberAndUnit = /^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i; // Parse hex value
+
+var hex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i; // Parse rgb value
+
+var rgb = /rgb\((\d+),(\d+),(\d+)\)/; // Parse reference id
+
+var reference = /(#[a-z0-9\-_]+)/i; // splits a transformation chain
+
+var transforms = /\)\s*,?\s*/; // Whitespace
+
+var whitespace = /\s/g; // Test hex value
+
+var isHex = /^#[a-f0-9]{3,6}$/i; // Test rgb value
+
+var isRgb = /^rgb\(/; // Test css declaration
+
+var isBlank = /^(\s+)?$/; // Test for numeric string
+
+var isNumber = /^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i; // Test for percent value
+
+var isImage = /\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i; // split at whitespace and comma
+
+var delimiter = /[\s,]+/; // The following regex are used to parse the d attribute of a path
+// Matches all hyphens which are not after an exponent
+
+var hyphen = /([^e])-/gi; // Replaces and tests for all path letters
+
+var pathLetters = /[MLHVCSQTAZ]/gi; // yes we need this one, too
+
+var isPathLetter = /[MLHVCSQTAZ]/i; // matches 0.154.23.45
+
+var numbersWithDots = /((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi; // matches .
+
+var dots = /\./g;
+
+function classes() {
+  var attr = this.attr('class');
+  return attr == null ? [] : attr.trim().split(delimiter);
+} // Return true if class exists on the node, false otherwise
+
+
+function hasClass(name) {
+  return this.classes().indexOf(name) !== -1;
+} // Add class to the node
+
+
+function addClass(name) {
+  if (!this.hasClass(name)) {
+    var array = this.classes();
+    array.push(name);
+    this.attr('class', array.join(' '));
+  }
+
+  return this;
+} // Remove class from the node
+
+
+function removeClass(name) {
+  if (this.hasClass(name)) {
+    this.attr('class', this.classes().filter(function (c) {
+      return c !== name;
+    }).join(' '));
+  }
+
+  return this;
+} // Toggle the presence of a class on the node
+
+
+function toggleClass(name) {
+  return this.hasClass(name) ? this.removeClass(name) : this.addClass(name);
+}
+
+registerMethods('Dom', {
+  classes: classes,
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass
+});
+
+// Map function
+function map(array, block) {
+  var i;
+  var il = array.length;
+  var result = [];
+
+  for (i = 0; i < il; i++) {
+    result.push(block(array[i]));
+  }
+
+  return result;
+} // Filter function
+
+function filter(array, block) {
+  var i;
+  var il = array.length;
+  var result = [];
+
+  for (i = 0; i < il; i++) {
+    if (block(array[i])) {
+      result.push(array[i]);
+    }
+  }
+
+  return result;
+} // Degrees to radians
+
+function radians(d) {
+  return d % 360 * Math.PI / 180;
+} // Radians to degrees
+
+function degrees(r) {
+  return r * 180 / Math.PI % 360;
+} // Convert dash-separated-string to camelCase
+
+function camelCase(s) {
+  return s.toLowerCase().replace(/-(.)/g, function (m, g) {
+    return g.toUpperCase();
+  });
+} // Capitalize first letter of a string
+
+function capitalize(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+} // Calculate proportional width and height values when necessary
+
+function proportionalSize(element, width, height) {
+  if (width == null || height == null) {
+    var box = element.bbox();
+
+    if (width == null) {
+      width = box.width / box.height * height;
+    } else if (height == null) {
+      height = box.height / box.width * width;
+    }
+  }
+
+  return {
+    width: width,
+    height: height
+  };
+}
+function getOrigin(o, element) {
+  // Allow origin or around as the names
+  var origin = o.origin; // o.around == null ? o.origin : o.around
+
+  var ox, oy; // Allow the user to pass a string to rotate around a given point
+
+  if (typeof origin === 'string' || origin == null) {
+    // Get the bounding box of the element with no transformations applied
+    var string = (origin || 'center').toLowerCase().trim();
+
+    var _element$bbox = element.bbox(),
+        height = _element$bbox.height,
+        width = _element$bbox.width,
+        x = _element$bbox.x,
+        y = _element$bbox.y; // Calculate the transformed x and y coordinates
+
+
+    var bx = string.includes('left') ? x : string.includes('right') ? x + width : x + width / 2;
+    var by = string.includes('top') ? y : string.includes('bottom') ? y + height : y + height / 2; // Set the bounds eg : "bottom-left", "Top right", "middle" etc...
+
+    ox = o.ox != null ? o.ox : bx;
+    oy = o.oy != null ? o.oy : by;
+  } else {
+    ox = origin[0];
+    oy = origin[1];
+  } // Return the origin as it is if it wasn't a string
+
+
+  return [ox, oy];
+}
+
+function css(style, val) {
+  var ret = {};
+
+  if (arguments.length === 0) {
+    // get full style as object
+    this.node.style.cssText.split(/\s*;\s*/).filter(function (el) {
+      return !!el.length;
+    }).forEach(function (el) {
+      var t = el.split(/\s*:\s*/);
+      ret[t[0]] = t[1];
+    });
+    return ret;
+  }
+
+  if (arguments.length < 2) {
+    // get style properties in the array
+    if (Array.isArray(style)) {
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (var _iterator = style[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var name = _step.value;
+          var cased = camelCase(name);
+          ret[cased] = this.node.style[cased];
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+
+      return ret;
+    } // get style for property
+
+
+    if (typeof style === 'string') {
+      return this.node.style[camelCase(style)];
+    } // set styles in object
+
+
+    if (_typeof(style) === 'object') {
+      for (var _name in style) {
+        // set empty string if null/undefined/'' was given
+        this.node.style[camelCase(_name)] = style[_name] == null || isBlank.test(style[_name]) ? '' : style[_name];
+      }
+    }
+  } // set style for property
+
+
+  if (arguments.length === 2) {
+    this.node.style[camelCase(style)] = val == null || isBlank.test(val) ? '' : val;
+  }
+
+  return this;
+} // Show element
+
+function show() {
+  return this.css('display', '');
+} // Hide element
+
+function hide() {
+  return this.css('display', 'none');
+} // Is element visible?
+
+function visible() {
+  return this.css('display') !== 'none';
+}
+registerMethods('Dom', {
+  css: css,
+  show: show,
+  hide: hide,
+  visible: visible
+});
+
+function data(a, v, r) {
+  if (_typeof(a) === 'object') {
+    for (v in a) {
+      this.data(v, a[v]);
+    }
+  } else if (arguments.length < 2) {
+    try {
+      return JSON.parse(this.attr('data-' + a));
+    } catch (e) {
+      return this.attr('data-' + a);
+    }
+  } else {
+    this.attr('data-' + a, v === null ? null : r === true || typeof v === 'string' || typeof v === 'number' ? v : JSON.stringify(v));
+  }
+
+  return this;
+}
+registerMethods('Dom', {
+  data: data
+});
+
+// Remember arbitrary data
+
+function remember(k, v) {
+  // remember every item in an object individually
+  if (_typeof(arguments[0]) === 'object') {
+    for (var key in k) {
+      this.remember(key, k[key]);
+    }
+  } else if (arguments.length === 1) {
+    // retrieve memory
+    return this.memory()[k];
+  } else {
+    // store memory
+    this.memory()[k] = v;
+  }
+
+  return this;
+} // Erase a given memory
+
+function forget() {
+  if (arguments.length === 0) {
+    this._memory = {};
+  } else {
+    for (var i = arguments.length - 1; i >= 0; i--) {
+      delete this.memory()[arguments[i]];
+    }
+  }
+
+  return this;
+} // return local memory object
+
+function memory() {
+  return this._memory = this._memory || {};
+}
+registerMethods('Dom', {
+  remember: remember,
+  forget: forget,
+  memory: memory
+});
+
+function fullHex(hex$$1) {
+  return hex$$1.length === 4 ? ['#', hex$$1.substring(1, 2), hex$$1.substring(1, 2), hex$$1.substring(2, 3), hex$$1.substring(2, 3), hex$$1.substring(3, 4), hex$$1.substring(3, 4)].join('') : hex$$1;
+} // Component to hex value
+
+
+function compToHex(comp) {
+  var hex$$1 = comp.toString(16);
+  return hex$$1.length === 1 ? '0' + hex$$1 : hex$$1;
+}
+
+var Color =
+/*#__PURE__*/
+function () {
+  function Color() {
+    _classCallCheck(this, Color);
+
+    this.init.apply(this, arguments);
+  }
+
+  _createClass(Color, [{
+    key: "init",
+    value: function init(color, g, b) {
+      var match; // initialize defaults
+
+      this.r = 0;
+      this.g = 0;
+      this.b = 0;
+      if (!color) return; // parse color
+
+      if (typeof color === 'string') {
+        if (isRgb.test(color)) {
+          // get rgb values
+          match = rgb.exec(color.replace(whitespace, '')); // parse numeric values
+
+          this.r = parseInt(match[1]);
+          this.g = parseInt(match[2]);
+          this.b = parseInt(match[3]);
+        } else if (isHex.test(color)) {
+          // get hex values
+          match = hex.exec(fullHex(color)); // parse numeric values
+
+          this.r = parseInt(match[1], 16);
+          this.g = parseInt(match[2], 16);
+          this.b = parseInt(match[3], 16);
+        }
+      } else if (Array.isArray(color)) {
+        this.r = color[0];
+        this.g = color[1];
+        this.b = color[2];
+      } else if (_typeof(color) === 'object') {
+        this.r = color.r;
+        this.g = color.g;
+        this.b = color.b;
+      } else if (arguments.length === 3) {
+        this.r = color;
+        this.g = g;
+        this.b = b;
+      }
+    } // Default to hex conversion
+
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.toHex();
+    }
+  }, {
+    key: "toArray",
+    value: function toArray() {
+      return [this.r, this.g, this.b];
+    } // Build hex value
+
+  }, {
+    key: "toHex",
+    value: function toHex() {
+      return '#' + compToHex(Math.round(this.r)) + compToHex(Math.round(this.g)) + compToHex(Math.round(this.b));
+    } // Build rgb value
+
+  }, {
+    key: "toRgb",
+    value: function toRgb() {
+      return 'rgb(' + [this.r, this.g, this.b].join() + ')';
+    } // Calculate true brightness
+
+  }, {
+    key: "brightness",
+    value: function brightness() {
+      return this.r / 255 * 0.30 + this.g / 255 * 0.59 + this.b / 255 * 0.11;
+    } // Testers
+    // Test if given value is a color string
+
+  }], [{
+    key: "test",
+    value: function test(color) {
+      color += '';
+      return isHex.test(color) || isRgb.test(color);
+    } // Test if given value is a rgb object
+
+  }, {
+    key: "isRgb",
+    value: function isRgb$$1(color) {
+      return color && typeof color.r === 'number' && typeof color.g === 'number' && typeof color.b === 'number';
+    } // Test if given value is a color
+
+  }, {
+    key: "isColor",
+    value: function isColor(color) {
+      return this.isRgb(color) || this.test(color);
+    }
+  }]);
+
+  return Color;
+}();
+
+// Default namespaces
+var ns = 'http://www.w3.org/2000/svg';
+var xmlns = 'http://www.w3.org/2000/xmlns/';
+var xlink = 'http://www.w3.org/1999/xlink';
+var svgjs = 'http://svgjs.com/svgjs';
+
+var Base = function Base() {
+  _classCallCheck(this, Base);
+};
+
+var elements = {};
+var root = Symbol('root'); // Method for element creation
+
+function makeNode(name) {
+  // create element
+  return document.createElementNS(ns, name);
+}
+function makeInstance(element) {
+  if (element instanceof Base) return element;
+
+  if (_typeof(element) === 'object') {
+    return adopt(element);
+  }
+
+  if (element == null) {
+    return new elements[root]();
+  }
+
+  if (typeof element === 'string' && element.charAt(0) !== '<') {
+    return adopt(document.querySelector(element));
+  }
+
+  var node = makeNode('svg');
+  node.innerHTML = element; // We can use firstChild here because we know,
+  // that the first char is < and thus an element
+
+  element = adopt(node.firstChild);
+  return element;
+}
+function nodeOrNew(name, node) {
+  return node || makeNode(name);
+} // Adopt existing svg elements
+
+function adopt(node) {
+  // check for presence of node
+  if (!node) return null; // make sure a node isn't already adopted
+
+  if (node.instance instanceof Base) return node.instance;
+
+  if (!(node instanceof window.SVGElement)) {
+    return new elements.HtmlNode(node);
+  } // initialize variables
+
+
+  var element; // adopt with element-specific settings
+
+  if (node.nodeName === 'svg') {
+    element = new elements[root](node);
+  } else if (node.nodeName === 'linearGradient' || node.nodeName === 'radialGradient') {
+    element = new elements.Gradient(node);
+  } else if (elements[capitalize(node.nodeName)]) {
+    element = new elements[capitalize(node.nodeName)](node);
+  } else {
+    element = new elements.Bare(node);
+  }
+
+  return element;
+}
+function register(element) {
+  var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : element.name;
+  var asRoot = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  elements[name] = element;
+  if (asRoot) elements[root] = element;
+  return element;
+}
+function getClass(name) {
+  return elements[name];
+} // Element id sequence
+
+var did = 1000; // Get next named element id
+
+function eid(name) {
+  return 'Svgjs' + capitalize(name) + did++;
+} // Deep new id assignment
+
+function assignNewId(node) {
+  // do the same for SVG child nodes as well
+  for (var i = node.children.length - 1; i >= 0; i--) {
+    assignNewId(node.children[i]);
+  }
+
+  if (node.id) {
+    return adopt(node).id(eid(node.nodeName));
+  }
+
+  return adopt(node);
+} // Method for extending objects
+
+function extend(modules, methods) {
+  var key, i;
+  modules = Array.isArray(modules) ? modules : [modules];
+
+  for (i = modules.length - 1; i >= 0; i--) {
+    for (key in methods) {
+      modules[i].prototype[key] = methods[key];
+    }
+  }
+}
+
+var listenerId = 0;
+
+function getEvents(node) {
+  var n = makeInstance(node).getEventHolder();
+  if (!n.events) n.events = {};
+  return n.events;
+}
+
+function getEventTarget(node) {
+  return makeInstance(node).getEventTarget();
+}
+
+function clearEvents(node) {
+  var n = makeInstance(node).getEventHolder();
+  if (n.events) n.events = {};
+} // Add event binder in the SVG namespace
+
+
+function on(node, events, listener, binding, options) {
+  var l = listener.bind(binding || node);
+  var bag = getEvents(node);
+  var n = getEventTarget(node); // events can be an array of events or a string of events
+
+  events = Array.isArray(events) ? events : events.split(delimiter); // add id to listener
+
+  if (!listener._svgjsListenerId) {
+    listener._svgjsListenerId = ++listenerId;
+  }
+
+  events.forEach(function (event) {
+    var ev = event.split('.')[0];
+    var ns = event.split('.')[1] || '*'; // ensure valid object
+
+    bag[ev] = bag[ev] || {};
+    bag[ev][ns] = bag[ev][ns] || {}; // reference listener
+
+    bag[ev][ns][listener._svgjsListenerId] = l; // add listener
+
+    n.addEventListener(ev, l, options || false);
+  });
+} // Add event unbinder in the SVG namespace
+
+function off(node, events, listener, options) {
+  var bag = getEvents(node);
+  var n = getEventTarget(node); // listener can be a function or a number
+
+  if (typeof listener === 'function') {
+    listener = listener._svgjsListenerId;
+    if (!listener) return;
+  } // events can be an array of events or a string or undefined
+
+
+  events = Array.isArray(events) ? events : (events || '').split(delimiter);
+  events.forEach(function (event) {
+    var ev = event && event.split('.')[0];
+    var ns = event && event.split('.')[1];
+    var namespace, l;
+
+    if (listener) {
+      // remove listener reference
+      if (bag[ev] && bag[ev][ns || '*']) {
+        // removeListener
+        n.removeEventListener(ev, bag[ev][ns || '*'][listener], options || false);
+        delete bag[ev][ns || '*'][listener];
+      }
+    } else if (ev && ns) {
+      // remove all listeners for a namespaced event
+      if (bag[ev] && bag[ev][ns]) {
+        for (l in bag[ev][ns]) {
+          off(n, [ev, ns].join('.'), l);
+        }
+
+        delete bag[ev][ns];
+      }
+    } else if (ns) {
+      // remove all listeners for a specific namespace
+      for (event in bag) {
+        for (namespace in bag[event]) {
+          if (ns === namespace) {
+            off(n, [event, ns].join('.'));
+          }
+        }
+      }
+    } else if (ev) {
+      // remove all listeners for the event
+      if (bag[ev]) {
+        for (namespace in bag[ev]) {
+          off(n, [ev, namespace].join('.'));
+        }
+
+        delete bag[ev];
+      }
+    } else {
+      // remove all listeners on a given node
+      for (event in bag) {
+        off(n, event);
+      }
+
+      clearEvents(node);
+    }
+  });
+}
+function dispatch(node, event, data) {
+  var n = getEventTarget(node); // Dispatch event
+
+  if (event instanceof window.Event) {
+    n.dispatchEvent(event);
+  } else {
+    event = new window.CustomEvent(event, {
+      detail: data,
+      cancelable: true
+    });
+    n.dispatchEvent(event);
+  }
+
+  return event;
+}
+
+var EventTarget =
+/*#__PURE__*/
+function (_Base) {
+  _inherits(EventTarget, _Base);
+
+  function EventTarget() {
+    var _this;
+
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref$events = _ref.events,
+        events = _ref$events === void 0 ? {} : _ref$events;
+
+    _classCallCheck(this, EventTarget);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(EventTarget).call(this));
+    _this.events = events;
+    return _this;
+  }
+
+  _createClass(EventTarget, [{
+    key: "addEventListener",
+    value: function addEventListener() {} // Bind given event to listener
+
+  }, {
+    key: "on",
+    value: function on$$1(event, listener, binding, options) {
+      on(this, event, listener, binding, options);
+
+      return this;
+    } // Unbind event from listener
+
+  }, {
+    key: "off",
+    value: function off$$1(event, listener) {
+      off(this, event, listener);
+
+      return this;
+    }
+  }, {
+    key: "dispatch",
+    value: function dispatch$$1(event, data) {
+      return dispatch(this, event, data);
+    }
+  }, {
+    key: "dispatchEvent",
+    value: function dispatchEvent(event) {
+      var bag = this.getEventHolder().events;
+      if (!bag) return true;
+      var events = bag[event.type];
+
+      for (var i in events) {
+        for (var j in events[i]) {
+          events[i][j](event);
+        }
+      }
+
+      return !event.defaultPrevented;
+    } // Fire given event
+
+  }, {
+    key: "fire",
+    value: function fire(event, data) {
+      this.dispatch(event, data);
+      return this;
+    }
+  }, {
+    key: "getEventHolder",
+    value: function getEventHolder() {
+      return this;
+    }
+  }, {
+    key: "getEventTarget",
+    value: function getEventTarget() {
+      return this;
+    }
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener() {}
+  }]);
+
+  return EventTarget;
+}(Base); // Add events to elements
+var methods$1 = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove', 'mouseenter', 'mouseleave', 'touchstart', 'touchmove', 'touchleave', 'touchend', 'touchcancel'].reduce(function (last, event) {
+  // add event to Element
+  var fn = function fn(f) {
+    if (f === null) {
+      off(this, event);
+    } else {
+      on(this, event, f);
+    }
+
+    return this;
+  };
+
+  last[event] = fn;
+  return last;
+}, {});
+registerMethods('Element', methods$1);
+
+function noop() {} // Default animation values
+
+var timeline = {
+  duration: 400,
+  ease: '>',
+  delay: 0 // Default attribute values
+
+};
+var attrs = {
+  // fill and stroke
+  'fill-opacity': 1,
+  'stroke-opacity': 1,
+  'stroke-width': 0,
+  'stroke-linejoin': 'miter',
+  'stroke-linecap': 'butt',
+  fill: '#000000',
+  stroke: '#000000',
+  opacity: 1,
+  // position
+  x: 0,
+  y: 0,
+  cx: 0,
+  cy: 0,
+  // size
+  width: 0,
+  height: 0,
+  // radius
+  r: 0,
+  rx: 0,
+  ry: 0,
+  // gradient
+  offset: 0,
+  'stop-opacity': 1,
+  'stop-color': '#000000',
+  // text
+  'font-size': 16,
+  'font-family': 'Helvetica, Arial, sans-serif',
+  'text-anchor': 'start'
+};
+
+var defaults = /*#__PURE__*/Object.freeze({
+  noop: noop,
+  timeline: timeline,
+  attrs: attrs
+});
+
+/* eslint no-new-func: "off" */
+var subClassArray = function () {
+  try {
+    // try es6 subclassing
+    return Function('name', 'baseClass', '_constructor', ['baseClass = baseClass || Array', 'return {', '[name]: class extends baseClass {', 'constructor (...args) {', 'super(...args)', '_constructor && _constructor.apply(this, args)', '}', '}', '}[name]'].join('\n'));
+  } catch (e) {
+    // Use es5 approach
+    return function (name) {
+      var baseClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Array;
+
+      var _constructor = arguments.length > 2 ? arguments[2] : undefined;
+
+      var Arr = function Arr() {
+        baseClass.apply(this, arguments);
+        _constructor && _constructor.apply(this, arguments);
+      };
+
+      Arr.prototype = Object.create(baseClass.prototype);
+      Arr.prototype.constructor = Arr;
+      return Arr;
+    };
+  }
+}();
+
+var SVGArray = subClassArray('SVGArray', Array, function (arr) {
+  this.init(arr);
+});
+extend(SVGArray, {
+  init: function init(arr) {
+    this.length = 0;
+    this.push.apply(this, _toConsumableArray(this.parse(arr)));
+  },
+  toArray: function toArray() {
+    return Array.prototype.concat.apply([], this);
+  },
+  toString: function toString() {
+    return this.join(' ');
+  },
+  // Flattens the array if needed
+  valueOf: function valueOf() {
+    var ret = [];
+    ret.push.apply(ret, _toConsumableArray(this));
+    return ret;
+  },
+  // Parse whitespace separated string
+  parse: function parse() {
+    var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    // If already is an array, no need to parse it
+    if (array instanceof Array) return array;
+    return array.trim().split(delimiter).map(parseFloat);
+  },
+  clone: function clone() {
+    return new this.constructor(this);
+  },
+  toSet: function toSet() {
+    return new Set(this);
+  }
+});
+
+var SVGNumber =
+/*#__PURE__*/
+function () {
+  // Initialize
+  function SVGNumber() {
+    _classCallCheck(this, SVGNumber);
+
+    this.init.apply(this, arguments);
+  }
+
+  _createClass(SVGNumber, [{
+    key: "init",
+    value: function init(value, unit) {
+      unit = Array.isArray(value) ? value[1] : unit;
+      value = Array.isArray(value) ? value[0] : value; // initialize defaults
+
+      this.value = 0;
+      this.unit = unit || ''; // parse value
+
+      if (typeof value === 'number') {
+        // ensure a valid numeric value
+        this.value = isNaN(value) ? 0 : !isFinite(value) ? value < 0 ? -3.4e+38 : +3.4e+38 : value;
+      } else if (typeof value === 'string') {
+        unit = value.match(numberAndUnit);
+
+        if (unit) {
+          // make value numeric
+          this.value = parseFloat(unit[1]); // normalize
+
+          if (unit[5] === '%') {
+            this.value /= 100;
+          } else if (unit[5] === 's') {
+            this.value *= 1000;
+          } // store unit
+
+
+          this.unit = unit[5];
+        }
+      } else {
+        if (value instanceof SVGNumber) {
+          this.value = value.valueOf();
+          this.unit = value.unit;
+        }
+      }
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return (this.unit === '%' ? ~~(this.value * 1e8) / 1e6 : this.unit === 's' ? this.value / 1e3 : this.value) + this.unit;
+    }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return this.toString();
+    }
+  }, {
+    key: "toArray",
+    value: function toArray() {
+      return [this.value, this.unit];
+    }
+  }, {
+    key: "valueOf",
+    value: function valueOf() {
+      return this.value;
+    } // Add number
+
+  }, {
+    key: "plus",
+    value: function plus(number) {
+      number = new SVGNumber(number);
+      return new SVGNumber(this + number, this.unit || number.unit);
+    } // Subtract number
+
+  }, {
+    key: "minus",
+    value: function minus(number) {
+      number = new SVGNumber(number);
+      return new SVGNumber(this - number, this.unit || number.unit);
+    } // Multiply number
+
+  }, {
+    key: "times",
+    value: function times(number) {
+      number = new SVGNumber(number);
+      return new SVGNumber(this * number, this.unit || number.unit);
+    } // Divide number
+
+  }, {
+    key: "divide",
+    value: function divide(number) {
+      number = new SVGNumber(number);
+      return new SVGNumber(this / number, this.unit || number.unit);
+    }
+  }]);
+
+  return SVGNumber;
+}();
+
+function attr(attr, val, ns) {
+  // act as full getter
+  if (attr == null) {
+    // get an object of attributes
+    attr = {};
+    val = this.node.attributes;
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+      for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var node = _step.value;
+        attr[node.nodeName] = isNumber.test(node.nodeValue) ? parseFloat(node.nodeValue) : node.nodeValue;
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+
+    return attr;
+  } else if (Array.isArray(attr)) ; else if (_typeof(attr) === 'object') {
+    // apply every attribute individually if an object is passed
+    for (val in attr) {
+      this.attr(val, attr[val]);
+    }
+  } else if (val === null) {
+    // remove value
+    this.node.removeAttribute(attr);
+  } else if (val == null) {
+    // act as a getter if the first and only argument is not an object
+    val = this.node.getAttribute(attr);
+    return val == null ? attrs[attr] // FIXME: do we need to return defaults?
+    : isNumber.test(val) ? parseFloat(val) : val;
+  } else {
+    // convert image fill and stroke to patterns
+    if (attr === 'fill' || attr === 'stroke') {
+      if (isImage.test(val)) {
+        val = this.doc().defs().image(val);
+      }
+    } // FIXME: This is fine, but what about the lines above?
+    // How does attr know about image()?
+
+
+    while (typeof val.attrHook === 'function') {
+      val = val.attrHook(this, attr);
+    } // ensure correct numeric values (also accepts NaN and Infinity)
+
+
+    if (typeof val === 'number') {
+      val = new SVGNumber(val);
+    } else if (Color.isColor(val)) {
+      // ensure full hex color
+      val = new Color(val);
+    } else if (val.constructor === Array) {
+      // Check for plain arrays and parse array values
+      val = new SVGArray(val);
+    } // if the passed attribute is leading...
+
+
+    if (attr === 'leading') {
+      // ... call the leading method instead
+      if (this.leading) {
+        this.leading(val);
+      }
+    } else {
+      // set given attribute on node
+      typeof ns === 'string' ? this.node.setAttributeNS(ns, attr, val.toString()) : this.node.setAttribute(attr, val.toString());
+    } // rebuild if required
+
+
+    if (this.rebuild && (attr === 'font-size' || attr === 'x')) {
+      this.rebuild();
+    }
+  }
+
+  return this;
+}
+
+var Dom =
+/*#__PURE__*/
+function (_EventTarget) {
+  _inherits(Dom, _EventTarget);
+
+  function Dom(node) {
+    var _this;
+
+    _classCallCheck(this, Dom);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Dom).call(this, node));
+    _this.node = node;
+    _this.type = node.nodeName;
+    return _this;
+  } // Add given element at a position
+
+
+  _createClass(Dom, [{
+    key: "add",
+    value: function add(element, i) {
+      element = makeInstance(element);
+
+      if (i == null) {
+        this.node.appendChild(element.node);
+      } else if (element.node !== this.node.childNodes[i]) {
+        this.node.insertBefore(element.node, this.node.childNodes[i]);
+      }
+
+      return this;
+    } // Add element to given container and return self
+
+  }, {
+    key: "addTo",
+    value: function addTo(parent) {
+      return makeInstance(parent).put(this);
+    } // Returns all child elements
+
+  }, {
+    key: "children",
+    value: function children() {
+      return map(this.node.children, function (node) {
+        return adopt(node);
+      });
+    } // Remove all elements in this container
+
+  }, {
+    key: "clear",
+    value: function clear() {
+      // remove children
+      while (this.node.hasChildNodes()) {
+        this.node.removeChild(this.node.lastChild);
+      } // remove defs reference
+
+
+      delete this._defs;
+      return this;
+    } // Clone element
+
+  }, {
+    key: "clone",
+    value: function clone(parent) {
+      // write dom data to the dom so the clone can pickup the data
+      this.writeDataToDom(); // clone element and assign new id
+
+      var clone = assignNewId(this.node.cloneNode(true)); // insert the clone in the given parent or after myself
+
+      if (parent) parent.add(clone); // FIXME: after might not be available here
+      else this.after(clone);
+      return clone;
+    } // Iterates over all children and invokes a given block
+
+  }, {
+    key: "each",
+    value: function each(block, deep) {
+      var children = this.children();
+      var i, il;
+
+      for (i = 0, il = children.length; i < il; i++) {
+        block.apply(children[i], [i, children]);
+
+        if (deep) {
+          children[i].each(block, deep);
+        }
+      }
+
+      return this;
+    } // Get first child
+
+  }, {
+    key: "first",
+    value: function first() {
+      return adopt(this.node.firstChild);
+    } // Get a element at the given index
+
+  }, {
+    key: "get",
+    value: function get(i) {
+      return adopt(this.node.childNodes[i]);
+    }
+  }, {
+    key: "getEventHolder",
+    value: function getEventHolder() {
+      return this.node;
+    }
+  }, {
+    key: "getEventTarget",
+    value: function getEventTarget() {
+      return this.node;
+    } // Checks if the given element is a child
+
+  }, {
+    key: "has",
+    value: function has(element) {
+      return this.index(element) >= 0;
+    } // Get / set id
+
+  }, {
+    key: "id",
+    value: function id(_id) {
+      // generate new id if no id set
+      if (typeof _id === 'undefined' && !this.node.id) {
+        this.node.id = eid(this.type);
+      } // dont't set directly width this.node.id to make `null` work correctly
+
+
+      return this.attr('id', _id);
+    } // Gets index of given element
+
+  }, {
+    key: "index",
+    value: function index(element) {
+      return [].slice.call(this.node.childNodes).indexOf(element.node);
+    } // Get the last child
+
+  }, {
+    key: "last",
+    value: function last() {
+      return adopt(this.node.lastChild);
+    } // matches the element vs a css selector
+
+  }, {
+    key: "matches",
+    value: function matches(selector) {
+      var el = this.node;
+      return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
+    } // Returns the svg node to call native svg methods on it
+
+  }, {
+    key: "native",
+    value: function native() {
+      return this.node;
+    } // Returns the parent element instance
+
+  }, {
+    key: "parent",
+    value: function parent(type) {
+      var parent = this; // check for parent
+
+      if (!parent.node.parentNode) return null; // get parent element
+
+      parent = adopt(parent.node.parentNode);
+      if (!type) return parent; // loop trough ancestors if type is given
+
+      while (parent && parent.node instanceof window.SVGElement) {
+        if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) return parent;
+        parent = adopt(parent.node.parentNode);
+      }
+    } // Basically does the same as `add()` but returns the added element instead
+
+  }, {
+    key: "put",
+    value: function put(element, i) {
+      this.add(element, i);
+      return element;
+    } // Add element to given container and return container
+
+  }, {
+    key: "putIn",
+    value: function putIn(parent) {
+      return makeInstance(parent).add(this);
+    } // Remove element
+
+  }, {
+    key: "remove",
+    value: function remove() {
+      if (this.parent()) {
+        this.parent().removeElement(this);
+      }
+
+      return this;
+    } // Remove a given child
+
+  }, {
+    key: "removeElement",
+    value: function removeElement(element) {
+      this.node.removeChild(element.node);
+      return this;
+    } // Replace element
+
+  }, {
+    key: "replace",
+    value: function replace(element) {
+      // FIXME: after() might not be available here
+      this.after(element).remove();
+      return element;
+    } // Return id on string conversion
+
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.id();
+    } // Import raw svg
+
+  }, {
+    key: "svg",
+    value: function svg(_svg) {
+      var well, len; // act as a setter if svg is given
+
+      if (_svg) {
+        // create temporary holder
+        well = document.createElementNS(ns, 'svg'); // dump raw svg
+
+        well.innerHTML = _svg; // transplant nodes
+
+        for (len = well.children.length; len--;) {
+          this.node.appendChild(well.firstElementChild);
+        } // otherwise act as a getter
+
+      } else {
+        // write svgjs data to the dom
+        this.writeDataToDom();
+        return this.node.outerHTML;
+      }
+
+      return this;
+    } // write svgjs data to the dom
+
+  }, {
+    key: "writeDataToDom",
+    value: function writeDataToDom() {
+      // dump variables recursively
+      this.each(function () {
+        this.writeDataToDom();
+      });
+      return this;
+    }
+  }]);
+
+  return Dom;
+}(EventTarget);
+extend(Dom, {
+  attr: attr
+});
+
+var Doc = getClass(root);
+
+var Element =
+/*#__PURE__*/
+function (_Dom) {
+  _inherits(Element, _Dom);
+
+  function Element(node) {
+    var _this;
+
+    _classCallCheck(this, Element);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Element).call(this, node)); // initialize data object
+
+    _this.dom = {}; // create circular reference
+
+    _this.node.instance = _assertThisInitialized(_assertThisInitialized(_this));
+
+    if (node.hasAttribute('svgjs:data')) {
+      // pull svgjs data from the dom (getAttributeNS doesn't work in html5)
+      _this.setData(JSON.parse(node.getAttribute('svgjs:data')) || {});
+    }
+
+    return _this;
+  } // Move element by its center
+
+
+  _createClass(Element, [{
+    key: "center",
+    value: function center(x, y) {
+      return this.cx(x).cy(y);
+    } // Move by center over x-axis
+
+  }, {
+    key: "cx",
+    value: function cx(x) {
+      return x == null ? this.x() + this.width() / 2 : this.x(x - this.width() / 2);
+    } // Move by center over y-axis
+
+  }, {
+    key: "cy",
+    value: function cy(y) {
+      return y == null ? this.y() + this.height() / 2 : this.y(y - this.height() / 2);
+    } // Get defs
+
+  }, {
+    key: "defs",
+    value: function defs() {
+      return this.doc().defs();
+    } // Get parent document
+
+  }, {
+    key: "doc",
+    value: function doc() {
+      var p = this.parent(Doc);
+      return p && p.doc();
+    }
+  }, {
+    key: "getEventHolder",
+    value: function getEventHolder() {
+      return this;
+    } // Set height of element
+
+  }, {
+    key: "height",
+    value: function height(_height) {
+      return this.attr('height', _height);
+    } // Checks whether the given point inside the bounding box of the element
+
+  }, {
+    key: "inside",
+    value: function inside(x, y) {
+      var box = this.bbox();
+      return x > box.x && y > box.y && x < box.x + box.width && y < box.y + box.height;
+    } // Move element to given x and y values
+
+  }, {
+    key: "move",
+    value: function move(x, y) {
+      return this.x(x).y(y);
+    } // return array of all ancestors of given type up to the root svg
+
+  }, {
+    key: "parents",
+    value: function parents(type) {
+      var parents = [];
+      var parent = this;
+
+      do {
+        parent = parent.parent(type);
+        if (!parent || parent instanceof getClass('HtmlNode')) break;
+        parents.push(parent);
+      } while (parent.parent);
+
+      return parents;
+    } // Get referenced element form attribute value
+
+  }, {
+    key: "reference",
+    value: function reference$$1(attr) {
+      attr = this.attr(attr);
+      if (!attr) return null;
+      var m = attr.match(reference);
+      return m ? makeInstance(m[1]) : null;
+    } // set given data to the elements data property
+
+  }, {
+    key: "setData",
+    value: function setData(o) {
+      this.dom = o;
+      return this;
+    } // Set element size to given width and height
+
+  }, {
+    key: "size",
+    value: function size(width, height) {
+      var p = proportionalSize(this, width, height);
+      return this.width(new SVGNumber(p.width)).height(new SVGNumber(p.height));
+    } // Set width of element
+
+  }, {
+    key: "width",
+    value: function width(_width) {
+      return this.attr('width', _width);
+    } // write svgjs data to the dom
+
+  }, {
+    key: "writeDataToDom",
+    value: function writeDataToDom() {
+      // remove previously set data
+      this.node.removeAttribute('svgjs:data');
+
+      if (Object.keys(this.dom).length) {
+        this.node.setAttribute('svgjs:data', JSON.stringify(this.dom)); // see #428
+      }
+
+      return _get(_getPrototypeOf(Element.prototype), "writeDataToDom", this).call(this);
+    } // Move over x-axis
+
+  }, {
+    key: "x",
+    value: function x(_x) {
+      return this.attr('x', _x);
+    } // Move over y-axis
+
+  }, {
+    key: "y",
+    value: function y(_y) {
+      return this.attr('y', _y);
+    }
+  }]);
+
+  return Element;
+}(Dom);
+
+var Container =
+/*#__PURE__*/
+function (_Element) {
+  _inherits(Container, _Element);
+
+  function Container() {
+    _classCallCheck(this, Container);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Container).apply(this, arguments));
+  }
+
+  _createClass(Container, [{
+    key: "flatten",
+    value: function flatten(parent) {
+      this.each(function () {
+        if (this instanceof Container) return this.flatten(parent).ungroup(parent);
+        return this.toParent(parent);
+      }); // we need this so that Doc does not get removed
+
+      this.node.firstElementChild || this.remove();
+      return this;
+    }
+  }, {
+    key: "ungroup",
+    value: function ungroup(parent) {
+      parent = parent || this.parent();
+      this.each(function () {
+        return this.toParent(parent);
+      });
+      this.remove();
+      return this;
+    }
+  }]);
+
+  return Container;
+}(Element);
+
+var Defs =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(Defs, _Container);
+
+  function Defs(node) {
+    _classCallCheck(this, Defs);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Defs).call(this, nodeOrNew('defs', node), Defs));
+  }
+
+  _createClass(Defs, [{
+    key: "flatten",
+    value: function flatten() {
+      return this;
+    }
+  }, {
+    key: "ungroup",
+    value: function ungroup() {
+      return this;
+    }
+  }]);
+
+  return Defs;
+}(Container);
+register(Defs);
+
+var Doc$1 =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(Doc, _Container);
+
+  function Doc(node) {
+    var _this;
+
+    _classCallCheck(this, Doc);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Doc).call(this, nodeOrNew('svg', node), Doc));
+
+    _this.namespace();
+
+    return _this;
+  }
+
+  _createClass(Doc, [{
+    key: "isRoot",
+    value: function isRoot() {
+      return !this.node.parentNode || !(this.node.parentNode instanceof window.SVGElement) || this.node.parentNode.nodeName === '#document';
+    } // Check if this is a root svg
+    // If not, call docs from this element
+
+  }, {
+    key: "doc",
+    value: function doc() {
+      if (this.isRoot()) return this;
+      return _get(_getPrototypeOf(Doc.prototype), "doc", this).call(this);
+    } // Add namespaces
+
+  }, {
+    key: "namespace",
+    value: function namespace() {
+      if (!this.isRoot()) return this.doc().namespace();
+      return this.attr({
+        xmlns: ns,
+        version: '1.1'
+      }).attr('xmlns:xlink', xlink, xmlns).attr('xmlns:svgjs', svgjs, xmlns);
+    } // Creates and returns defs element
+
+  }, {
+    key: "defs",
+    value: function defs() {
+      if (!this.isRoot()) return this.doc().defs();
+      return adopt(this.node.getElementsByTagName('defs')[0]) || this.put(new Defs());
+    } // custom parent method
+
+  }, {
+    key: "parent",
+    value: function parent(type) {
+      if (this.isRoot()) {
+        return this.node.parentNode.nodeName === '#document' ? null : adopt(this.node.parentNode);
+      }
+
+      return _get(_getPrototypeOf(Doc.prototype), "parent", this).call(this, type);
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      // remove children
+      while (this.node.hasChildNodes()) {
+        this.node.removeChild(this.node.lastChild);
+      }
+
+      return this;
+    }
+  }]);
+
+  return Doc;
+}(Container);
+registerMethods({
+  Container: {
+    // Create nested svg document
+    nested: function nested() {
+      return this.put(new Doc$1());
+    }
+  }
+});
+register(Doc$1, 'Doc', true);
+
+function parser() {
+  // Reuse cached element if possible
+  if (!parser.nodes) {
+    var svg = new Doc$1().size(2, 0);
+    svg.node.cssText = ['opacity: 0', 'position: absolute', 'left: -100%', 'top: -100%', 'overflow: hidden'].join(';');
+    var path = svg.path().node;
+    parser.nodes = {
+      svg: svg,
+      path: path
+    };
+  }
+
+  if (!parser.nodes.svg.node.parentNode) {
+    var b = document.body || document.documentElement;
+    parser.nodes.svg.addTo(b);
+  }
+
+  return parser.nodes;
+}
+
+var Point =
+/*#__PURE__*/
+function () {
+  // Initialize
+  function Point(x, y, base) {
+    _classCallCheck(this, Point);
+
+    var source;
+    base = base || {
+      x: 0,
+      y: 0 // ensure source as object
+
+    };
+    source = Array.isArray(x) ? {
+      x: x[0],
+      y: x[1]
+    } : _typeof(x) === 'object' ? {
+      x: x.x,
+      y: x.y
+    } : {
+      x: x,
+      y: y // merge source
+
+    };
+    this.x = source.x == null ? base.x : source.x;
+    this.y = source.y == null ? base.y : source.y;
+  } // Clone point
+
+
+  _createClass(Point, [{
+    key: "clone",
+    value: function clone() {
+      return new Point(this);
+    } // Convert to native SVGPoint
+
+  }, {
+    key: "native",
+    value: function native() {
+      // create new point
+      var point = parser().svg.node.createSVGPoint(); // update with current values
+
+      point.x = this.x;
+      point.y = this.y;
+      return point;
+    } // transform point with matrix
+
+  }, {
+    key: "transform",
+    value: function transform(m) {
+      // Perform the matrix multiplication
+      var x = m.a * this.x + m.c * this.y + m.e;
+      var y = m.b * this.x + m.d * this.y + m.f; // Return the required point
+
+      return new Point(x, y);
+    }
+  }]);
+
+  return Point;
+}();
+registerMethods({
+  Element: {
+    // Get point
+    point: function point(x, y) {
+      return new Point(x, y).transform(this.screenCTM().inverse());
+    }
+  }
+});
+
+var abcdef = 'abcdef'.split('');
+
+function closeEnough(a, b, threshold) {
+  return Math.abs(b - a) < (threshold || 1e-6);
+}
+
+var Matrix =
+/*#__PURE__*/
+function () {
+  function Matrix() {
+    _classCallCheck(this, Matrix);
+
+    this.init.apply(this, arguments);
+  } // Initialize
+
+
+  _createClass(Matrix, [{
+    key: "init",
+    value: function init(source) {
+      var base = Matrix.fromArray([1, 0, 0, 1, 0, 0]); // ensure source as object
+
+      source = source instanceof Element ? source.matrixify() : typeof source === 'string' ? Matrix.fromArray(source.split(delimiter).map(parseFloat)) : Array.isArray(source) ? Matrix.fromArray(source) : _typeof(source) === 'object' && Matrix.isMatrixLike(source) ? source : _typeof(source) === 'object' ? new Matrix().transform(source) : arguments.length === 6 ? Matrix.fromArray([].slice.call(arguments)) : base; // Merge the source matrix with the base matrix
+
+      this.a = source.a != null ? source.a : base.a;
+      this.b = source.b != null ? source.b : base.b;
+      this.c = source.c != null ? source.c : base.c;
+      this.d = source.d != null ? source.d : base.d;
+      this.e = source.e != null ? source.e : base.e;
+      this.f = source.f != null ? source.f : base.f;
+    } // Clones this matrix
+
+  }, {
+    key: "clone",
+    value: function clone() {
+      return new Matrix(this);
+    } // Transform a matrix into another matrix by manipulating the space
+
+  }, {
+    key: "transform",
+    value: function transform(o) {
+      // Check if o is a matrix and then left multiply it directly
+      if (Matrix.isMatrixLike(o)) {
+        var matrix = new Matrix(o);
+        return matrix.multiplyO(this);
+      } // Get the proposed transformations and the current transformations
+
+
+      var t = Matrix.formatTransforms(o);
+      var current = this;
+
+      var _transform = new Point(t.ox, t.oy).transform(current),
+          ox = _transform.x,
+          oy = _transform.y; // Construct the resulting matrix
+
+
+      var transformer = new Matrix().translateO(t.rx, t.ry).lmultiplyO(current).translateO(-ox, -oy).scaleO(t.scaleX, t.scaleY).skewO(t.skewX, t.skewY).shearO(t.shear).rotateO(t.theta).translateO(ox, oy); // If we want the origin at a particular place, we force it there
+
+      if (isFinite(t.px) || isFinite(t.py)) {
+        var origin = new Point(ox, oy).transform(transformer); // TODO: Replace t.px with isFinite(t.px)
+
+        var dx = t.px ? t.px - origin.x : 0;
+        var dy = t.py ? t.py - origin.y : 0;
+        transformer.translateO(dx, dy);
+      } // Translate now after positioning
+
+
+      transformer.translateO(t.tx, t.ty);
+      return transformer;
+    } // Applies a matrix defined by its affine parameters
+
+  }, {
+    key: "compose",
+    value: function compose(o) {
+      if (o.origin) {
+        o.originX = o.origin[0];
+        o.originY = o.origin[1];
+      } // Get the parameters
+
+
+      var ox = o.originX || 0;
+      var oy = o.originY || 0;
+      var sx = o.scaleX || 1;
+      var sy = o.scaleY || 1;
+      var lam = o.shear || 0;
+      var theta = o.rotate || 0;
+      var tx = o.translateX || 0;
+      var ty = o.translateY || 0; // Apply the standard matrix
+
+      var result = new Matrix().translateO(-ox, -oy).scaleO(sx, sy).shearO(lam).rotateO(theta).translateO(tx, ty).lmultiplyO(this).translateO(ox, oy);
+      return result;
+    } // Decomposes this matrix into its affine parameters
+
+  }, {
+    key: "decompose",
+    value: function decompose() {
+      var cx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var cy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      // Get the parameters from the matrix
+      var a = this.a;
+      var b = this.b;
+      var c = this.c;
+      var d = this.d;
+      var e = this.e;
+      var f = this.f; // Figure out if the winding direction is clockwise or counterclockwise
+
+      var determinant = a * d - b * c;
+      var ccw = determinant > 0 ? 1 : -1; // Since we only shear in x, we can use the x basis to get the x scale
+      // and the rotation of the resulting matrix
+
+      var sx = ccw * Math.sqrt(a * a + b * b);
+      var thetaRad = Math.atan2(ccw * b, ccw * a);
+      var theta = 180 / Math.PI * thetaRad;
+      var ct = Math.cos(thetaRad);
+      var st = Math.sin(thetaRad); // We can then solve the y basis vector simultaneously to get the other
+      // two affine parameters directly from these parameters
+
+      var lam = (a * c + b * d) / determinant;
+      var sy = c * sx / (lam * a - b) || d * sx / (lam * b + a); // Use the translations
+
+      var tx = e - cx + cx * ct * sx + cy * (lam * ct * sx - st * sy);
+      var ty = f - cy + cx * st * sx + cy * (lam * st * sx + ct * sy); // Construct the decomposition and return it
+
+      return {
+        // Return the affine parameters
+        scaleX: sx,
+        scaleY: sy,
+        shear: lam,
+        rotate: theta,
+        translateX: tx,
+        translateY: ty,
+        originX: cx,
+        originY: cy,
+        // Return the matrix parameters
+        a: this.a,
+        b: this.b,
+        c: this.c,
+        d: this.d,
+        e: this.e,
+        f: this.f
+      };
+    } // Left multiplies by the given matrix
+
+  }, {
+    key: "multiply",
+    value: function multiply(matrix) {
+      return this.clone().multiplyO(matrix);
+    }
+  }, {
+    key: "multiplyO",
+    value: function multiplyO(matrix) {
+      // Get the matrices
+      var l = this;
+      var r = matrix instanceof Matrix ? matrix : new Matrix(matrix);
+      return Matrix.matrixMultiply(l, r, this);
+    }
+  }, {
+    key: "lmultiply",
+    value: function lmultiply(matrix) {
+      return this.clone().lmultiplyO(matrix);
+    }
+  }, {
+    key: "lmultiplyO",
+    value: function lmultiplyO(matrix) {
+      var r = this;
+      var l = matrix instanceof Matrix ? matrix : new Matrix(matrix);
+      return Matrix.matrixMultiply(l, r, this);
+    } // Inverses matrix
+
+  }, {
+    key: "inverseO",
+    value: function inverseO() {
+      // Get the current parameters out of the matrix
+      var a = this.a;
+      var b = this.b;
+      var c = this.c;
+      var d = this.d;
+      var e = this.e;
+      var f = this.f; // Invert the 2x2 matrix in the top left
+
+      var det = a * d - b * c;
+      if (!det) throw new Error('Cannot invert ' + this); // Calculate the top 2x2 matrix
+
+      var na = d / det;
+      var nb = -b / det;
+      var nc = -c / det;
+      var nd = a / det; // Apply the inverted matrix to the top right
+
+      var ne = -(na * e + nc * f);
+      var nf = -(nb * e + nd * f); // Construct the inverted matrix
+
+      this.a = na;
+      this.b = nb;
+      this.c = nc;
+      this.d = nd;
+      this.e = ne;
+      this.f = nf;
+      return this;
+    }
+  }, {
+    key: "inverse",
+    value: function inverse() {
+      return this.clone().inverseO();
+    } // Translate matrix
+
+  }, {
+    key: "translate",
+    value: function translate(x, y) {
+      return this.clone().translateO(x, y);
+    }
+  }, {
+    key: "translateO",
+    value: function translateO(x, y) {
+      this.e += x || 0;
+      this.f += y || 0;
+      return this;
+    } // Scale matrix
+
+  }, {
+    key: "scale",
+    value: function scale(x, y, cx, cy) {
+      var _this$clone;
+
+      return (_this$clone = this.clone()).scaleO.apply(_this$clone, arguments);
+    }
+  }, {
+    key: "scaleO",
+    value: function scaleO(x) {
+      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
+      var cx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var cy = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+
+      // Support uniform scaling
+      if (arguments.length === 3) {
+        cy = cx;
+        cx = y;
+        y = x;
+      }
+
+      var a = this.a,
+          b = this.b,
+          c = this.c,
+          d = this.d,
+          e = this.e,
+          f = this.f;
+      this.a = a * x;
+      this.b = b * y;
+      this.c = c * x;
+      this.d = d * y;
+      this.e = e * x - cx * x + cx;
+      this.f = f * y - cy * y + cy;
+      return this;
+    } // Rotate matrix
+
+  }, {
+    key: "rotate",
+    value: function rotate(r, cx, cy) {
+      return this.clone().rotateO(r, cx, cy);
+    }
+  }, {
+    key: "rotateO",
+    value: function rotateO(r) {
+      var cx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var cy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      // Convert degrees to radians
+      r = radians(r);
+      var cos = Math.cos(r);
+      var sin = Math.sin(r);
+      var a = this.a,
+          b = this.b,
+          c = this.c,
+          d = this.d,
+          e = this.e,
+          f = this.f;
+      this.a = a * cos - b * sin;
+      this.b = b * cos + a * sin;
+      this.c = c * cos - d * sin;
+      this.d = d * cos + c * sin;
+      this.e = e * cos - f * sin + cy * sin - cx * cos + cx;
+      this.f = f * cos + e * sin - cx * sin - cy * cos + cy;
+      return this;
+    } // Flip matrix on x or y, at a given offset
+
+  }, {
+    key: "flip",
+    value: function flip(axis, around) {
+      return this.clone().flipO(axis, around);
+    }
+  }, {
+    key: "flipO",
+    value: function flipO(axis, around) {
+      return axis === 'x' ? this.scaleO(-1, 1, around, 0) : axis === 'y' ? this.scaleO(1, -1, 0, around) : this.scaleO(-1, -1, axis, around || axis); // Define an x, y flip point
+    } // Shear matrix
+
+  }, {
+    key: "shear",
+    value: function shear(a, cx, cy) {
+      return this.clone().shearO(a, cx, cy);
+    }
+  }, {
+    key: "shearO",
+    value: function shearO(lx) {
+      var cy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var a = this.a,
+          b = this.b,
+          c = this.c,
+          d = this.d,
+          e = this.e,
+          f = this.f;
+      this.a = a + b * lx;
+      this.c = c + d * lx;
+      this.e = e + f * lx - cy * lx;
+      return this;
+    } // Skew Matrix
+
+  }, {
+    key: "skew",
+    value: function skew(x, y, cx, cy) {
+      var _this$clone2;
+
+      return (_this$clone2 = this.clone()).skewO.apply(_this$clone2, arguments);
+    }
+  }, {
+    key: "skewO",
+    value: function skewO(x) {
+      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
+      var cx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var cy = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+
+      // support uniformal skew
+      if (arguments.length === 3) {
+        cy = cx;
+        cx = y;
+        y = x;
+      } // Convert degrees to radians
+
+
+      x = radians(x);
+      y = radians(y);
+      var lx = Math.tan(x);
+      var ly = Math.tan(y);
+      var a = this.a,
+          b = this.b,
+          c = this.c,
+          d = this.d,
+          e = this.e,
+          f = this.f;
+      this.a = a + b * lx;
+      this.b = b + a * ly;
+      this.c = c + d * lx;
+      this.d = d + c * ly;
+      this.e = e + f * lx - cy * lx;
+      this.f = f + e * ly - cx * ly;
+      return this;
+    } // SkewX
+
+  }, {
+    key: "skewX",
+    value: function skewX(x, cx, cy) {
+      return this.skew(x, 0, cx, cy);
+    }
+  }, {
+    key: "skewXO",
+    value: function skewXO(x, cx, cy) {
+      return this.skewO(x, 0, cx, cy);
+    } // SkewY
+
+  }, {
+    key: "skewY",
+    value: function skewY(y, cx, cy) {
+      return this.skew(0, y, cx, cy);
+    }
+  }, {
+    key: "skewYO",
+    value: function skewYO(y, cx, cy) {
+      return this.skewO(0, y, cx, cy);
+    } // Transform around a center point
+
+  }, {
+    key: "aroundO",
+    value: function aroundO(cx, cy, matrix) {
+      var dx = cx || 0;
+      var dy = cy || 0;
+      return this.translateO(-dx, -dy).lmultiplyO(matrix).translateO(dx, dy);
+    }
+  }, {
+    key: "around",
+    value: function around(cx, cy, matrix) {
+      return this.clone().aroundO(cx, cy, matrix);
+    } // Convert to native SVGMatrix
+
+  }, {
+    key: "native",
+    value: function native() {
+      // create new matrix
+      var matrix = parser().svg.node.createSVGMatrix(); // update with current values
+
+      for (var i = abcdef.length - 1; i >= 0; i--) {
+        matrix[abcdef[i]] = this[abcdef[i]];
+      }
+
+      return matrix;
+    } // Check if two matrices are equal
+
+  }, {
+    key: "equals",
+    value: function equals(other) {
+      var comp = new Matrix(other);
+      return closeEnough(this.a, comp.a) && closeEnough(this.b, comp.b) && closeEnough(this.c, comp.c) && closeEnough(this.d, comp.d) && closeEnough(this.e, comp.e) && closeEnough(this.f, comp.f);
+    } // Convert matrix to string
+
+  }, {
+    key: "toString",
+    value: function toString() {
+      return 'matrix(' + this.a + ',' + this.b + ',' + this.c + ',' + this.d + ',' + this.e + ',' + this.f + ')';
+    }
+  }, {
+    key: "toArray",
+    value: function toArray() {
+      return [this.a, this.b, this.c, this.d, this.e, this.f];
+    }
+  }, {
+    key: "valueOf",
+    value: function valueOf() {
+      return {
+        a: this.a,
+        b: this.b,
+        c: this.c,
+        d: this.d,
+        e: this.e,
+        f: this.f
+      };
+    }
+  }], [{
+    key: "fromArray",
+    value: function fromArray(a) {
+      return {
+        a: a[0],
+        b: a[1],
+        c: a[2],
+        d: a[3],
+        e: a[4],
+        f: a[5]
+      };
+    }
+  }, {
+    key: "isMatrixLike",
+    value: function isMatrixLike(o) {
+      return o.a != null || o.b != null || o.c != null || o.d != null || o.e != null || o.f != null;
+    }
+  }, {
+    key: "formatTransforms",
+    value: function formatTransforms(o) {
+      // Get all of the parameters required to form the matrix
+      var flipBoth = o.flip === 'both' || o.flip === true;
+      var flipX = o.flip && (flipBoth || o.flip === 'x') ? -1 : 1;
+      var flipY = o.flip && (flipBoth || o.flip === 'y') ? -1 : 1;
+      var skewX = o.skew && o.skew.length ? o.skew[0] : isFinite(o.skew) ? o.skew : isFinite(o.skewX) ? o.skewX : 0;
+      var skewY = o.skew && o.skew.length ? o.skew[1] : isFinite(o.skew) ? o.skew : isFinite(o.skewY) ? o.skewY : 0;
+      var scaleX = o.scale && o.scale.length ? o.scale[0] * flipX : isFinite(o.scale) ? o.scale * flipX : isFinite(o.scaleX) ? o.scaleX * flipX : flipX;
+      var scaleY = o.scale && o.scale.length ? o.scale[1] * flipY : isFinite(o.scale) ? o.scale * flipY : isFinite(o.scaleY) ? o.scaleY * flipY : flipY;
+      var shear = o.shear || 0;
+      var theta = o.rotate || o.theta || 0;
+      var origin = new Point(o.origin || o.around || o.ox || o.originX, o.oy || o.originY);
+      var ox = origin.x;
+      var oy = origin.y;
+      var position = new Point(o.position || o.px || o.positionX, o.py || o.positionY);
+      var px = position.x;
+      var py = position.y;
+      var translate = new Point(o.translate || o.tx || o.translateX, o.ty || o.translateY);
+      var tx = translate.x;
+      var ty = translate.y;
+      var relative = new Point(o.relative || o.rx || o.relativeX, o.ry || o.relativeY);
+      var rx = relative.x;
+      var ry = relative.y; // Populate all of the values
+
+      return {
+        scaleX: scaleX,
+        scaleY: scaleY,
+        skewX: skewX,
+        skewY: skewY,
+        shear: shear,
+        theta: theta,
+        rx: rx,
+        ry: ry,
+        tx: tx,
+        ty: ty,
+        ox: ox,
+        oy: oy,
+        px: px,
+        py: py
+      };
+    } // left matrix, right matrix, target matrix which is overwritten
+
+  }, {
+    key: "matrixMultiply",
+    value: function matrixMultiply(l, r, o) {
+      // Work out the product directly
+      var a = l.a * r.a + l.c * r.b;
+      var b = l.b * r.a + l.d * r.b;
+      var c = l.a * r.c + l.c * r.d;
+      var d = l.b * r.c + l.d * r.d;
+      var e = l.e + l.a * r.e + l.c * r.f;
+      var f = l.f + l.b * r.e + l.d * r.f; // make sure to use local variables because l/r and o could be the same
+
+      o.a = a;
+      o.b = b;
+      o.c = c;
+      o.d = d;
+      o.e = e;
+      o.f = f;
+      return o;
+    }
+  }]);
+
+  return Matrix;
+}();
+registerMethods({
+  Element: {
+    // Get current matrix
+    ctm: function ctm() {
+      return new Matrix(this.node.getCTM());
+    },
+    // Get current screen matrix
+    screenCTM: function screenCTM() {
+      /* https://bugzilla.mozilla.org/show_bug.cgi?id=1344537
+         This is needed because FF does not return the transformation matrix
+         for the inner coordinate system when getScreenCTM() is called on nested svgs.
+         However all other Browsers do that */
+      if (typeof this.isRoot === 'function' && !this.isRoot()) {
+        var rect = this.rect(1, 1);
+        var m = rect.node.getScreenCTM();
+        rect.remove();
+        return new Matrix(m);
+      }
+
+      return new Matrix(this.node.getScreenCTM());
+    }
+  }
+});
+
+/***
+Base Class
+==========
+The base stepper class that will be
+***/
+
+function makeSetterGetter(k, f) {
+  return function (v) {
+    if (v == null) return this[v];
+    this[k] = v;
+    if (f) f.call(this);
+    return this;
+  };
+}
+
+var easing = {
+  '-': function _(pos) {
+    return pos;
+  },
+  '<>': function _(pos) {
+    return -Math.cos(pos * Math.PI) / 2 + 0.5;
+  },
+  '>': function _(pos) {
+    return Math.sin(pos * Math.PI / 2);
+  },
+  '<': function _(pos) {
+    return -Math.cos(pos * Math.PI / 2) + 1;
+  },
+  bezier: function bezier(t0, x0, t1, x1) {
+    return function (t) {// TODO: FINISH
+    };
+  }
+};
+var Stepper =
+/*#__PURE__*/
+function () {
+  function Stepper() {
+    _classCallCheck(this, Stepper);
+  }
+
+  _createClass(Stepper, [{
+    key: "done",
+    value: function done() {
+      return false;
+    }
+  }]);
+
+  return Stepper;
+}();
+/***
+Easing Functions
+================
+***/
+
+var Ease =
+/*#__PURE__*/
+function (_Stepper) {
+  _inherits(Ease, _Stepper);
+
+  function Ease(fn) {
+    var _this;
+
+    _classCallCheck(this, Ease);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Ease).call(this));
+    _this.ease = easing[fn || timeline.ease] || fn;
+    return _this;
+  }
+
+  _createClass(Ease, [{
+    key: "step",
+    value: function step(from, to, pos) {
+      if (typeof from !== 'number') {
+        return pos < 1 ? from : to;
+      }
+
+      return from + (to - from) * this.ease(pos);
+    }
+  }]);
+
+  return Ease;
+}(Stepper);
+/***
+Controller Types
+================
+***/
+
+var Controller =
+/*#__PURE__*/
+function (_Stepper2) {
+  _inherits(Controller, _Stepper2);
+
+  function Controller(fn) {
+    var _this2;
+
+    _classCallCheck(this, Controller);
+
+    _this2 = _possibleConstructorReturn(this, _getPrototypeOf(Controller).call(this));
+    _this2.stepper = fn;
+    return _this2;
+  }
+
+  _createClass(Controller, [{
+    key: "step",
+    value: function step(current, target, dt, c) {
+      return this.stepper(current, target, dt, c);
+    }
+  }, {
+    key: "done",
+    value: function done(c) {
+      return c.done;
+    }
+  }]);
+
+  return Controller;
+}(Stepper);
+
+function recalculate() {
+  // Apply the default parameters
+  var duration = (this._duration || 500) / 1000;
+  var overshoot = this._overshoot || 0; // Calculate the PID natural response
+
+  var eps = 1e-10;
+  var pi = Math.PI;
+  var os = Math.log(overshoot / 100 + eps);
+  var zeta = -os / Math.sqrt(pi * pi + os * os);
+  var wn = 3.9 / (zeta * duration); // Calculate the Spring values
+
+  this.d = 2 * zeta * wn;
+  this.k = wn * wn;
+}
+
+var Spring =
+/*#__PURE__*/
+function (_Controller) {
+  _inherits(Spring, _Controller);
+
+  function Spring(duration, overshoot) {
+    var _this3;
+
+    _classCallCheck(this, Spring);
+
+    _this3 = _possibleConstructorReturn(this, _getPrototypeOf(Spring).call(this));
+
+    _this3.duration(duration || 500).overshoot(overshoot || 0);
+
+    return _this3;
+  }
+
+  _createClass(Spring, [{
+    key: "step",
+    value: function step(current, target, dt, c) {
+      if (typeof current === 'string') return current;
+      c.done = dt === Infinity;
+      if (dt === Infinity) return target;
+      if (dt === 0) return current;
+      if (dt > 100) dt = 16;
+      dt /= 1000; // Get the previous velocity
+
+      var velocity = c.velocity || 0; // Apply the control to get the new position and store it
+
+      var acceleration = -this.d * velocity - this.k * (current - target);
+      var newPosition = current + velocity * dt + acceleration * dt * dt / 2; // Store the velocity
+
+      c.velocity = velocity + acceleration * dt; // Figure out if we have converged, and if so, pass the value
+
+      c.done = Math.abs(target - newPosition) + Math.abs(velocity) < 0.002;
+      return c.done ? target : newPosition;
+    }
+  }]);
+
+  return Spring;
+}(Controller);
+extend(Spring, {
+  duration: makeSetterGetter('_duration', recalculate),
+  overshoot: makeSetterGetter('_overshoot', recalculate)
+});
+var PID =
+/*#__PURE__*/
+function (_Controller2) {
+  _inherits(PID, _Controller2);
+
+  function PID(p, i, d, windup) {
+    var _this4;
+
+    _classCallCheck(this, PID);
+
+    _this4 = _possibleConstructorReturn(this, _getPrototypeOf(PID).call(this));
+    p = p == null ? 0.1 : p;
+    i = i == null ? 0.01 : i;
+    d = d == null ? 0 : d;
+    windup = windup == null ? 1000 : windup;
+
+    _this4.p(p).i(i).d(d).windup(windup);
+
+    return _this4;
+  }
+
+  _createClass(PID, [{
+    key: "step",
+    value: function step(current, target, dt, c) {
+      if (typeof current === 'string') return current;
+      c.done = dt === Infinity;
+      if (dt === Infinity) return target;
+      if (dt === 0) return current;
+      var p = target - current;
+      var i = (c.integral || 0) + p * dt;
+      var d = (p - (c.error || 0)) / dt;
+      var windup = this.windup; // antiwindup
+
+      if (windup !== false) {
+        i = Math.max(-windup, Math.min(i, windup));
+      }
+
+      c.error = p;
+      c.integral = i;
+      c.done = Math.abs(p) < 0.001;
+      return c.done ? target : current + (this.P * p + this.I * i + this.D * d);
+    }
+  }]);
+
+  return PID;
+}(Controller);
+extend(PID, {
+  windup: makeSetterGetter('windup'),
+  p: makeSetterGetter('P'),
+  i: makeSetterGetter('I'),
+  d: makeSetterGetter('D')
+});
+
+var Queue =
+/*#__PURE__*/
+function () {
+  function Queue() {
+    _classCallCheck(this, Queue);
+
+    this._first = null;
+    this._last = null;
+  }
+
+  _createClass(Queue, [{
+    key: "push",
+    value: function push(value) {
+      // An item stores an id and the provided value
+      var item = value.next ? value : {
+        value: value,
+        next: null,
+        prev: null // Deal with the queue being empty or populated
+
+      };
+
+      if (this._last) {
+        item.prev = this._last;
+        this._last.next = item;
+        this._last = item;
+      } else {
+        this._last = item;
+        this._first = item;
+      } // Update the length and return the current item
+
+
+      return item;
+    }
+  }, {
+    key: "shift",
+    value: function shift() {
+      // Check if we have a value
+      var remove = this._first;
+      if (!remove) return null; // If we do, remove it and relink things
+
+      this._first = remove.next;
+      if (this._first) this._first.prev = null;
+      this._last = this._first ? this._last : null;
+      return remove.value;
+    } // Shows us the first item in the list
+
+  }, {
+    key: "first",
+    value: function first() {
+      return this._first && this._first.value;
+    } // Shows us the last item in the list
+
+  }, {
+    key: "last",
+    value: function last() {
+      return this._last && this._last.value;
+    } // Removes the item that was returned from the push
+
+  }, {
+    key: "remove",
+    value: function remove(item) {
+      // Relink the previous item
+      if (item.prev) item.prev.next = item.next;
+      if (item.next) item.next.prev = item.prev;
+      if (item === this._last) this._last = item.prev;
+      if (item === this._first) this._first = item.next; // Invalidate item
+
+      item.prev = null;
+      item.next = null;
+    }
+  }]);
+
+  return Queue;
+}();
+
+var Animator = {
+  nextDraw: null,
+  frames: new Queue(),
+  timeouts: new Queue(),
+  timer: window.performance || window.Date,
+  transforms: [],
+  frame: function frame(fn) {
+    // Store the node
+    var node = Animator.frames.push({
+      run: fn
+    }); // Request an animation frame if we don't have one
+
+    if (Animator.nextDraw === null) {
+      Animator.nextDraw = window.requestAnimationFrame(Animator._draw);
+    } // Return the node so we can remove it easily
+
+
+    return node;
+  },
+  transform_frame: function transform_frame(fn, id) {
+    Animator.transforms[id] = fn;
+  },
+  timeout: function timeout(fn, delay) {
+    delay = delay || 0; // Work out when the event should fire
+
+    var time = Animator.timer.now() + delay; // Add the timeout to the end of the queue
+
+    var node = Animator.timeouts.push({
+      run: fn,
+      time: time
+    }); // Request another animation frame if we need one
+
+    if (Animator.nextDraw === null) {
+      Animator.nextDraw = window.requestAnimationFrame(Animator._draw);
+    }
+
+    return node;
+  },
+  cancelFrame: function cancelFrame(node) {
+    Animator.frames.remove(node);
+  },
+  clearTimeout: function clearTimeout(node) {
+    Animator.timeouts.remove(node);
+  },
+  _draw: function _draw(now) {
+    // Run all the timeouts we can run, if they are not ready yet, add them
+    // to the end of the queue immediately! (bad timeouts!!! [sarcasm])
+    var nextTimeout = null;
+    var lastTimeout = Animator.timeouts.last();
+
+    while (nextTimeout = Animator.timeouts.shift()) {
+      // Run the timeout if its time, or push it to the end
+      if (now >= nextTimeout.time) {
+        nextTimeout.run();
+      } else {
+        Animator.timeouts.push(nextTimeout);
+      } // If we hit the last item, we should stop shifting out more items
+
+
+      if (nextTimeout === lastTimeout) break;
+    } // Run all of the animation frames
+
+
+    var nextFrame = null;
+    var lastFrame = Animator.frames.last();
+
+    while (nextFrame !== lastFrame && (nextFrame = Animator.frames.shift())) {
+      nextFrame.run();
+    }
+
+    Animator.transforms.forEach(function (el) {
+      el();
+    }); // If we have remaining timeouts or frames, draw until we don't anymore
+
+    Animator.nextDraw = Animator.timeouts.first() || Animator.frames.first() ? window.requestAnimationFrame(Animator._draw) : null;
+  }
+};
+
+function isNulledBox(box) {
+  return !box.w && !box.h && !box.x && !box.y;
+}
+
+function domContains(node) {
+  return (document.documentElement.contains || function (node) {
+    // This is IE - it does not support contains() for top-level SVGs
+    while (node.parentNode) {
+      node = node.parentNode;
+    }
+
+    return node === document;
+  }).call(document.documentElement, node);
+}
+
+var Box =
+/*#__PURE__*/
+function () {
+  function Box() {
+    _classCallCheck(this, Box);
+
+    this.init.apply(this, arguments);
+  }
+
+  _createClass(Box, [{
+    key: "init",
+    value: function init(source) {
+      var base = [0, 0, 0, 0];
+      source = typeof source === 'string' ? source.split(delimiter).map(parseFloat) : Array.isArray(source) ? source : _typeof(source) === 'object' ? [source.left != null ? source.left : source.x, source.top != null ? source.top : source.y, source.width, source.height] : arguments.length === 4 ? [].slice.call(arguments) : base;
+      this.x = source[0] || 0;
+      this.y = source[1] || 0;
+      this.width = this.w = source[2] || 0;
+      this.height = this.h = source[3] || 0; // Add more bounding box properties
+
+      this.x2 = this.x + this.w;
+      this.y2 = this.y + this.h;
+      this.cx = this.x + this.w / 2;
+      this.cy = this.y + this.h / 2;
+    } // Merge rect box with another, return a new instance
+
+  }, {
+    key: "merge",
+    value: function merge(box) {
+      var x = Math.min(this.x, box.x);
+      var y = Math.min(this.y, box.y);
+      var width = Math.max(this.x + this.width, box.x + box.width) - x;
+      var height = Math.max(this.y + this.height, box.y + box.height) - y;
+      return new Box(x, y, width, height);
+    }
+  }, {
+    key: "transform",
+    value: function transform(m) {
+      var xMin = Infinity;
+      var xMax = -Infinity;
+      var yMin = Infinity;
+      var yMax = -Infinity;
+      var pts = [new Point(this.x, this.y), new Point(this.x2, this.y), new Point(this.x, this.y2), new Point(this.x2, this.y2)];
+      pts.forEach(function (p) {
+        p = p.transform(m);
+        xMin = Math.min(xMin, p.x);
+        xMax = Math.max(xMax, p.x);
+        yMin = Math.min(yMin, p.y);
+        yMax = Math.max(yMax, p.y);
+      });
+      return new Box(xMin, yMin, xMax - xMin, yMax - yMin);
+    }
+  }, {
+    key: "addOffset",
+    value: function addOffset() {
+      // offset by window scroll position, because getBoundingClientRect changes when window is scrolled
+      this.x += window.pageXOffset;
+      this.y += window.pageYOffset;
+      return this;
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height;
+    }
+  }, {
+    key: "toArray",
+    value: function toArray() {
+      return [this.x, this.y, this.width, this.height];
+    }
+  }, {
+    key: "isNulled",
+    value: function isNulled() {
+      return isNulledBox(this);
+    }
+  }]);
+
+  return Box;
+}();
+
+function getBox(cb) {
+  var box;
+
+  try {
+    box = cb(this.node);
+
+    if (isNulledBox(box) && !domContains(this.node)) {
+      throw new Error('Element not in the dom');
+    }
+  } catch (e) {
+    try {
+      var clone = this.clone(parser().svg).show();
+      box = cb(clone.node);
+      clone.remove();
+    } catch (e) {
+      console.warn('Getting a bounding box of this element is not possible');
+    }
+  }
+
+  return box;
+}
+
+registerMethods({
+  Element: {
+    // Get bounding box
+    bbox: function bbox() {
+      return new Box(getBox.call(this, function (node) {
+        return node.getBBox();
+      }));
+    },
+    rbox: function rbox(el) {
+      var box = new Box(getBox.call(this, function (node) {
+        return node.getBoundingClientRect();
+      }));
+      if (el) return box.transform(el.screenCTM().inverse());
+      return box.addOffset();
+    }
+  },
+  viewbox: {
+    viewbox: function viewbox(x, y, width, height) {
+      // act as getter
+      if (x == null) return new Box(this.attr('viewBox')); // act as setter
+
+      return this.attr('viewBox', new Box(x, y, width, height));
+    }
+  }
+});
+
+var PathArray = subClassArray('PathArray', SVGArray);
+function pathRegReplace(a, b, c, d) {
+  return c + d.replace(dots, ' .');
+}
+
+function arrayToString(a) {
+  for (var i = 0, il = a.length, s = ''; i < il; i++) {
+    s += a[i][0];
+
+    if (a[i][1] != null) {
+      s += a[i][1];
+
+      if (a[i][2] != null) {
+        s += ' ';
+        s += a[i][2];
+
+        if (a[i][3] != null) {
+          s += ' ';
+          s += a[i][3];
+          s += ' ';
+          s += a[i][4];
+
+          if (a[i][5] != null) {
+            s += ' ';
+            s += a[i][5];
+            s += ' ';
+            s += a[i][6];
+
+            if (a[i][7] != null) {
+              s += ' ';
+              s += a[i][7];
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return s + ' ';
+}
+
+var pathHandlers = {
+  M: function M(c, p, p0) {
+    p.x = p0.x = c[0];
+    p.y = p0.y = c[1];
+    return ['M', p.x, p.y];
+  },
+  L: function L(c, p) {
+    p.x = c[0];
+    p.y = c[1];
+    return ['L', c[0], c[1]];
+  },
+  H: function H(c, p) {
+    p.x = c[0];
+    return ['H', c[0]];
+  },
+  V: function V(c, p) {
+    p.y = c[0];
+    return ['V', c[0]];
+  },
+  C: function C(c, p) {
+    p.x = c[4];
+    p.y = c[5];
+    return ['C', c[0], c[1], c[2], c[3], c[4], c[5]];
+  },
+  S: function S(c, p) {
+    p.x = c[2];
+    p.y = c[3];
+    return ['S', c[0], c[1], c[2], c[3]];
+  },
+  Q: function Q(c, p) {
+    p.x = c[2];
+    p.y = c[3];
+    return ['Q', c[0], c[1], c[2], c[3]];
+  },
+  T: function T(c, p) {
+    p.x = c[0];
+    p.y = c[1];
+    return ['T', c[0], c[1]];
+  },
+  Z: function Z(c, p, p0) {
+    p.x = p0.x;
+    p.y = p0.y;
+    return ['Z'];
+  },
+  A: function A(c, p) {
+    p.x = c[5];
+    p.y = c[6];
+    return ['A', c[0], c[1], c[2], c[3], c[4], c[5], c[6]];
+  }
+};
+var mlhvqtcsaz = 'mlhvqtcsaz'.split('');
+
+for (var i = 0, il = mlhvqtcsaz.length; i < il; ++i) {
+  pathHandlers[mlhvqtcsaz[i]] = function (i) {
+    return function (c, p, p0) {
+      if (i === 'H') c[0] = c[0] + p.x;else if (i === 'V') c[0] = c[0] + p.y;else if (i === 'A') {
+        c[5] = c[5] + p.x;
+        c[6] = c[6] + p.y;
+      } else {
+        for (var j = 0, jl = c.length; j < jl; ++j) {
+          c[j] = c[j] + (j % 2 ? p.y : p.x);
+        }
+      }
+      return pathHandlers[i](c, p, p0);
+    };
+  }(mlhvqtcsaz[i].toUpperCase());
+}
+
+extend(PathArray, {
+  // Convert array to string
+  toString: function toString() {
+    return arrayToString(this);
+  },
+  // Move path string
+  move: function move(x, y) {
+    // get bounding box of current situation
+    var box = this.bbox(); // get relative offset
+
+    x -= box.x;
+    y -= box.y;
+
+    if (!isNaN(x) && !isNaN(y)) {
+      // move every point
+      for (var l, i = this.length - 1; i >= 0; i--) {
+        l = this[i][0];
+
+        if (l === 'M' || l === 'L' || l === 'T') {
+          this[i][1] += x;
+          this[i][2] += y;
+        } else if (l === 'H') {
+          this[i][1] += x;
+        } else if (l === 'V') {
+          this[i][1] += y;
+        } else if (l === 'C' || l === 'S' || l === 'Q') {
+          this[i][1] += x;
+          this[i][2] += y;
+          this[i][3] += x;
+          this[i][4] += y;
+
+          if (l === 'C') {
+            this[i][5] += x;
+            this[i][6] += y;
+          }
+        } else if (l === 'A') {
+          this[i][6] += x;
+          this[i][7] += y;
+        }
+      }
+    }
+
+    return this;
+  },
+  // Resize path string
+  size: function size(width, height) {
+    // get bounding box of current situation
+    var box = this.bbox();
+    var i, l; // recalculate position of all points according to new size
+
+    for (i = this.length - 1; i >= 0; i--) {
+      l = this[i][0];
+
+      if (l === 'M' || l === 'L' || l === 'T') {
+        this[i][1] = (this[i][1] - box.x) * width / box.width + box.x;
+        this[i][2] = (this[i][2] - box.y) * height / box.height + box.y;
+      } else if (l === 'H') {
+        this[i][1] = (this[i][1] - box.x) * width / box.width + box.x;
+      } else if (l === 'V') {
+        this[i][1] = (this[i][1] - box.y) * height / box.height + box.y;
+      } else if (l === 'C' || l === 'S' || l === 'Q') {
+        this[i][1] = (this[i][1] - box.x) * width / box.width + box.x;
+        this[i][2] = (this[i][2] - box.y) * height / box.height + box.y;
+        this[i][3] = (this[i][3] - box.x) * width / box.width + box.x;
+        this[i][4] = (this[i][4] - box.y) * height / box.height + box.y;
+
+        if (l === 'C') {
+          this[i][5] = (this[i][5] - box.x) * width / box.width + box.x;
+          this[i][6] = (this[i][6] - box.y) * height / box.height + box.y;
+        }
+      } else if (l === 'A') {
+        // resize radii
+        this[i][1] = this[i][1] * width / box.width;
+        this[i][2] = this[i][2] * height / box.height; // move position values
+
+        this[i][6] = (this[i][6] - box.x) * width / box.width + box.x;
+        this[i][7] = (this[i][7] - box.y) * height / box.height + box.y;
+      }
+    }
+
+    return this;
+  },
+  // Test if the passed path array use the same path data commands as this path array
+  equalCommands: function equalCommands(pathArray) {
+    var i, il, equalCommands;
+    pathArray = new PathArray(pathArray);
+    equalCommands = this.length === pathArray.length;
+
+    for (i = 0, il = this.length; equalCommands && i < il; i++) {
+      equalCommands = this[i][0] === pathArray[i][0];
+    }
+
+    return equalCommands;
+  },
+  // Make path array morphable
+  morph: function morph(pathArray) {
+    pathArray = new PathArray(pathArray);
+
+    if (this.equalCommands(pathArray)) {
+      this.destination = pathArray;
+    } else {
+      this.destination = null;
+    }
+
+    return this;
+  },
+  // Get morphed path array at given position
+  at: function at(pos) {
+    // make sure a destination is defined
+    if (!this.destination) return this;
+    var sourceArray = this;
+    var destinationArray = this.destination.value;
+    var array = [];
+    var pathArray = new PathArray();
+    var i, il, j, jl; // Animate has specified in the SVG spec
+    // See: https://www.w3.org/TR/SVG11/paths.html#PathElement
+
+    for (i = 0, il = sourceArray.length; i < il; i++) {
+      array[i] = [sourceArray[i][0]];
+
+      for (j = 1, jl = sourceArray[i].length; j < jl; j++) {
+        array[i][j] = sourceArray[i][j] + (destinationArray[i][j] - sourceArray[i][j]) * pos;
+      } // For the two flags of the elliptical arc command, the SVG spec say:
+      // Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true
+      // Elliptical arc command as an array followed by corresponding indexes:
+      // ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]
+      //   0    1   2        3                 4             5      6  7
+
+
+      if (array[i][0] === 'A') {
+        array[i][4] = +(array[i][4] !== 0);
+        array[i][5] = +(array[i][5] !== 0);
+      }
+    } // Directly modify the value of a path array, this is done this way for performance
+
+
+    pathArray.value = array;
+    return pathArray;
+  },
+  // Absolutize and parse path to array
+  parse: function parse() {
+    var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [['M', 0, 0]];
+    // if it's already a patharray, no need to parse it
+    if (array instanceof PathArray) return array; // prepare for parsing
+
+    var s;
+    var paramCnt = {
+      'M': 2,
+      'L': 2,
+      'H': 1,
+      'V': 1,
+      'C': 6,
+      'S': 4,
+      'Q': 4,
+      'T': 2,
+      'A': 7,
+      'Z': 0
+    };
+
+    if (typeof array === 'string') {
+      array = array.replace(numbersWithDots, pathRegReplace) // convert 45.123.123 to 45.123 .123
+      .replace(pathLetters, ' $& ') // put some room between letters and numbers
+      .replace(hyphen, '$1 -') // add space before hyphen
+      .trim() // trim
+      .split(delimiter); // split into array
+    } else {
+      array = array.reduce(function (prev, curr) {
+        return [].concat.call(prev, curr);
+      }, []);
+    } // array now is an array containing all parts of a path e.g. ['M', '0', '0', 'L', '30', '30' ...]
+
+
+    var result = [];
+    var p = new Point();
+    var p0 = new Point();
+    var index = 0;
+    var len = array.length;
+
+    do {
+      // Test if we have a path letter
+      if (isPathLetter.test(array[index])) {
+        s = array[index];
+        ++index; // If last letter was a move command and we got no new, it defaults to [L]ine
+      } else if (s === 'M') {
+        s = 'L';
+      } else if (s === 'm') {
+        s = 'l';
+      }
+
+      result.push(pathHandlers[s].call(null, array.slice(index, index = index + paramCnt[s.toUpperCase()]).map(parseFloat), p, p0));
+    } while (len > index);
+
+    return result;
+  },
+  // Get bounding box of path
+  bbox: function bbox() {
+    parser().path.setAttribute('d', this.toString());
+    return parser.nodes.path.getBBox();
+  }
+});
+
+var Morphable =
+/*#__PURE__*/
+function () {
+  function Morphable(stepper) {
+    _classCallCheck(this, Morphable);
+
+    // FIXME: the default stepper does not know about easing
+    this._stepper = stepper || new Ease('-');
+    this._from = null;
+    this._to = null;
+    this._type = null;
+    this._context = null;
+    this._morphObj = null;
+  }
+
+  _createClass(Morphable, [{
+    key: "from",
+    value: function from(val) {
+      if (val == null) {
+        return this._from;
+      }
+
+      this._from = this._set(val);
+      return this;
+    }
+  }, {
+    key: "to",
+    value: function to(val) {
+      if (val == null) {
+        return this._to;
+      }
+
+      this._to = this._set(val);
+      return this;
+    }
+  }, {
+    key: "type",
+    value: function type(_type) {
+      // getter
+      if (_type == null) {
+        return this._type;
+      } // setter
+
+
+      this._type = _type;
+      return this;
+    }
+  }, {
+    key: "_set",
+    value: function _set$$1(value) {
+      if (!this._type) {
+        var type = _typeof(value);
+
+        if (type === 'number') {
+          this.type(SVGNumber);
+        } else if (type === 'string') {
+          if (Color.isColor(value)) {
+            this.type(Color);
+          } else if (delimiter.test(value)) {
+            this.type(pathLetters.test(value) ? PathArray : SVGArray);
+          } else if (numberAndUnit.test(value)) {
+            this.type(SVGNumber);
+          } else {
+            this.type(NonMorphable);
+          }
+        } else if (morphableTypes.indexOf(value.constructor) > -1) {
+          this.type(value.constructor);
+        } else if (Array.isArray(value)) {
+          this.type(SVGArray);
+        } else if (type === 'object') {
+          this.type(ObjectBag);
+        } else {
+          this.type(NonMorphable);
+        }
+      }
+
+      var result = new this._type(value).toArray();
+      this._morphObj = this._morphObj || new this._type();
+      this._context = this._context || Array.apply(null, Array(result.length)).map(Object);
+      return result;
+    }
+  }, {
+    key: "stepper",
+    value: function stepper(_stepper) {
+      if (_stepper == null) return this._stepper;
+      this._stepper = _stepper;
+      return this;
+    }
+  }, {
+    key: "done",
+    value: function done() {
+      var complete = this._context.map(this._stepper.done).reduce(function (last, curr) {
+        return last && curr;
+      }, true);
+
+      return complete;
+    }
+  }, {
+    key: "at",
+    value: function at(pos) {
+      var _this = this;
+
+      return this._morphObj.fromArray(this._from.map(function (i, index) {
+        return _this._stepper.step(i, _this._to[index], pos, _this._context[index], _this._context);
+      }));
+    }
+  }]);
+
+  return Morphable;
+}();
+var NonMorphable =
+/*#__PURE__*/
+function () {
+  function NonMorphable() {
+    _classCallCheck(this, NonMorphable);
+
+    this.init.apply(this, arguments);
+  }
+
+  _createClass(NonMorphable, [{
+    key: "init",
+    value: function init(val) {
+      val = Array.isArray(val) ? val[0] : val;
+      this.value = val;
+    }
+  }, {
+    key: "valueOf",
+    value: function valueOf() {
+      return this.value;
+    }
+  }, {
+    key: "toArray",
+    value: function toArray() {
+      return [this.value];
+    }
+  }]);
+
+  return NonMorphable;
+}();
+var TransformBag =
+/*#__PURE__*/
+function () {
+  function TransformBag() {
+    _classCallCheck(this, TransformBag);
+
+    this.init.apply(this, arguments);
+  }
+
+  _createClass(TransformBag, [{
+    key: "init",
+    value: function init(obj) {
+      if (Array.isArray(obj)) {
+        obj = {
+          scaleX: obj[0],
+          scaleY: obj[1],
+          shear: obj[2],
+          rotate: obj[3],
+          translateX: obj[4],
+          translateY: obj[5],
+          originX: obj[6],
+          originY: obj[7]
+        };
+      }
+
+      Object.assign(this, TransformBag.defaults, obj);
+    }
+  }, {
+    key: "toArray",
+    value: function toArray() {
+      var v = this;
+      return [v.scaleX, v.scaleY, v.shear, v.rotate, v.translateX, v.translateY, v.originX, v.originY];
+    }
+  }]);
+
+  return TransformBag;
+}();
+TransformBag.defaults = {
+  scaleX: 1,
+  scaleY: 1,
+  shear: 0,
+  rotate: 0,
+  translateX: 0,
+  translateY: 0,
+  originX: 0,
+  originY: 0
+};
+var ObjectBag =
+/*#__PURE__*/
+function () {
+  function ObjectBag() {
+    _classCallCheck(this, ObjectBag);
+
+    this.init.apply(this, arguments);
+  }
+
+  _createClass(ObjectBag, [{
+    key: "init",
+    value: function init(objOrArr) {
+      this.values = [];
+
+      if (Array.isArray(objOrArr)) {
+        this.values = objOrArr;
+        return;
+      }
+
+      var entries = Object.entries(objOrArr || {}).sort(function (a, b) {
+        return a[0] - b[0];
+      });
+      this.values = entries.reduce(function (last, curr) {
+        return last.concat(curr);
+      }, []);
+    }
+  }, {
+    key: "valueOf",
+    value: function valueOf() {
+      var obj = {};
+      var arr = this.values;
+
+      for (var i = 0, len = arr.length; i < len; i += 2) {
+        obj[arr[i]] = arr[i + 1];
+      }
+
+      return obj;
+    }
+  }, {
+    key: "toArray",
+    value: function toArray() {
+      return this.values;
+    }
+  }]);
+
+  return ObjectBag;
+}();
+var morphableTypes = [NonMorphable, TransformBag, ObjectBag];
+function registerMorphableType() {
+  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  morphableTypes.push.apply(morphableTypes, _toConsumableArray([].concat(type)));
+}
+function makeMorphable() {
+  extend(morphableTypes, {
+    to: function to(val, args) {
+      return new Morphable().type(this.constructor).from(this.valueOf()).to(val, args);
+    },
+    fromArray: function fromArray(arr) {
+      this.init(arr);
+      return this;
+    }
+  });
+}
+
+var time = window.performance || Date;
+
+var makeSchedule = function makeSchedule(runnerInfo) {
+  var start = runnerInfo.start;
+  var duration = runnerInfo.runner.duration();
+  var end = start + duration;
+  return {
+    start: start,
+    duration: duration,
+    end: end,
+    runner: runnerInfo.runner
+  };
+};
+
+var Timeline =
+/*#__PURE__*/
+function () {
+  // Construct a new timeline on the given element
+  function Timeline() {
+    _classCallCheck(this, Timeline);
+
+    this._timeSource = function () {
+      return time.now();
+    };
+
+    this._dispatcher = document.createElement('div'); // Store the timing variables
+
+    this._startTime = 0;
+    this._speed = 1.0; // Play control variables control how the animation proceeds
+
+    this._reverse = false;
+    this._persist = 0; // Keep track of the running animations and their starting parameters
+
+    this._nextFrame = null;
+    this._paused = false;
+    this._runners = [];
+    this._order = [];
+    this._time = 0;
+    this._lastSourceTime = 0;
+    this._lastStepTime = 0;
+  }
+
+  _createClass(Timeline, [{
+    key: "getEventTarget",
+    value: function getEventTarget() {
+      return this._dispatcher;
+    }
+    /**
+     *
+     */
+    // schedules a runner on the timeline
+
+  }, {
+    key: "schedule",
+    value: function schedule(runner, delay, when) {
+      if (runner == null) {
+        return this._runners.map(makeSchedule).sort(function (a, b) {
+          return a.start - b.start || a.duration - b.duration;
+        });
+      }
+
+      if (!this.active()) {
+        this._step();
+
+        if (when == null) {
+          when = 'now';
+        }
+      } // The start time for the next animation can either be given explicitly,
+      // derived from the current timeline time or it can be relative to the
+      // last start time to chain animations direclty
+
+
+      var absoluteStartTime = 0;
+      delay = delay || 0; // Work out when to start the animation
+
+      if (when == null || when === 'last' || when === 'after') {
+        // Take the last time and increment
+        absoluteStartTime = this._startTime;
+      } else if (when === 'absolute' || when === 'start') {
+        absoluteStartTime = delay;
+        delay = 0;
+      } else if (when === 'now') {
+        absoluteStartTime = this._time;
+      } else if (when === 'relative') {
+        var runnerInfo = this._runners[runner.id];
+
+        if (runnerInfo) {
+          absoluteStartTime = runnerInfo.start + delay;
+          delay = 0;
+        }
+      } else {
+        throw new Error('Invalid value for the "when" parameter');
+      } // Manage runner
+
+
+      runner.unschedule();
+      runner.timeline(this);
+      runner.time(-delay); // Save startTime for next runner
+
+      this._startTime = absoluteStartTime + runner.duration() + delay; // Save runnerInfo
+
+      this._runners[runner.id] = {
+        persist: this.persist(),
+        runner: runner,
+        start: absoluteStartTime // Save order and continue
+
+      };
+
+      this._order.push(runner.id);
+
+      this._continue();
+
+      return this;
+    } // Remove the runner from this timeline
+
+  }, {
+    key: "unschedule",
+    value: function unschedule(runner) {
+      var index = this._order.indexOf(runner.id);
+
+      if (index < 0) return this;
+      delete this._runners[runner.id];
+
+      this._order.splice(index, 1);
+
+      runner.timeline(null);
+      return this;
+    }
+  }, {
+    key: "play",
+    value: function play() {
+      // Now make sure we are not paused and continue the animation
+      this._paused = false;
+      return this._continue();
+    }
+  }, {
+    key: "pause",
+    value: function pause() {
+      // Cancel the next animation frame and pause
+      this._nextFrame = null;
+      this._paused = true;
+      return this;
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      // Cancel the next animation frame and go to start
+      this.seek(-this._time);
+      return this.pause();
+    }
+  }, {
+    key: "finish",
+    value: function finish() {
+      this.seek(Infinity);
+      return this.pause();
+    }
+  }, {
+    key: "speed",
+    value: function speed(_speed) {
+      if (_speed == null) return this._speed;
+      this._speed = _speed;
+      return this;
+    }
+  }, {
+    key: "reverse",
+    value: function reverse(yes) {
+      var currentSpeed = this.speed();
+      if (yes == null) return this.speed(-currentSpeed);
+      var positive = Math.abs(currentSpeed);
+      return this.speed(yes ? positive : -positive);
+    }
+  }, {
+    key: "seek",
+    value: function seek(dt) {
+      this._time += dt;
+      return this._continue();
+    }
+  }, {
+    key: "time",
+    value: function time(_time) {
+      if (_time == null) return this._time;
+      this._time = _time;
+      return this;
+    }
+  }, {
+    key: "persist",
+    value: function persist(dtOrForever) {
+      if (dtOrForever == null) return this._persist;
+      this._persist = dtOrForever;
+      return this;
+    }
+  }, {
+    key: "source",
+    value: function source(fn) {
+      if (fn == null) return this._timeSource;
+      this._timeSource = fn;
+      return this;
+    }
+  }, {
+    key: "_step",
+    value: function _step() {
+      // If the timeline is paused, just do nothing
+      if (this._paused) return; // Get the time delta from the last time and update the time
+      // TODO: Deal with window.blur window.focus to pause animations
+
+      var time = this._timeSource();
+
+      var dtSource = time - this._lastSourceTime;
+      var dtTime = this._speed * dtSource + (this._time - this._lastStepTime);
+      this._lastSourceTime = time; // Update the time
+
+      this._time += dtTime;
+      this._lastStepTime = this._time; // this.fire('time', this._time)
+      // Run all of the runners directly
+
+      var runnersLeft = false;
+
+      for (var i = 0, len = this._order.length; i < len; i++) {
+        // Get and run the current runner and ignore it if its inactive
+        var runnerInfo = this._runners[this._order[i]];
+        var runner = runnerInfo.runner;
+        var dt = dtTime; // Make sure that we give the actual difference
+        // between runner start time and now
+
+        var dtToStart = this._time - runnerInfo.start; // Dont run runner if not started yet
+
+        if (dtToStart < 0) {
+          runnersLeft = true;
+          continue;
+        } else if (dtToStart < dt) {
+          // Adjust dt to make sure that animation is on point
+          dt = dtToStart;
+        }
+
+        if (!runner.active()) continue; // If this runner is still going, signal that we need another animation
+        // frame, otherwise, remove the completed runner
+
+        var finished = runner.step(dt).done;
+
+        if (!finished) {
+          runnersLeft = true; // continue
+        } else if (runnerInfo.persist !== true) {
+          // runner is finished. And runner might get removed
+          // TODO: Figure out end time of runner
+          var endTime = runner.duration() - runner.time() + this._time;
+
+          if (endTime + this._persist < this._time) {
+            // Delete runner and correct index
+            delete this._runners[this._order[i]];
+            this._order.splice(i--, 1) && --len;
+            runner.timeline(null);
+          }
+        }
+      } // Get the next animation frame to keep the simulation going
+
+
+      if (runnersLeft) {
+        this._nextFrame = Animator.frame(this._step.bind(this));
+      } else {
+        this._nextFrame = null;
+      }
+
+      return this;
+    } // Checks if we are running and continues the animation
+
+  }, {
+    key: "_continue",
+    value: function _continue() {
+      if (this._paused) return this;
+
+      if (!this._nextFrame) {
+        this._nextFrame = Animator.frame(this._step.bind(this));
+      }
+
+      return this;
+    }
+  }, {
+    key: "active",
+    value: function active() {
+      return !!this._nextFrame;
+    }
+  }]);
+
+  return Timeline;
+}();
+registerMethods({
+  Element: {
+    timeline: function timeline() {
+      this._timeline = this._timeline || new Timeline();
+      return this._timeline;
+    }
+  }
+});
+
+var Runner =
+/*#__PURE__*/
+function (_EventTarget) {
+  _inherits(Runner, _EventTarget);
+
+  function Runner(options) {
+    var _this;
+
+    _classCallCheck(this, Runner);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Runner).call(this)); // Store a unique id on the runner, so that we can identify it later
+
+    _this.id = Runner.id++; // Ensure a default value
+
+    options = options == null ? timeline.duration : options; // Ensure that we get a controller
+
+    options = typeof options === 'function' ? new Controller(options) : options; // Declare all of the variables
+
+    _this._element = null;
+    _this._timeline = null;
+    _this.done = false;
+    _this._queue = []; // Work out the stepper and the duration
+
+    _this._duration = typeof options === 'number' && options;
+    _this._isDeclarative = options instanceof Controller;
+    _this._stepper = _this._isDeclarative ? options : new Ease(); // We copy the current values from the timeline because they can change
+
+    _this._history = {}; // Store the state of the runner
+
+    _this.enabled = true;
+    _this._time = 0;
+    _this._last = 0; // Save transforms applied to this runner
+
+    _this.transforms = new Matrix();
+    _this.transformId = 1; // Looping variables
+
+    _this._haveReversed = false;
+    _this._reverse = false;
+    _this._loopsDone = 0;
+    _this._swing = false;
+    _this._wait = 0;
+    _this._times = 1;
+    return _this;
+  }
+  /*
+  Runner Definitions
+  ==================
+  These methods help us define the runtime behaviour of the Runner or they
+  help us make new runners from the current runner
+  */
+
+
+  _createClass(Runner, [{
+    key: "element",
+    value: function element(_element) {
+      if (_element == null) return this._element;
+      this._element = _element;
+
+      _element._prepareRunner();
+
+      return this;
+    }
+  }, {
+    key: "timeline",
+    value: function timeline$$1(_timeline) {
+      // check explicitly for undefined so we can set the timeline to null
+      if (typeof _timeline === 'undefined') return this._timeline;
+      this._timeline = _timeline;
+      return this;
+    }
+  }, {
+    key: "animate",
+    value: function animate(duration, delay, when) {
+      var o = Runner.sanitise(duration, delay, when);
+      var runner = new Runner(o.duration);
+      if (this._timeline) runner.timeline(this._timeline);
+      if (this._element) runner.element(this._element);
+      return runner.loop(o).schedule(delay, when);
+    }
+  }, {
+    key: "schedule",
+    value: function schedule(timeline$$1, delay, when) {
+      // The user doesn't need to pass a timeline if we already have one
+      if (!(timeline$$1 instanceof Timeline)) {
+        when = delay;
+        delay = timeline$$1;
+        timeline$$1 = this.timeline();
+      } // If there is no timeline, yell at the user...
+
+
+      if (!timeline$$1) {
+        throw Error('Runner cannot be scheduled without timeline');
+      } // Schedule the runner on the timeline provided
+
+
+      timeline$$1.schedule(this, delay, when);
+      return this;
+    }
+  }, {
+    key: "unschedule",
+    value: function unschedule() {
+      var timeline$$1 = this.timeline();
+      timeline$$1 && timeline$$1.unschedule(this);
+      return this;
+    }
+  }, {
+    key: "loop",
+    value: function loop(times, swing, wait) {
+      // Deal with the user passing in an object
+      if (_typeof(times) === 'object') {
+        swing = times.swing;
+        wait = times.wait;
+        times = times.times;
+      } // Sanitise the values and store them
+
+
+      this._times = times || Infinity;
+      this._swing = swing || false;
+      this._wait = wait || 0;
+      return this;
+    }
+  }, {
+    key: "delay",
+    value: function delay(_delay) {
+      return this.animate(0, _delay);
+    }
+    /*
+    Basic Functionality
+    ===================
+    These methods allow us to attach basic functions to the runner directly
+    */
+
+  }, {
+    key: "queue",
+    value: function queue(initFn, runFn, isTransform) {
+      this._queue.push({
+        initialiser: initFn || noop,
+        runner: runFn || noop,
+        isTransform: isTransform,
+        initialised: false,
+        finished: false
+      });
+
+      var timeline$$1 = this.timeline();
+      timeline$$1 && this.timeline()._continue();
+      return this;
+    }
+  }, {
+    key: "during",
+    value: function during(fn) {
+      return this.queue(null, fn);
+    }
+  }, {
+    key: "after",
+    value: function after(fn) {
+      return this.on('finish', fn);
+    }
+    /*
+    Runner animation methods
+    ========================
+    Control how the animation plays
+    */
+
+  }, {
+    key: "time",
+    value: function time(_time) {
+      if (_time == null) {
+        return this._time;
+      }
+
+      var dt = _time - this._time;
+      this.step(dt);
+      return this;
+    }
+  }, {
+    key: "duration",
+    value: function duration() {
+      return this._times * (this._wait + this._duration) - this._wait;
+    }
+  }, {
+    key: "loops",
+    value: function loops(p) {
+      var loopDuration = this._duration + this._wait;
+
+      if (p == null) {
+        var loopsDone = Math.floor(this._time / loopDuration);
+        var relativeTime = this._time - loopsDone * loopDuration;
+        var position = relativeTime / this._duration;
+        return Math.min(loopsDone + position, this._times);
+      }
+
+      var whole = Math.floor(p);
+      var partial = p % 1;
+      var time = loopDuration * whole + this._duration * partial;
+      return this.time(time);
+    }
+  }, {
+    key: "position",
+    value: function position(p) {
+      // Get all of the variables we need
+      var x = this._time;
+      var d = this._duration;
+      var w = this._wait;
+      var t = this._times;
+      var s = this._swing;
+      var r = this._reverse;
+      var position;
+
+      if (p == null) {
+        /*
+        This function converts a time to a position in the range [0, 1]
+        The full explanation can be found in this desmos demonstration
+          https://www.desmos.com/calculator/u4fbavgche
+        The logic is slightly simplified here because we can use booleans
+        */
+        // Figure out the value without thinking about the start or end time
+        var f = function f(x) {
+          var swinging = s * Math.floor(x % (2 * (w + d)) / (w + d));
+          var backwards = swinging && !r || !swinging && r;
+          var uncliped = Math.pow(-1, backwards) * (x % (w + d)) / d + backwards;
+          var clipped = Math.max(Math.min(uncliped, 1), 0);
+          return clipped;
+        }; // Figure out the value by incorporating the start time
+
+
+        var endTime = t * (w + d) - w;
+        position = x <= 0 ? Math.round(f(1e-5)) : x < endTime ? f(x) : Math.round(f(endTime - 1e-5));
+        return position;
+      } // Work out the loops done and add the position to the loops done
+
+
+      var loopsDone = Math.floor(this.loops());
+      var swingForward = s && loopsDone % 2 === 0;
+      var forwards = swingForward && !r || r && swingForward;
+      position = loopsDone + (forwards ? p : 1 - p);
+      return this.loops(position);
+    }
+  }, {
+    key: "progress",
+    value: function progress(p) {
+      if (p == null) {
+        return Math.min(1, this._time / this.duration());
+      }
+
+      return this.time(p * this.duration());
+    }
+  }, {
+    key: "step",
+    value: function step(dt) {
+      // If we are inactive, this stepper just gets skipped
+      if (!this.enabled) return this; // Update the time and get the new position
+
+      dt = dt == null ? 16 : dt;
+      this._time += dt;
+      var position = this.position(); // Figure out if we need to run the stepper in this frame
+
+      var running = this._lastPosition !== position && this._time >= 0;
+      this._lastPosition = position; // Figure out if we just started
+
+      var duration = this.duration();
+      var justStarted = this._lastTime < 0 && this._time > 0;
+      var justFinished = this._lastTime < this._time && this.time > duration;
+      this._lastTime = this._time;
+
+      if (justStarted) {
+        this.fire('start', this);
+      } // Work out if the runner is finished set the done flag here so animations
+      // know, that they are running in the last step (this is good for
+      // transformations which can be merged)
+
+
+      var declarative = this._isDeclarative;
+      this.done = !declarative && !justFinished && this._time >= duration; // Call initialise and the run function
+
+      if (running || declarative) {
+        this._initialise(running); // clear the transforms on this runner so they dont get added again and again
+
+
+        this.transforms = new Matrix();
+
+        var converged = this._run(declarative ? dt : position);
+
+        this.fire('step', this);
+      } // correct the done flag here
+      // declaritive animations itself know when they converged
+
+
+      this.done = this.done || converged && declarative;
+
+      if (this.done) {
+        this.fire('finish', this);
+      }
+
+      return this;
+    }
+  }, {
+    key: "finish",
+    value: function finish() {
+      return this.step(Infinity);
+    }
+  }, {
+    key: "reverse",
+    value: function reverse(_reverse) {
+      this._reverse = _reverse == null ? !this._reverse : _reverse;
+      return this;
+    }
+  }, {
+    key: "ease",
+    value: function ease(fn) {
+      this._stepper = new Ease(fn);
+      return this;
+    }
+  }, {
+    key: "active",
+    value: function active(enabled) {
+      if (enabled == null) return this.enabled;
+      this.enabled = enabled;
+      return this;
+    }
+    /*
+    Private Methods
+    ===============
+    Methods that shouldn't be used externally
+    */
+    // Save a morpher to the morpher list so that we can retarget it later
+
+  }, {
+    key: "_rememberMorpher",
+    value: function _rememberMorpher(method, morpher) {
+      this._history[method] = {
+        morpher: morpher,
+        caller: this._queue[this._queue.length - 1]
+      };
+    } // Try to set the target for a morpher if the morpher exists, otherwise
+    // do nothing and return false
+
+  }, {
+    key: "_tryRetarget",
+    value: function _tryRetarget(method, target) {
+      if (this._history[method]) {
+        // if the last method wasnt even initialised, throw it away
+        if (!this._history[method].caller.initialised) {
+          var index = this._queue.indexOf(this._history[method].caller);
+
+          this._queue.splice(index, 1);
+
+          return false;
+        } // for the case of transformations, we use the special retarget function
+        // which has access to the outer scope
+
+
+        if (this._history[method].caller.isTransform) {
+          this._history[method].caller.isTransform(target); // for everything else a simple morpher change is sufficient
+
+        } else {
+          this._history[method].morpher.to(target);
+        }
+
+        this._history[method].caller.finished = false;
+        var timeline$$1 = this.timeline();
+        timeline$$1 && timeline$$1._continue();
+        return true;
+      }
+
+      return false;
+    } // Run each initialise function in the runner if required
+
+  }, {
+    key: "_initialise",
+    value: function _initialise(running) {
+      // If we aren't running, we shouldn't initialise when not declarative
+      if (!running && !this._isDeclarative) return; // Loop through all of the initialisers
+
+      for (var i = 0, len = this._queue.length; i < len; ++i) {
+        // Get the current initialiser
+        var current = this._queue[i]; // Determine whether we need to initialise
+
+        var needsIt = this._isDeclarative || !current.initialised && running;
+        running = !current.finished; // Call the initialiser if we need to
+
+        if (needsIt && running) {
+          current.initialiser.call(this);
+          current.initialised = true;
+        }
+      }
+    } // Run each run function for the position or dt given
+
+  }, {
+    key: "_run",
+    value: function _run(positionOrDt) {
+      // Run all of the _queue directly
+      var allfinished = true;
+
+      for (var i = 0, len = this._queue.length; i < len; ++i) {
+        // Get the current function to run
+        var current = this._queue[i]; // Run the function if its not finished, we keep track of the finished
+        // flag for the sake of declarative _queue
+
+        var converged = current.runner.call(this, positionOrDt);
+        current.finished = current.finished || converged === true;
+        allfinished = allfinished && current.finished;
+      } // We report when all of the constructors are finished
+
+
+      return allfinished;
+    }
+  }, {
+    key: "addTransform",
+    value: function addTransform(transform, index) {
+      this.transforms.lmultiplyO(transform);
+      return this;
+    }
+  }, {
+    key: "clearTransform",
+    value: function clearTransform() {
+      this.transforms = new Matrix();
+      return this;
+    }
+  }], [{
+    key: "sanitise",
+    value: function sanitise(duration, delay, when) {
+      // Initialise the default parameters
+      var times = 1;
+      var swing = false;
+      var wait = 0;
+      duration = duration || timeline.duration;
+      delay = delay || timeline.delay;
+      when = when || 'last'; // If we have an object, unpack the values
+
+      if (_typeof(duration) === 'object' && !(duration instanceof Stepper)) {
+        delay = duration.delay || delay;
+        when = duration.when || when;
+        swing = duration.swing || swing;
+        times = duration.times || times;
+        wait = duration.wait || wait;
+        duration = duration.duration || timeline.duration;
+      }
+
+      return {
+        duration: duration,
+        delay: delay,
+        swing: swing,
+        times: times,
+        wait: wait,
+        when: when
+      };
+    }
+  }]);
+
+  return Runner;
+}(EventTarget);
+Runner.id = 0;
+
+var FakeRunner = function FakeRunner() {
+  var transforms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Matrix();
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+  var done = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+
+  _classCallCheck(this, FakeRunner);
+
+  this.transforms = transforms;
+  this.id = id;
+  this.done = done;
+};
+
+extend([Runner, FakeRunner], {
+  mergeWith: function mergeWith(runner) {
+    return new FakeRunner(runner.transforms.lmultiply(this.transforms), runner.id);
+  }
+}); // FakeRunner.emptyRunner = new FakeRunner()
+
+var lmultiply = function lmultiply(last, curr) {
+  return last.lmultiplyO(curr);
+};
+
+var getRunnerTransform = function getRunnerTransform(runner) {
+  return runner.transforms;
+};
+
+function mergeTransforms() {
+  // Find the matrix to apply to the element and apply it
+  var runners = this._transformationRunners.runners;
+  var netTransform = runners.map(getRunnerTransform).reduce(lmultiply, new Matrix());
+  this.transform(netTransform);
+
+  this._transformationRunners.merge();
+
+  if (this._transformationRunners.length() === 1) {
+    this._frameId = null;
+  }
+}
+
+var RunnerArray =
+/*#__PURE__*/
+function () {
+  function RunnerArray() {
+    _classCallCheck(this, RunnerArray);
+
+    this.runners = [];
+    this.ids = [];
+  }
+
+  _createClass(RunnerArray, [{
+    key: "add",
+    value: function add(runner) {
+      if (this.runners.includes(runner)) return;
+      var id = runner.id + 1;
+      var leftSibling = this.ids.reduce(function (last, curr) {
+        if (curr > last && curr < id) return curr;
+        return last;
+      }, 0);
+      var index = this.ids.indexOf(leftSibling) + 1;
+      this.ids.splice(index, 0, id);
+      this.runners.splice(index, 0, runner);
+      return this;
+    }
+  }, {
+    key: "getByID",
+    value: function getByID(id) {
+      return this.runners[this.ids.indexOf(id + 1)];
+    }
+  }, {
+    key: "remove",
+    value: function remove(id) {
+      var index = this.ids.indexOf(id + 1);
+      this.ids.splice(index, 1);
+      this.runners.splice(index, 1);
+      return this;
+    }
+  }, {
+    key: "merge",
+    value: function merge() {
+      var _this2 = this;
+
+      var lastRunner = null;
+      this.runners.forEach(function (runner, i) {
+        if (lastRunner && runner.done && lastRunner.done) {
+          _this2.remove(runner.id);
+
+          _this2.edit(lastRunner.id, runner.mergeWith(lastRunner));
+        }
+
+        lastRunner = runner;
+      });
+      return this;
+    }
+  }, {
+    key: "edit",
+    value: function edit(id, newRunner) {
+      var index = this.ids.indexOf(id + 1);
+      this.ids.splice(index, 1, id);
+      this.runners.splice(index, 1, newRunner);
+      return this;
+    }
+  }, {
+    key: "length",
+    value: function length() {
+      return this.ids.length;
+    }
+  }, {
+    key: "clearBefore",
+    value: function clearBefore(id) {
+      var deleteCnt = this.ids.indexOf(id + 1) || 1;
+      this.ids.splice(0, deleteCnt, 0);
+      this.runners.splice(0, deleteCnt, new FakeRunner());
+      return this;
+    }
+  }]);
+
+  return RunnerArray;
+}();
+
+var frameId = 0;
+registerMethods({
+  Element: {
+    animate: function animate(duration, delay, when) {
+      var o = Runner.sanitise(duration, delay, when);
+      var timeline$$1 = this.timeline();
+      return new Runner(o.duration).loop(o).element(this).timeline(timeline$$1).schedule(delay, when);
+    },
+    delay: function delay(by, when) {
+      return this.animate(0, by, when);
+    },
+    // this function searches for all runners on the element and deletes the ones
+    // which run before the current one. This is because absolute transformations
+    // overwfrite anything anyway so there is no need to waste time computing
+    // other runners
+    _clearTransformRunnersBefore: function _clearTransformRunnersBefore(currentRunner) {
+      this._transformationRunners.clearBefore(currentRunner.id);
+    },
+    _currentTransform: function _currentTransform(current) {
+      return this._transformationRunners.runners // we need the equal sign here to make sure, that also transformations
+      // on the same runner which execute before the current transformation are
+      // taken into account
+      .filter(function (runner) {
+        return runner.id <= current.id;
+      }).map(getRunnerTransform).reduce(lmultiply, new Matrix());
+    },
+    addRunner: function addRunner(runner) {
+      this._transformationRunners.add(runner);
+
+      Animator.transform_frame(mergeTransforms.bind(this), this._frameId);
+    },
+    _prepareRunner: function _prepareRunner() {
+      if (this._frameId == null) {
+        this._transformationRunners = new RunnerArray().add(new FakeRunner(new Matrix(this)));
+        this._frameId = frameId++;
+      }
+    }
+  }
+});
+extend(Runner, {
+  attr: function attr(a, v) {
+    return this.styleAttr('attr', a, v);
+  },
+  // Add animatable styles
+  css: function css(s, v) {
+    return this.styleAttr('css', s, v);
+  },
+  styleAttr: function styleAttr(type, name, val) {
+    // apply attributes individually
+    if (_typeof(name) === 'object') {
+      for (var key in val) {
+        this.styleAttr(type, key, val[key]);
+      }
+    }
+
+    var morpher = new Morphable(this._stepper).to(val);
+    this.queue(function () {
+      morpher = morpher.from(this.element()[type](name));
+    }, function (pos) {
+      this.element()[type](name, morpher.at(pos));
+      return morpher.done();
+    });
+    return this;
+  },
+  zoom: function zoom(level, point) {
+    var morpher = new Morphable(this._stepper).to(new SVGNumber(level));
+    this.queue(function () {
+      morpher = morpher.from(this.zoom());
+    }, function (pos) {
+      this.element().zoom(morpher.at(pos), point);
+      return morpher.done();
+    });
+    return this;
+  },
+
+  /**
+   ** absolute transformations
+   **/
+  //
+  // M v -----|-----(D M v = F v)------|----->  T v
+  //
+  // 1. define the final state (T) and decompose it (once)
+  //    t = [tx, ty, the, lam, sy, sx]
+  // 2. on every frame: pull the current state of all previous transforms
+  //    (M - m can change)
+  //   and then write this as m = [tx0, ty0, the0, lam0, sy0, sx0]
+  // 3. Find the interpolated matrix F(pos) = m + pos * (t - m)
+  //   - Note F(0) = M
+  //   - Note F(1) = T
+  // 4. Now you get the delta matrix as a result: D = F * inv(M)
+  transform: function transform(transforms, relative, affine) {
+    // If we have a declarative function, we should retarget it if possible
+    relative = transforms.relative || relative;
+
+    if (this._isDeclarative && !relative && this._tryRetarget('transform', transforms)) {
+      return this;
+    } // Parse the parameters
+
+
+    var isMatrix = Matrix.isMatrixLike(transforms);
+    affine = transforms.affine != null ? transforms.affine : affine != null ? affine : !isMatrix; // Create a morepher and set its type
+
+    var morpher = new Morphable().type(affine ? TransformBag : Matrix).stepper(this._stepper);
+    var origin;
+    var element;
+    var current;
+    var currentAngle;
+    var startTransform;
+
+    function setup() {
+      // make sure element and origin is defined
+      element = element || this.element();
+      origin = origin || getOrigin(transforms, element);
+      startTransform = new Matrix(relative ? undefined : element); // add the runner to the element so it can merge transformations
+
+      element.addRunner(this); // Deactivate all transforms that have run so far if we are absolute
+
+      if (!relative) {
+        element._clearTransformRunnersBefore(this);
+      }
+    }
+
+    function run(pos) {
+      // clear all other transforms before this in case something is saved
+      // on this runner. We are absolute. We dont need these!
+      if (!relative) this.clearTransform();
+
+      var _transform = new Point(origin).transform(element._currentTransform(this)),
+          x = _transform.x,
+          y = _transform.y;
+
+      var target = new Matrix(_objectSpread({}, transforms, {
+        origin: [x, y]
+      }));
+      var start = this._isDeclarative && current ? current : startTransform;
+
+      if (affine) {
+        target = target.decompose(x, y);
+        start = start.decompose(x, y); // Get the current and target angle as it was set
+
+        var rTarget = target.rotate;
+        var rCurrent = start.rotate; // Figure out the shortest path to rotate directly
+
+        var possibilities = [rTarget - 360, rTarget, rTarget + 360];
+        var distances = possibilities.map(function (a) {
+          return Math.abs(a - rCurrent);
+        });
+        var shortest = Math.min.apply(Math, _toConsumableArray(distances));
+        var index = distances.indexOf(shortest);
+        target.rotate = possibilities[index];
+      }
+
+      if (relative) {
+        // we have to be careful here not to overwrite the rotation
+        // with the rotate method of Matrix
+        if (!isMatrix) {
+          target.rotate = transforms.rotate || 0;
+        }
+
+        if (this._isDeclarative && currentAngle) {
+          start.rotate = currentAngle;
+        }
+      }
+
+      morpher.from(start);
+      morpher.to(target);
+      var affineParameters = morpher.at(pos);
+      currentAngle = affineParameters.rotate;
+      current = new Matrix(affineParameters);
+      this.addTransform(current);
+      return morpher.done();
+    }
+
+    function retarget(newTransforms) {
+      // only get a new origin if it changed since the last call
+      if ((newTransforms.origin || 'center').toString() !== (transforms.origin || 'center').toString()) {
+        origin = getOrigin(transforms, element);
+      } // overwrite the old transformations with the new ones
+
+
+      transforms = _objectSpread({}, newTransforms, {
+        origin: origin
+      });
+    }
+
+    this.queue(setup, run, retarget);
+    this._isDeclarative && this._rememberMorpher('transform', morpher);
+    return this;
+  },
+  // Animatable x-axis
+  x: function x(_x, relative) {
+    return this._queueNumber('x', _x);
+  },
+  // Animatable y-axis
+  y: function y(_y) {
+    return this._queueNumber('y', _y);
+  },
+  dx: function dx(x) {
+    return this._queueNumberDelta('dx', x);
+  },
+  dy: function dy(y) {
+    return this._queueNumberDelta('dy', y);
+  },
+  _queueNumberDelta: function _queueNumberDelta(method, to) {
+    to = new SVGNumber(to); // Try to change the target if we have this method already registerd
+
+    if (this._tryRetargetDelta(method, to)) return this; // Make a morpher and queue the animation
+
+    var morpher = new Morphable(this._stepper).to(to);
+    this.queue(function () {
+      var from = this.element()[method]();
+      morpher.from(from);
+      morpher.to(from + to);
+    }, function (pos) {
+      this.element()[method](morpher.at(pos));
+      return morpher.done();
+    }); // Register the morpher so that if it is changed again, we can retarget it
+
+    this._rememberMorpher(method, morpher);
+
+    return this;
+  },
+  _queueObject: function _queueObject(method, to) {
+    // Try to change the target if we have this method already registerd
+    if (this._tryRetarget(method, to)) return this; // Make a morpher and queue the animation
+
+    var morpher = new Morphable(this._stepper).to(to);
+    this.queue(function () {
+      morpher.from(this.element()[method]());
+    }, function (pos) {
+      this.element()[method](morpher.at(pos));
+      return morpher.done();
+    }); // Register the morpher so that if it is changed again, we can retarget it
+
+    this._rememberMorpher(method, morpher);
+
+    return this;
+  },
+  _queueNumber: function _queueNumber(method, value) {
+    return this._queueObject(method, new SVGNumber(value));
+  },
+  // Animatable center x-axis
+  cx: function cx(x) {
+    return this._queueNumber('cx', x);
+  },
+  // Animatable center y-axis
+  cy: function cy(y) {
+    return this._queueNumber('cy', y);
+  },
+  // Add animatable move
+  move: function move(x, y) {
+    return this.x(x).y(y);
+  },
+  // Add animatable center
+  center: function center(x, y) {
+    return this.cx(x).cy(y);
+  },
+  // Add animatable size
+  size: function size(width, height) {
+    // animate bbox based size for all other elements
+    var box;
+
+    if (!width || !height) {
+      box = this._element.bbox();
+    }
+
+    if (!width) {
+      width = box.width / box.height * height;
+    }
+
+    if (!height) {
+      height = box.height / box.width * width;
+    }
+
+    return this.width(width).height(height);
+  },
+  // Add animatable width
+  width: function width(_width) {
+    return this._queueNumber('width', _width);
+  },
+  // Add animatable height
+  height: function height(_height) {
+    return this._queueNumber('height', _height);
+  },
+  // Add animatable plot
+  plot: function plot(a, b, c, d) {
+    // Lines can be plotted with 4 arguments
+    if (arguments.length === 4) {
+      return this.plot([a, b, c, d]);
+    } // FIXME: this needs to be rewritten such that the element is only accesed
+    // in the init function
+
+
+    return this._queueObject('plot', new this._element.MorphArray(a));
+    /*
+    var morpher = this._element.morphArray().to(a)
+      this.queue(function () {
+      morpher.from(this._element.array())
+    }, function (pos) {
+      this._element.plot(morpher.at(pos))
+    })
+      return this
+    */
+  },
+  // Add leading method
+  leading: function leading(value) {
+    return this._queueNumber('leading', value);
+  },
+  // Add animatable viewbox
+  viewbox: function viewbox(x, y, width, height) {
+    return this._queueObject('viewbox', new Box(x, y, width, height));
+  },
+  update: function update(o) {
+    if (_typeof(o) !== 'object') {
+      return this.update({
+        offset: arguments[0],
+        color: arguments[1],
+        opacity: arguments[2]
+      });
+    }
+
+    if (o.opacity != null) this.attr('stop-opacity', o.opacity);
+    if (o.color != null) this.attr('stop-color', o.color);
+    if (o.offset != null) this.attr('offset', o.offset);
+    return this;
+  }
+});
+
+var sugar = {
+  stroke: ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'],
+  fill: ['color', 'opacity', 'rule'],
+  prefix: function prefix(t, a) {
+    return a === 'color' ? t : t + '-' + a;
+  } // Add sugar for fill and stroke
+
+};
+['fill', 'stroke'].forEach(function (m) {
+  var extension = {};
+  var i;
+
+  extension[m] = function (o) {
+    if (typeof o === 'undefined') {
+      return this;
+    }
+
+    if (typeof o === 'string' || Color.isRgb(o) || o instanceof Element) {
+      this.attr(m, o);
+    } else {
+      // set all attributes from sugar.fill and sugar.stroke list
+      for (i = sugar[m].length - 1; i >= 0; i--) {
+        if (o[sugar[m][i]] != null) {
+          this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]]);
+        }
+      }
+    }
+
+    return this;
+  };
+
+  registerMethods(['Shape', 'Runner'], extension);
+});
+registerMethods(['Element', 'Runner'], {
+  // Let the user set the matrix directly
+  matrix: function matrix(mat, b, c, d, e, f) {
+    // Act as a getter
+    if (mat == null) {
+      return new Matrix(this);
+    } // Act as a setter, the user can pass a matrix or a set of numbers
+
+
+    return this.attr('transform', new Matrix(mat, b, c, d, e, f));
+  },
+  // Map rotation to transform
+  rotate: function rotate(angle, cx, cy) {
+    return this.transform({
+      rotate: angle,
+      ox: cx,
+      oy: cy
+    }, true);
+  },
+  // Map skew to transform
+  skew: function skew(x, y, cx, cy) {
+    return arguments.length === 1 || arguments.length === 3 ? this.transform({
+      skew: x,
+      ox: y,
+      oy: cx
+    }, true) : this.transform({
+      skew: [x, y],
+      ox: cx,
+      oy: cy
+    }, true);
+  },
+  shear: function shear(lam, cx, cy) {
+    return this.transform({
+      shear: lam,
+      ox: cx,
+      oy: cy
+    }, true);
+  },
+  // Map scale to transform
+  scale: function scale(x, y, cx, cy) {
+    return arguments.length === 1 || arguments.length === 3 ? this.transform({
+      scale: x,
+      ox: y,
+      oy: cx
+    }, true) : this.transform({
+      scale: [x, y],
+      ox: cx,
+      oy: cy
+    }, true);
+  },
+  // Map translate to transform
+  translate: function translate(x, y) {
+    return this.transform({
+      translate: [x, y]
+    }, true);
+  },
+  // Map relative translations to transform
+  relative: function relative(x, y) {
+    return this.transform({
+      relative: [x, y]
+    }, true);
+  },
+  // Map flip to transform
+  flip: function flip(direction, around) {
+    var directionString = typeof direction === 'string' ? direction : isFinite(direction) ? 'both' : 'both';
+    var origin = direction === 'both' && isFinite(around) ? [around, around] : direction === 'x' ? [around, 0] : direction === 'y' ? [0, around] : isFinite(direction) ? [direction, direction] : [0, 0];
+    this.transform({
+      flip: directionString,
+      origin: origin
+    }, true);
+  },
+  // Opacity
+  opacity: function opacity(value) {
+    return this.attr('opacity', value);
+  },
+  // Relative move over x axis
+  dx: function dx(x) {
+    return this.x(new SVGNumber(x).plus(this instanceof Runner ? 0 : this.x()), true);
+  },
+  // Relative move over y axis
+  dy: function dy(y) {
+    return this.y(new SVGNumber(y).plus(this instanceof Runner ? 0 : this.y()), true);
+  },
+  // Relative move over x and y axes
+  dmove: function dmove(x, y) {
+    return this.dx(x).dy(y);
+  }
+});
+registerMethods('radius', {
+  // Add x and y radius
+  radius: function radius(x, y) {
+    var type = (this._element || this).type;
+    return type === 'radialGradient' || type === 'radialGradient' ? this.attr('r', new SVGNumber(x)) : this.rx(x).ry(y == null ? x : y);
+  }
+});
+registerMethods('Path', {
+  // Get path length
+  length: function length() {
+    return this.node.getTotalLength();
+  },
+  // Get point at length
+  pointAt: function pointAt(length) {
+    return new Point(this.node.getPointAtLength(length));
+  }
+});
+registerMethods(['Element', 'Runner'], {
+  // Set font
+  font: function font(a, v) {
+    if (_typeof(a) === 'object') {
+      for (v in a) {
+        this.font(v, a[v]);
+      }
+    }
+
+    return a === 'leading' ? this.leading(v) : a === 'anchor' ? this.attr('text-anchor', v) : a === 'size' || a === 'family' || a === 'weight' || a === 'stretch' || a === 'variant' || a === 'style' ? this.attr('font-' + a, v) : this.attr(a, v);
+  }
+});
+
+function untransform() {
+  return this.attr('transform', null);
+} // merge the whole transformation chain into one matrix and returns it
+
+function matrixify() {
+  var matrix = (this.attr('transform') || ''). // split transformations
+  split(transforms).slice(0, -1).map(function (str) {
+    // generate key => value pairs
+    var kv = str.trim().split('(');
+    return [kv[0], kv[1].split(delimiter).map(function (str) {
+      return parseFloat(str);
+    })];
+  }).reverse() // merge every transformation into one matrix
+  .reduce(function (matrix, transform) {
+    if (transform[0] === 'matrix') {
+      return matrix.lmultiply(Matrix.fromArray(transform[1]));
+    }
+
+    return matrix[transform[0]].apply(matrix, transform[1]);
+  }, new Matrix());
+  return matrix;
+} // add an element to another parent without changing the visual representation on the screen
+
+function toParent(parent) {
+  if (this === parent) return this;
+  var ctm = this.screenCTM();
+  var pCtm = parent.screenCTM().inverse();
+  this.addTo(parent).untransform().transform(pCtm.multiply(ctm));
+  return this;
+} // same as above with parent equals root-svg
+
+function toDoc() {
+  return this.toParent(this.doc());
+} // Add transformations
+
+function transform(o, relative) {
+  // Act as a getter if no object was passed
+  if (o == null || typeof o === 'string') {
+    var decomposed = new Matrix(this).decompose();
+    return decomposed[o] || decomposed;
+  }
+
+  if (!Matrix.isMatrixLike(o)) {
+    // Set the origin according to the defined transform
+    o = _objectSpread({}, o, {
+      origin: getOrigin(o, this)
+    });
+  } // The user can pass a boolean, an Element or an Matrix or nothing
+
+
+  var cleanRelative = relative === true ? this : relative || false;
+  var result = new Matrix(cleanRelative).transform(o);
+  return this.attr('transform', result);
+}
+registerMethods('Element', {
+  untransform: untransform,
+  matrixify: matrixify,
+  toParent: toParent,
+  toDoc: toDoc,
+  transform: transform
+});
+
+// FIXME: import this to runner
+
+function rx(rx) {
+  return this.attr('rx', rx);
+} // Radius y value
+
+function ry(ry) {
+  return this.attr('ry', ry);
+} // Move over x-axis
+
+function x(x) {
+  return x == null ? this.cx() - this.rx() : this.cx(x + this.rx());
+} // Move over y-axis
+
+function y(y) {
+  return y == null ? this.cy() - this.ry() : this.cy(y + this.ry());
+} // Move by center over x-axis
+
+function cx(x) {
+  return x == null ? this.attr('cx') : this.attr('cx', x);
+} // Move by center over y-axis
+
+function cy(y) {
+  return y == null ? this.attr('cy') : this.attr('cy', y);
+} // Set width of element
+
+function width(width) {
+  return width == null ? this.rx() * 2 : this.rx(new SVGNumber(width).divide(2));
+} // Set height of element
+
+function height(height) {
+  return height == null ? this.ry() * 2 : this.ry(new SVGNumber(height).divide(2));
+} // Custom size function
+
+function size(width, height) {
+  var p = proportionalSize(this, width, height);
+  return this.rx(new SVGNumber(p.width).divide(2)).ry(new SVGNumber(p.height).divide(2));
+}
+
+var circled = /*#__PURE__*/Object.freeze({
+  rx: rx,
+  ry: ry,
+  x: x,
+  y: y,
+  cx: cx,
+  cy: cy,
+  width: width,
+  height: height,
+  size: size
+});
+
+var Shape =
+/*#__PURE__*/
+function (_Element) {
+  _inherits(Shape, _Element);
+
+  function Shape() {
+    _classCallCheck(this, Shape);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Shape).apply(this, arguments));
+  }
+
+  return Shape;
+}(Element);
+
+var Circle =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Circle, _Shape);
+
+  function Circle(node) {
+    _classCallCheck(this, Circle);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Circle).call(this, nodeOrNew('circle', node), Circle));
+  }
+
+  _createClass(Circle, [{
+    key: "radius",
+    value: function radius(r) {
+      return this.attr('r', r);
+    } // Radius x value
+
+  }, {
+    key: "rx",
+    value: function rx$$1(_rx) {
+      return this.attr('r', _rx);
+    } // Alias radius x value
+
+  }, {
+    key: "ry",
+    value: function ry$$1(_ry) {
+      return this.rx(_ry);
+    }
+  }]);
+
+  return Circle;
+}(Shape);
+extend(Circle, {
+  x: x,
+  y: y,
+  cx: cx,
+  cy: cy,
+  width: width,
+  height: height,
+  size: size
+});
+registerMethods({
+  Element: {
+    // Create circle element
+    circle: function circle(size$$1) {
+      return this.put(new Circle()).radius(new SVGNumber(size$$1).divide(2)).move(0, 0);
+    }
+  }
+});
+register(Circle);
+
+var Ellipse =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Ellipse, _Shape);
+
+  function Ellipse(node) {
+    _classCallCheck(this, Ellipse);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Ellipse).call(this, nodeOrNew('ellipse', node), Ellipse));
+  }
+
+  return Ellipse;
+}(Shape);
+extend(Ellipse, circled);
+registerMethods('Container', {
+  // Create an ellipse
+  ellipse: function ellipse(width$$1, height$$1) {
+    return this.put(new Ellipse()).size(width$$1, height$$1).move(0, 0);
+  }
+});
+register(Ellipse);
+
+var Stop =
+/*#__PURE__*/
+function (_Element) {
+  _inherits(Stop, _Element);
+
+  function Stop(node) {
+    _classCallCheck(this, Stop);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Stop).call(this, nodeOrNew('stop', node), Stop));
+  } // add color stops
+
+
+  _createClass(Stop, [{
+    key: "update",
+    value: function update(o) {
+      if (typeof o === 'number' || o instanceof SVGNumber) {
+        o = {
+          offset: arguments[0],
+          color: arguments[1],
+          opacity: arguments[2]
+        };
+      } // set attributes
+
+
+      if (o.opacity != null) this.attr('stop-opacity', o.opacity);
+      if (o.color != null) this.attr('stop-color', o.color);
+      if (o.offset != null) this.attr('offset', new SVGNumber(o.offset));
+      return this;
+    }
+  }]);
+
+  return Stop;
+}(Element);
+register(Stop);
+
+function baseFind(query, parent) {
+  return map((parent || document).querySelectorAll(query), function (node) {
+    return adopt(node);
+  });
+} // Scoped find method
+
+function find(query) {
+  return baseFind(query, this.node);
+}
+registerMethods('Dom', {
+  find: find
+});
+
+// FIXME: add to runner
+function from(x, y) {
+  return (this._element || this).type === 'radialGradient' ? this.attr({
+    fx: new SVGNumber(x),
+    fy: new SVGNumber(y)
+  }) : this.attr({
+    x1: new SVGNumber(x),
+    y1: new SVGNumber(y)
+  });
+}
+function to(x, y) {
+  return (this._element || this).type === 'radialGradient' ? this.attr({
+    cx: new SVGNumber(x),
+    cy: new SVGNumber(y)
+  }) : this.attr({
+    x2: new SVGNumber(x),
+    y2: new SVGNumber(y)
+  });
+}
+
+var gradiented = /*#__PURE__*/Object.freeze({
+  from: from,
+  to: to
+});
+
+var Gradient =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(Gradient, _Container);
+
+  function Gradient(type) {
+    _classCallCheck(this, Gradient);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Gradient).call(this, nodeOrNew(type + 'Gradient', typeof type === 'string' ? null : type), Gradient));
+  } // Add a color stop
+
+
+  _createClass(Gradient, [{
+    key: "stop",
+    value: function stop(offset, color, opacity) {
+      return this.put(new Stop()).update(offset, color, opacity);
+    } // Update gradient
+
+  }, {
+    key: "update",
+    value: function update(block) {
+      // remove all stops
+      this.clear(); // invoke passed block
+
+      if (typeof block === 'function') {
+        block.call(this, this);
+      }
+
+      return this;
+    } // Return the fill id
+
+  }, {
+    key: "url",
+    value: function url() {
+      return 'url(#' + this.id() + ')';
+    } // Alias string convertion to fill
+
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.url();
+    } // custom attr to handle transform
+
+  }, {
+    key: "attr",
+    value: function attr(a, b, c) {
+      if (a === 'transform') a = 'gradientTransform';
+      return _get(_getPrototypeOf(Gradient.prototype), "attr", this).call(this, a, b, c);
+    }
+  }, {
+    key: "targets",
+    value: function targets() {
+      return baseFind('svg [fill*="' + this.id() + '"]');
+    }
+  }, {
+    key: "bbox",
+    value: function bbox() {
+      return new Box();
+    }
+  }]);
+
+  return Gradient;
+}(Container);
+extend(Gradient, gradiented);
+registerMethods({
+  Container: {
+    // Create gradient element in defs
+    gradient: function gradient(type, block) {
+      return this.defs().gradient(type, block);
+    }
+  },
+  // define gradient
+  Defs: {
+    gradient: function gradient(type, block) {
+      return this.put(new Gradient(type)).update(block);
+    }
+  }
+});
+register(Gradient);
+
+var Pattern =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(Pattern, _Container);
+
+  // Initialize node
+  function Pattern(node) {
+    _classCallCheck(this, Pattern);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Pattern).call(this, nodeOrNew('pattern', node), Pattern));
+  } // Return the fill id
+
+
+  _createClass(Pattern, [{
+    key: "url",
+    value: function url() {
+      return 'url(#' + this.id() + ')';
+    } // Update pattern by rebuilding
+
+  }, {
+    key: "update",
+    value: function update(block) {
+      // remove content
+      this.clear(); // invoke passed block
+
+      if (typeof block === 'function') {
+        block.call(this, this);
+      }
+
+      return this;
+    } // Alias string convertion to fill
+
+  }, {
+    key: "toString",
+    value: function toString() {
+      return this.url();
+    } // custom attr to handle transform
+
+  }, {
+    key: "attr",
+    value: function attr(a, b, c) {
+      if (a === 'transform') a = 'patternTransform';
+      return _get(_getPrototypeOf(Pattern.prototype), "attr", this).call(this, a, b, c);
+    }
+  }, {
+    key: "targets",
+    value: function targets() {
+      return baseFind('svg [fill*="' + this.id() + '"]');
+    }
+  }, {
+    key: "bbox",
+    value: function bbox() {
+      return new Box();
+    }
+  }]);
+
+  return Pattern;
+}(Container);
+registerMethods({
+  Container: {
+    // Create pattern element in defs
+    pattern: function pattern(width, height, block) {
+      return this.defs().pattern(width, height, block);
+    }
+  },
+  Defs: {
+    pattern: function pattern(width, height, block) {
+      return this.put(new Pattern()).update(block).attr({
+        x: 0,
+        y: 0,
+        width: width,
+        height: height,
+        patternUnits: 'userSpaceOnUse'
+      });
+    }
+  }
+});
+register(Pattern);
+
+var Image =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Image, _Shape);
+
+  function Image(node) {
+    _classCallCheck(this, Image);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Image).call(this, nodeOrNew('image', node), Image));
+  } // (re)load image
+
+
+  _createClass(Image, [{
+    key: "load",
+    value: function load(url, callback) {
+      if (!url) return this;
+      var img = new window.Image();
+      on(img, 'load', function (e) {
+        var p = this.parent(Pattern); // ensure image size
+
+        if (this.width() === 0 && this.height() === 0) {
+          this.size(img.width, img.height);
+        }
+
+        if (p instanceof Pattern) {
+          // ensure pattern size if not set
+          if (p.width() === 0 && p.height() === 0) {
+            p.size(this.width(), this.height());
+          }
+        }
+
+        if (typeof callback === 'function') {
+          callback.call(this, {
+            width: img.width,
+            height: img.height,
+            ratio: img.width / img.height,
+            url: url
+          });
+        }
+      }, this);
+      on(img, 'load error', function () {
+        // dont forget to unbind memory leaking events
+        off(img);
+      });
+      return this.attr('href', img.src = url, xlink);
+    }
+  }, {
+    key: "attrHook",
+    value: function attrHook(obj) {
+      var _this = this;
+
+      return obj.doc().defs().pattern(0, 0, function (pattern) {
+        pattern.add(_this);
+      });
+    }
+  }]);
+
+  return Image;
+}(Shape);
+registerMethods({
+  Container: {
+    // create image element, load image and set its size
+    image: function image(source, callback) {
+      return this.put(new Image()).size(0, 0).load(source, callback);
+    }
+  }
+});
+register(Image);
+
+var PointArray = subClassArray('PointArray', SVGArray);
+extend(PointArray, {
+  // Convert array to string
+  toString: function toString() {
+    // convert to a poly point string
+    for (var i = 0, il = this.length, array = []; i < il; i++) {
+      array.push(this[i].join(','));
+    }
+
+    return array.join(' ');
+  },
+  // Convert array to line object
+  toLine: function toLine() {
+    return {
+      x1: this[0][0],
+      y1: this[0][1],
+      x2: this[1][0],
+      y2: this[1][1]
+    };
+  },
+  // Get morphed array at given position
+  at: function at(pos) {
+    // make sure a destination is defined
+    if (!this.destination) return this; // generate morphed point string
+
+    for (var i = 0, il = this.length, array = []; i < il; i++) {
+      array.push([this[i][0] + (this.destination[i][0] - this[i][0]) * pos, this[i][1] + (this.destination[i][1] - this[i][1]) * pos]);
+    }
+
+    return new PointArray(array);
+  },
+  // Parse point string and flat array
+  parse: function parse() {
+    var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [[0, 0]];
+    var points = []; // if it is an array
+
+    if (array instanceof Array) {
+      // and it is not flat, there is no need to parse it
+      if (array[0] instanceof Array) {
+        return array;
+      }
+    } else {
+      // Else, it is considered as a string
+      // parse points
+      array = array.trim().split(delimiter).map(parseFloat);
+    } // validate points - https://svgwg.org/svg2-draft/shapes.html#DataTypePoints
+    // Odd number of coordinates is an error. In such cases, drop the last odd coordinate.
+
+
+    if (array.length % 2 !== 0) array.pop(); // wrap points in two-tuples and parse points as floats
+
+    for (var i = 0, len = array.length; i < len; i = i + 2) {
+      points.push([array[i], array[i + 1]]);
+    }
+
+    return points;
+  },
+  // Move point string
+  move: function move(x, y) {
+    var box = this.bbox(); // get relative offset
+
+    x -= box.x;
+    y -= box.y; // move every point
+
+    if (!isNaN(x) && !isNaN(y)) {
+      for (var i = this.length - 1; i >= 0; i--) {
+        this[i] = [this[i][0] + x, this[i][1] + y];
+      }
+    }
+
+    return this;
+  },
+  // Resize poly string
+  size: function size(width, height) {
+    var i;
+    var box = this.bbox(); // recalculate position of all points according to new size
+
+    for (i = this.length - 1; i >= 0; i--) {
+      if (box.width) this[i][0] = (this[i][0] - box.x) * width / box.width + box.x;
+      if (box.height) this[i][1] = (this[i][1] - box.y) * height / box.height + box.y;
+    }
+
+    return this;
+  },
+  // Get bounding box of points
+  bbox: function bbox() {
+    var maxX = -Infinity;
+    var maxY = -Infinity;
+    var minX = Infinity;
+    var minY = Infinity;
+    this.forEach(function (el) {
+      maxX = Math.max(el[0], maxX);
+      maxY = Math.max(el[1], maxY);
+      minX = Math.min(el[0], minX);
+      minY = Math.min(el[1], minY);
+    });
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+  }
+});
+
+var MorphArray = PointArray; // Move by left top corner over x-axis
+
+function x$1(x) {
+  return x == null ? this.bbox().x : this.move(x, this.bbox().y);
+} // Move by left top corner over y-axis
+
+function y$1(y) {
+  return y == null ? this.bbox().y : this.move(this.bbox().x, y);
+} // Set width of element
+
+function width$1(width) {
+  var b = this.bbox();
+  return width == null ? b.width : this.size(width, b.height);
+} // Set height of element
+
+function height$1(height) {
+  var b = this.bbox();
+  return height == null ? b.height : this.size(b.width, height);
+}
+
+var pointed = /*#__PURE__*/Object.freeze({
+  MorphArray: MorphArray,
+  x: x$1,
+  y: y$1,
+  width: width$1,
+  height: height$1
+});
+
+var Line =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Line, _Shape);
+
+  // Initialize node
+  function Line(node) {
+    _classCallCheck(this, Line);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Line).call(this, nodeOrNew('line', node), Line));
+  } // Get array
+
+
+  _createClass(Line, [{
+    key: "array",
+    value: function array() {
+      return new PointArray([[this.attr('x1'), this.attr('y1')], [this.attr('x2'), this.attr('y2')]]);
+    } // Overwrite native plot() method
+
+  }, {
+    key: "plot",
+    value: function plot(x1, y1, x2, y2) {
+      if (x1 == null) {
+        return this.array();
+      } else if (typeof y1 !== 'undefined') {
+        x1 = {
+          x1: x1,
+          y1: y1,
+          x2: x2,
+          y2: y2
+        };
+      } else {
+        x1 = new PointArray(x1).toLine();
+      }
+
+      return this.attr(x1);
+    } // Move by left top corner
+
+  }, {
+    key: "move",
+    value: function move(x, y) {
+      return this.attr(this.array().move(x, y).toLine());
+    } // Set element size to given width and height
+
+  }, {
+    key: "size",
+    value: function size(width, height) {
+      var p = proportionalSize(this, width, height);
+      return this.attr(this.array().size(p.width, p.height).toLine());
+    }
+  }]);
+
+  return Line;
+}(Shape);
+extend(Line, pointed);
+registerMethods({
+  Container: {
+    // Create a line element
+    line: function line() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      // make sure plot is called as a setter
+      // x1 is not necessarily a number, it can also be an array, a string and a PointArray
+      return Line.prototype.plot.apply(this.put(new Line()), args[0] != null ? args : [0, 0, 0, 0]);
+    }
+  }
+});
+register(Line);
+
+var Marker =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(Marker, _Container);
+
+  // Initialize node
+  function Marker(node) {
+    _classCallCheck(this, Marker);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Marker).call(this, nodeOrNew('marker', node), Marker));
+  } // Set width of element
+
+
+  _createClass(Marker, [{
+    key: "width",
+    value: function width(_width) {
+      return this.attr('markerWidth', _width);
+    } // Set height of element
+
+  }, {
+    key: "height",
+    value: function height(_height) {
+      return this.attr('markerHeight', _height);
+    } // Set marker refX and refY
+
+  }, {
+    key: "ref",
+    value: function ref(x, y) {
+      return this.attr('refX', x).attr('refY', y);
+    } // Update marker
+
+  }, {
+    key: "update",
+    value: function update(block) {
+      // remove all content
+      this.clear(); // invoke passed block
+
+      if (typeof block === 'function') {
+        block.call(this, this);
+      }
+
+      return this;
+    } // Return the fill id
+
+  }, {
+    key: "toString",
+    value: function toString() {
+      return 'url(#' + this.id() + ')';
+    }
+  }]);
+
+  return Marker;
+}(Container);
+registerMethods({
+  Container: {
+    marker: function marker(width, height, block) {
+      // Create marker element in defs
+      return this.defs().marker(width, height, block);
+    }
+  },
+  Defs: {
+    // Create marker
+    marker: function marker(width, height, block) {
+      // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto
+      return this.put(new Marker()).size(width, height).ref(width / 2, height / 2).viewbox(0, 0, width, height).attr('orient', 'auto').update(block);
+    }
+  },
+  marker: {
+    // Create and attach markers
+    marker: function marker(_marker, width, height, block) {
+      var attr = ['marker']; // Build attribute name
+
+      if (_marker !== 'all') attr.push(_marker);
+      attr = attr.join('-'); // Set marker attribute
+
+      _marker = arguments[1] instanceof Marker ? arguments[1] : this.defs().marker(width, height, block);
+      return this.attr(attr, _marker);
+    }
+  }
+});
+register(Marker);
+
+var Path =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Path, _Shape);
+
+  // Initialize node
+  function Path(node) {
+    _classCallCheck(this, Path);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Path).call(this, nodeOrNew('path', node), Path));
+  } // Get array
+
+
+  _createClass(Path, [{
+    key: "array",
+    value: function array() {
+      return this._array || (this._array = new PathArray(this.attr('d')));
+    } // Plot new path
+
+  }, {
+    key: "plot",
+    value: function plot(d) {
+      return d == null ? this.array() : this.clear().attr('d', typeof d === 'string' ? d : this._array = new PathArray(d));
+    } // Clear array cache
+
+  }, {
+    key: "clear",
+    value: function clear() {
+      delete this._array;
+      return this;
+    } // Move by left top corner
+
+  }, {
+    key: "move",
+    value: function move(x, y) {
+      return this.attr('d', this.array().move(x, y));
+    } // Move by left top corner over x-axis
+
+  }, {
+    key: "x",
+    value: function x(_x) {
+      return _x == null ? this.bbox().x : this.move(_x, this.bbox().y);
+    } // Move by left top corner over y-axis
+
+  }, {
+    key: "y",
+    value: function y(_y) {
+      return _y == null ? this.bbox().y : this.move(this.bbox().x, _y);
+    } // Set element size to given width and height
+
+  }, {
+    key: "size",
+    value: function size(width, height) {
+      var p = proportionalSize(this, width, height);
+      return this.attr('d', this.array().size(p.width, p.height));
+    } // Set width of element
+
+  }, {
+    key: "width",
+    value: function width(_width) {
+      return _width == null ? this.bbox().width : this.size(_width, this.bbox().height);
+    } // Set height of element
+
+  }, {
+    key: "height",
+    value: function height(_height) {
+      return _height == null ? this.bbox().height : this.size(this.bbox().width, _height);
+    }
+  }, {
+    key: "targets",
+    value: function targets() {
+      return baseFind('svg textpath [href*="' + this.id() + '"]');
+    }
+  }]);
+
+  return Path;
+}(Shape); // Define morphable array
+Path.prototype.MorphArray = PathArray; // Add parent method
+
+registerMethods({
+  Container: {
+    // Create a wrapped path element
+    path: function path(d) {
+      // make sure plot is called as a setter
+      return this.put(new Path()).plot(d || new PathArray());
+    }
+  }
+});
+register(Path);
+
+function array() {
+  return this._array || (this._array = new PointArray(this.attr('points')));
+} // Plot new path
+
+function plot(p) {
+  return p == null ? this.array() : this.clear().attr('points', typeof p === 'string' ? p : this._array = new PointArray(p));
+} // Clear array cache
+
+function clear() {
+  delete this._array;
+  return this;
+} // Move by left top corner
+
+function move(x, y) {
+  return this.attr('points', this.array().move(x, y));
+} // Set element size to given width and height
+
+function size$1(width, height) {
+  var p = proportionalSize(this, width, height);
+  return this.attr('points', this.array().size(p.width, p.height));
+}
+
+var poly = /*#__PURE__*/Object.freeze({
+  array: array,
+  plot: plot,
+  clear: clear,
+  move: move,
+  size: size$1
+});
+
+var Polygon =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Polygon, _Shape);
+
+  // Initialize node
+  function Polygon(node) {
+    _classCallCheck(this, Polygon);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Polygon).call(this, nodeOrNew('polygon', node), Polygon));
+  }
+
+  return Polygon;
+}(Shape);
+registerMethods({
+  Container: {
+    // Create a wrapped polygon element
+    polygon: function polygon(p) {
+      // make sure plot is called as a setter
+      return this.put(new Polygon()).plot(p || new PointArray());
+    }
+  }
+});
+extend(Polygon, pointed);
+extend(Polygon, poly);
+register(Polygon);
+
+var Polyline =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Polyline, _Shape);
+
+  // Initialize node
+  function Polyline(node) {
+    _classCallCheck(this, Polyline);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Polyline).call(this, nodeOrNew('polyline', node), Polyline));
+  }
+
+  return Polyline;
+}(Shape);
+registerMethods({
+  Container: {
+    // Create a wrapped polygon element
+    polyline: function polyline(p) {
+      // make sure plot is called as a setter
+      return this.put(new Polyline()).plot(p || new PointArray());
+    }
+  }
+});
+extend(Polyline, pointed);
+extend(Polyline, poly);
+register(Polyline);
+
+var Rect =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Rect, _Shape);
+
+  // Initialize node
+  function Rect(node) {
+    _classCallCheck(this, Rect);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Rect).call(this, nodeOrNew('rect', node), Rect));
+  } // FIXME: unify with circle
+  // Radius x value
+
+
+  _createClass(Rect, [{
+    key: "rx",
+    value: function rx(_rx) {
+      return this.attr('rx', _rx);
+    } // Radius y value
+
+  }, {
+    key: "ry",
+    value: function ry(_ry) {
+      return this.attr('ry', _ry);
+    }
+  }]);
+
+  return Rect;
+}(Shape);
+registerMethods({
+  Container: {
+    // Create a rect element
+    rect: function rect(width, height) {
+      return this.put(new Rect()).size(width, height);
+    }
+  }
+});
+register(Rect);
+
+// Create plain text node
+function plain(text) {
+  // clear if build mode is disabled
+  if (this._build === false) {
+    this.clear();
+  } // create text node
+
+
+  this.node.appendChild(document.createTextNode(text));
+  return this;
+} // FIXME: Does this also work for textpath?
+// Get length of text element
+
+function length() {
+  return this.node.getComputedTextLength();
+}
+
+var textable = /*#__PURE__*/Object.freeze({
+  plain: plain,
+  length: length
+});
+
+var Text =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Text, _Shape);
+
+  // Initialize node
+  function Text(node) {
+    var _this;
+
+    _classCallCheck(this, Text);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Text).call(this, nodeOrNew('text', node), Text));
+    _this.dom.leading = new SVGNumber(1.3); // store leading value for rebuilding
+
+    _this._rebuild = true; // enable automatic updating of dy values
+
+    _this._build = false; // disable build mode for adding multiple lines
+    // set default font
+
+    _this.attr('font-family', attrs['font-family']);
+
+    return _this;
+  } // Move over x-axis
+
+
+  _createClass(Text, [{
+    key: "x",
+    value: function x(_x) {
+      // act as getter
+      if (_x == null) {
+        return this.attr('x');
+      }
+
+      return this.attr('x', _x);
+    } // Move over y-axis
+
+  }, {
+    key: "y",
+    value: function y(_y) {
+      var oy = this.attr('y');
+      var o = typeof oy === 'number' ? oy - this.bbox().y : 0; // act as getter
+
+      if (_y == null) {
+        return typeof oy === 'number' ? oy - o : oy;
+      }
+
+      return this.attr('y', typeof _y === 'number' ? _y + o : _y);
+    } // Move center over x-axis
+
+  }, {
+    key: "cx",
+    value: function cx(x) {
+      return x == null ? this.bbox().cx : this.x(x - this.bbox().width / 2);
+    } // Move center over y-axis
+
+  }, {
+    key: "cy",
+    value: function cy(y) {
+      return y == null ? this.bbox().cy : this.y(y - this.bbox().height / 2);
+    } // Set the text content
+
+  }, {
+    key: "text",
+    value: function text(_text) {
+      // act as getter
+      if (_text === undefined) {
+        // FIXME use children() or each()
+        var children = this.node.childNodes;
+        var firstLine = 0;
+        _text = '';
+
+        for (var i = 0, len = children.length; i < len; ++i) {
+          // skip textPaths - they are no lines
+          if (children[i].nodeName === 'textPath') {
+            if (i === 0) firstLine = 1;
+            continue;
+          } // add newline if its not the first child and newLined is set to true
+
+
+          if (i !== firstLine && children[i].nodeType !== 3 && adopt(children[i]).dom.newLined === true) {
+            _text += '\n';
+          } // add content of this node
+
+
+          _text += children[i].textContent;
+        }
+
+        return _text;
+      } // remove existing content
+
+
+      this.clear().build(true);
+
+      if (typeof _text === 'function') {
+        // call block
+        _text.call(this, this);
+      } else {
+        // store text and make sure text is not blank
+        _text = _text.split('\n'); // build new lines
+
+        for (var j = 0, jl = _text.length; j < jl; j++) {
+          this.tspan(_text[j]).newLine();
+        }
+      } // disable build mode and rebuild lines
+
+
+      return this.build(false).rebuild();
+    } // Set / get leading
+
+  }, {
+    key: "leading",
+    value: function leading(value) {
+      // act as getter
+      if (value == null) {
+        return this.dom.leading;
+      } // act as setter
+
+
+      this.dom.leading = new SVGNumber(value);
+      return this.rebuild();
+    } // Rebuild appearance type
+
+  }, {
+    key: "rebuild",
+    value: function rebuild(_rebuild) {
+      // store new rebuild flag if given
+      if (typeof _rebuild === 'boolean') {
+        this._rebuild = _rebuild;
+      } // define position of all lines
+
+
+      if (this._rebuild) {
+        var self = this;
+        var blankLineOffset = 0;
+        var dy = this.dom.leading * new SVGNumber(this.attr('font-size'));
+        this.each(function () {
+          if (this.dom.newLined) {
+            this.attr('x', self.attr('x'));
+
+            if (this.text() === '\n') {
+              blankLineOffset += dy;
+            } else {
+              this.attr('dy', dy + blankLineOffset);
+              blankLineOffset = 0;
+            }
+          }
+        });
+        this.fire('rebuild');
+      }
+
+      return this;
+    } // Enable / disable build mode
+
+  }, {
+    key: "build",
+    value: function build(_build) {
+      this._build = !!_build;
+      return this;
+    } // overwrite method from parent to set data properly
+
+  }, {
+    key: "setData",
+    value: function setData(o) {
+      this.dom = o;
+      this.dom.leading = new SVGNumber(o.leading || 1.3);
+      return this;
+    }
+  }]);
+
+  return Text;
+}(Shape);
+extend(Text, textable);
+registerMethods({
+  Container: {
+    // Create text element
+    text: function text(_text2) {
+      return this.put(new Text()).text(_text2);
+    },
+    // Create plain text element
+    plain: function plain$$1(text) {
+      return this.put(new Text()).plain(text);
+    }
+  }
+});
+register(Text);
+
+var Tspan =
+/*#__PURE__*/
+function (_Text) {
+  _inherits(Tspan, _Text);
+
+  // Initialize node
+  function Tspan(node) {
+    _classCallCheck(this, Tspan);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Tspan).call(this, nodeOrNew('tspan', node), Tspan));
+  } // Set text content
+
+
+  _createClass(Tspan, [{
+    key: "text",
+    value: function text(_text) {
+      if (_text == null) return this.node.textContent + (this.dom.newLined ? '\n' : '');
+      typeof _text === 'function' ? _text.call(this, this) : this.plain(_text);
+      return this;
+    } // Shortcut dx
+
+  }, {
+    key: "dx",
+    value: function dx(_dx) {
+      return this.attr('dx', _dx);
+    } // Shortcut dy
+
+  }, {
+    key: "dy",
+    value: function dy(_dy) {
+      return this.attr('dy', _dy);
+    } // Create new line
+
+  }, {
+    key: "newLine",
+    value: function newLine() {
+      // fetch text parent
+      var t = this.parent(Text); // mark new line
+
+      this.dom.newLined = true; // apply new position
+
+      return this.dy(t.dom.leading * t.attr('font-size')).attr('x', t.x());
+    }
+  }]);
+
+  return Tspan;
+}(Text);
+extend(Tspan, textable);
+registerMethods({
+  Tspan: {
+    tspan: function tspan(text) {
+      var tspan = new Tspan(); // clear if build mode is disabled
+
+      if (!this._build) {
+        this.clear();
+      } // add new tspan
+
+
+      this.node.appendChild(tspan.node);
+      return tspan.text(text);
+    }
+  }
+});
+register(Tspan);
+
+var Bare =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(Bare, _Container);
+
+  function Bare(node) {
+    _classCallCheck(this, Bare);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Bare).call(this, nodeOrNew(node, typeof node === 'string' ? null : node), Bare));
+  }
+
+  _createClass(Bare, [{
+    key: "words",
+    value: function words(text) {
+      // remove contents
+      while (this.node.hasChildNodes()) {
+        this.node.removeChild(this.node.lastChild);
+      } // create text node
+
+
+      this.node.appendChild(document.createTextNode(text));
+      return this;
+    }
+  }]);
+
+  return Bare;
+}(Container);
+register(Bare);
+registerMethods('Container', {
+  // Create an element that is not described by SVG.js
+  element: function element(node, inherit) {
+    return this.put(new Bare(node, inherit));
+  }
+});
+
+var ClipPath =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(ClipPath, _Container);
+
+  function ClipPath(node) {
+    _classCallCheck(this, ClipPath);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(ClipPath).call(this, nodeOrNew('clipPath', node), ClipPath));
+  } // Unclip all clipped elements and remove itself
+
+
+  _createClass(ClipPath, [{
+    key: "remove",
+    value: function remove() {
+      // unclip all targets
+      this.targets().forEach(function (el) {
+        el.unclip();
+      }); // remove clipPath from parent
+
+      return _get(_getPrototypeOf(ClipPath.prototype), "remove", this).call(this);
+    }
+  }, {
+    key: "targets",
+    value: function targets() {
+      return baseFind('svg [clip-path*="' + this.id() + '"]');
+    }
+  }]);
+
+  return ClipPath;
+}(Container);
+registerMethods({
+  Container: {
+    // Create clipping element
+    clip: function clip() {
+      return this.defs().put(new ClipPath());
+    }
+  },
+  Element: {
+    // Distribute clipPath to svg element
+    clipWith: function clipWith(element) {
+      // use given clip or create a new one
+      var clipper = element instanceof ClipPath ? element : this.parent().clip().add(element); // apply mask
+
+      return this.attr('clip-path', 'url("#' + clipper.id() + '")');
+    },
+    // Unclip element
+    unclip: function unclip() {
+      return this.attr('clip-path', null);
+    },
+    clipper: function clipper() {
+      return this.reference('clip-path');
+    }
+  }
+});
+register(ClipPath);
+
+var G =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(G, _Container);
+
+  function G(node) {
+    _classCallCheck(this, G);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(G).call(this, nodeOrNew('g', node), G));
+  }
+
+  return G;
+}(Container);
+registerMethods({
+  Element: {
+    // Create a group element
+    group: function group() {
+      return this.put(new G());
+    }
+  }
+});
+register(G);
+
+var HtmlNode =
+/*#__PURE__*/
+function (_Dom) {
+  _inherits(HtmlNode, _Dom);
+
+  function HtmlNode(node) {
+    _classCallCheck(this, HtmlNode);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HtmlNode).call(this, node, HtmlNode));
+  }
+
+  return HtmlNode;
+}(Dom);
+register(HtmlNode);
+
+var A =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(A, _Container);
+
+  function A(node) {
+    _classCallCheck(this, A);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(A).call(this, nodeOrNew('a', node), A));
+  } // Link url
+
+
+  _createClass(A, [{
+    key: "to",
+    value: function to(url) {
+      return this.attr('href', url, xlink);
+    } // Link target attribute
+
+  }, {
+    key: "target",
+    value: function target(_target) {
+      return this.attr('target', _target);
+    }
+  }]);
+
+  return A;
+}(Container);
+registerMethods({
+  Container: {
+    // Create a hyperlink element
+    link: function link(url) {
+      return this.put(new A()).to(url);
+    }
+  },
+  Element: {
+    // Create a hyperlink element
+    linkTo: function linkTo(url) {
+      var link = new A();
+
+      if (typeof url === 'function') {
+        url.call(link, link);
+      } else {
+        link.to(url);
+      }
+
+      return this.parent().put(link).put(this);
+    }
+  }
+});
+register(A);
+
+var Mask =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(Mask, _Container);
+
+  // Initialize node
+  function Mask(node) {
+    _classCallCheck(this, Mask);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Mask).call(this, nodeOrNew('mask', node), Mask));
+  } // Unmask all masked elements and remove itself
+
+
+  _createClass(Mask, [{
+    key: "remove",
+    value: function remove() {
+      // unmask all targets
+      this.targets().forEach(function (el) {
+        el.unmask();
+      }); // remove mask from parent
+
+      return _get(_getPrototypeOf(Mask.prototype), "remove", this).call(this);
+    }
+  }, {
+    key: "targets",
+    value: function targets() {
+      return baseFind('svg [mask*="' + this.id() + '"]');
+    }
+  }]);
+
+  return Mask;
+}(Container);
+registerMethods({
+  Container: {
+    mask: function mask() {
+      return this.defs().put(new Mask());
+    }
+  },
+  Element: {
+    // Distribute mask to svg element
+    maskWith: function maskWith(element) {
+      // use given mask or create a new one
+      var masker = element instanceof Mask ? element : this.parent().mask().add(element); // apply mask
+
+      return this.attr('mask', 'url("#' + masker.id() + '")');
+    },
+    // Unmask element
+    unmask: function unmask() {
+      return this.attr('mask', null);
+    },
+    masker: function masker() {
+      return this.reference('mask');
+    }
+  }
+});
+register(Mask);
+
+var _Symbol =
+/*#__PURE__*/
+function (_Container) {
+  _inherits(_Symbol, _Container);
+
+  // Initialize node
+  function _Symbol(node) {
+    _classCallCheck(this, _Symbol);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(_Symbol).call(this, nodeOrNew('symbol', node), _Symbol));
+  }
+
+  return _Symbol;
+}(Container);
+registerMethods({
+  Container: {
+    symbol: function symbol() {
+      return this.put(new _Symbol());
+    }
+  }
+});
+register(_Symbol);
+
+var TextPath =
+/*#__PURE__*/
+function (_Text) {
+  _inherits(TextPath, _Text);
+
+  // Initialize node
+  function TextPath(node) {
+    _classCallCheck(this, TextPath);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(TextPath).call(this, nodeOrNew('textPath', node), TextPath));
+  } // return the array of the path track element
+
+
+  _createClass(TextPath, [{
+    key: "array",
+    value: function array() {
+      var track = this.track();
+      return track ? track.array() : null;
+    } // Plot path if any
+
+  }, {
+    key: "plot",
+    value: function plot(d) {
+      var track = this.track();
+      var pathArray = null;
+
+      if (track) {
+        pathArray = track.plot(d);
+      }
+
+      return d == null ? pathArray : this;
+    } // Get the path element
+
+  }, {
+    key: "track",
+    value: function track() {
+      return this.reference('href');
+    }
+  }]);
+
+  return TextPath;
+}(Text);
+registerMethods({
+  Container: {
+    textPath: function textPath(text, path) {
+      return this.defs().path(path).text(text).addTo(this);
+    }
+  },
+  Text: {
+    // Create path for text to run on
+    path: function path(track) {
+      var path = new TextPath(); // if d is a path, reuse it
+
+      if (!(track instanceof Path)) {
+        // create path element
+        track = this.doc().defs().path(track);
+      } // link textPath to path and add content
+
+
+      path.attr('href', '#' + track, xlink); // add textPath element as child node and return textPath
+
+      return this.put(path);
+    },
+    // FIXME: make this plural?
+    // Get the textPath children
+    textPath: function textPath() {
+      return this.find('textPath');
+    }
+  },
+  Path: {
+    // creates a textPath from this path
+    text: function text(_text) {
+      if (_text instanceof Text) {
+        var txt = _text.text();
+
+        return _text.clear().path(this).text(txt);
+      }
+
+      return this.parent().put(new Text()).path(this).text(_text);
+    } // FIXME: Maybe add `targets` to get all textPaths associated with this path
+
+  }
+});
+TextPath.prototype.MorphArray = PathArray;
+register(TextPath);
+
+var Use =
+/*#__PURE__*/
+function (_Shape) {
+  _inherits(Use, _Shape);
+
+  function Use(node) {
+    _classCallCheck(this, Use);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Use).call(this, nodeOrNew('use', node), Use));
+  } // Use element as a reference
+
+
+  _createClass(Use, [{
+    key: "element",
+    value: function element(_element, file) {
+      // Set lined element
+      return this.attr('href', (file || '') + '#' + _element, xlink);
+    }
+  }]);
+
+  return Use;
+}(Shape);
+registerMethods({
+  Container: {
+    // Create a use element
+    use: function use(element, file) {
+      return this.put(new Use()).element(element, file);
+    }
+  }
+});
+register(Use);
+
+/* Optional Modules */
+extend([Doc$1, Symbol, Image, Pattern, Marker], getMethodsFor('viewbox'));
+extend([Line, Polyline, Polygon, Path], getMethodsFor('marker'));
+extend(Text, getMethodsFor('Text'));
+extend(Path, getMethodsFor('Path'));
+extend(Defs, getMethodsFor('Defs'));
+extend([Text, Tspan], getMethodsFor('Tspan'));
+extend([Rect, Ellipse, Circle, Gradient], getMethodsFor('radius'));
+extend(EventTarget, getMethodsFor('EventTarget'));
+extend(Dom, getMethodsFor('Dom'));
+extend(Element, getMethodsFor('Element'));
+extend(Shape, getMethodsFor('Shape')); // extend(Element, getConstructor('Memory'))
+
+extend(Container, getMethodsFor('Container'));
+registerMorphableType([SVGNumber, Color, Box, Matrix, SVGArray, PointArray, PathArray]);
+makeMorphable();
+
+export { Morphable, registerMorphableType, makeMorphable, TransformBag, ObjectBag, NonMorphable, defaults, parser, baseFind as find, Animator, Controller, Ease, PID, Spring, easing, Queue, Runner, Timeline, SVGArray, Box, Color, EventTarget, Matrix, SVGNumber, PathArray, Point, PointArray, Bare, Circle, ClipPath, Container, Defs, Doc$1 as Doc, Dom, Element, Ellipse, Gradient, G, HtmlNode, A, Image, Line, Marker, Mask, Path, Pattern, Polygon, Polyline, Rect, Shape, Stop, _Symbol as Symbol, Text, TextPath, Tspan, Use, map, filter, radians, degrees, camelCase, capitalize, proportionalSize, getOrigin, ns, xmlns, xlink, svgjs, on, off, dispatch, root, makeNode, makeInstance, nodeOrNew, adopt, register, getClass, eid, assignNewId, extend };
diff --git a/dist/svg.js b/dist/svg.js
index 946db81..e218c15 100644
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -6,7 +6,7 @@
 * @copyright Wout Fierens <wout@mick-wout.com>
 * @license MIT
 *
-* BUILT: Mon Nov 05 2018 21:52:42 GMT+0100 (GMT+01:00)
+* BUILT: Tue Nov 06 2018 13:43:56 GMT+0100 (GMT+01:00)
 */;
 var SVG = (function () {
   'use strict';
@@ -216,158 +216,140 @@ var SVG = (function () {
     throw new TypeError("Invalid attempt to destructure non-iterable instance");
   }
 
-  var Queue =
-  /*#__PURE__*/
-  function () {
-    function Queue() {
-      _classCallCheck(this, Queue);
-
-      this._first = null;
-      this._last = null;
-    }
+  var methods = {};
+  function registerMethods(name, m) {
+    if (Array.isArray(name)) {
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
 
-    _createClass(Queue, [{
-      key: "push",
-      value: function push(value) {
-        // An item stores an id and the provided value
-        var item = value.next ? value : {
-          value: value,
-          next: null,
-          prev: null // Deal with the queue being empty or populated
+      try {
+        for (var _iterator = name[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var _name = _step.value;
+          registerMethods(_name, m);
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
 
-        };
+      return;
+    }
 
-        if (this._last) {
-          item.prev = this._last;
-          this._last.next = item;
-          this._last = item;
-        } else {
-          this._last = item;
-          this._first = item;
-        } // Update the length and return the current item
+    if (_typeof(name) === 'object') {
+      var _arr = Object.entries(name);
 
+      for (var _i = 0; _i < _arr.length; _i++) {
+        var _arr$_i = _slicedToArray(_arr[_i], 2),
+            _name2 = _arr$_i[0],
+            _m = _arr$_i[1];
 
-        return item;
+        registerMethods(_name2, _m);
       }
-    }, {
-      key: "shift",
-      value: function shift() {
-        // Check if we have a value
-        var remove = this._first;
-        if (!remove) return null; // If we do, remove it and relink things
-
-        this._first = remove.next;
-        if (this._first) this._first.prev = null;
-        this._last = this._first ? this._last : null;
-        return remove.value;
-      } // Shows us the first item in the list
 
-    }, {
-      key: "first",
-      value: function first() {
-        return this._first && this._first.value;
-      } // Shows us the last item in the list
+      return;
+    }
 
-    }, {
-      key: "last",
-      value: function last() {
-        return this._last && this._last.value;
-      } // Removes the item that was returned from the push
+    methods[name] = Object.assign(methods[name] || {}, m);
+  }
+  function getMethodsFor(name) {
+    return methods[name] || {};
+  }
 
-    }, {
-      key: "remove",
-      value: function remove(item) {
-        // Relink the previous item
-        if (item.prev) item.prev.next = item.next;
-        if (item.next) item.next.prev = item.prev;
-        if (item === this._last) this._last = item.prev;
-        if (item === this._first) this._first = item.next; // Invalidate item
+  function siblings() {
+    return this.parent().children();
+  } // Get the curent position siblings
 
-        item.prev = null;
-        item.next = null;
-      }
-    }]);
+  function position() {
+    return this.parent().index(this);
+  } // Get the next element (will return null if there is none)
 
-    return Queue;
-  }();
+  function next() {
+    return this.siblings()[this.position() + 1];
+  } // Get the next element (will return null if there is none)
 
-  var Animator = {
-    nextDraw: null,
-    frames: new Queue(),
-    timeouts: new Queue(),
-    timer: window.performance || window.Date,
-    transforms: [],
-    frame: function frame(fn) {
-      // Store the node
-      var node = Animator.frames.push({
-        run: fn
-      }); // Request an animation frame if we don't have one
+  function prev() {
+    return this.siblings()[this.position() - 1];
+  } // Send given element one step forward
 
-      if (Animator.nextDraw === null) {
-        Animator.nextDraw = window.requestAnimationFrame(Animator._draw);
-      } // Return the node so we can remove it easily
+  function forward() {
+    var i = this.position() + 1;
+    var p = this.parent(); // move node one step forward
 
+    p.removeElement(this).add(this, i); // make sure defs node is always at the top
 
-      return node;
-    },
-    transform_frame: function transform_frame(fn, id) {
-      Animator.transforms[id] = fn;
-    },
-    timeout: function timeout(fn, delay) {
-      delay = delay || 0; // Work out when the event should fire
+    if (typeof p.isRoot === 'function' && p.isRoot()) {
+      p.node.appendChild(p.defs().node);
+    }
 
-      var time = Animator.timer.now() + delay; // Add the timeout to the end of the queue
+    return this;
+  } // Send given element one step backward
 
-      var node = Animator.timeouts.push({
-        run: fn,
-        time: time
-      }); // Request another animation frame if we need one
+  function backward() {
+    var i = this.position();
 
-      if (Animator.nextDraw === null) {
-        Animator.nextDraw = window.requestAnimationFrame(Animator._draw);
-      }
+    if (i > 0) {
+      this.parent().removeElement(this).add(this, i - 1);
+    }
 
-      return node;
-    },
-    cancelFrame: function cancelFrame(node) {
-      Animator.frames.remove(node);
-    },
-    clearTimeout: function clearTimeout(node) {
-      Animator.timeouts.remove(node);
-    },
-    _draw: function _draw(now) {
-      // Run all the timeouts we can run, if they are not ready yet, add them
-      // to the end of the queue immediately! (bad timeouts!!! [sarcasm])
-      var nextTimeout = null;
-      var lastTimeout = Animator.timeouts.last();
+    return this;
+  } // Send given element all the way to the front
 
-      while (nextTimeout = Animator.timeouts.shift()) {
-        // Run the timeout if its time, or push it to the end
-        if (now >= nextTimeout.time) {
-          nextTimeout.run();
-        } else {
-          Animator.timeouts.push(nextTimeout);
-        } // If we hit the last item, we should stop shifting out more items
+  function front() {
+    var p = this.parent(); // Move node forward
 
+    p.node.appendChild(this.node); // Make sure defs node is always at the top
 
-        if (nextTimeout === lastTimeout) break;
-      } // Run all of the animation frames
+    if (typeof p.isRoot === 'function' && p.isRoot()) {
+      p.node.appendChild(p.defs().node);
+    }
 
+    return this;
+  } // Send given element all the way to the back
 
-      var nextFrame = null;
-      var lastFrame = Animator.frames.last();
+  function back() {
+    if (this.position() > 0) {
+      this.parent().removeElement(this).add(this, 0);
+    }
 
-      while (nextFrame !== lastFrame && (nextFrame = Animator.frames.shift())) {
-        nextFrame.run();
-      }
+    return this;
+  } // Inserts a given element before the targeted element
 
-      Animator.transforms.forEach(function (el) {
-        el();
-      }); // If we have remaining timeouts or frames, draw until we don't anymore
+  function before(element) {
+    element.remove();
+    var i = this.position();
+    this.parent().add(element, i);
+    return this;
+  } // Inserts a given element after the targeted element
 
-      Animator.nextDraw = Animator.timeouts.first() || Animator.frames.first() ? window.requestAnimationFrame(Animator._draw) : null;
-    }
-  };
+  function after(element) {
+    element.remove();
+    var i = this.position();
+    this.parent().add(element, i + 1);
+    return this;
+  }
+  registerMethods('Dom', {
+    siblings: siblings,
+    position: position,
+    next: next,
+    prev: prev,
+    forward: forward,
+    backward: backward,
+    front: front,
+    back: back,
+    before: before,
+    after: after
+  });
 
   // Parse unit value
   var numberAndUnit = /^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i; // Parse hex value
@@ -431,66 +413,84 @@ var SVG = (function () {
     dots: dots
   });
 
-  /* eslint no-new-func: "off" */
-  var subClassArray = function () {
-    try {
-      // try es6 subclassing
-      return Function('name', 'baseClass', '_constructor', ['baseClass = baseClass || Array', 'return {', '[name]: class extends baseClass {', 'constructor (...args) {', 'super(...args)', '_constructor && _constructor.apply(this, args)', '}', '}', '}[name]'].join('\n'));
-    } catch (e) {
-      // Use es5 approach
-      return function (name) {
-        var baseClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Array;
+  function classes() {
+    var attr = this.attr('class');
+    return attr == null ? [] : attr.trim().split(delimiter);
+  } // Return true if class exists on the node, false otherwise
 
-        var _constructor = arguments.length > 2 ? arguments[2] : undefined;
 
-        var Arr = function Arr() {
-          baseClass.apply(this, arguments);
-          _constructor && _constructor.apply(this, arguments);
-        };
+  function hasClass(name) {
+    return this.classes().indexOf(name) !== -1;
+  } // Add class to the node
 
-        Arr.prototype = Object.create(baseClass.prototype);
-        Arr.prototype.constructor = Arr;
-        return Arr;
-      };
+
+  function addClass(name) {
+    if (!this.hasClass(name)) {
+      var array = this.classes();
+      array.push(name);
+      this.attr('class', array.join(' '));
     }
-  }();
 
-  // Default namespaces
-  var ns = 'http://www.w3.org/2000/svg';
-  var xmlns = 'http://www.w3.org/2000/xmlns/';
-  var xlink = 'http://www.w3.org/1999/xlink';
-  var svgjs = 'http://svgjs.com/svgjs';
+    return this;
+  } // Remove class from the node
 
-  var ns$1 = /*#__PURE__*/Object.freeze({
-    ns: ns,
-    xmlns: xmlns,
-    xlink: xlink,
-    svgjs: svgjs
-  });
 
-  var Base = function Base() {
-    _classCallCheck(this, Base);
-  };
+  function removeClass(name) {
+    if (this.hasClass(name)) {
+      this.attr('class', this.classes().filter(function (c) {
+        return c !== name;
+      }).join(' '));
+    }
 
-  function isNulledBox(box) {
-    return !box.w && !box.h && !box.x && !box.y;
+    return this;
+  } // Toggle the presence of a class on the node
+
+
+  function toggleClass(name) {
+    return this.hasClass(name) ? this.removeClass(name) : this.addClass(name);
   }
-  function domContains(node) {
-    return (document.documentElement.contains || function (node) {
-      // This is IE - it does not support contains() for top-level SVGs
-      while (node.parentNode) {
-        node = node.parentNode;
+
+  registerMethods('Dom', {
+    classes: classes,
+    hasClass: hasClass,
+    addClass: addClass,
+    removeClass: removeClass,
+    toggleClass: toggleClass
+  });
+
+  // Map function
+  function map(array, block) {
+    var i;
+    var il = array.length;
+    var result = [];
+
+    for (i = 0; i < il; i++) {
+      result.push(block(array[i]));
+    }
+
+    return result;
+  } // Filter function
+
+  function filter(array, block) {
+    var i;
+    var il = array.length;
+    var result = [];
+
+    for (i = 0; i < il; i++) {
+      if (block(array[i])) {
+        result.push(array[i]);
       }
+    }
 
-      return node === document;
-    }).call(document.documentElement, node);
-  }
-  function pathRegReplace(a, b, c, d) {
-    return c + d.replace(dots, ' .');
-  } // creates deep clone of array
+    return result;
+  } // Degrees to radians
 
-  function matcher(el, selector) {
-    return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
+  function radians(d) {
+    return d % 360 * Math.PI / 180;
+  } // Radians to degrees
+
+  function degrees(r) {
+    return r * 180 / Math.PI % 360;
   } // Convert dash-separated-string to camelCase
 
   function camelCase(s) {
@@ -501,15 +501,6 @@ var SVG = (function () {
 
   function capitalize(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
-  } // Ensure to six-based hex
-
-  function fullHex(hex$$1) {
-    return hex$$1.length === 4 ? ['#', hex$$1.substring(1, 2), hex$$1.substring(1, 2), hex$$1.substring(2, 3), hex$$1.substring(2, 3), hex$$1.substring(3, 4), hex$$1.substring(3, 4)].join('') : hex$$1;
-  } // Component to hex value
-
-  function compToHex(comp) {
-    var hex$$1 = comp.toString(16);
-    return hex$$1.length === 1 ? '0' + hex$$1 : hex$$1;
   } // Calculate proportional width and height values when necessary
 
   function proportionalSize(element, width, height) {
@@ -527,84 +518,6 @@ var SVG = (function () {
       width: width,
       height: height
     };
-  } // Map matrix array to object
-
-  function arrayToMatrix(a) {
-    return {
-      a: a[0],
-      b: a[1],
-      c: a[2],
-      d: a[3],
-      e: a[4],
-      f: a[5]
-    };
-  } // Add centre point to transform object
-
-  function arrayToString(a) {
-    for (var i = 0, il = a.length, s = ''; i < il; i++) {
-      s += a[i][0];
-
-      if (a[i][1] != null) {
-        s += a[i][1];
-
-        if (a[i][2] != null) {
-          s += ' ';
-          s += a[i][2];
-
-          if (a[i][3] != null) {
-            s += ' ';
-            s += a[i][3];
-            s += ' ';
-            s += a[i][4];
-
-            if (a[i][5] != null) {
-              s += ' ';
-              s += a[i][5];
-              s += ' ';
-              s += a[i][6];
-
-              if (a[i][7] != null) {
-                s += ' ';
-                s += a[i][7];
-              }
-            }
-          }
-        }
-      }
-    }
-
-    return s + ' ';
-  } // Add more bounding box properties
-
-  function fullBox(b) {
-    if (b.x == null) {
-      b.x = 0;
-      b.y = 0;
-      b.width = 0;
-      b.height = 0;
-    }
-
-    b.w = b.width;
-    b.h = b.height;
-    b.x2 = b.x + b.width;
-    b.y2 = b.y + b.height;
-    b.cx = b.x + b.width / 2;
-    b.cy = b.y + b.height / 2;
-    return b;
-  } // Get id from reference string
-
-  function idFromReference(url) {
-    var m = (url || '').toString().match(reference);
-    if (m) return m[1];
-  } // Create matrix array for looping
-
-  var abcdef = 'abcdef'.split('');
-  function closeEnough(a, b, threshold) {
-    return Math.abs(b - a) < (threshold || 1e-6);
-  } // move this to static matrix method
-
-  function isMatrixLike(o) {
-    return o.a != null || o.b != null || o.c != null || o.d != null || o.e != null || o.f != null;
   }
   function getOrigin(o, element) {
     // Allow origin or around as the names
@@ -637,8 +550,282 @@ var SVG = (function () {
     return [ox, oy];
   }
 
+  function css(style, val) {
+    var ret = {};
+
+    if (arguments.length === 0) {
+      // get full style as object
+      this.node.style.cssText.split(/\s*;\s*/).filter(function (el) {
+        return !!el.length;
+      }).forEach(function (el) {
+        var t = el.split(/\s*:\s*/);
+        ret[t[0]] = t[1];
+      });
+      return ret;
+    }
+
+    if (arguments.length < 2) {
+      // get style properties in the array
+      if (Array.isArray(style)) {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = style[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var name = _step.value;
+            var cased = camelCase(name);
+            ret[cased] = this.node.style[cased];
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+
+        return ret;
+      } // get style for property
+
+
+      if (typeof style === 'string') {
+        return this.node.style[camelCase(style)];
+      } // set styles in object
+
+
+      if (_typeof(style) === 'object') {
+        for (var _name in style) {
+          // set empty string if null/undefined/'' was given
+          this.node.style[camelCase(_name)] = style[_name] == null || isBlank.test(style[_name]) ? '' : style[_name];
+        }
+      }
+    } // set style for property
+
+
+    if (arguments.length === 2) {
+      this.node.style[camelCase(style)] = val == null || isBlank.test(val) ? '' : val;
+    }
+
+    return this;
+  } // Show element
+
+  function show() {
+    return this.css('display', '');
+  } // Hide element
+
+  function hide() {
+    return this.css('display', 'none');
+  } // Is element visible?
+
+  function visible() {
+    return this.css('display') !== 'none';
+  }
+  registerMethods('Dom', {
+    css: css,
+    show: show,
+    hide: hide,
+    visible: visible
+  });
+
+  function data(a, v, r) {
+    if (_typeof(a) === 'object') {
+      for (v in a) {
+        this.data(v, a[v]);
+      }
+    } else if (arguments.length < 2) {
+      try {
+        return JSON.parse(this.attr('data-' + a));
+      } catch (e) {
+        return this.attr('data-' + a);
+      }
+    } else {
+      this.attr('data-' + a, v === null ? null : r === true || typeof v === 'string' || typeof v === 'number' ? v : JSON.stringify(v));
+    }
+
+    return this;
+  }
+  registerMethods('Dom', {
+    data: data
+  });
+
+  // Remember arbitrary data
+
+  function remember(k, v) {
+    // remember every item in an object individually
+    if (_typeof(arguments[0]) === 'object') {
+      for (var key in k) {
+        this.remember(key, k[key]);
+      }
+    } else if (arguments.length === 1) {
+      // retrieve memory
+      return this.memory()[k];
+    } else {
+      // store memory
+      this.memory()[k] = v;
+    }
+
+    return this;
+  } // Erase a given memory
+
+  function forget() {
+    if (arguments.length === 0) {
+      this._memory = {};
+    } else {
+      for (var i = arguments.length - 1; i >= 0; i--) {
+        delete this.memory()[arguments[i]];
+      }
+    }
+
+    return this;
+  } // return local memory object
+
+  function memory() {
+    return this._memory = this._memory || {};
+  }
+  registerMethods('Dom', {
+    remember: remember,
+    forget: forget,
+    memory: memory
+  });
+
+  function fullHex(hex$$1) {
+    return hex$$1.length === 4 ? ['#', hex$$1.substring(1, 2), hex$$1.substring(1, 2), hex$$1.substring(2, 3), hex$$1.substring(2, 3), hex$$1.substring(3, 4), hex$$1.substring(3, 4)].join('') : hex$$1;
+  } // Component to hex value
+
+
+  function compToHex(comp) {
+    var hex$$1 = comp.toString(16);
+    return hex$$1.length === 1 ? '0' + hex$$1 : hex$$1;
+  }
+
+  var Color =
+  /*#__PURE__*/
+  function () {
+    function Color() {
+      _classCallCheck(this, Color);
+
+      this.init.apply(this, arguments);
+    }
+
+    _createClass(Color, [{
+      key: "init",
+      value: function init(color, g, b) {
+        var match; // initialize defaults
+
+        this.r = 0;
+        this.g = 0;
+        this.b = 0;
+        if (!color) return; // parse color
+
+        if (typeof color === 'string') {
+          if (isRgb.test(color)) {
+            // get rgb values
+            match = rgb.exec(color.replace(whitespace, '')); // parse numeric values
+
+            this.r = parseInt(match[1]);
+            this.g = parseInt(match[2]);
+            this.b = parseInt(match[3]);
+          } else if (isHex.test(color)) {
+            // get hex values
+            match = hex.exec(fullHex(color)); // parse numeric values
+
+            this.r = parseInt(match[1], 16);
+            this.g = parseInt(match[2], 16);
+            this.b = parseInt(match[3], 16);
+          }
+        } else if (Array.isArray(color)) {
+          this.r = color[0];
+          this.g = color[1];
+          this.b = color[2];
+        } else if (_typeof(color) === 'object') {
+          this.r = color.r;
+          this.g = color.g;
+          this.b = color.b;
+        } else if (arguments.length === 3) {
+          this.r = color;
+          this.g = g;
+          this.b = b;
+        }
+      } // Default to hex conversion
+
+    }, {
+      key: "toString",
+      value: function toString() {
+        return this.toHex();
+      }
+    }, {
+      key: "toArray",
+      value: function toArray() {
+        return [this.r, this.g, this.b];
+      } // Build hex value
+
+    }, {
+      key: "toHex",
+      value: function toHex() {
+        return '#' + compToHex(Math.round(this.r)) + compToHex(Math.round(this.g)) + compToHex(Math.round(this.b));
+      } // Build rgb value
+
+    }, {
+      key: "toRgb",
+      value: function toRgb() {
+        return 'rgb(' + [this.r, this.g, this.b].join() + ')';
+      } // Calculate true brightness
+
+    }, {
+      key: "brightness",
+      value: function brightness() {
+        return this.r / 255 * 0.30 + this.g / 255 * 0.59 + this.b / 255 * 0.11;
+      } // Testers
+      // Test if given value is a color string
+
+    }], [{
+      key: "test",
+      value: function test(color) {
+        color += '';
+        return isHex.test(color) || isRgb.test(color);
+      } // Test if given value is a rgb object
+
+    }, {
+      key: "isRgb",
+      value: function isRgb$$1(color) {
+        return color && typeof color.r === 'number' && typeof color.g === 'number' && typeof color.b === 'number';
+      } // Test if given value is a color
+
+    }, {
+      key: "isColor",
+      value: function isColor(color) {
+        return this.isRgb(color) || this.test(color);
+      }
+    }]);
+
+    return Color;
+  }();
+
+  // Default namespaces
+  var ns = 'http://www.w3.org/2000/svg';
+  var xmlns = 'http://www.w3.org/2000/xmlns/';
+  var xlink = 'http://www.w3.org/1999/xlink';
+  var svgjs = 'http://svgjs.com/svgjs';
+
+  var Base = function Base() {
+    _classCallCheck(this, Base);
+  };
+
   var elements = {};
-  var root = Symbol('root');
+  var root = Symbol('root'); // Method for element creation
+
+  function makeNode(name) {
+    // create element
+    return document.createElementNS(ns, name);
+  }
   function makeInstance(element) {
     if (element instanceof Base) return element;
 
@@ -660,6 +847,9 @@ var SVG = (function () {
 
     element = adopt(node.firstChild);
     return element;
+  }
+  function nodeOrNew(name, node) {
+    return node || makeNode(name);
   } // Adopt existing svg elements
 
   function adopt(node) {
@@ -715,25 +905,6 @@ var SVG = (function () {
     }
 
     return adopt(node);
-  }
-
-  var adopter = /*#__PURE__*/Object.freeze({
-    root: root,
-    makeInstance: makeInstance,
-    adopt: adopt,
-    register: register,
-    getClass: getClass,
-    eid: eid,
-    assignNewId: assignNewId
-  });
-
-  function nodeOrNew(name, node) {
-    return node || makeNode(name);
-  } // Method for element creation
-
-  function makeNode(name) {
-    // create element
-    return document.createElementNS(ns, name);
   } // Method for extending objects
 
   function extend(modules, methods) {
@@ -745,178 +916,8 @@ var SVG = (function () {
         modules[i].prototype[key] = methods[key];
       }
     }
-  } // FIXME: enhanced constructors here
-
-  function addFactory(modules, methods) {
-    extend(modules, methods);
-  } // Invent new element
-
-  function invent(config) {
-    // Create element initializer
-    var initializer = typeof config.create === 'function' ? config.create : function (node) {
-      config.inherit.call(this, node || makeNode(config.create));
-    }; // Inherit prototype
-
-    if (config.inherit) {
-      /* eslint new-cap: "off" */
-      initializer.prototype = new config.inherit();
-      initializer.prototype.constructor = initializer;
-    } // Extend with methods
-
-
-    if (config.extend) {
-      extend(initializer, config.extend);
-    } // Attach construct method to parent
-
-
-    if (config.construct) {
-      extend(config.parent || getClass('Container'), config.construct);
-    }
-
-    return initializer;
   }
 
-  var tools = /*#__PURE__*/Object.freeze({
-    nodeOrNew: nodeOrNew,
-    makeNode: makeNode,
-    extend: extend,
-    addFactory: addFactory,
-    invent: invent
-  });
-
-  var SVGArray = subClassArray('SVGArray', Array, function () {
-    this.init.apply(this, arguments);
-  });
-  extend(SVGArray, {
-    init: function init() {
-      this.length = 0;
-      this.push.apply(this, _toConsumableArray(this.parse.apply(this, arguments)));
-    },
-    toArray: function toArray() {
-      return Array.prototype.concat.apply([], this);
-    },
-    toString: function toString() {
-      return this.join(' ');
-    },
-    // Flattens the array if needed
-    valueOf: function valueOf() {
-      var ret = [];
-      ret.push.apply(ret, _toConsumableArray(this));
-      return ret;
-    },
-    // Parse whitespace separated string
-    parse: function parse() {
-      var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      // If already is an array, no need to parse it
-      if (array instanceof Array) return array;
-      return array.trim().split(delimiter).map(parseFloat);
-    },
-    clone: function clone() {
-      return new this.constructor(this);
-    },
-    toSet: function toSet() {
-      return new Set(this);
-    }
-  });
-
-  var SVGNumber =
-  /*#__PURE__*/
-  function () {
-    // Initialize
-    function SVGNumber() {
-      _classCallCheck(this, SVGNumber);
-
-      this.init.apply(this, arguments);
-    }
-
-    _createClass(SVGNumber, [{
-      key: "init",
-      value: function init(value, unit) {
-        unit = Array.isArray(value) ? value[1] : unit;
-        value = Array.isArray(value) ? value[0] : value; // initialize defaults
-
-        this.value = 0;
-        this.unit = unit || ''; // parse value
-
-        if (typeof value === 'number') {
-          // ensure a valid numeric value
-          this.value = isNaN(value) ? 0 : !isFinite(value) ? value < 0 ? -3.4e+38 : +3.4e+38 : value;
-        } else if (typeof value === 'string') {
-          unit = value.match(numberAndUnit);
-
-          if (unit) {
-            // make value numeric
-            this.value = parseFloat(unit[1]); // normalize
-
-            if (unit[5] === '%') {
-              this.value /= 100;
-            } else if (unit[5] === 's') {
-              this.value *= 1000;
-            } // store unit
-
-
-            this.unit = unit[5];
-          }
-        } else {
-          if (value instanceof SVGNumber) {
-            this.value = value.valueOf();
-            this.unit = value.unit;
-          }
-        }
-      }
-    }, {
-      key: "toString",
-      value: function toString() {
-        return (this.unit === '%' ? ~~(this.value * 1e8) / 1e6 : this.unit === 's' ? this.value / 1e3 : this.value) + this.unit;
-      }
-    }, {
-      key: "toJSON",
-      value: function toJSON() {
-        return this.toString();
-      }
-    }, {
-      key: "toArray",
-      value: function toArray() {
-        return [this.value, this.unit];
-      }
-    }, {
-      key: "valueOf",
-      value: function valueOf() {
-        return this.value;
-      } // Add number
-
-    }, {
-      key: "plus",
-      value: function plus(number) {
-        number = new SVGNumber(number);
-        return new SVGNumber(this + number, this.unit || number.unit);
-      } // Subtract number
-
-    }, {
-      key: "minus",
-      value: function minus(number) {
-        number = new SVGNumber(number);
-        return new SVGNumber(this - number, this.unit || number.unit);
-      } // Multiply number
-
-    }, {
-      key: "times",
-      value: function times(number) {
-        number = new SVGNumber(number);
-        return new SVGNumber(this * number, this.unit || number.unit);
-      } // Divide number
-
-    }, {
-      key: "divide",
-      value: function divide(number) {
-        number = new SVGNumber(number);
-        return new SVGNumber(this / number, this.unit || number.unit);
-      }
-    }]);
-
-    return SVGNumber;
-  }();
-
   var listenerId = 0;
 
   function getEvents(node) {
@@ -1035,62 +1036,6 @@ var SVG = (function () {
     return event;
   }
 
-  var events = /*#__PURE__*/Object.freeze({
-    on: on,
-    off: off,
-    dispatch: dispatch
-  });
-
-  var methods = {};
-  function registerMethods(name, m) {
-    if (Array.isArray(name)) {
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
-
-      try {
-        for (var _iterator = name[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var _name = _step.value;
-          registerMethods(_name, m);
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return != null) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-
-      return;
-    }
-
-    if (_typeof(name) === 'object') {
-      var _arr = Object.entries(name);
-
-      for (var _i = 0; _i < _arr.length; _i++) {
-        var _arr$_i = _slicedToArray(_arr[_i], 2),
-            _name2 = _arr$_i[0],
-            _m = _arr$_i[1];
-
-        registerMethods(_name2, _m);
-      }
-
-      return;
-    }
-
-    methods[name] = Object.assign(methods[name] || {}, m);
-  }
-  function getMethodsFor(name) {
-    return methods[name] || {};
-  }
-
   var EventTarget =
   /*#__PURE__*/
   function (_Base) {
@@ -1190,54 +1135,6 @@ var SVG = (function () {
   }, {});
   registerMethods('Element', methods$1);
 
-  // Map function
-  function map(array, block) {
-    var i;
-    var il = array.length;
-    var result = [];
-
-    for (i = 0; i < il; i++) {
-      result.push(block(array[i]));
-    }
-
-    return result;
-  } // Filter function
-
-  function filter(array, block) {
-    var i;
-    var il = array.length;
-    var result = [];
-
-    for (i = 0; i < il; i++) {
-      if (block(array[i])) {
-        result.push(array[i]);
-      }
-    }
-
-    return result;
-  } // Degrees to radians
-
-  function radians(d) {
-    return d % 360 * Math.PI / 180;
-  } // Radians to degrees
-
-  function degrees(r) {
-    return r * 180 / Math.PI % 360;
-  }
-  function filterSVGElements(nodes) {
-    return this.filter(nodes, function (el) {
-      return el instanceof window.SVGElement;
-    });
-  }
-
-  var utils = /*#__PURE__*/Object.freeze({
-    map: map,
-    filter: filter,
-    radians: radians,
-    degrees: degrees,
-    filterSVGElements: filterSVGElements
-  });
-
   function noop() {} // Default animation values
 
   var timeline = {
@@ -1284,111 +1181,163 @@ var SVG = (function () {
     attrs: attrs
   });
 
-  var Color =
+  /* eslint no-new-func: "off" */
+  var subClassArray = function () {
+    try {
+      // try es6 subclassing
+      return Function('name', 'baseClass', '_constructor', ['baseClass = baseClass || Array', 'return {', '[name]: class extends baseClass {', 'constructor (...args) {', 'super(...args)', '_constructor && _constructor.apply(this, args)', '}', '}', '}[name]'].join('\n'));
+    } catch (e) {
+      // Use es5 approach
+      return function (name) {
+        var baseClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Array;
+
+        var _constructor = arguments.length > 2 ? arguments[2] : undefined;
+
+        var Arr = function Arr() {
+          baseClass.apply(this, arguments);
+          _constructor && _constructor.apply(this, arguments);
+        };
+
+        Arr.prototype = Object.create(baseClass.prototype);
+        Arr.prototype.constructor = Arr;
+        return Arr;
+      };
+    }
+  }();
+
+  var SVGArray = subClassArray('SVGArray', Array, function (arr) {
+    this.init(arr);
+  });
+  extend(SVGArray, {
+    init: function init(arr) {
+      this.length = 0;
+      this.push.apply(this, _toConsumableArray(this.parse(arr)));
+    },
+    toArray: function toArray() {
+      return Array.prototype.concat.apply([], this);
+    },
+    toString: function toString() {
+      return this.join(' ');
+    },
+    // Flattens the array if needed
+    valueOf: function valueOf() {
+      var ret = [];
+      ret.push.apply(ret, _toConsumableArray(this));
+      return ret;
+    },
+    // Parse whitespace separated string
+    parse: function parse() {
+      var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      // If already is an array, no need to parse it
+      if (array instanceof Array) return array;
+      return array.trim().split(delimiter).map(parseFloat);
+    },
+    clone: function clone() {
+      return new this.constructor(this);
+    },
+    toSet: function toSet() {
+      return new Set(this);
+    }
+  });
+
+  var SVGNumber =
   /*#__PURE__*/
   function () {
-    function Color() {
-      _classCallCheck(this, Color);
+    // Initialize
+    function SVGNumber() {
+      _classCallCheck(this, SVGNumber);
 
       this.init.apply(this, arguments);
     }
 
-    _createClass(Color, [{
+    _createClass(SVGNumber, [{
       key: "init",
-      value: function init(color, g, b) {
-        var match; // initialize defaults
+      value: function init(value, unit) {
+        unit = Array.isArray(value) ? value[1] : unit;
+        value = Array.isArray(value) ? value[0] : value; // initialize defaults
 
-        this.r = 0;
-        this.g = 0;
-        this.b = 0;
-        if (!color) return; // parse color
+        this.value = 0;
+        this.unit = unit || ''; // parse value
 
-        if (typeof color === 'string') {
-          if (isRgb.test(color)) {
-            // get rgb values
-            match = rgb.exec(color.replace(whitespace, '')); // parse numeric values
+        if (typeof value === 'number') {
+          // ensure a valid numeric value
+          this.value = isNaN(value) ? 0 : !isFinite(value) ? value < 0 ? -3.4e+38 : +3.4e+38 : value;
+        } else if (typeof value === 'string') {
+          unit = value.match(numberAndUnit);
 
-            this.r = parseInt(match[1]);
-            this.g = parseInt(match[2]);
-            this.b = parseInt(match[3]);
-          } else if (isHex.test(color)) {
-            // get hex values
-            match = hex.exec(fullHex(color)); // parse numeric values
+          if (unit) {
+            // make value numeric
+            this.value = parseFloat(unit[1]); // normalize
 
-            this.r = parseInt(match[1], 16);
-            this.g = parseInt(match[2], 16);
-            this.b = parseInt(match[3], 16);
+            if (unit[5] === '%') {
+              this.value /= 100;
+            } else if (unit[5] === 's') {
+              this.value *= 1000;
+            } // store unit
+
+
+            this.unit = unit[5];
+          }
+        } else {
+          if (value instanceof SVGNumber) {
+            this.value = value.valueOf();
+            this.unit = value.unit;
           }
-        } else if (Array.isArray(color)) {
-          this.r = color[0];
-          this.g = color[1];
-          this.b = color[2];
-        } else if (_typeof(color) === 'object') {
-          this.r = color.r;
-          this.g = color.g;
-          this.b = color.b;
-        } else if (arguments.length === 3) {
-          this.r = color;
-          this.g = g;
-          this.b = b;
         }
-      } // Default to hex conversion
-
+      }
     }, {
       key: "toString",
       value: function toString() {
-        return this.toHex();
+        return (this.unit === '%' ? ~~(this.value * 1e8) / 1e6 : this.unit === 's' ? this.value / 1e3 : this.value) + this.unit;
+      }
+    }, {
+      key: "toJSON",
+      value: function toJSON() {
+        return this.toString();
       }
     }, {
       key: "toArray",
       value: function toArray() {
-        return [this.r, this.g, this.b];
-      } // Build hex value
-
+        return [this.value, this.unit];
+      }
     }, {
-      key: "toHex",
-      value: function toHex() {
-        return '#' + compToHex(Math.round(this.r)) + compToHex(Math.round(this.g)) + compToHex(Math.round(this.b));
-      } // Build rgb value
+      key: "valueOf",
+      value: function valueOf() {
+        return this.value;
+      } // Add number
 
     }, {
-      key: "toRgb",
-      value: function toRgb() {
-        return 'rgb(' + [this.r, this.g, this.b].join() + ')';
-      } // Calculate true brightness
+      key: "plus",
+      value: function plus(number) {
+        number = new SVGNumber(number);
+        return new SVGNumber(this + number, this.unit || number.unit);
+      } // Subtract number
 
     }, {
-      key: "brightness",
-      value: function brightness() {
-        return this.r / 255 * 0.30 + this.g / 255 * 0.59 + this.b / 255 * 0.11;
-      } // Testers
-      // Test if given value is a color string
-
-    }], [{
-      key: "test",
-      value: function test(color) {
-        color += '';
-        return isHex.test(color) || isRgb.test(color);
-      } // Test if given value is a rgb object
+      key: "minus",
+      value: function minus(number) {
+        number = new SVGNumber(number);
+        return new SVGNumber(this - number, this.unit || number.unit);
+      } // Multiply number
 
     }, {
-      key: "isRgb",
-      value: function isRgb$$1(color) {
-        return color && typeof color.r === 'number' && typeof color.g === 'number' && typeof color.b === 'number';
-      } // Test if given value is a color
+      key: "times",
+      value: function times(number) {
+        number = new SVGNumber(number);
+        return new SVGNumber(this * number, this.unit || number.unit);
+      } // Divide number
 
     }, {
-      key: "isColor",
-      value: function isColor(color) {
-        return this.isRgb(color) || this.test(color);
+      key: "divide",
+      value: function divide(number) {
+        number = new SVGNumber(number);
+        return new SVGNumber(this / number, this.unit || number.unit);
       }
     }]);
 
-    return Color;
+    return SVGNumber;
   }();
 
-  // Set svg element attribute
-
   function attr(attr, val, ns) {
     // act as full getter
     if (attr == null) {
@@ -1621,7 +1570,8 @@ var SVG = (function () {
     }, {
       key: "matches",
       value: function matches(selector) {
-        return matcher(this.node, selector);
+        var el = this.node;
+        return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
       } // Returns the svg node to call native svg methods on it
 
     }, {
@@ -1830,9 +1780,11 @@ var SVG = (function () {
 
     }, {
       key: "reference",
-      value: function reference(attr) {
-        var id = idFromReference(this.attr(attr));
-        return id ? makeInstance(id) : null;
+      value: function reference$$1(attr) {
+        attr = this.attr(attr);
+        if (!attr) return null;
+        var m = attr.match(reference);
+        return m ? makeInstance(m[1]) : null;
       } // set given data to the elements data property
 
     }, {
@@ -1921,41 +1873,6 @@ var SVG = (function () {
     return Container;
   }(Element);
 
-  var Bare =
-  /*#__PURE__*/
-  function (_Container) {
-    _inherits(Bare, _Container);
-
-    function Bare(node) {
-      _classCallCheck(this, Bare);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Bare).call(this, nodeOrNew(node, typeof node === 'string' ? null : node), Bare));
-    }
-
-    _createClass(Bare, [{
-      key: "words",
-      value: function words(text) {
-        // remove contents
-        while (this.node.hasChildNodes()) {
-          this.node.removeChild(this.node.lastChild);
-        } // create text node
-
-
-        this.node.appendChild(document.createTextNode(text));
-        return this;
-      }
-    }]);
-
-    return Bare;
-  }(Container);
-  register(Bare);
-  registerMethods('Container', {
-    // Create an element that is not described by SVG.js
-    element: function element(node, inherit) {
-      return this.put(new Bare(node, inherit));
-    }
-  });
-
   var Defs =
   /*#__PURE__*/
   function (_Container) {
@@ -2067,13 +1984,8 @@ var SVG = (function () {
   function parser() {
     // Reuse cached element if possible
     if (!parser.nodes) {
-      var svg = new Doc$1().size(2, 0).css({
-        opacity: 0,
-        position: 'absolute',
-        left: '-100%',
-        top: '-100%',
-        overflow: 'hidden'
-      });
+      var svg = new Doc$1().size(2, 0);
+      svg.node.cssText = ['opacity: 0', 'position: absolute', 'left: -100%', 'top: -100%', 'overflow: hidden'].join(';');
       var path = svg.path().node;
       parser.nodes = {
         svg: svg,
@@ -2157,1283 +2069,12 @@ var SVG = (function () {
     }
   });
 
-  var Box =
-  /*#__PURE__*/
-  function () {
-    function Box() {
-      _classCallCheck(this, Box);
-
-      this.init.apply(this, arguments);
-    }
-
-    _createClass(Box, [{
-      key: "init",
-      value: function init(source) {
-        var base = [0, 0, 0, 0];
-        source = typeof source === 'string' ? source.split(delimiter).map(parseFloat) : Array.isArray(source) ? source : _typeof(source) === 'object' ? [source.left != null ? source.left : source.x, source.top != null ? source.top : source.y, source.width, source.height] : arguments.length === 4 ? [].slice.call(arguments) : base;
-        this.x = source[0];
-        this.y = source[1];
-        this.width = source[2];
-        this.height = source[3]; // add center, right, bottom...
-
-        fullBox(this);
-      } // Merge rect box with another, return a new instance
-
-    }, {
-      key: "merge",
-      value: function merge(box) {
-        var x = Math.min(this.x, box.x);
-        var y = Math.min(this.y, box.y);
-        var width = Math.max(this.x + this.width, box.x + box.width) - x;
-        var height = Math.max(this.y + this.height, box.y + box.height) - y;
-        return new Box(x, y, width, height);
-      }
-    }, {
-      key: "transform",
-      value: function transform(m) {
-        var xMin = Infinity;
-        var xMax = -Infinity;
-        var yMin = Infinity;
-        var yMax = -Infinity;
-        var pts = [new Point(this.x, this.y), new Point(this.x2, this.y), new Point(this.x, this.y2), new Point(this.x2, this.y2)];
-        pts.forEach(function (p) {
-          p = p.transform(m);
-          xMin = Math.min(xMin, p.x);
-          xMax = Math.max(xMax, p.x);
-          yMin = Math.min(yMin, p.y);
-          yMax = Math.max(yMax, p.y);
-        });
-        return new Box(xMin, yMin, xMax - xMin, yMax - yMin);
-      }
-    }, {
-      key: "addOffset",
-      value: function addOffset() {
-        // offset by window scroll position, because getBoundingClientRect changes when window is scrolled
-        this.x += window.pageXOffset;
-        this.y += window.pageYOffset;
-        return this;
-      }
-    }, {
-      key: "toString",
-      value: function toString() {
-        return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height;
-      }
-    }, {
-      key: "toArray",
-      value: function toArray() {
-        return [this.x, this.y, this.width, this.height];
-      }
-    }]);
-
-    return Box;
-  }();
-
-  function getBox(cb) {
-    var box;
-
-    try {
-      box = cb(this.node);
-
-      if (isNulledBox(box) && !domContains(this.node)) {
-        throw new Error('Element not in the dom');
-      }
-    } catch (e) {
-      try {
-        var clone = this.clone(parser().svg).show();
-        box = cb(clone.node);
-        clone.remove();
-      } catch (e) {
-        console.warn('Getting a bounding box of this element is not possible');
-      }
-    }
-
-    return box;
-  }
-
-  registerMethods({
-    Element: {
-      // Get bounding box
-      bbox: function bbox() {
-        return new Box(getBox.call(this, function (node) {
-          return node.getBBox();
-        }));
-      },
-      rbox: function rbox(el) {
-        var box = new Box(getBox.call(this, function (node) {
-          return node.getBoundingClientRect();
-        }));
-        if (el) return box.transform(el.screenCTM().inverse());
-        return box.addOffset();
-      }
-    },
-    viewbox: {
-      viewbox: function viewbox(x, y, width, height) {
-        // act as getter
-        if (x == null) return new Box(this.attr('viewBox')); // act as setter
-
-        return this.attr('viewBox', new Box(x, y, width, height));
-      }
-    }
-  });
-
-  var Shape =
-  /*#__PURE__*/
-  function (_Element) {
-    _inherits(Shape, _Element);
-
-    function Shape() {
-      _classCallCheck(this, Shape);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Shape).apply(this, arguments));
-    }
-
-    return Shape;
-  }(Element);
-
-  // FIXME: import this to runner
-
-  function rx(rx) {
-    return this.attr('rx', rx);
-  } // Radius y value
-
-  function ry(ry) {
-    return this.attr('ry', ry);
-  } // Move over x-axis
-
-  function x(x) {
-    return x == null ? this.cx() - this.rx() : this.cx(x + this.rx());
-  } // Move over y-axis
-
-  function y(y) {
-    return y == null ? this.cy() - this.ry() : this.cy(y + this.ry());
-  } // Move by center over x-axis
-
-  function cx(x) {
-    return x == null ? this.attr('cx') : this.attr('cx', x);
-  } // Move by center over y-axis
-
-  function cy(y) {
-    return y == null ? this.attr('cy') : this.attr('cy', y);
-  } // Set width of element
-
-  function width(width) {
-    return width == null ? this.rx() * 2 : this.rx(new SVGNumber(width).divide(2));
-  } // Set height of element
-
-  function height(height) {
-    return height == null ? this.ry() * 2 : this.ry(new SVGNumber(height).divide(2));
-  } // Custom size function
-
-  function size(width, height) {
-    var p = proportionalSize(this, width, height);
-    return this.rx(new SVGNumber(p.width).divide(2)).ry(new SVGNumber(p.height).divide(2));
-  }
-
-  var circled = /*#__PURE__*/Object.freeze({
-    rx: rx,
-    ry: ry,
-    x: x,
-    y: y,
-    cx: cx,
-    cy: cy,
-    width: width,
-    height: height,
-    size: size
-  });
-
-  var Circle =
-  /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Circle, _Shape);
-
-    function Circle(node) {
-      _classCallCheck(this, Circle);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Circle).call(this, nodeOrNew('circle', node), Circle));
-    }
-
-    _createClass(Circle, [{
-      key: "radius",
-      value: function radius(r) {
-        return this.attr('r', r);
-      } // Radius x value
-
-    }, {
-      key: "rx",
-      value: function rx$$1(_rx) {
-        return this.attr('r', _rx);
-      } // Alias radius x value
-
-    }, {
-      key: "ry",
-      value: function ry$$1(_ry) {
-        return this.rx(_ry);
-      }
-    }]);
-
-    return Circle;
-  }(Shape);
-  extend(Circle, {
-    x: x,
-    y: y,
-    cx: cx,
-    cy: cy,
-    width: width,
-    height: height,
-    size: size
-  });
-  registerMethods({
-    Element: {
-      // Create circle element
-      circle: function circle(size$$1) {
-        return this.put(new Circle()).radius(new SVGNumber(size$$1).divide(2)).move(0, 0);
-      }
-    }
-  });
-  register(Circle);
-
-  function baseFind(query, parent) {
-    return map((parent || document).querySelectorAll(query), function (node) {
-      return adopt(node);
-    });
-  } // Scoped find method
-
-  function find(query) {
-    return baseFind(query, this.node);
-  }
-  registerMethods('Dom', {
-    find: find
-  });
-
-  var ClipPath =
-  /*#__PURE__*/
-  function (_Container) {
-    _inherits(ClipPath, _Container);
-
-    function ClipPath(node) {
-      _classCallCheck(this, ClipPath);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(ClipPath).call(this, nodeOrNew('clipPath', node), ClipPath));
-    } // Unclip all clipped elements and remove itself
-
-
-    _createClass(ClipPath, [{
-      key: "remove",
-      value: function remove() {
-        // unclip all targets
-        this.targets().forEach(function (el) {
-          el.unclip();
-        }); // remove clipPath from parent
-
-        return _get(_getPrototypeOf(ClipPath.prototype), "remove", this).call(this);
-      }
-    }, {
-      key: "targets",
-      value: function targets() {
-        return baseFind('svg [clip-path*="' + this.id() + '"]');
-      }
-    }]);
-
-    return ClipPath;
-  }(Container);
-  registerMethods({
-    Container: {
-      // Create clipping element
-      clip: function clip() {
-        return this.defs().put(new ClipPath());
-      }
-    },
-    Element: {
-      // Distribute clipPath to svg element
-      clipWith: function clipWith(element) {
-        // use given clip or create a new one
-        var clipper = element instanceof ClipPath ? element : this.parent().clip().add(element); // apply mask
-
-        return this.attr('clip-path', 'url("#' + clipper.id() + '")');
-      },
-      // Unclip element
-      unclip: function unclip() {
-        return this.attr('clip-path', null);
-      },
-      clipper: function clipper() {
-        return this.reference('clip-path');
-      }
-    }
-  });
-  register(ClipPath);
-
-  /***

-  Base Class

-  ==========

-  The base stepper class that will be

-  ***/
-
-  function makeSetterGetter(k, f) {
-    return function (v) {
-      if (v == null) return this[v];
-      this[k] = v;
-      if (f) f.call(this);
-      return this;
-    };
-  }
-
-  var easing = {
-    '-': function _(pos) {
-      return pos;
-    },
-    '<>': function _(pos) {
-      return -Math.cos(pos * Math.PI) / 2 + 0.5;
-    },
-    '>': function _(pos) {
-      return Math.sin(pos * Math.PI / 2);
-    },
-    '<': function _(pos) {
-      return -Math.cos(pos * Math.PI / 2) + 1;
-    },
-    bezier: function bezier(t0, x0, t1, x1) {
-      return function (t) {// TODO: FINISH
-      };
-    }
-  };
-  var Stepper =
-  /*#__PURE__*/
-  function () {
-    function Stepper() {
-      _classCallCheck(this, Stepper);
-    }
-
-    _createClass(Stepper, [{
-      key: "done",
-      value: function done() {
-        return false;
-      }
-    }]);
-
-    return Stepper;
-  }();
-  /***

-  Easing Functions

-  ================

-  ***/
-
-  var Ease =
-  /*#__PURE__*/
-  function (_Stepper) {
-    _inherits(Ease, _Stepper);
-
-    function Ease(fn) {
-      var _this;
-
-      _classCallCheck(this, Ease);
-
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(Ease).call(this));
-      _this.ease = easing[fn || timeline.ease] || fn;
-      return _this;
-    }
-
-    _createClass(Ease, [{
-      key: "step",
-      value: function step(from, to, pos) {
-        if (typeof from !== 'number') {
-          return pos < 1 ? from : to;
-        }
-
-        return from + (to - from) * this.ease(pos);
-      }
-    }]);
-
-    return Ease;
-  }(Stepper);
-  /***

-  Controller Types

-  ================

-  ***/
-
-  var Controller =
-  /*#__PURE__*/
-  function (_Stepper2) {
-    _inherits(Controller, _Stepper2);
-
-    function Controller(fn) {
-      var _this2;
-
-      _classCallCheck(this, Controller);
-
-      _this2 = _possibleConstructorReturn(this, _getPrototypeOf(Controller).call(this));
-      _this2.stepper = fn;
-      return _this2;
-    }
-
-    _createClass(Controller, [{
-      key: "step",
-      value: function step(current, target, dt, c) {
-        return this.stepper(current, target, dt, c);
-      }
-    }, {
-      key: "done",
-      value: function done(c) {
-        return c.done;
-      }
-    }]);
-
-    return Controller;
-  }(Stepper);
-
-  function recalculate() {
-    // Apply the default parameters
-    var duration = (this._duration || 500) / 1000;
-    var overshoot = this._overshoot || 0; // Calculate the PID natural response
-
-    var eps = 1e-10;
-    var pi = Math.PI;
-    var os = Math.log(overshoot / 100 + eps);
-    var zeta = -os / Math.sqrt(pi * pi + os * os);
-    var wn = 3.9 / (zeta * duration); // Calculate the Spring values
-
-    this.d = 2 * zeta * wn;
-    this.k = wn * wn;
-  }
-
-  var Spring =
-  /*#__PURE__*/
-  function (_Controller) {
-    _inherits(Spring, _Controller);
-
-    function Spring(duration, overshoot) {
-      var _this3;
-
-      _classCallCheck(this, Spring);
-
-      _this3 = _possibleConstructorReturn(this, _getPrototypeOf(Spring).call(this));
-
-      _this3.duration(duration || 500).overshoot(overshoot || 0);
-
-      return _this3;
-    }
-
-    _createClass(Spring, [{
-      key: "step",
-      value: function step(current, target, dt, c) {
-        if (typeof current === 'string') return current;
-        c.done = dt === Infinity;
-        if (dt === Infinity) return target;
-        if (dt === 0) return current;
-        if (dt > 100) dt = 16;
-        dt /= 1000; // Get the previous velocity
-
-        var velocity = c.velocity || 0; // Apply the control to get the new position and store it
-
-        var acceleration = -this.d * velocity - this.k * (current - target);
-        var newPosition = current + velocity * dt + acceleration * dt * dt / 2; // Store the velocity
-
-        c.velocity = velocity + acceleration * dt; // Figure out if we have converged, and if so, pass the value
-
-        c.done = Math.abs(target - newPosition) + Math.abs(velocity) < 0.002;
-        return c.done ? target : newPosition;
-      }
-    }]);
-
-    return Spring;
-  }(Controller);
-  extend(Spring, {
-    duration: makeSetterGetter('_duration', recalculate),
-    overshoot: makeSetterGetter('_overshoot', recalculate)
-  });
-  var PID =
-  /*#__PURE__*/
-  function (_Controller2) {
-    _inherits(PID, _Controller2);
-
-    function PID(p, i, d, windup) {
-      var _this4;
-
-      _classCallCheck(this, PID);
-
-      _this4 = _possibleConstructorReturn(this, _getPrototypeOf(PID).call(this));
-      p = p == null ? 0.1 : p;
-      i = i == null ? 0.01 : i;
-      d = d == null ? 0 : d;
-      windup = windup == null ? 1000 : windup;
-
-      _this4.p(p).i(i).d(d).windup(windup);
-
-      return _this4;
-    }
-
-    _createClass(PID, [{
-      key: "step",
-      value: function step(current, target, dt, c) {
-        if (typeof current === 'string') return current;
-        c.done = dt === Infinity;
-        if (dt === Infinity) return target;
-        if (dt === 0) return current;
-        var p = target - current;
-        var i = (c.integral || 0) + p * dt;
-        var d = (p - (c.error || 0)) / dt;
-        var windup = this.windup; // antiwindup
-
-        if (windup !== false) {
-          i = Math.max(-windup, Math.min(i, windup));
-        }
-
-        c.error = p;
-        c.integral = i;
-        c.done = Math.abs(p) < 0.001;
-        return c.done ? target : current + (this.P * p + this.I * i + this.D * d);
-      }
-    }]);
-
-    return PID;
-  }(Controller);
-  extend(PID, {
-    windup: makeSetterGetter('windup'),
-    p: makeSetterGetter('P'),
-    i: makeSetterGetter('I'),
-    d: makeSetterGetter('D')
-  });
-
-  var Ellipse =
-  /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Ellipse, _Shape);
-
-    function Ellipse(node) {
-      _classCallCheck(this, Ellipse);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Ellipse).call(this, nodeOrNew('ellipse', node), Ellipse));
-    }
-
-    return Ellipse;
-  }(Shape);
-  extend(Ellipse, circled);
-  registerMethods('Container', {
-    // Create an ellipse
-    ellipse: function ellipse(width$$1, height$$1) {
-      return this.put(new Ellipse()).size(width$$1, height$$1).move(0, 0);
-    }
-  });
-  register(Ellipse);
-
-  var Stop =
-  /*#__PURE__*/
-  function (_Element) {
-    _inherits(Stop, _Element);
-
-    function Stop(node) {
-      _classCallCheck(this, Stop);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Stop).call(this, nodeOrNew('stop', node), Stop));
-    } // add color stops
-
-
-    _createClass(Stop, [{
-      key: "update",
-      value: function update(o) {
-        if (typeof o === 'number' || o instanceof SVGNumber) {
-          o = {
-            offset: arguments[0],
-            color: arguments[1],
-            opacity: arguments[2]
-          };
-        } // set attributes
-
-
-        if (o.opacity != null) this.attr('stop-opacity', o.opacity);
-        if (o.color != null) this.attr('stop-color', o.color);
-        if (o.offset != null) this.attr('offset', new SVGNumber(o.offset));
-        return this;
-      }
-    }]);
-
-    return Stop;
-  }(Element);
-  register(Stop);
-
-  // FIXME: add to runner
-  function from(x, y) {
-    return (this._element || this).type === 'radialGradient' ? this.attr({
-      fx: new SVGNumber(x),
-      fy: new SVGNumber(y)
-    }) : this.attr({
-      x1: new SVGNumber(x),
-      y1: new SVGNumber(y)
-    });
-  }
-  function to(x, y) {
-    return (this._element || this).type === 'radialGradient' ? this.attr({
-      cx: new SVGNumber(x),
-      cy: new SVGNumber(y)
-    }) : this.attr({
-      x2: new SVGNumber(x),
-      y2: new SVGNumber(y)
-    });
-  }
-
-  var gradiented = /*#__PURE__*/Object.freeze({
-    from: from,
-    to: to
-  });
-
-  var Gradient =
-  /*#__PURE__*/
-  function (_Container) {
-    _inherits(Gradient, _Container);
-
-    function Gradient(type) {
-      _classCallCheck(this, Gradient);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Gradient).call(this, nodeOrNew(type + 'Gradient', typeof type === 'string' ? null : type), Gradient));
-    } // Add a color stop
-
-
-    _createClass(Gradient, [{
-      key: "stop",
-      value: function stop(offset, color, opacity) {
-        return this.put(new Stop()).update(offset, color, opacity);
-      } // Update gradient
-
-    }, {
-      key: "update",
-      value: function update(block) {
-        // remove all stops
-        this.clear(); // invoke passed block
-
-        if (typeof block === 'function') {
-          block.call(this, this);
-        }
-
-        return this;
-      } // Return the fill id
-
-    }, {
-      key: "url",
-      value: function url() {
-        return 'url(#' + this.id() + ')';
-      } // Alias string convertion to fill
-
-    }, {
-      key: "toString",
-      value: function toString() {
-        return this.url();
-      } // custom attr to handle transform
-
-    }, {
-      key: "attr",
-      value: function attr(a, b, c) {
-        if (a === 'transform') a = 'gradientTransform';
-        return _get(_getPrototypeOf(Gradient.prototype), "attr", this).call(this, a, b, c);
-      }
-    }, {
-      key: "targets",
-      value: function targets() {
-        return find('svg [fill*="' + this.id() + '"]');
-      }
-    }, {
-      key: "bbox",
-      value: function bbox() {
-        return new Box();
-      }
-    }]);
-
-    return Gradient;
-  }(Container);
-  extend(Gradient, gradiented);
-  registerMethods({
-    Container: {
-      // Create gradient element in defs
-      gradient: function gradient(type, block) {
-        return this.defs().gradient(type, block);
-      }
-    },
-    // define gradient
-    Defs: {
-      gradient: function gradient(type, block) {
-        return this.put(new Gradient(type)).update(block);
-      }
-    }
-  });
-  register(Gradient);
-
-  var G =
-  /*#__PURE__*/
-  function (_Container) {
-    _inherits(G, _Container);
-
-    function G(node) {
-      _classCallCheck(this, G);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(G).call(this, nodeOrNew('g', node), G));
-    }
-
-    return G;
-  }(Container);
-  registerMethods({
-    Element: {
-      // Create a group element
-      group: function group() {
-        return this.put(new G());
-      }
-    }
-  });
-  register(G);
-
-  var HtmlNode =
-  /*#__PURE__*/
-  function (_Dom) {
-    _inherits(HtmlNode, _Dom);
-
-    function HtmlNode(node) {
-      _classCallCheck(this, HtmlNode);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(HtmlNode).call(this, node, HtmlNode));
-    }
-
-    return HtmlNode;
-  }(Dom);
-  register(HtmlNode);
-
-  var A =
-  /*#__PURE__*/
-  function (_Container) {
-    _inherits(A, _Container);
-
-    function A(node) {
-      _classCallCheck(this, A);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(A).call(this, nodeOrNew('a', node), A));
-    } // Link url
-
-
-    _createClass(A, [{
-      key: "to",
-      value: function to(url) {
-        return this.attr('href', url, xlink);
-      } // Link target attribute
-
-    }, {
-      key: "target",
-      value: function target(_target) {
-        return this.attr('target', _target);
-      }
-    }]);
-
-    return A;
-  }(Container);
-  registerMethods({
-    Container: {
-      // Create a hyperlink element
-      link: function link(url) {
-        return this.put(new A()).to(url);
-      }
-    },
-    Element: {
-      // Create a hyperlink element
-      linkTo: function linkTo(url) {
-        var link = new A();
-
-        if (typeof url === 'function') {
-          url.call(link, link);
-        } else {
-          link.to(url);
-        }
-
-        return this.parent().put(link).put(this);
-      }
-    }
-  });
-  register(A);
-
-  var Pattern =
-  /*#__PURE__*/
-  function (_Container) {
-    _inherits(Pattern, _Container);
-
-    // Initialize node
-    function Pattern(node) {
-      _classCallCheck(this, Pattern);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Pattern).call(this, nodeOrNew('pattern', node), Pattern));
-    } // Return the fill id
-
-
-    _createClass(Pattern, [{
-      key: "url",
-      value: function url() {
-        return 'url(#' + this.id() + ')';
-      } // Update pattern by rebuilding
-
-    }, {
-      key: "update",
-      value: function update(block) {
-        // remove content
-        this.clear(); // invoke passed block
-
-        if (typeof block === 'function') {
-          block.call(this, this);
-        }
-
-        return this;
-      } // Alias string convertion to fill
-
-    }, {
-      key: "toString",
-      value: function toString() {
-        return this.url();
-      } // custom attr to handle transform
-
-    }, {
-      key: "attr",
-      value: function attr(a, b, c) {
-        if (a === 'transform') a = 'patternTransform';
-        return _get(_getPrototypeOf(Pattern.prototype), "attr", this).call(this, a, b, c);
-      }
-    }, {
-      key: "targets",
-      value: function targets() {
-        return find('svg [fill*="' + this.id() + '"]');
-      }
-    }, {
-      key: "bbox",
-      value: function bbox() {
-        return new Box();
-      }
-    }]);
-
-    return Pattern;
-  }(Container);
-  registerMethods({
-    Container: {
-      // Create pattern element in defs
-      pattern: function pattern(width, height, block) {
-        return this.defs().pattern(width, height, block);
-      }
-    },
-    Defs: {
-      pattern: function pattern(width, height, block) {
-        return this.put(new Pattern()).update(block).attr({
-          x: 0,
-          y: 0,
-          width: width,
-          height: height,
-          patternUnits: 'userSpaceOnUse'
-        });
-      }
-    }
-  });
-  register(Pattern);
-
-  var Image =
-  /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Image, _Shape);
-
-    function Image(node) {
-      _classCallCheck(this, Image);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Image).call(this, nodeOrNew('image', node), Image));
-    } // (re)load image
-
-
-    _createClass(Image, [{
-      key: "load",
-      value: function load(url, callback) {
-        if (!url) return this;
-        var img = new window.Image();
-        on(img, 'load', function (e) {
-          var p = this.parent(Pattern); // ensure image size
-
-          if (this.width() === 0 && this.height() === 0) {
-            this.size(img.width, img.height);
-          }
-
-          if (p instanceof Pattern) {
-            // ensure pattern size if not set
-            if (p.width() === 0 && p.height() === 0) {
-              p.size(this.width(), this.height());
-            }
-          }
-
-          if (typeof callback === 'function') {
-            callback.call(this, {
-              width: img.width,
-              height: img.height,
-              ratio: img.width / img.height,
-              url: url
-            });
-          }
-        }, this);
-        on(img, 'load error', function () {
-          // dont forget to unbind memory leaking events
-          off(img);
-        });
-        return this.attr('href', img.src = url, xlink);
-      }
-    }, {
-      key: "attrHook",
-      value: function attrHook(obj) {
-        var _this = this;
-
-        return obj.doc().defs().pattern(0, 0, function (pattern) {
-          pattern.add(_this);
-        });
-      }
-    }]);
-
-    return Image;
-  }(Shape);
-  registerMethods({
-    Container: {
-      // create image element, load image and set its size
-      image: function image(source, callback) {
-        return this.put(new Image()).size(0, 0).load(source, callback);
-      }
-    }
-  });
-  register(Image);
-
-  var PointArray = subClassArray('PointArray', SVGArray);
-  extend(PointArray, {
-    // Convert array to string
-    toString: function toString() {
-      // convert to a poly point string
-      for (var i = 0, il = this.length, array = []; i < il; i++) {
-        array.push(this[i].join(','));
-      }
-
-      return array.join(' ');
-    },
-    // Convert array to line object
-    toLine: function toLine() {
-      return {
-        x1: this[0][0],
-        y1: this[0][1],
-        x2: this[1][0],
-        y2: this[1][1]
-      };
-    },
-    // Get morphed array at given position
-    at: function at(pos) {
-      // make sure a destination is defined
-      if (!this.destination) return this; // generate morphed point string
-
-      for (var i = 0, il = this.length, array = []; i < il; i++) {
-        array.push([this[i][0] + (this.destination[i][0] - this[i][0]) * pos, this[i][1] + (this.destination[i][1] - this[i][1]) * pos]);
-      }
-
-      return new PointArray(array);
-    },
-    // Parse point string and flat array
-    parse: function parse() {
-      var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [[0, 0]];
-      var points = []; // if it is an array
-
-      if (array instanceof Array) {
-        // and it is not flat, there is no need to parse it
-        if (array[0] instanceof Array) {
-          return array;
-        }
-      } else {
-        // Else, it is considered as a string
-        // parse points
-        array = array.trim().split(delimiter).map(parseFloat);
-      } // validate points - https://svgwg.org/svg2-draft/shapes.html#DataTypePoints
-      // Odd number of coordinates is an error. In such cases, drop the last odd coordinate.
-
-
-      if (array.length % 2 !== 0) array.pop(); // wrap points in two-tuples and parse points as floats
-
-      for (var i = 0, len = array.length; i < len; i = i + 2) {
-        points.push([array[i], array[i + 1]]);
-      }
-
-      return points;
-    },
-    // Move point string
-    move: function move(x, y) {
-      var box = this.bbox(); // get relative offset
-
-      x -= box.x;
-      y -= box.y; // move every point
-
-      if (!isNaN(x) && !isNaN(y)) {
-        for (var i = this.length - 1; i >= 0; i--) {
-          this[i] = [this[i][0] + x, this[i][1] + y];
-        }
-      }
-
-      return this;
-    },
-    // Resize poly string
-    size: function size(width, height) {
-      var i;
-      var box = this.bbox(); // recalculate position of all points according to new size
-
-      for (i = this.length - 1; i >= 0; i--) {
-        if (box.width) this[i][0] = (this[i][0] - box.x) * width / box.width + box.x;
-        if (box.height) this[i][1] = (this[i][1] - box.y) * height / box.height + box.y;
-      }
-
-      return this;
-    },
-    // Get bounding box of points
-    bbox: function bbox() {
-      var maxX = -Infinity;
-      var maxY = -Infinity;
-      var minX = Infinity;
-      var minY = Infinity;
-      this.forEach(function (el) {
-        maxX = Math.max(el[0], maxX);
-        maxY = Math.max(el[1], maxY);
-        minX = Math.min(el[0], minX);
-        minY = Math.min(el[1], minY);
-      });
-      return {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY
-      };
-    }
-  });
-
-  var MorphArray = PointArray; // Move by left top corner over x-axis
-
-  function x$1(x) {
-    return x == null ? this.bbox().x : this.move(x, this.bbox().y);
-  } // Move by left top corner over y-axis
-
-  function y$1(y) {
-    return y == null ? this.bbox().y : this.move(this.bbox().x, y);
-  } // Set width of element
-
-  function width$1(width) {
-    var b = this.bbox();
-    return width == null ? b.width : this.size(width, b.height);
-  } // Set height of element
+  var abcdef = 'abcdef'.split('');
 
-  function height$1(height) {
-    var b = this.bbox();
-    return height == null ? b.height : this.size(b.width, height);
+  function closeEnough(a, b, threshold) {
+    return Math.abs(b - a) < (threshold || 1e-6);
   }
 
-  var pointed = /*#__PURE__*/Object.freeze({
-    MorphArray: MorphArray,
-    x: x$1,
-    y: y$1,
-    width: width$1,
-    height: height$1
-  });
-
-  var Line =
-  /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Line, _Shape);
-
-    // Initialize node
-    function Line(node) {
-      _classCallCheck(this, Line);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Line).call(this, nodeOrNew('line', node), Line));
-    } // Get array
-
-
-    _createClass(Line, [{
-      key: "array",
-      value: function array() {
-        return new PointArray([[this.attr('x1'), this.attr('y1')], [this.attr('x2'), this.attr('y2')]]);
-      } // Overwrite native plot() method
-
-    }, {
-      key: "plot",
-      value: function plot(x1, y1, x2, y2) {
-        if (x1 == null) {
-          return this.array();
-        } else if (typeof y1 !== 'undefined') {
-          x1 = {
-            x1: x1,
-            y1: y1,
-            x2: x2,
-            y2: y2
-          };
-        } else {
-          x1 = new PointArray(x1).toLine();
-        }
-
-        return this.attr(x1);
-      } // Move by left top corner
-
-    }, {
-      key: "move",
-      value: function move(x, y) {
-        return this.attr(this.array().move(x, y).toLine());
-      } // Set element size to given width and height
-
-    }, {
-      key: "size",
-      value: function size(width, height) {
-        var p = proportionalSize(this, width, height);
-        return this.attr(this.array().size(p.width, p.height).toLine());
-      }
-    }]);
-
-    return Line;
-  }(Shape);
-  extend(Line, pointed);
-  registerMethods({
-    Container: {
-      // Create a line element
-      line: function line() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        // make sure plot is called as a setter
-        // x1 is not necessarily a number, it can also be an array, a string and a PointArray
-        return Line.prototype.plot.apply(this.put(new Line()), args[0] != null ? args : [0, 0, 0, 0]);
-      }
-    }
-  });
-  register(Line);
-
-  var Marker =
-  /*#__PURE__*/
-  function (_Container) {
-    _inherits(Marker, _Container);
-
-    // Initialize node
-    function Marker(node) {
-      _classCallCheck(this, Marker);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Marker).call(this, nodeOrNew('marker', node), Marker));
-    } // Set width of element
-
-
-    _createClass(Marker, [{
-      key: "width",
-      value: function width(_width) {
-        return this.attr('markerWidth', _width);
-      } // Set height of element
-
-    }, {
-      key: "height",
-      value: function height(_height) {
-        return this.attr('markerHeight', _height);
-      } // Set marker refX and refY
-
-    }, {
-      key: "ref",
-      value: function ref(x, y) {
-        return this.attr('refX', x).attr('refY', y);
-      } // Update marker
-
-    }, {
-      key: "update",
-      value: function update(block) {
-        // remove all content
-        this.clear(); // invoke passed block
-
-        if (typeof block === 'function') {
-          block.call(this, this);
-        }
-
-        return this;
-      } // Return the fill id
-
-    }, {
-      key: "toString",
-      value: function toString() {
-        return 'url(#' + this.id() + ')';
-      }
-    }]);
-
-    return Marker;
-  }(Container);
-  registerMethods({
-    Container: {
-      marker: function marker(width, height, block) {
-        // Create marker element in defs
-        return this.defs().marker(width, height, block);
-      }
-    },
-    Defs: {
-      // Create marker
-      marker: function marker(width, height, block) {
-        // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto
-        return this.put(new Marker()).size(width, height).ref(width / 2, height / 2).viewbox(0, 0, width, height).attr('orient', 'auto').update(block);
-      }
-    },
-    marker: {
-      // Create and attach markers
-      marker: function marker(_marker, width, height, block) {
-        var attr = ['marker']; // Build attribute name
-
-        if (_marker !== 'all') attr.push(_marker);
-        attr = attr.join('-'); // Set marker attribute
-
-        _marker = arguments[1] instanceof Marker ? arguments[1] : this.defs().marker(width, height, block);
-        return this.attr(attr, _marker);
-      }
-    }
-  });
-  register(Marker);
-
-  var Mask =
-  /*#__PURE__*/
-  function (_Container) {
-    _inherits(Mask, _Container);
-
-    // Initialize node
-    function Mask(node) {
-      _classCallCheck(this, Mask);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Mask).call(this, nodeOrNew('mask', node), Mask));
-    } // Unmask all masked elements and remove itself
-
-
-    _createClass(Mask, [{
-      key: "remove",
-      value: function remove() {
-        // unmask all targets
-        this.targets().forEach(function (el) {
-          el.unmask();
-        }); // remove mask from parent
-
-        return _get(_getPrototypeOf(Mask.prototype), "remove", this).call(this);
-      }
-    }, {
-      key: "targets",
-      value: function targets() {
-        return baseFind('svg [mask*="' + this.id() + '"]');
-      }
-    }]);
-
-    return Mask;
-  }(Container);
-  registerMethods({
-    Container: {
-      mask: function mask() {
-        return this.defs().put(new Mask());
-      }
-    },
-    Element: {
-      // Distribute mask to svg element
-      maskWith: function maskWith(element) {
-        // use given mask or create a new one
-        var masker = element instanceof Mask ? element : this.parent().mask().add(element); // apply mask
-
-        return this.attr('mask', 'url("#' + masker.id() + '")');
-      },
-      // Unmask element
-      unmask: function unmask() {
-        return this.attr('mask', null);
-      },
-      masker: function masker() {
-        return this.reference('mask');
-      }
-    }
-  });
-  register(Mask);
-
   var Matrix =
   /*#__PURE__*/
   function () {
@@ -3447,9 +2088,9 @@ var SVG = (function () {
     _createClass(Matrix, [{
       key: "init",
       value: function init(source) {
-        var base = arrayToMatrix([1, 0, 0, 1, 0, 0]); // ensure source as object
+        var base = Matrix.fromArray([1, 0, 0, 1, 0, 0]); // ensure source as object
 
-        source = source instanceof Element ? source.matrixify() : typeof source === 'string' ? arrayToMatrix(source.split(delimiter).map(parseFloat)) : Array.isArray(source) ? arrayToMatrix(source) : _typeof(source) === 'object' && isMatrixLike(source) ? source : _typeof(source) === 'object' ? new Matrix().transform(source) : arguments.length === 6 ? arrayToMatrix([].slice.call(arguments)) : base; // Merge the source matrix with the base matrix
+        source = source instanceof Element ? source.matrixify() : typeof source === 'string' ? Matrix.fromArray(source.split(delimiter).map(parseFloat)) : Array.isArray(source) ? Matrix.fromArray(source) : _typeof(source) === 'object' && Matrix.isMatrixLike(source) ? source : _typeof(source) === 'object' ? new Matrix().transform(source) : arguments.length === 6 ? Matrix.fromArray([].slice.call(arguments)) : base; // Merge the source matrix with the base matrix
 
         this.a = source.a != null ? source.a : base.a;
         this.b = source.b != null ? source.b : base.b;
@@ -3469,7 +2110,7 @@ var SVG = (function () {
       key: "transform",
       value: function transform(o) {
         // Check if o is a matrix and then left multiply it directly
-        if (isMatrixLike(o)) {
+        if (Matrix.isMatrixLike(o)) {
           var matrix = new Matrix(o);
           return matrix.multiplyO(this);
         } // Get the proposed transformations and the current transformations
@@ -3859,9 +2500,25 @@ var SVG = (function () {
           e: this.e,
           f: this.f
         };
-      } // TODO: Refactor this to a static function of matrix.js
-
+      }
     }], [{
+      key: "fromArray",
+      value: function fromArray(a) {
+        return {
+          a: a[0],
+          b: a[1],
+          c: a[2],
+          d: a[3],
+          e: a[4],
+          f: a[5]
+        };
+      }
+    }, {
+      key: "isMatrixLike",
+      value: function isMatrixLike(o) {
+        return o.a != null || o.b != null || o.c != null || o.d != null || o.e != null || o.f != null;
+      }
+    }, {
       key: "formatTransforms",
       value: function formatTransforms(o) {
         // Get all of the parameters required to form the matrix
@@ -3952,7 +2609,572 @@ var SVG = (function () {
     }
   });
 
+  /***

+  Base Class

+  ==========

+  The base stepper class that will be

+  ***/
+
+  function makeSetterGetter(k, f) {
+    return function (v) {
+      if (v == null) return this[v];
+      this[k] = v;
+      if (f) f.call(this);
+      return this;
+    };
+  }
+
+  var easing = {
+    '-': function _(pos) {
+      return pos;
+    },
+    '<>': function _(pos) {
+      return -Math.cos(pos * Math.PI) / 2 + 0.5;
+    },
+    '>': function _(pos) {
+      return Math.sin(pos * Math.PI / 2);
+    },
+    '<': function _(pos) {
+      return -Math.cos(pos * Math.PI / 2) + 1;
+    },
+    bezier: function bezier(t0, x0, t1, x1) {
+      return function (t) {// TODO: FINISH
+      };
+    }
+  };
+  var Stepper =
+  /*#__PURE__*/
+  function () {
+    function Stepper() {
+      _classCallCheck(this, Stepper);
+    }
+
+    _createClass(Stepper, [{
+      key: "done",
+      value: function done() {
+        return false;
+      }
+    }]);
+
+    return Stepper;
+  }();
+  /***

+  Easing Functions

+  ================

+  ***/
+
+  var Ease =
+  /*#__PURE__*/
+  function (_Stepper) {
+    _inherits(Ease, _Stepper);
+
+    function Ease(fn) {
+      var _this;
+
+      _classCallCheck(this, Ease);
+
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(Ease).call(this));
+      _this.ease = easing[fn || timeline.ease] || fn;
+      return _this;
+    }
+
+    _createClass(Ease, [{
+      key: "step",
+      value: function step(from, to, pos) {
+        if (typeof from !== 'number') {
+          return pos < 1 ? from : to;
+        }
+
+        return from + (to - from) * this.ease(pos);
+      }
+    }]);
+
+    return Ease;
+  }(Stepper);
+  /***

+  Controller Types

+  ================

+  ***/
+
+  var Controller =
+  /*#__PURE__*/
+  function (_Stepper2) {
+    _inherits(Controller, _Stepper2);
+
+    function Controller(fn) {
+      var _this2;
+
+      _classCallCheck(this, Controller);
+
+      _this2 = _possibleConstructorReturn(this, _getPrototypeOf(Controller).call(this));
+      _this2.stepper = fn;
+      return _this2;
+    }
+
+    _createClass(Controller, [{
+      key: "step",
+      value: function step(current, target, dt, c) {
+        return this.stepper(current, target, dt, c);
+      }
+    }, {
+      key: "done",
+      value: function done(c) {
+        return c.done;
+      }
+    }]);
+
+    return Controller;
+  }(Stepper);
+
+  function recalculate() {
+    // Apply the default parameters
+    var duration = (this._duration || 500) / 1000;
+    var overshoot = this._overshoot || 0; // Calculate the PID natural response
+
+    var eps = 1e-10;
+    var pi = Math.PI;
+    var os = Math.log(overshoot / 100 + eps);
+    var zeta = -os / Math.sqrt(pi * pi + os * os);
+    var wn = 3.9 / (zeta * duration); // Calculate the Spring values
+
+    this.d = 2 * zeta * wn;
+    this.k = wn * wn;
+  }
+
+  var Spring =
+  /*#__PURE__*/
+  function (_Controller) {
+    _inherits(Spring, _Controller);
+
+    function Spring(duration, overshoot) {
+      var _this3;
+
+      _classCallCheck(this, Spring);
+
+      _this3 = _possibleConstructorReturn(this, _getPrototypeOf(Spring).call(this));
+
+      _this3.duration(duration || 500).overshoot(overshoot || 0);
+
+      return _this3;
+    }
+
+    _createClass(Spring, [{
+      key: "step",
+      value: function step(current, target, dt, c) {
+        if (typeof current === 'string') return current;
+        c.done = dt === Infinity;
+        if (dt === Infinity) return target;
+        if (dt === 0) return current;
+        if (dt > 100) dt = 16;
+        dt /= 1000; // Get the previous velocity
+
+        var velocity = c.velocity || 0; // Apply the control to get the new position and store it
+
+        var acceleration = -this.d * velocity - this.k * (current - target);
+        var newPosition = current + velocity * dt + acceleration * dt * dt / 2; // Store the velocity
+
+        c.velocity = velocity + acceleration * dt; // Figure out if we have converged, and if so, pass the value
+
+        c.done = Math.abs(target - newPosition) + Math.abs(velocity) < 0.002;
+        return c.done ? target : newPosition;
+      }
+    }]);
+
+    return Spring;
+  }(Controller);
+  extend(Spring, {
+    duration: makeSetterGetter('_duration', recalculate),
+    overshoot: makeSetterGetter('_overshoot', recalculate)
+  });
+  var PID =
+  /*#__PURE__*/
+  function (_Controller2) {
+    _inherits(PID, _Controller2);
+
+    function PID(p, i, d, windup) {
+      var _this4;
+
+      _classCallCheck(this, PID);
+
+      _this4 = _possibleConstructorReturn(this, _getPrototypeOf(PID).call(this));
+      p = p == null ? 0.1 : p;
+      i = i == null ? 0.01 : i;
+      d = d == null ? 0 : d;
+      windup = windup == null ? 1000 : windup;
+
+      _this4.p(p).i(i).d(d).windup(windup);
+
+      return _this4;
+    }
+
+    _createClass(PID, [{
+      key: "step",
+      value: function step(current, target, dt, c) {
+        if (typeof current === 'string') return current;
+        c.done = dt === Infinity;
+        if (dt === Infinity) return target;
+        if (dt === 0) return current;
+        var p = target - current;
+        var i = (c.integral || 0) + p * dt;
+        var d = (p - (c.error || 0)) / dt;
+        var windup = this.windup; // antiwindup
+
+        if (windup !== false) {
+          i = Math.max(-windup, Math.min(i, windup));
+        }
+
+        c.error = p;
+        c.integral = i;
+        c.done = Math.abs(p) < 0.001;
+        return c.done ? target : current + (this.P * p + this.I * i + this.D * d);
+      }
+    }]);
+
+    return PID;
+  }(Controller);
+  extend(PID, {
+    windup: makeSetterGetter('windup'),
+    p: makeSetterGetter('P'),
+    i: makeSetterGetter('I'),
+    d: makeSetterGetter('D')
+  });
+
+  var Queue =
+  /*#__PURE__*/
+  function () {
+    function Queue() {
+      _classCallCheck(this, Queue);
+
+      this._first = null;
+      this._last = null;
+    }
+
+    _createClass(Queue, [{
+      key: "push",
+      value: function push(value) {
+        // An item stores an id and the provided value
+        var item = value.next ? value : {
+          value: value,
+          next: null,
+          prev: null // Deal with the queue being empty or populated
+
+        };
+
+        if (this._last) {
+          item.prev = this._last;
+          this._last.next = item;
+          this._last = item;
+        } else {
+          this._last = item;
+          this._first = item;
+        } // Update the length and return the current item
+
+
+        return item;
+      }
+    }, {
+      key: "shift",
+      value: function shift() {
+        // Check if we have a value
+        var remove = this._first;
+        if (!remove) return null; // If we do, remove it and relink things
+
+        this._first = remove.next;
+        if (this._first) this._first.prev = null;
+        this._last = this._first ? this._last : null;
+        return remove.value;
+      } // Shows us the first item in the list
+
+    }, {
+      key: "first",
+      value: function first() {
+        return this._first && this._first.value;
+      } // Shows us the last item in the list
+
+    }, {
+      key: "last",
+      value: function last() {
+        return this._last && this._last.value;
+      } // Removes the item that was returned from the push
+
+    }, {
+      key: "remove",
+      value: function remove(item) {
+        // Relink the previous item
+        if (item.prev) item.prev.next = item.next;
+        if (item.next) item.next.prev = item.prev;
+        if (item === this._last) this._last = item.prev;
+        if (item === this._first) this._first = item.next; // Invalidate item
+
+        item.prev = null;
+        item.next = null;
+      }
+    }]);
+
+    return Queue;
+  }();
+
+  var Animator = {
+    nextDraw: null,
+    frames: new Queue(),
+    timeouts: new Queue(),
+    timer: window.performance || window.Date,
+    transforms: [],
+    frame: function frame(fn) {
+      // Store the node
+      var node = Animator.frames.push({
+        run: fn
+      }); // Request an animation frame if we don't have one
+
+      if (Animator.nextDraw === null) {
+        Animator.nextDraw = window.requestAnimationFrame(Animator._draw);
+      } // Return the node so we can remove it easily
+
+
+      return node;
+    },
+    transform_frame: function transform_frame(fn, id) {
+      Animator.transforms[id] = fn;
+    },
+    timeout: function timeout(fn, delay) {
+      delay = delay || 0; // Work out when the event should fire
+
+      var time = Animator.timer.now() + delay; // Add the timeout to the end of the queue
+
+      var node = Animator.timeouts.push({
+        run: fn,
+        time: time
+      }); // Request another animation frame if we need one
+
+      if (Animator.nextDraw === null) {
+        Animator.nextDraw = window.requestAnimationFrame(Animator._draw);
+      }
+
+      return node;
+    },
+    cancelFrame: function cancelFrame(node) {
+      Animator.frames.remove(node);
+    },
+    clearTimeout: function clearTimeout(node) {
+      Animator.timeouts.remove(node);
+    },
+    _draw: function _draw(now) {
+      // Run all the timeouts we can run, if they are not ready yet, add them
+      // to the end of the queue immediately! (bad timeouts!!! [sarcasm])
+      var nextTimeout = null;
+      var lastTimeout = Animator.timeouts.last();
+
+      while (nextTimeout = Animator.timeouts.shift()) {
+        // Run the timeout if its time, or push it to the end
+        if (now >= nextTimeout.time) {
+          nextTimeout.run();
+        } else {
+          Animator.timeouts.push(nextTimeout);
+        } // If we hit the last item, we should stop shifting out more items
+
+
+        if (nextTimeout === lastTimeout) break;
+      } // Run all of the animation frames
+
+
+      var nextFrame = null;
+      var lastFrame = Animator.frames.last();
+
+      while (nextFrame !== lastFrame && (nextFrame = Animator.frames.shift())) {
+        nextFrame.run();
+      }
+
+      Animator.transforms.forEach(function (el) {
+        el();
+      }); // If we have remaining timeouts or frames, draw until we don't anymore
+
+      Animator.nextDraw = Animator.timeouts.first() || Animator.frames.first() ? window.requestAnimationFrame(Animator._draw) : null;
+    }
+  };
+
+  function isNulledBox(box) {
+    return !box.w && !box.h && !box.x && !box.y;
+  }
+
+  function domContains(node) {
+    return (document.documentElement.contains || function (node) {
+      // This is IE - it does not support contains() for top-level SVGs
+      while (node.parentNode) {
+        node = node.parentNode;
+      }
+
+      return node === document;
+    }).call(document.documentElement, node);
+  }
+
+  var Box =
+  /*#__PURE__*/
+  function () {
+    function Box() {
+      _classCallCheck(this, Box);
+
+      this.init.apply(this, arguments);
+    }
+
+    _createClass(Box, [{
+      key: "init",
+      value: function init(source) {
+        var base = [0, 0, 0, 0];
+        source = typeof source === 'string' ? source.split(delimiter).map(parseFloat) : Array.isArray(source) ? source : _typeof(source) === 'object' ? [source.left != null ? source.left : source.x, source.top != null ? source.top : source.y, source.width, source.height] : arguments.length === 4 ? [].slice.call(arguments) : base;
+        this.x = source[0] || 0;
+        this.y = source[1] || 0;
+        this.width = this.w = source[2] || 0;
+        this.height = this.h = source[3] || 0; // Add more bounding box properties
+
+        this.x2 = this.x + this.w;
+        this.y2 = this.y + this.h;
+        this.cx = this.x + this.w / 2;
+        this.cy = this.y + this.h / 2;
+      } // Merge rect box with another, return a new instance
+
+    }, {
+      key: "merge",
+      value: function merge(box) {
+        var x = Math.min(this.x, box.x);
+        var y = Math.min(this.y, box.y);
+        var width = Math.max(this.x + this.width, box.x + box.width) - x;
+        var height = Math.max(this.y + this.height, box.y + box.height) - y;
+        return new Box(x, y, width, height);
+      }
+    }, {
+      key: "transform",
+      value: function transform(m) {
+        var xMin = Infinity;
+        var xMax = -Infinity;
+        var yMin = Infinity;
+        var yMax = -Infinity;
+        var pts = [new Point(this.x, this.y), new Point(this.x2, this.y), new Point(this.x, this.y2), new Point(this.x2, this.y2)];
+        pts.forEach(function (p) {
+          p = p.transform(m);
+          xMin = Math.min(xMin, p.x);
+          xMax = Math.max(xMax, p.x);
+          yMin = Math.min(yMin, p.y);
+          yMax = Math.max(yMax, p.y);
+        });
+        return new Box(xMin, yMin, xMax - xMin, yMax - yMin);
+      }
+    }, {
+      key: "addOffset",
+      value: function addOffset() {
+        // offset by window scroll position, because getBoundingClientRect changes when window is scrolled
+        this.x += window.pageXOffset;
+        this.y += window.pageYOffset;
+        return this;
+      }
+    }, {
+      key: "toString",
+      value: function toString() {
+        return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height;
+      }
+    }, {
+      key: "toArray",
+      value: function toArray() {
+        return [this.x, this.y, this.width, this.height];
+      }
+    }, {
+      key: "isNulled",
+      value: function isNulled() {
+        return isNulledBox(this);
+      }
+    }]);
+
+    return Box;
+  }();
+
+  function getBox(cb) {
+    var box;
+
+    try {
+      box = cb(this.node);
+
+      if (isNulledBox(box) && !domContains(this.node)) {
+        throw new Error('Element not in the dom');
+      }
+    } catch (e) {
+      try {
+        var clone = this.clone(parser().svg).show();
+        box = cb(clone.node);
+        clone.remove();
+      } catch (e) {
+        console.warn('Getting a bounding box of this element is not possible');
+      }
+    }
+
+    return box;
+  }
+
+  registerMethods({
+    Element: {
+      // Get bounding box
+      bbox: function bbox() {
+        return new Box(getBox.call(this, function (node) {
+          return node.getBBox();
+        }));
+      },
+      rbox: function rbox(el) {
+        var box = new Box(getBox.call(this, function (node) {
+          return node.getBoundingClientRect();
+        }));
+        if (el) return box.transform(el.screenCTM().inverse());
+        return box.addOffset();
+      }
+    },
+    viewbox: {
+      viewbox: function viewbox(x, y, width, height) {
+        // act as getter
+        if (x == null) return new Box(this.attr('viewBox')); // act as setter
+
+        return this.attr('viewBox', new Box(x, y, width, height));
+      }
+    }
+  });
+
   var PathArray = subClassArray('PathArray', SVGArray);
+  function pathRegReplace(a, b, c, d) {
+    return c + d.replace(dots, ' .');
+  }
+
+  function arrayToString(a) {
+    for (var i = 0, il = a.length, s = ''; i < il; i++) {
+      s += a[i][0];
+
+      if (a[i][1] != null) {
+        s += a[i][1];
+
+        if (a[i][2] != null) {
+          s += ' ';
+          s += a[i][2];
+
+          if (a[i][3] != null) {
+            s += ' ';
+            s += a[i][3];
+            s += ' ';
+            s += a[i][4];
+
+            if (a[i][5] != null) {
+              s += ' ';
+              s += a[i][5];
+              s += ' ';
+              s += a[i][6];
+
+              if (a[i][7] != null) {
+                s += ' ';
+                s += a[i][7];
+              }
+            }
+          }
+        }
+      }
+    }
+
+    return s + ' ';
+  }
+
   var pathHandlers = {
     M: function M(c, p, p0) {
       p.x = p0.x = c[0];
@@ -4472,221 +3694,6 @@ var SVG = (function () {
     });
   }
 
-  var Path =
-  /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Path, _Shape);
-
-    // Initialize node
-    function Path(node) {
-      _classCallCheck(this, Path);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Path).call(this, nodeOrNew('path', node), Path));
-    } // Get array
-
-
-    _createClass(Path, [{
-      key: "array",
-      value: function array() {
-        return this._array || (this._array = new PathArray(this.attr('d')));
-      } // Plot new path
-
-    }, {
-      key: "plot",
-      value: function plot(d) {
-        return d == null ? this.array() : this.clear().attr('d', typeof d === 'string' ? d : this._array = new PathArray(d));
-      } // Clear array cache
-
-    }, {
-      key: "clear",
-      value: function clear() {
-        delete this._array;
-        return this;
-      } // Move by left top corner
-
-    }, {
-      key: "move",
-      value: function move(x, y) {
-        return this.attr('d', this.array().move(x, y));
-      } // Move by left top corner over x-axis
-
-    }, {
-      key: "x",
-      value: function x(_x) {
-        return _x == null ? this.bbox().x : this.move(_x, this.bbox().y);
-      } // Move by left top corner over y-axis
-
-    }, {
-      key: "y",
-      value: function y(_y) {
-        return _y == null ? this.bbox().y : this.move(this.bbox().x, _y);
-      } // Set element size to given width and height
-
-    }, {
-      key: "size",
-      value: function size(width, height) {
-        var p = proportionalSize(this, width, height);
-        return this.attr('d', this.array().size(p.width, p.height));
-      } // Set width of element
-
-    }, {
-      key: "width",
-      value: function width(_width) {
-        return _width == null ? this.bbox().width : this.size(_width, this.bbox().height);
-      } // Set height of element
-
-    }, {
-      key: "height",
-      value: function height(_height) {
-        return _height == null ? this.bbox().height : this.size(this.bbox().width, _height);
-      }
-    }, {
-      key: "targets",
-      value: function targets() {
-        return baseFind('svg textpath [href*="' + this.id() + '"]');
-      }
-    }]);
-
-    return Path;
-  }(Shape); // Define morphable array
-  Path.prototype.MorphArray = PathArray; // Add parent method
-
-  registerMethods({
-    Container: {
-      // Create a wrapped path element
-      path: function path(d) {
-        // make sure plot is called as a setter
-        return this.put(new Path()).plot(d || new PathArray());
-      }
-    }
-  });
-  register(Path);
-
-  // Add polygon-specific functions
-
-  function array() {
-    return this._array || (this._array = new PointArray(this.attr('points')));
-  } // Plot new path
-
-  function plot(p) {
-    return p == null ? this.array() : this.clear().attr('points', typeof p === 'string' ? p : this._array = new PointArray(p));
-  } // Clear array cache
-
-  function clear() {
-    delete this._array;
-    return this;
-  } // Move by left top corner
-
-  function move(x, y) {
-    return this.attr('points', this.array().move(x, y));
-  } // Set element size to given width and height
-
-  function size$1(width, height) {
-    var p = proportionalSize(this, width, height);
-    return this.attr('points', this.array().size(p.width, p.height));
-  }
-
-  var poly = /*#__PURE__*/Object.freeze({
-    array: array,
-    plot: plot,
-    clear: clear,
-    move: move,
-    size: size$1
-  });
-
-  var Polygon =
-  /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Polygon, _Shape);
-
-    // Initialize node
-    function Polygon(node) {
-      _classCallCheck(this, Polygon);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Polygon).call(this, nodeOrNew('polygon', node), Polygon));
-    }
-
-    return Polygon;
-  }(Shape);
-  registerMethods({
-    Container: {
-      // Create a wrapped polygon element
-      polygon: function polygon(p) {
-        // make sure plot is called as a setter
-        return this.put(new Polygon()).plot(p || new PointArray());
-      }
-    }
-  });
-  extend(Polygon, pointed);
-  extend(Polygon, poly);
-  register(Polygon);
-
-  var Polyline =
-  /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Polyline, _Shape);
-
-    // Initialize node
-    function Polyline(node) {
-      _classCallCheck(this, Polyline);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Polyline).call(this, nodeOrNew('polyline', node), Polyline));
-    }
-
-    return Polyline;
-  }(Shape);
-  registerMethods({
-    Container: {
-      // Create a wrapped polygon element
-      polyline: function polyline(p) {
-        // make sure plot is called as a setter
-        return this.put(new Polyline()).plot(p || new PointArray());
-      }
-    }
-  });
-  extend(Polyline, pointed);
-  extend(Polyline, poly);
-  register(Polyline);
-
-  var Rect =
-  /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Rect, _Shape);
-
-    // Initialize node
-    function Rect(node) {
-      _classCallCheck(this, Rect);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(Rect).call(this, nodeOrNew('rect', node), Rect));
-    } // FIXME: unify with circle
-    // Radius x value
-
-
-    _createClass(Rect, [{
-      key: "rx",
-      value: function rx(_rx) {
-        return this.attr('rx', _rx);
-      } // Radius y value
-
-    }, {
-      key: "ry",
-      value: function ry(_ry) {
-        return this.attr('ry', _ry);
-      }
-    }]);
-
-    return Rect;
-  }(Shape);
-  registerMethods({
-    Container: {
-      // Create a rect element
-      rect: function rect(width, height) {
-        return this.put(new Rect()).size(width, height);
-      }
-    }
-  });
-  register(Rect);
-
   var time = window.performance || Date;
 
   var makeSchedule = function makeSchedule(runnerInfo) {
@@ -4981,13 +3988,6 @@ var SVG = (function () {
     }
   });
 
-  // easing = {
-  //   '-': function (pos) { return pos },
-  //   '<>': function (pos) { return -Math.cos(pos * Math.PI) / 2 + 0.5 },
-  //   '>': function (pos) { return Math.sin(pos * Math.PI / 2) },
-  //   '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 }
-  // }
-
   var Runner =
   /*#__PURE__*/
   function (_EventTarget) {
@@ -5659,7 +4659,7 @@ var SVG = (function () {
       } // Parse the parameters
 
 
-      var isMatrix = isMatrixLike(transforms);
+      var isMatrix = Matrix.isMatrixLike(transforms);
       affine = transforms.affine != null ? transforms.affine : affine != null ? affine : !isMatrix; // Create a morepher and set its type
 
       var morpher = new Morphable().type(affine ? TransformBag : Matrix).stepper(this._stepper);
@@ -5888,28 +4888,1156 @@ var SVG = (function () {
     }
   });
 
-  var _Symbol =
+  var sugar = {
+    stroke: ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'],
+    fill: ['color', 'opacity', 'rule'],
+    prefix: function prefix(t, a) {
+      return a === 'color' ? t : t + '-' + a;
+    } // Add sugar for fill and stroke
+
+  };
+  ['fill', 'stroke'].forEach(function (m) {
+    var extension = {};
+    var i;
+
+    extension[m] = function (o) {
+      if (typeof o === 'undefined') {
+        return this;
+      }
+
+      if (typeof o === 'string' || Color.isRgb(o) || o instanceof Element) {
+        this.attr(m, o);
+      } else {
+        // set all attributes from sugar.fill and sugar.stroke list
+        for (i = sugar[m].length - 1; i >= 0; i--) {
+          if (o[sugar[m][i]] != null) {
+            this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]]);
+          }
+        }
+      }
+
+      return this;
+    };
+
+    registerMethods(['Shape', 'Runner'], extension);
+  });
+  registerMethods(['Element', 'Runner'], {
+    // Let the user set the matrix directly
+    matrix: function matrix(mat, b, c, d, e, f) {
+      // Act as a getter
+      if (mat == null) {
+        return new Matrix(this);
+      } // Act as a setter, the user can pass a matrix or a set of numbers
+
+
+      return this.attr('transform', new Matrix(mat, b, c, d, e, f));
+    },
+    // Map rotation to transform
+    rotate: function rotate(angle, cx, cy) {
+      return this.transform({
+        rotate: angle,
+        ox: cx,
+        oy: cy
+      }, true);
+    },
+    // Map skew to transform
+    skew: function skew(x, y, cx, cy) {
+      return arguments.length === 1 || arguments.length === 3 ? this.transform({
+        skew: x,
+        ox: y,
+        oy: cx
+      }, true) : this.transform({
+        skew: [x, y],
+        ox: cx,
+        oy: cy
+      }, true);
+    },
+    shear: function shear(lam, cx, cy) {
+      return this.transform({
+        shear: lam,
+        ox: cx,
+        oy: cy
+      }, true);
+    },
+    // Map scale to transform
+    scale: function scale(x, y, cx, cy) {
+      return arguments.length === 1 || arguments.length === 3 ? this.transform({
+        scale: x,
+        ox: y,
+        oy: cx
+      }, true) : this.transform({
+        scale: [x, y],
+        ox: cx,
+        oy: cy
+      }, true);
+    },
+    // Map translate to transform
+    translate: function translate(x, y) {
+      return this.transform({
+        translate: [x, y]
+      }, true);
+    },
+    // Map relative translations to transform
+    relative: function relative(x, y) {
+      return this.transform({
+        relative: [x, y]
+      }, true);
+    },
+    // Map flip to transform
+    flip: function flip(direction, around) {
+      var directionString = typeof direction === 'string' ? direction : isFinite(direction) ? 'both' : 'both';
+      var origin = direction === 'both' && isFinite(around) ? [around, around] : direction === 'x' ? [around, 0] : direction === 'y' ? [0, around] : isFinite(direction) ? [direction, direction] : [0, 0];
+      this.transform({
+        flip: directionString,
+        origin: origin
+      }, true);
+    },
+    // Opacity
+    opacity: function opacity(value) {
+      return this.attr('opacity', value);
+    },
+    // Relative move over x axis
+    dx: function dx(x) {
+      return this.x(new SVGNumber(x).plus(this instanceof Runner ? 0 : this.x()), true);
+    },
+    // Relative move over y axis
+    dy: function dy(y) {
+      return this.y(new SVGNumber(y).plus(this instanceof Runner ? 0 : this.y()), true);
+    },
+    // Relative move over x and y axes
+    dmove: function dmove(x, y) {
+      return this.dx(x).dy(y);
+    }
+  });
+  registerMethods('radius', {
+    // Add x and y radius
+    radius: function radius(x, y) {
+      var type = (this._element || this).type;
+      return type === 'radialGradient' || type === 'radialGradient' ? this.attr('r', new SVGNumber(x)) : this.rx(x).ry(y == null ? x : y);
+    }
+  });
+  registerMethods('Path', {
+    // Get path length
+    length: function length() {
+      return this.node.getTotalLength();
+    },
+    // Get point at length
+    pointAt: function pointAt(length) {
+      return new Point(this.node.getPointAtLength(length));
+    }
+  });
+  registerMethods(['Element', 'Runner'], {
+    // Set font
+    font: function font(a, v) {
+      if (_typeof(a) === 'object') {
+        for (v in a) {
+          this.font(v, a[v]);
+        }
+      }
+
+      return a === 'leading' ? this.leading(v) : a === 'anchor' ? this.attr('text-anchor', v) : a === 'size' || a === 'family' || a === 'weight' || a === 'stretch' || a === 'variant' || a === 'style' ? this.attr('font-' + a, v) : this.attr(a, v);
+    }
+  });
+
+  function untransform() {
+    return this.attr('transform', null);
+  } // merge the whole transformation chain into one matrix and returns it
+
+  function matrixify() {
+    var matrix = (this.attr('transform') || ''). // split transformations
+    split(transforms).slice(0, -1).map(function (str) {
+      // generate key => value pairs
+      var kv = str.trim().split('(');
+      return [kv[0], kv[1].split(delimiter).map(function (str) {
+        return parseFloat(str);
+      })];
+    }).reverse() // merge every transformation into one matrix
+    .reduce(function (matrix, transform) {
+      if (transform[0] === 'matrix') {
+        return matrix.lmultiply(Matrix.fromArray(transform[1]));
+      }
+
+      return matrix[transform[0]].apply(matrix, transform[1]);
+    }, new Matrix());
+    return matrix;
+  } // add an element to another parent without changing the visual representation on the screen
+
+  function toParent(parent) {
+    if (this === parent) return this;
+    var ctm = this.screenCTM();
+    var pCtm = parent.screenCTM().inverse();
+    this.addTo(parent).untransform().transform(pCtm.multiply(ctm));
+    return this;
+  } // same as above with parent equals root-svg
+
+  function toDoc() {
+    return this.toParent(this.doc());
+  } // Add transformations
+
+  function transform(o, relative) {
+    // Act as a getter if no object was passed
+    if (o == null || typeof o === 'string') {
+      var decomposed = new Matrix(this).decompose();
+      return decomposed[o] || decomposed;
+    }
+
+    if (!Matrix.isMatrixLike(o)) {
+      // Set the origin according to the defined transform
+      o = _objectSpread({}, o, {
+        origin: getOrigin(o, this)
+      });
+    } // The user can pass a boolean, an Element or an Matrix or nothing
+
+
+    var cleanRelative = relative === true ? this : relative || false;
+    var result = new Matrix(cleanRelative).transform(o);
+    return this.attr('transform', result);
+  }
+  registerMethods('Element', {
+    untransform: untransform,
+    matrixify: matrixify,
+    toParent: toParent,
+    toDoc: toDoc,
+    transform: transform
+  });
+
+  // FIXME: import this to runner
+
+  function rx(rx) {
+    return this.attr('rx', rx);
+  } // Radius y value
+
+  function ry(ry) {
+    return this.attr('ry', ry);
+  } // Move over x-axis
+
+  function x(x) {
+    return x == null ? this.cx() - this.rx() : this.cx(x + this.rx());
+  } // Move over y-axis
+
+  function y(y) {
+    return y == null ? this.cy() - this.ry() : this.cy(y + this.ry());
+  } // Move by center over x-axis
+
+  function cx(x) {
+    return x == null ? this.attr('cx') : this.attr('cx', x);
+  } // Move by center over y-axis
+
+  function cy(y) {
+    return y == null ? this.attr('cy') : this.attr('cy', y);
+  } // Set width of element
+
+  function width(width) {
+    return width == null ? this.rx() * 2 : this.rx(new SVGNumber(width).divide(2));
+  } // Set height of element
+
+  function height(height) {
+    return height == null ? this.ry() * 2 : this.ry(new SVGNumber(height).divide(2));
+  } // Custom size function
+
+  function size(width, height) {
+    var p = proportionalSize(this, width, height);
+    return this.rx(new SVGNumber(p.width).divide(2)).ry(new SVGNumber(p.height).divide(2));
+  }
+
+  var circled = /*#__PURE__*/Object.freeze({
+    rx: rx,
+    ry: ry,
+    x: x,
+    y: y,
+    cx: cx,
+    cy: cy,
+    width: width,
+    height: height,
+    size: size
+  });
+
+  var Shape =
+  /*#__PURE__*/
+  function (_Element) {
+    _inherits(Shape, _Element);
+
+    function Shape() {
+      _classCallCheck(this, Shape);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Shape).apply(this, arguments));
+    }
+
+    return Shape;
+  }(Element);
+
+  var Circle =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Circle, _Shape);
+
+    function Circle(node) {
+      _classCallCheck(this, Circle);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Circle).call(this, nodeOrNew('circle', node), Circle));
+    }
+
+    _createClass(Circle, [{
+      key: "radius",
+      value: function radius(r) {
+        return this.attr('r', r);
+      } // Radius x value
+
+    }, {
+      key: "rx",
+      value: function rx$$1(_rx) {
+        return this.attr('r', _rx);
+      } // Alias radius x value
+
+    }, {
+      key: "ry",
+      value: function ry$$1(_ry) {
+        return this.rx(_ry);
+      }
+    }]);
+
+    return Circle;
+  }(Shape);
+  extend(Circle, {
+    x: x,
+    y: y,
+    cx: cx,
+    cy: cy,
+    width: width,
+    height: height,
+    size: size
+  });
+  registerMethods({
+    Element: {
+      // Create circle element
+      circle: function circle(size$$1) {
+        return this.put(new Circle()).radius(new SVGNumber(size$$1).divide(2)).move(0, 0);
+      }
+    }
+  });
+  register(Circle);
+
+  var Ellipse =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Ellipse, _Shape);
+
+    function Ellipse(node) {
+      _classCallCheck(this, Ellipse);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Ellipse).call(this, nodeOrNew('ellipse', node), Ellipse));
+    }
+
+    return Ellipse;
+  }(Shape);
+  extend(Ellipse, circled);
+  registerMethods('Container', {
+    // Create an ellipse
+    ellipse: function ellipse(width$$1, height$$1) {
+      return this.put(new Ellipse()).size(width$$1, height$$1).move(0, 0);
+    }
+  });
+  register(Ellipse);
+
+  var Stop =
+  /*#__PURE__*/
+  function (_Element) {
+    _inherits(Stop, _Element);
+
+    function Stop(node) {
+      _classCallCheck(this, Stop);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Stop).call(this, nodeOrNew('stop', node), Stop));
+    } // add color stops
+
+
+    _createClass(Stop, [{
+      key: "update",
+      value: function update(o) {
+        if (typeof o === 'number' || o instanceof SVGNumber) {
+          o = {
+            offset: arguments[0],
+            color: arguments[1],
+            opacity: arguments[2]
+          };
+        } // set attributes
+
+
+        if (o.opacity != null) this.attr('stop-opacity', o.opacity);
+        if (o.color != null) this.attr('stop-color', o.color);
+        if (o.offset != null) this.attr('offset', new SVGNumber(o.offset));
+        return this;
+      }
+    }]);
+
+    return Stop;
+  }(Element);
+  register(Stop);
+
+  function baseFind(query, parent) {
+    return map((parent || document).querySelectorAll(query), function (node) {
+      return adopt(node);
+    });
+  } // Scoped find method
+
+  function find(query) {
+    return baseFind(query, this.node);
+  }
+  registerMethods('Dom', {
+    find: find
+  });
+
+  // FIXME: add to runner
+  function from(x, y) {
+    return (this._element || this).type === 'radialGradient' ? this.attr({
+      fx: new SVGNumber(x),
+      fy: new SVGNumber(y)
+    }) : this.attr({
+      x1: new SVGNumber(x),
+      y1: new SVGNumber(y)
+    });
+  }
+  function to(x, y) {
+    return (this._element || this).type === 'radialGradient' ? this.attr({
+      cx: new SVGNumber(x),
+      cy: new SVGNumber(y)
+    }) : this.attr({
+      x2: new SVGNumber(x),
+      y2: new SVGNumber(y)
+    });
+  }
+
+  var gradiented = /*#__PURE__*/Object.freeze({
+    from: from,
+    to: to
+  });
+
+  var Gradient =
   /*#__PURE__*/
   function (_Container) {
-    _inherits(_Symbol, _Container);
+    _inherits(Gradient, _Container);
+
+    function Gradient(type) {
+      _classCallCheck(this, Gradient);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Gradient).call(this, nodeOrNew(type + 'Gradient', typeof type === 'string' ? null : type), Gradient));
+    } // Add a color stop
+
+
+    _createClass(Gradient, [{
+      key: "stop",
+      value: function stop(offset, color, opacity) {
+        return this.put(new Stop()).update(offset, color, opacity);
+      } // Update gradient
+
+    }, {
+      key: "update",
+      value: function update(block) {
+        // remove all stops
+        this.clear(); // invoke passed block
+
+        if (typeof block === 'function') {
+          block.call(this, this);
+        }
+
+        return this;
+      } // Return the fill id
+
+    }, {
+      key: "url",
+      value: function url() {
+        return 'url(#' + this.id() + ')';
+      } // Alias string convertion to fill
+
+    }, {
+      key: "toString",
+      value: function toString() {
+        return this.url();
+      } // custom attr to handle transform
+
+    }, {
+      key: "attr",
+      value: function attr(a, b, c) {
+        if (a === 'transform') a = 'gradientTransform';
+        return _get(_getPrototypeOf(Gradient.prototype), "attr", this).call(this, a, b, c);
+      }
+    }, {
+      key: "targets",
+      value: function targets() {
+        return baseFind('svg [fill*="' + this.id() + '"]');
+      }
+    }, {
+      key: "bbox",
+      value: function bbox() {
+        return new Box();
+      }
+    }]);
+
+    return Gradient;
+  }(Container);
+  extend(Gradient, gradiented);
+  registerMethods({
+    Container: {
+      // Create gradient element in defs
+      gradient: function gradient(type, block) {
+        return this.defs().gradient(type, block);
+      }
+    },
+    // define gradient
+    Defs: {
+      gradient: function gradient(type, block) {
+        return this.put(new Gradient(type)).update(block);
+      }
+    }
+  });
+  register(Gradient);
+
+  var Pattern =
+  /*#__PURE__*/
+  function (_Container) {
+    _inherits(Pattern, _Container);
 
     // Initialize node
-    function _Symbol(node) {
-      _classCallCheck(this, _Symbol);
+    function Pattern(node) {
+      _classCallCheck(this, Pattern);
 
-      return _possibleConstructorReturn(this, _getPrototypeOf(_Symbol).call(this, nodeOrNew('symbol', node), _Symbol));
+      return _possibleConstructorReturn(this, _getPrototypeOf(Pattern).call(this, nodeOrNew('pattern', node), Pattern));
+    } // Return the fill id
+
+
+    _createClass(Pattern, [{
+      key: "url",
+      value: function url() {
+        return 'url(#' + this.id() + ')';
+      } // Update pattern by rebuilding
+
+    }, {
+      key: "update",
+      value: function update(block) {
+        // remove content
+        this.clear(); // invoke passed block
+
+        if (typeof block === 'function') {
+          block.call(this, this);
+        }
+
+        return this;
+      } // Alias string convertion to fill
+
+    }, {
+      key: "toString",
+      value: function toString() {
+        return this.url();
+      } // custom attr to handle transform
+
+    }, {
+      key: "attr",
+      value: function attr(a, b, c) {
+        if (a === 'transform') a = 'patternTransform';
+        return _get(_getPrototypeOf(Pattern.prototype), "attr", this).call(this, a, b, c);
+      }
+    }, {
+      key: "targets",
+      value: function targets() {
+        return baseFind('svg [fill*="' + this.id() + '"]');
+      }
+    }, {
+      key: "bbox",
+      value: function bbox() {
+        return new Box();
+      }
+    }]);
+
+    return Pattern;
+  }(Container);
+  registerMethods({
+    Container: {
+      // Create pattern element in defs
+      pattern: function pattern(width, height, block) {
+        return this.defs().pattern(width, height, block);
+      }
+    },
+    Defs: {
+      pattern: function pattern(width, height, block) {
+        return this.put(new Pattern()).update(block).attr({
+          x: 0,
+          y: 0,
+          width: width,
+          height: height,
+          patternUnits: 'userSpaceOnUse'
+        });
+      }
     }
+  });
+  register(Pattern);
 
-    return _Symbol;
+  var Image =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Image, _Shape);
+
+    function Image(node) {
+      _classCallCheck(this, Image);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Image).call(this, nodeOrNew('image', node), Image));
+    } // (re)load image
+
+
+    _createClass(Image, [{
+      key: "load",
+      value: function load(url, callback) {
+        if (!url) return this;
+        var img = new window.Image();
+        on(img, 'load', function (e) {
+          var p = this.parent(Pattern); // ensure image size
+
+          if (this.width() === 0 && this.height() === 0) {
+            this.size(img.width, img.height);
+          }
+
+          if (p instanceof Pattern) {
+            // ensure pattern size if not set
+            if (p.width() === 0 && p.height() === 0) {
+              p.size(this.width(), this.height());
+            }
+          }
+
+          if (typeof callback === 'function') {
+            callback.call(this, {
+              width: img.width,
+              height: img.height,
+              ratio: img.width / img.height,
+              url: url
+            });
+          }
+        }, this);
+        on(img, 'load error', function () {
+          // dont forget to unbind memory leaking events
+          off(img);
+        });
+        return this.attr('href', img.src = url, xlink);
+      }
+    }, {
+      key: "attrHook",
+      value: function attrHook(obj) {
+        var _this = this;
+
+        return obj.doc().defs().pattern(0, 0, function (pattern) {
+          pattern.add(_this);
+        });
+      }
+    }]);
+
+    return Image;
+  }(Shape);
+  registerMethods({
+    Container: {
+      // create image element, load image and set its size
+      image: function image(source, callback) {
+        return this.put(new Image()).size(0, 0).load(source, callback);
+      }
+    }
+  });
+  register(Image);
+
+  var PointArray = subClassArray('PointArray', SVGArray);
+  extend(PointArray, {
+    // Convert array to string
+    toString: function toString() {
+      // convert to a poly point string
+      for (var i = 0, il = this.length, array = []; i < il; i++) {
+        array.push(this[i].join(','));
+      }
+
+      return array.join(' ');
+    },
+    // Convert array to line object
+    toLine: function toLine() {
+      return {
+        x1: this[0][0],
+        y1: this[0][1],
+        x2: this[1][0],
+        y2: this[1][1]
+      };
+    },
+    // Get morphed array at given position
+    at: function at(pos) {
+      // make sure a destination is defined
+      if (!this.destination) return this; // generate morphed point string
+
+      for (var i = 0, il = this.length, array = []; i < il; i++) {
+        array.push([this[i][0] + (this.destination[i][0] - this[i][0]) * pos, this[i][1] + (this.destination[i][1] - this[i][1]) * pos]);
+      }
+
+      return new PointArray(array);
+    },
+    // Parse point string and flat array
+    parse: function parse() {
+      var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [[0, 0]];
+      var points = []; // if it is an array
+
+      if (array instanceof Array) {
+        // and it is not flat, there is no need to parse it
+        if (array[0] instanceof Array) {
+          return array;
+        }
+      } else {
+        // Else, it is considered as a string
+        // parse points
+        array = array.trim().split(delimiter).map(parseFloat);
+      } // validate points - https://svgwg.org/svg2-draft/shapes.html#DataTypePoints
+      // Odd number of coordinates is an error. In such cases, drop the last odd coordinate.
+
+
+      if (array.length % 2 !== 0) array.pop(); // wrap points in two-tuples and parse points as floats
+
+      for (var i = 0, len = array.length; i < len; i = i + 2) {
+        points.push([array[i], array[i + 1]]);
+      }
+
+      return points;
+    },
+    // Move point string
+    move: function move(x, y) {
+      var box = this.bbox(); // get relative offset
+
+      x -= box.x;
+      y -= box.y; // move every point
+
+      if (!isNaN(x) && !isNaN(y)) {
+        for (var i = this.length - 1; i >= 0; i--) {
+          this[i] = [this[i][0] + x, this[i][1] + y];
+        }
+      }
+
+      return this;
+    },
+    // Resize poly string
+    size: function size(width, height) {
+      var i;
+      var box = this.bbox(); // recalculate position of all points according to new size
+
+      for (i = this.length - 1; i >= 0; i--) {
+        if (box.width) this[i][0] = (this[i][0] - box.x) * width / box.width + box.x;
+        if (box.height) this[i][1] = (this[i][1] - box.y) * height / box.height + box.y;
+      }
+
+      return this;
+    },
+    // Get bounding box of points
+    bbox: function bbox() {
+      var maxX = -Infinity;
+      var maxY = -Infinity;
+      var minX = Infinity;
+      var minY = Infinity;
+      this.forEach(function (el) {
+        maxX = Math.max(el[0], maxX);
+        maxY = Math.max(el[1], maxY);
+        minX = Math.min(el[0], minX);
+        minY = Math.min(el[1], minY);
+      });
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    }
+  });
+
+  var MorphArray = PointArray; // Move by left top corner over x-axis
+
+  function x$1(x) {
+    return x == null ? this.bbox().x : this.move(x, this.bbox().y);
+  } // Move by left top corner over y-axis
+
+  function y$1(y) {
+    return y == null ? this.bbox().y : this.move(this.bbox().x, y);
+  } // Set width of element
+
+  function width$1(width) {
+    var b = this.bbox();
+    return width == null ? b.width : this.size(width, b.height);
+  } // Set height of element
+
+  function height$1(height) {
+    var b = this.bbox();
+    return height == null ? b.height : this.size(b.width, height);
+  }
+
+  var pointed = /*#__PURE__*/Object.freeze({
+    MorphArray: MorphArray,
+    x: x$1,
+    y: y$1,
+    width: width$1,
+    height: height$1
+  });
+
+  var Line =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Line, _Shape);
+
+    // Initialize node
+    function Line(node) {
+      _classCallCheck(this, Line);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Line).call(this, nodeOrNew('line', node), Line));
+    } // Get array
+
+
+    _createClass(Line, [{
+      key: "array",
+      value: function array() {
+        return new PointArray([[this.attr('x1'), this.attr('y1')], [this.attr('x2'), this.attr('y2')]]);
+      } // Overwrite native plot() method
+
+    }, {
+      key: "plot",
+      value: function plot(x1, y1, x2, y2) {
+        if (x1 == null) {
+          return this.array();
+        } else if (typeof y1 !== 'undefined') {
+          x1 = {
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2
+          };
+        } else {
+          x1 = new PointArray(x1).toLine();
+        }
+
+        return this.attr(x1);
+      } // Move by left top corner
+
+    }, {
+      key: "move",
+      value: function move(x, y) {
+        return this.attr(this.array().move(x, y).toLine());
+      } // Set element size to given width and height
+
+    }, {
+      key: "size",
+      value: function size(width, height) {
+        var p = proportionalSize(this, width, height);
+        return this.attr(this.array().size(p.width, p.height).toLine());
+      }
+    }]);
+
+    return Line;
+  }(Shape);
+  extend(Line, pointed);
+  registerMethods({
+    Container: {
+      // Create a line element
+      line: function line() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        // make sure plot is called as a setter
+        // x1 is not necessarily a number, it can also be an array, a string and a PointArray
+        return Line.prototype.plot.apply(this.put(new Line()), args[0] != null ? args : [0, 0, 0, 0]);
+      }
+    }
+  });
+  register(Line);
+
+  var Marker =
+  /*#__PURE__*/
+  function (_Container) {
+    _inherits(Marker, _Container);
+
+    // Initialize node
+    function Marker(node) {
+      _classCallCheck(this, Marker);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Marker).call(this, nodeOrNew('marker', node), Marker));
+    } // Set width of element
+
+
+    _createClass(Marker, [{
+      key: "width",
+      value: function width(_width) {
+        return this.attr('markerWidth', _width);
+      } // Set height of element
+
+    }, {
+      key: "height",
+      value: function height(_height) {
+        return this.attr('markerHeight', _height);
+      } // Set marker refX and refY
+
+    }, {
+      key: "ref",
+      value: function ref(x, y) {
+        return this.attr('refX', x).attr('refY', y);
+      } // Update marker
+
+    }, {
+      key: "update",
+      value: function update(block) {
+        // remove all content
+        this.clear(); // invoke passed block
+
+        if (typeof block === 'function') {
+          block.call(this, this);
+        }
+
+        return this;
+      } // Return the fill id
+
+    }, {
+      key: "toString",
+      value: function toString() {
+        return 'url(#' + this.id() + ')';
+      }
+    }]);
+
+    return Marker;
   }(Container);
   registerMethods({
     Container: {
-      symbol: function symbol() {
-        return this.put(new _Symbol());
+      marker: function marker(width, height, block) {
+        // Create marker element in defs
+        return this.defs().marker(width, height, block);
+      }
+    },
+    Defs: {
+      // Create marker
+      marker: function marker(width, height, block) {
+        // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto
+        return this.put(new Marker()).size(width, height).ref(width / 2, height / 2).viewbox(0, 0, width, height).attr('orient', 'auto').update(block);
+      }
+    },
+    marker: {
+      // Create and attach markers
+      marker: function marker(_marker, width, height, block) {
+        var attr = ['marker']; // Build attribute name
+
+        if (_marker !== 'all') attr.push(_marker);
+        attr = attr.join('-'); // Set marker attribute
+
+        _marker = arguments[1] instanceof Marker ? arguments[1] : this.defs().marker(width, height, block);
+        return this.attr(attr, _marker);
       }
     }
   });
-  register(_Symbol);
+  register(Marker);
+
+  var Path =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Path, _Shape);
+
+    // Initialize node
+    function Path(node) {
+      _classCallCheck(this, Path);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Path).call(this, nodeOrNew('path', node), Path));
+    } // Get array
+
+
+    _createClass(Path, [{
+      key: "array",
+      value: function array() {
+        return this._array || (this._array = new PathArray(this.attr('d')));
+      } // Plot new path
+
+    }, {
+      key: "plot",
+      value: function plot(d) {
+        return d == null ? this.array() : this.clear().attr('d', typeof d === 'string' ? d : this._array = new PathArray(d));
+      } // Clear array cache
+
+    }, {
+      key: "clear",
+      value: function clear() {
+        delete this._array;
+        return this;
+      } // Move by left top corner
+
+    }, {
+      key: "move",
+      value: function move(x, y) {
+        return this.attr('d', this.array().move(x, y));
+      } // Move by left top corner over x-axis
+
+    }, {
+      key: "x",
+      value: function x(_x) {
+        return _x == null ? this.bbox().x : this.move(_x, this.bbox().y);
+      } // Move by left top corner over y-axis
+
+    }, {
+      key: "y",
+      value: function y(_y) {
+        return _y == null ? this.bbox().y : this.move(this.bbox().x, _y);
+      } // Set element size to given width and height
+
+    }, {
+      key: "size",
+      value: function size(width, height) {
+        var p = proportionalSize(this, width, height);
+        return this.attr('d', this.array().size(p.width, p.height));
+      } // Set width of element
+
+    }, {
+      key: "width",
+      value: function width(_width) {
+        return _width == null ? this.bbox().width : this.size(_width, this.bbox().height);
+      } // Set height of element
+
+    }, {
+      key: "height",
+      value: function height(_height) {
+        return _height == null ? this.bbox().height : this.size(this.bbox().width, _height);
+      }
+    }, {
+      key: "targets",
+      value: function targets() {
+        return baseFind('svg textpath [href*="' + this.id() + '"]');
+      }
+    }]);
+
+    return Path;
+  }(Shape); // Define morphable array
+  Path.prototype.MorphArray = PathArray; // Add parent method
+
+  registerMethods({
+    Container: {
+      // Create a wrapped path element
+      path: function path(d) {
+        // make sure plot is called as a setter
+        return this.put(new Path()).plot(d || new PathArray());
+      }
+    }
+  });
+  register(Path);
+
+  function array() {
+    return this._array || (this._array = new PointArray(this.attr('points')));
+  } // Plot new path
+
+  function plot(p) {
+    return p == null ? this.array() : this.clear().attr('points', typeof p === 'string' ? p : this._array = new PointArray(p));
+  } // Clear array cache
+
+  function clear() {
+    delete this._array;
+    return this;
+  } // Move by left top corner
+
+  function move(x, y) {
+    return this.attr('points', this.array().move(x, y));
+  } // Set element size to given width and height
+
+  function size$1(width, height) {
+    var p = proportionalSize(this, width, height);
+    return this.attr('points', this.array().size(p.width, p.height));
+  }
+
+  var poly = /*#__PURE__*/Object.freeze({
+    array: array,
+    plot: plot,
+    clear: clear,
+    move: move,
+    size: size$1
+  });
+
+  var Polygon =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Polygon, _Shape);
+
+    // Initialize node
+    function Polygon(node) {
+      _classCallCheck(this, Polygon);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Polygon).call(this, nodeOrNew('polygon', node), Polygon));
+    }
+
+    return Polygon;
+  }(Shape);
+  registerMethods({
+    Container: {
+      // Create a wrapped polygon element
+      polygon: function polygon(p) {
+        // make sure plot is called as a setter
+        return this.put(new Polygon()).plot(p || new PointArray());
+      }
+    }
+  });
+  extend(Polygon, pointed);
+  extend(Polygon, poly);
+  register(Polygon);
+
+  var Polyline =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Polyline, _Shape);
+
+    // Initialize node
+    function Polyline(node) {
+      _classCallCheck(this, Polyline);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Polyline).call(this, nodeOrNew('polyline', node), Polyline));
+    }
+
+    return Polyline;
+  }(Shape);
+  registerMethods({
+    Container: {
+      // Create a wrapped polygon element
+      polyline: function polyline(p) {
+        // make sure plot is called as a setter
+        return this.put(new Polyline()).plot(p || new PointArray());
+      }
+    }
+  });
+  extend(Polyline, pointed);
+  extend(Polyline, poly);
+  register(Polyline);
+
+  var Rect =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Rect, _Shape);
+
+    // Initialize node
+    function Rect(node) {
+      _classCallCheck(this, Rect);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Rect).call(this, nodeOrNew('rect', node), Rect));
+    } // FIXME: unify with circle
+    // Radius x value
+
+
+    _createClass(Rect, [{
+      key: "rx",
+      value: function rx(_rx) {
+        return this.attr('rx', _rx);
+      } // Radius y value
+
+    }, {
+      key: "ry",
+      value: function ry(_ry) {
+        return this.attr('ry', _ry);
+      }
+    }]);
+
+    return Rect;
+  }(Shape);
+  registerMethods({
+    Container: {
+      // Create a rect element
+      rect: function rect(width, height) {
+        return this.put(new Rect()).size(width, height);
+      }
+    }
+  });
+  register(Rect);
 
   // Create plain text node
   function plain(text) {
@@ -6119,92 +6247,6 @@ var SVG = (function () {
   });
   register(Text);
 
-  var TextPath =
-  /*#__PURE__*/
-  function (_Text) {
-    _inherits(TextPath, _Text);
-
-    // Initialize node
-    function TextPath(node) {
-      _classCallCheck(this, TextPath);
-
-      return _possibleConstructorReturn(this, _getPrototypeOf(TextPath).call(this, nodeOrNew('textPath', node), TextPath));
-    } // return the array of the path track element
-
-
-    _createClass(TextPath, [{
-      key: "array",
-      value: function array() {
-        var track = this.track();
-        return track ? track.array() : null;
-      } // Plot path if any
-
-    }, {
-      key: "plot",
-      value: function plot(d) {
-        var track = this.track();
-        var pathArray = null;
-
-        if (track) {
-          pathArray = track.plot(d);
-        }
-
-        return d == null ? pathArray : this;
-      } // Get the path element
-
-    }, {
-      key: "track",
-      value: function track() {
-        return this.reference('href');
-      }
-    }]);
-
-    return TextPath;
-  }(Text);
-  registerMethods({
-    Container: {
-      textPath: function textPath(text, path) {
-        return this.defs().path(path).text(text).addTo(this);
-      }
-    },
-    Text: {
-      // Create path for text to run on
-      path: function path(track) {
-        var path = new TextPath(); // if d is a path, reuse it
-
-        if (!(track instanceof Path)) {
-          // create path element
-          track = this.doc().defs().path(track);
-        } // link textPath to path and add content
-
-
-        path.attr('href', '#' + track, xlink); // add textPath element as child node and return textPath
-
-        return this.put(path);
-      },
-      // FIXME: make this plural?
-      // Get the textPath children
-      textPath: function textPath() {
-        return this.find('textPath');
-      }
-    },
-    Path: {
-      // creates a textPath from this path
-      text: function text(_text) {
-        if (_text instanceof Text) {
-          var txt = _text.text();
-
-          return _text.clear().path(this).text(txt);
-        }
-
-        return this.parent().put(new Text()).path(this).text(_text);
-      } // FIXME: Maybe add `targets` to get all textPaths associated with this path
-
-    }
-  });
-  TextPath.prototype.MorphArray = PathArray;
-  register(TextPath);
-
   var Tspan =
   /*#__PURE__*/
   function (_Text) {
@@ -6270,618 +6312,493 @@ var SVG = (function () {
   });
   register(Tspan);
 
-  var Use =
+  var Bare =
   /*#__PURE__*/
-  function (_Shape) {
-    _inherits(Use, _Shape);
+  function (_Container) {
+    _inherits(Bare, _Container);
 
-    function Use(node) {
-      _classCallCheck(this, Use);
+    function Bare(node) {
+      _classCallCheck(this, Bare);
 
-      return _possibleConstructorReturn(this, _getPrototypeOf(Use).call(this, nodeOrNew('use', node), Use));
-    } // Use element as a reference
+      return _possibleConstructorReturn(this, _getPrototypeOf(Bare).call(this, nodeOrNew(node, typeof node === 'string' ? null : node), Bare));
+    }
 
+    _createClass(Bare, [{
+      key: "words",
+      value: function words(text) {
+        // remove contents
+        while (this.node.hasChildNodes()) {
+          this.node.removeChild(this.node.lastChild);
+        } // create text node
 
-    _createClass(Use, [{
-      key: "element",
-      value: function element(_element, file) {
-        // Set lined element
-        return this.attr('href', (file || '') + '#' + _element, xlink);
+
+        this.node.appendChild(document.createTextNode(text));
+        return this;
       }
     }]);
 
-    return Use;
-  }(Shape);
-  registerMethods({
-    Container: {
-      // Create a use element
-      use: function use(element, file) {
-        return this.put(new Use()).element(element, file);
-      }
+    return Bare;
+  }(Container);
+  register(Bare);
+  registerMethods('Container', {
+    // Create an element that is not described by SVG.js
+    element: function element(node, inherit) {
+      return this.put(new Bare(node, inherit));
     }
   });
-  register(Use);
-
-
-
-  var Classes = /*#__PURE__*/Object.freeze({
-    Animator: Animator,
-    SVGArray: SVGArray,
-    Bare: Bare,
-    Box: Box,
-    Circle: Circle,
-    ClipPath: ClipPath,
-    Color: Color,
-    Container: Container,
-    Controller: Controller,
-    Ease: Ease,
-    PID: PID,
-    Spring: Spring,
-    Defs: Defs,
-    Doc: Doc$1,
-    Dom: Dom,
-    Element: Element,
-    Ellipse: Ellipse,
-    EventTarget: EventTarget,
-    Gradient: Gradient,
-    G: G,
-    HtmlNode: HtmlNode,
-    A: A,
-    Image: Image,
-    Line: Line,
-    Marker: Marker,
-    Mask: Mask,
-    Matrix: Matrix,
-    Morphable: Morphable,
-    SVGNumber: SVGNumber,
-    Path: Path,
-    PathArray: PathArray,
-    Pattern: Pattern,
-    Point: Point,
-    PointArray: PointArray,
-    Polygon: Polygon,
-    Polyline: Polyline,
-    Queue: Queue,
-    Rect: Rect,
-    Runner: Runner,
-    Shape: Shape,
-    Stop: Stop,
-    Symbol: _Symbol,
-    Text: Text,
-    TextPath: TextPath,
-    Timeline: Timeline,
-    Tspan: Tspan,
-    Use: Use
-  });
-
-  // ### This module adds backward / forward functionality to elements.
-
-  function siblings() {
-    return this.parent().children();
-  } // Get the curent position siblings
-
-  function position() {
-    return this.parent().index(this);
-  } // Get the next element (will return null if there is none)
 
-  function next() {
-    return this.siblings()[this.position() + 1];
-  } // Get the next element (will return null if there is none)
+  var ClipPath =
+  /*#__PURE__*/
+  function (_Container) {
+    _inherits(ClipPath, _Container);
 
-  function prev() {
-    return this.siblings()[this.position() - 1];
-  } // Send given element one step forward
+    function ClipPath(node) {
+      _classCallCheck(this, ClipPath);
 
-  function forward() {
-    var i = this.position() + 1;
-    var p = this.parent(); // move node one step forward
+      return _possibleConstructorReturn(this, _getPrototypeOf(ClipPath).call(this, nodeOrNew('clipPath', node), ClipPath));
+    } // Unclip all clipped elements and remove itself
 
-    p.removeElement(this).add(this, i); // make sure defs node is always at the top
 
-    if (typeof p.isRoot === 'function' && p.isRoot()) {
-      p.node.appendChild(p.defs().node);
-    }
+    _createClass(ClipPath, [{
+      key: "remove",
+      value: function remove() {
+        // unclip all targets
+        this.targets().forEach(function (el) {
+          el.unclip();
+        }); // remove clipPath from parent
 
-    return this;
-  } // Send given element one step backward
+        return _get(_getPrototypeOf(ClipPath.prototype), "remove", this).call(this);
+      }
+    }, {
+      key: "targets",
+      value: function targets() {
+        return baseFind('svg [clip-path*="' + this.id() + '"]');
+      }
+    }]);
 
-  function backward() {
-    var i = this.position();
+    return ClipPath;
+  }(Container);
+  registerMethods({
+    Container: {
+      // Create clipping element
+      clip: function clip() {
+        return this.defs().put(new ClipPath());
+      }
+    },
+    Element: {
+      // Distribute clipPath to svg element
+      clipWith: function clipWith(element) {
+        // use given clip or create a new one
+        var clipper = element instanceof ClipPath ? element : this.parent().clip().add(element); // apply mask
 
-    if (i > 0) {
-      this.parent().removeElement(this).add(this, i - 1);
+        return this.attr('clip-path', 'url("#' + clipper.id() + '")');
+      },
+      // Unclip element
+      unclip: function unclip() {
+        return this.attr('clip-path', null);
+      },
+      clipper: function clipper() {
+        return this.reference('clip-path');
+      }
     }
+  });
+  register(ClipPath);
 
-    return this;
-  } // Send given element all the way to the front
-
-  function front() {
-    var p = this.parent(); // Move node forward
-
-    p.node.appendChild(this.node); // Make sure defs node is always at the top
-
-    if (typeof p.isRoot === 'function' && p.isRoot()) {
-      p.node.appendChild(p.defs().node);
-    }
+  var G =
+  /*#__PURE__*/
+  function (_Container) {
+    _inherits(G, _Container);
 
-    return this;
-  } // Send given element all the way to the back
+    function G(node) {
+      _classCallCheck(this, G);
 
-  function back() {
-    if (this.position() > 0) {
-      this.parent().removeElement(this).add(this, 0);
+      return _possibleConstructorReturn(this, _getPrototypeOf(G).call(this, nodeOrNew('g', node), G));
     }
 
-    return this;
-  } // Inserts a given element before the targeted element
-
-  function before(element) {
-    element.remove();
-    var i = this.position();
-    this.parent().add(element, i);
-    return this;
-  } // Inserts a given element after the targeted element
-
-  function after(element) {
-    element.remove();
-    var i = this.position();
-    this.parent().add(element, i + 1);
-    return this;
-  }
-  registerMethods('Dom', {
-    siblings: siblings,
-    position: position,
-    next: next,
-    prev: prev,
-    forward: forward,
-    backward: backward,
-    front: front,
-    back: back,
-    before: before,
-    after: after
-  });
-
-  function data(a, v, r) {
-    if (_typeof(a) === 'object') {
-      for (v in a) {
-        this.data(v, a[v]);
-      }
-    } else if (arguments.length < 2) {
-      try {
-        return JSON.parse(this.attr('data-' + a));
-      } catch (e) {
-        return this.attr('data-' + a);
+    return G;
+  }(Container);
+  registerMethods({
+    Element: {
+      // Create a group element
+      group: function group() {
+        return this.put(new G());
       }
-    } else {
-      this.attr('data-' + a, v === null ? null : r === true || typeof v === 'string' || typeof v === 'number' ? v : JSON.stringify(v));
     }
-
-    return this;
-  }
-  registerMethods('Dom', {
-    data: data
   });
+  register(G);
 
-  function classes() {
-    var attr = this.attr('class');
-    return attr == null ? [] : attr.trim().split(delimiter);
-  } // Return true if class exists on the node, false otherwise
-
-
-  function hasClass(name) {
-    return this.classes().indexOf(name) !== -1;
-  } // Add class to the node
+  var HtmlNode =
+  /*#__PURE__*/
+  function (_Dom) {
+    _inherits(HtmlNode, _Dom);
 
+    function HtmlNode(node) {
+      _classCallCheck(this, HtmlNode);
 
-  function addClass(name) {
-    if (!this.hasClass(name)) {
-      var array = this.classes();
-      array.push(name);
-      this.attr('class', array.join(' '));
+      return _possibleConstructorReturn(this, _getPrototypeOf(HtmlNode).call(this, node, HtmlNode));
     }
 
-    return this;
-  } // Remove class from the node
+    return HtmlNode;
+  }(Dom);
+  register(HtmlNode);
 
+  var A =
+  /*#__PURE__*/
+  function (_Container) {
+    _inherits(A, _Container);
 
-  function removeClass(name) {
-    if (this.hasClass(name)) {
-      this.attr('class', this.classes().filter(function (c) {
-        return c !== name;
-      }).join(' '));
-    }
+    function A(node) {
+      _classCallCheck(this, A);
 
-    return this;
-  } // Toggle the presence of a class on the node
+      return _possibleConstructorReturn(this, _getPrototypeOf(A).call(this, nodeOrNew('a', node), A));
+    } // Link url
 
 
-  function toggleClass(name) {
-    return this.hasClass(name) ? this.removeClass(name) : this.addClass(name);
-  }
+    _createClass(A, [{
+      key: "to",
+      value: function to(url) {
+        return this.attr('href', url, xlink);
+      } // Link target attribute
 
-  registerMethods('Dom', {
-    classes: classes,
-    hasClass: hasClass,
-    addClass: addClass,
-    removeClass: removeClass,
-    toggleClass: toggleClass
-  });
+    }, {
+      key: "target",
+      value: function target(_target) {
+        return this.attr('target', _target);
+      }
+    }]);
 
-  // Dynamic style generator
+    return A;
+  }(Container);
+  registerMethods({
+    Container: {
+      // Create a hyperlink element
+      link: function link(url) {
+        return this.put(new A()).to(url);
+      }
+    },
+    Element: {
+      // Create a hyperlink element
+      linkTo: function linkTo(url) {
+        var link = new A();
 
-  function css(style, val) {
-    var ret = {};
+        if (typeof url === 'function') {
+          url.call(link, link);
+        } else {
+          link.to(url);
+        }
 
-    if (arguments.length === 0) {
-      // get full style as object
-      this.node.style.cssText.split(/\s*;\s*/).filter(function (el) {
-        return !!el.length;
-      }).forEach(function (el) {
-        var t = el.split(/\s*:\s*/);
-        ret[t[0]] = t[1];
-      });
-      return ret;
+        return this.parent().put(link).put(this);
+      }
     }
+  });
+  register(A);
 
-    if (arguments.length < 2) {
-      // get style properties in the array
-      if (Array.isArray(style)) {
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          for (var _iterator = style[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var name = _step.value;
-            var cased = camelCase(name);
-            ret[cased] = this.node.style[cased];
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
+  var Mask =
+  /*#__PURE__*/
+  function (_Container) {
+    _inherits(Mask, _Container);
 
-        return ret;
-      } // get style for property
+    // Initialize node
+    function Mask(node) {
+      _classCallCheck(this, Mask);
 
+      return _possibleConstructorReturn(this, _getPrototypeOf(Mask).call(this, nodeOrNew('mask', node), Mask));
+    } // Unmask all masked elements and remove itself
 
-      if (typeof style === 'string') {
-        return this.node.style[camelCase(style)];
-      } // set styles in object
 
+    _createClass(Mask, [{
+      key: "remove",
+      value: function remove() {
+        // unmask all targets
+        this.targets().forEach(function (el) {
+          el.unmask();
+        }); // remove mask from parent
 
-      if (_typeof(style) === 'object') {
-        for (var _name in style) {
-          // set empty string if null/undefined/'' was given
-          this.node.style[camelCase(_name)] = style[_name] == null || isBlank.test(style[_name]) ? '' : style[_name];
-        }
+        return _get(_getPrototypeOf(Mask.prototype), "remove", this).call(this);
       }
-    } // set style for property
+    }, {
+      key: "targets",
+      value: function targets() {
+        return baseFind('svg [mask*="' + this.id() + '"]');
+      }
+    }]);
 
+    return Mask;
+  }(Container);
+  registerMethods({
+    Container: {
+      mask: function mask() {
+        return this.defs().put(new Mask());
+      }
+    },
+    Element: {
+      // Distribute mask to svg element
+      maskWith: function maskWith(element) {
+        // use given mask or create a new one
+        var masker = element instanceof Mask ? element : this.parent().mask().add(element); // apply mask
 
-    if (arguments.length === 2) {
-      this.node.style[camelCase(style)] = val == null || isBlank.test(val) ? '' : val;
+        return this.attr('mask', 'url("#' + masker.id() + '")');
+      },
+      // Unmask element
+      unmask: function unmask() {
+        return this.attr('mask', null);
+      },
+      masker: function masker() {
+        return this.reference('mask');
+      }
     }
+  });
+  register(Mask);
 
-    return this;
-  } // Show element
-
-  function show() {
-    return this.css('display', '');
-  } // Hide element
-
-  function hide() {
-    return this.css('display', 'none');
-  } // Is element visible?
+  var _Symbol =
+  /*#__PURE__*/
+  function (_Container) {
+    _inherits(_Symbol, _Container);
 
-  function visible() {
-    return this.css('display') !== 'none';
-  }
-  registerMethods('Dom', {
-    css: css,
-    show: show,
-    hide: hide,
-    visible: visible
-  });
+    // Initialize node
+    function _Symbol(node) {
+      _classCallCheck(this, _Symbol);
 
-  function untransform() {
-    return this.attr('transform', null);
-  } // merge the whole transformation chain into one matrix and returns it
+      return _possibleConstructorReturn(this, _getPrototypeOf(_Symbol).call(this, nodeOrNew('symbol', node), _Symbol));
+    }
 
-  function matrixify() {
-    var matrix = (this.attr('transform') || ''). // split transformations
-    split(transforms).slice(0, -1).map(function (str) {
-      // generate key => value pairs
-      var kv = str.trim().split('(');
-      return [kv[0], kv[1].split(delimiter).map(function (str) {
-        return parseFloat(str);
-      })];
-    }).reverse() // merge every transformation into one matrix
-    .reduce(function (matrix, transform) {
-      if (transform[0] === 'matrix') {
-        return matrix.lmultiply(arrayToMatrix(transform[1]));
+    return _Symbol;
+  }(Container);
+  registerMethods({
+    Container: {
+      symbol: function symbol() {
+        return this.put(new _Symbol());
       }
+    }
+  });
+  register(_Symbol);
 
-      return matrix[transform[0]].apply(matrix, transform[1]);
-    }, new Matrix());
-    return matrix;
-  } // add an element to another parent without changing the visual representation on the screen
+  var TextPath =
+  /*#__PURE__*/
+  function (_Text) {
+    _inherits(TextPath, _Text);
 
-  function toParent(parent) {
-    if (this === parent) return this;
-    var ctm = this.screenCTM();
-    var pCtm = parent.screenCTM().inverse();
-    this.addTo(parent).untransform().transform(pCtm.multiply(ctm));
-    return this;
-  } // same as above with parent equals root-svg
+    // Initialize node
+    function TextPath(node) {
+      _classCallCheck(this, TextPath);
 
-  function toDoc() {
-    return this.toParent(this.doc());
-  } // Add transformations
+      return _possibleConstructorReturn(this, _getPrototypeOf(TextPath).call(this, nodeOrNew('textPath', node), TextPath));
+    } // return the array of the path track element
 
-  function transform(o, relative) {
-    // Act as a getter if no object was passed
-    if (o == null || typeof o === 'string') {
-      var decomposed = new Matrix(this).decompose();
-      return decomposed[o] || decomposed;
-    }
 
-    if (!isMatrixLike(o)) {
-      // Set the origin according to the defined transform
-      o = _objectSpread({}, o, {
-        origin: getOrigin(o, this)
-      });
-    } // The user can pass a boolean, an Element or an Matrix or nothing
+    _createClass(TextPath, [{
+      key: "array",
+      value: function array() {
+        var track = this.track();
+        return track ? track.array() : null;
+      } // Plot path if any
 
+    }, {
+      key: "plot",
+      value: function plot(d) {
+        var track = this.track();
+        var pathArray = null;
 
-    var cleanRelative = relative === true ? this : relative || false;
-    var result = new Matrix(cleanRelative).transform(o);
-    return this.attr('transform', result);
-  }
-  registerMethods('Element', {
-    untransform: untransform,
-    matrixify: matrixify,
-    toParent: toParent,
-    toDoc: toDoc,
-    transform: transform
-  });
+        if (track) {
+          pathArray = track.plot(d);
+        }
 
-  // Remember arbitrary data
+        return d == null ? pathArray : this;
+      } // Get the path element
 
-  function remember(k, v) {
-    // remember every item in an object individually
-    if (_typeof(arguments[0]) === 'object') {
-      for (var key in k) {
-        this.remember(key, k[key]);
+    }, {
+      key: "track",
+      value: function track() {
+        return this.reference('href');
       }
-    } else if (arguments.length === 1) {
-      // retrieve memory
-      return this.memory()[k];
-    } else {
-      // store memory
-      this.memory()[k] = v;
-    }
-
-    return this;
-  } // Erase a given memory
+    }]);
 
-  function forget() {
-    if (arguments.length === 0) {
-      this._memory = {};
-    } else {
-      for (var i = arguments.length - 1; i >= 0; i--) {
-        delete this.memory()[arguments[i]];
+    return TextPath;
+  }(Text);
+  registerMethods({
+    Container: {
+      textPath: function textPath(text, path) {
+        return this.defs().path(path).text(text).addTo(this);
       }
-    }
+    },
+    Text: {
+      // Create path for text to run on
+      path: function path(track) {
+        var path = new TextPath(); // if d is a path, reuse it
 
-    return this;
-  } // return local memory object
+        if (!(track instanceof Path)) {
+          // create path element
+          track = this.doc().defs().path(track);
+        } // link textPath to path and add content
 
-  function memory() {
-    return this._memory = this._memory || {};
-  }
-  registerMethods('Dom', {
-    remember: remember,
-    forget: forget,
-    memory: memory
-  });
 
-  var sugar = {
-    stroke: ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'],
-    fill: ['color', 'opacity', 'rule'],
-    prefix: function prefix(t, a) {
-      return a === 'color' ? t : t + '-' + a;
-    } // Add sugar for fill and stroke
-
-  };
-  ['fill', 'stroke'].forEach(function (m) {
-    var extension = {};
-    var i;
+        path.attr('href', '#' + track, xlink); // add textPath element as child node and return textPath
 
-    extension[m] = function (o) {
-      if (typeof o === 'undefined') {
-        return this;
+        return this.put(path);
+      },
+      // FIXME: make this plural?
+      // Get the textPath children
+      textPath: function textPath() {
+        return this.find('textPath');
       }
+    },
+    Path: {
+      // creates a textPath from this path
+      text: function text(_text) {
+        if (_text instanceof Text) {
+          var txt = _text.text();
 
-      if (typeof o === 'string' || Color.isRgb(o) || o instanceof Element) {
-        this.attr(m, o);
-      } else {
-        // set all attributes from sugar.fill and sugar.stroke list
-        for (i = sugar[m].length - 1; i >= 0; i--) {
-          if (o[sugar[m][i]] != null) {
-            this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]]);
-          }
+          return _text.clear().path(this).text(txt);
         }
-      }
 
-      return this;
-    };
+        return this.parent().put(new Text()).path(this).text(_text);
+      } // FIXME: Maybe add `targets` to get all textPaths associated with this path
 
-    registerMethods(['Shape', 'Runner'], extension);
+    }
   });
-  registerMethods(['Element', 'Runner'], {
-    // Let the user set the matrix directly
-    matrix: function matrix(mat, b, c, d, e, f) {
-      // Act as a getter
-      if (mat == null) {
-        return new Matrix(this);
-      } // Act as a setter, the user can pass a matrix or a set of numbers
+  TextPath.prototype.MorphArray = PathArray;
+  register(TextPath);
 
+  var Use =
+  /*#__PURE__*/
+  function (_Shape) {
+    _inherits(Use, _Shape);
 
-      return this.attr('transform', new Matrix(mat, b, c, d, e, f));
-    },
-    // Map rotation to transform
-    rotate: function rotate(angle, cx, cy) {
-      return this.transform({
-        rotate: angle,
-        ox: cx,
-        oy: cy
-      }, true);
-    },
-    // Map skew to transform
-    skew: function skew(x, y, cx, cy) {
-      return arguments.length === 1 || arguments.length === 3 ? this.transform({
-        skew: x,
-        ox: y,
-        oy: cx
-      }, true) : this.transform({
-        skew: [x, y],
-        ox: cx,
-        oy: cy
-      }, true);
-    },
-    shear: function shear(lam, cx, cy) {
-      return this.transform({
-        shear: lam,
-        ox: cx,
-        oy: cy
-      }, true);
-    },
-    // Map scale to transform
-    scale: function scale(x, y, cx, cy) {
-      return arguments.length === 1 || arguments.length === 3 ? this.transform({
-        scale: x,
-        ox: y,
-        oy: cx
-      }, true) : this.transform({
-        scale: [x, y],
-        ox: cx,
-        oy: cy
-      }, true);
-    },
-    // Map translate to transform
-    translate: function translate(x, y) {
-      return this.transform({
-        translate: [x, y]
-      }, true);
-    },
-    // Map relative translations to transform
-    relative: function relative(x, y) {
-      return this.transform({
-        relative: [x, y]
-      }, true);
-    },
-    // Map flip to transform
-    flip: function flip(direction, around) {
-      var directionString = typeof direction === 'string' ? direction : isFinite(direction) ? 'both' : 'both';
-      var origin = direction === 'both' && isFinite(around) ? [around, around] : direction === 'x' ? [around, 0] : direction === 'y' ? [0, around] : isFinite(direction) ? [direction, direction] : [0, 0];
-      this.transform({
-        flip: directionString,
-        origin: origin
-      }, true);
-    },
-    // Opacity
-    opacity: function opacity(value) {
-      return this.attr('opacity', value);
-    },
-    // Relative move over x axis
-    dx: function dx(x) {
-      return this.x(new SVGNumber(x).plus(this instanceof Runner ? 0 : this.x()), true);
-    },
-    // Relative move over y axis
-    dy: function dy(y) {
-      return this.y(new SVGNumber(y).plus(this instanceof Runner ? 0 : this.y()), true);
-    },
-    // Relative move over x and y axes
-    dmove: function dmove(x, y) {
-      return this.dx(x).dy(y);
-    }
-  });
-  registerMethods('radius', {
-    // Add x and y radius
-    radius: function radius(x, y) {
-      var type = (this._element || this).type;
-      return type === 'radialGradient' || type === 'radialGradient' ? this.attr('r', new SVGNumber(x)) : this.rx(x).ry(y == null ? x : y);
-    }
-  });
-  registerMethods('Path', {
-    // Get path length
-    length: function length() {
-      return this.node.getTotalLength();
-    },
-    // Get point at length
-    pointAt: function pointAt(length) {
-      return new Point(this.node.getPointAtLength(length));
-    }
-  });
-  registerMethods(['Element', 'Runner'], {
-    // Set font
-    font: function font(a, v) {
-      if (_typeof(a) === 'object') {
-        for (v in a) {
-          this.font(v, a[v]);
-        }
+    function Use(node) {
+      _classCallCheck(this, Use);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Use).call(this, nodeOrNew('use', node), Use));
+    } // Use element as a reference
+
+
+    _createClass(Use, [{
+      key: "element",
+      value: function element(_element, file) {
+        // Set lined element
+        return this.attr('href', (file || '') + '#' + _element, xlink);
       }
+    }]);
 
-      return a === 'leading' ? this.leading(v) : a === 'anchor' ? this.attr('text-anchor', v) : a === 'size' || a === 'family' || a === 'weight' || a === 'stretch' || a === 'variant' || a === 'style' ? this.attr('font-' + a, v) : this.attr(a, v);
+    return Use;
+  }(Shape);
+  registerMethods({
+    Container: {
+      // Create a use element
+      use: function use(element, file) {
+        return this.put(new Use()).element(element, file);
+      }
     }
   });
+  register(Use);
 
-  var extend$1 = extend;
-  extend$1([Doc$1, _Symbol, Image, Pattern, Marker], getMethodsFor('viewbox'));
-  extend$1([Line, Polyline, Polygon, Path], getMethodsFor('marker'));
-  extend$1(Text, getMethodsFor('Text'));
-  extend$1(Path, getMethodsFor('Path'));
-  extend$1(Defs, getMethodsFor('Defs'));
-  extend$1([Text, Tspan], getMethodsFor('Tspan'));
-  extend$1([Rect, Ellipse, Circle, Gradient], getMethodsFor('radius'));
-  extend$1(EventTarget, getMethodsFor('EventTarget'));
-  extend$1(Dom, getMethodsFor('Dom'));
-  extend$1(Element, getMethodsFor('Element'));
-  extend$1(Shape, getMethodsFor('Shape')); // extend(Classes.Element, getConstructor('Memory'))
-
-  extend$1(Container, getMethodsFor('Container'));
+  /* Optional Modules */
+  extend([Doc$1, Symbol, Image, Pattern, Marker], getMethodsFor('viewbox'));
+  extend([Line, Polyline, Polygon, Path], getMethodsFor('marker'));
+  extend(Text, getMethodsFor('Text'));
+  extend(Path, getMethodsFor('Path'));
+  extend(Defs, getMethodsFor('Defs'));
+  extend([Text, Tspan], getMethodsFor('Tspan'));
+  extend([Rect, Ellipse, Circle, Gradient], getMethodsFor('radius'));
+  extend(EventTarget, getMethodsFor('EventTarget'));
+  extend(Dom, getMethodsFor('Dom'));
+  extend(Element, getMethodsFor('Element'));
+  extend(Shape, getMethodsFor('Shape')); // extend(Element, getConstructor('Memory'))
+
+  extend(Container, getMethodsFor('Container'));
   registerMorphableType([SVGNumber, Color, Box, Matrix, SVGArray, PointArray, PathArray]);
-  makeMorphable(); // The main wrapping element
+  makeMorphable();
+
+  var svgMembers = /*#__PURE__*/Object.freeze({
+    Morphable: Morphable,
+    registerMorphableType: registerMorphableType,
+    makeMorphable: makeMorphable,
+    TransformBag: TransformBag,
+    ObjectBag: ObjectBag,
+    NonMorphable: NonMorphable,
+    defaults: defaults,
+    parser: parser,
+    find: baseFind,
+    Animator: Animator,
+    Controller: Controller,
+    Ease: Ease,
+    PID: PID,
+    Spring: Spring,
+    easing: easing,
+    Queue: Queue,
+    Runner: Runner,
+    Timeline: Timeline,
+    SVGArray: SVGArray,
+    Box: Box,
+    Color: Color,
+    EventTarget: EventTarget,
+    Matrix: Matrix,
+    SVGNumber: SVGNumber,
+    PathArray: PathArray,
+    Point: Point,
+    PointArray: PointArray,
+    Bare: Bare,
+    Circle: Circle,
+    ClipPath: ClipPath,
+    Container: Container,
+    Defs: Defs,
+    Doc: Doc$1,
+    Dom: Dom,
+    Element: Element,
+    Ellipse: Ellipse,
+    Gradient: Gradient,
+    G: G,
+    HtmlNode: HtmlNode,
+    A: A,
+    Image: Image,
+    Line: Line,
+    Marker: Marker,
+    Mask: Mask,
+    Path: Path,
+    Pattern: Pattern,
+    Polygon: Polygon,
+    Polyline: Polyline,
+    Rect: Rect,
+    Shape: Shape,
+    Stop: Stop,
+    Symbol: _Symbol,
+    Text: Text,
+    TextPath: TextPath,
+    Tspan: Tspan,
+    Use: Use,
+    map: map,
+    filter: filter,
+    radians: radians,
+    degrees: degrees,
+    camelCase: camelCase,
+    capitalize: capitalize,
+    proportionalSize: proportionalSize,
+    getOrigin: getOrigin,
+    ns: ns,
+    xmlns: xmlns,
+    xlink: xlink,
+    svgjs: svgjs,
+    on: on,
+    off: off,
+    dispatch: dispatch,
+    root: root,
+    makeNode: makeNode,
+    makeInstance: makeInstance,
+    nodeOrNew: nodeOrNew,
+    adopt: adopt,
+    register: register,
+    getClass: getClass,
+    eid: eid,
+    assignNewId: assignNewId,
+    extend: extend
+  });
 
   function SVG(element) {
     return makeInstance(element);
   }
-  Object.assign(SVG, Classes);
-  Object.assign(SVG, tools);
-  Object.assign(SVG, adopter);
-  SVG.utils = utils;
+  Object.assign(SVG, svgMembers);
+  SVG.utils = SVG;
   SVG.regex = regex;
   SVG.get = SVG;
-  SVG.find = baseFind;
-  Object.assign(SVG, ns$1);
-  SVG.easing = easing;
-  Object.assign(SVG, events);
-  SVG.TransformBag = TransformBag;
-  SVG.ObjectBag = ObjectBag;
-  SVG.NonMorphable = NonMorphable;
-  SVG.parser = parser;
-  SVG.defaults = defaults;
 
   return SVG;
 
diff --git a/dist/svg.min.js b/dist/svg.min.js
index 001199b..d7c90c1 100644
--- a/dist/svg.min.js
+++ b/dist/svg.min.js
@@ -1 +1 @@
-var SVG=function(){"use strict";function l(t){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function a(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function _(r){for(var t=1;t<arguments.length;t++){var s=null!=arguments[t]?arguments[t]:{},e=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(s).filter(function(t){return Object.getOwnPropertyDescriptor(s,t).enumerable}))),e.forEach(function(t){var e,n,i;e=r,i=s[n=t],n in e?Object.defineProperty(e,n,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[n]=i})}return r}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&n(t,e)}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function h(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?s(t):e}function c(t,e,n){return(c="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var i=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=u(t)););return t}(t,e);if(i){var r=Object.getOwnPropertyDescriptor(i,e);return r.get?r.get.call(n):r.value}})(t,e,n||t)}function f(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,r=!1,s=void 0;try{for(var u,o=t[Symbol.iterator]();!(i=(u=o.next()).done)&&(n.push(u.value),!e||n.length!==e);i=!0);}catch(t){r=!0,s=t}finally{try{i||null==o.return||o.return()}finally{if(r)throw s}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function O(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var t=function(){function t(){o(this,t),this._first=null,this._last=null}return a(t,[{key:"push",value:function(t){var e=t.next?t:{value:t,next:null,prev:null};return this._last?(e.prev=this._last,this._last.next=e,this._last=e):(this._last=e,this._first=e),e}},{key:"shift",value:function(){var t=this._first;return t?(this._first=t.next,this._first&&(this._first.prev=null),this._last=this._first?this._last:null,t.value):null}},{key:"first",value:function(){return this._first&&this._first.value}},{key:"last",value:function(){return this._last&&this._last.value}},{key:"remove",value:function(t){t.prev&&(t.prev.next=t.next),t.next&&(t.next.prev=t.prev),t===this._last&&(this._last=t.prev),t===this._first&&(this._first=t.next),t.prev=null,t.next=null}}]),t}(),d={nextDraw:null,frames:new t,timeouts:new t,timer:window.performance||window.Date,transforms:[],frame:function(t){var e=d.frames.push({run:t});return null===d.nextDraw&&(d.nextDraw=window.requestAnimationFrame(d._draw)),e},transform_frame:function(t,e){d.transforms[e]=t},timeout:function(t,e){e=e||0;var n=d.timer.now()+e,i=d.timeouts.push({run:t,time:n});return null===d.nextDraw&&(d.nextDraw=window.requestAnimationFrame(d._draw)),i},cancelFrame:function(t){d.frames.remove(t)},clearTimeout:function(t){d.timeouts.remove(t)},_draw:function(t){for(var e=null,n=d.timeouts.last();(e=d.timeouts.shift())&&(t>=e.time?e.run():d.timeouts.push(e),e!==n););for(var i=null,r=d.frames.last();i!==r&&(i=d.frames.shift());)i.run();d.transforms.forEach(function(t){t()}),d.nextDraw=d.timeouts.first()||d.frames.first()?window.requestAnimationFrame(d._draw):null}},v=/^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,y=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,p=/rgb\((\d+),(\d+),(\d+)\)/,m=/(#[a-z0-9\-_]+)/i,e=/\)\s*,?\s*/,g=/\s/g,w=/^#[a-f0-9]{3,6}$/i,k=/^rgb\(/,b=/^(\s+)?$/,x=/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,A=/\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,C=/[\s,]+/,j=/([^e])-/gi,M=/[MLHVCSQTAZ]/gi,S=/[MLHVCSQTAZ]/i,T=/((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,E=/\./g,N=Object.freeze({numberAndUnit:v,hex:y,rgb:p,reference:m,transforms:e,whitespace:g,isHex:w,isRgb:k,isCss:/[^:]+:[^;]+;?/,isBlank:b,isNumber:x,isPercent:/^-?[\d.]+%$/,isImage:A,delimiter:C,hyphen:j,pathLetters:M,isPathLetter:S,numbersWithDots:T,dots:E}),D=function(){try{return Function("name","baseClass","_constructor",["baseClass = baseClass || Array","return {","[name]: class extends baseClass {","constructor (...args) {","super(...args)","_constructor && _constructor.apply(this, args)","}","}","}[name]"].join("\n"))}catch(t){return function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:Array,n=2<arguments.length?arguments[2]:void 0,i=function(){e.apply(this,arguments),n&&n.apply(this,arguments)};return(i.prototype=Object.create(e.prototype)).constructor=i}}}(),P="http://www.w3.org/2000/svg",z="http://www.w3.org/2000/xmlns/",R="http://www.w3.org/1999/xlink",q="http://svgjs.com/svgjs",L=Object.freeze({ns:P,xmlns:z,xlink:R,svgjs:q}),F=function t(){o(this,t)};function I(t,e,n,i){return n+i.replace(E," .")}function X(t){return t.toLowerCase().replace(/-(.)/g,function(t,e){return e.toUpperCase()})}function Y(t){return t.charAt(0).toUpperCase()+t.slice(1)}function H(t){var e=t.toString(16);return 1===e.length?"0"+e:e}function G(t,e,n){if(null==e||null==n){var i=t.bbox();null==e?e=i.width/i.height*n:null==n&&(n=i.height/i.width*e)}return{width:e,height:n}}function V(t){return{a:t[0],b:t[1],c:t[2],d:t[3],e:t[4],f:t[5]}}var B="abcdef".split("");function Q(t,e,n){return Math.abs(e-t)<(n||1e-6)}function U(t){return null!=t.a||null!=t.b||null!=t.c||null!=t.d||null!=t.e||null!=t.f}function $(t,e){var n,i,r=t.origin;if("string"==typeof r||null==r){var s=(r||"center").toLowerCase().trim(),u=e.bbox(),o=u.height,a=u.width,h=u.x,l=u.y,c=s.includes("left")?h:s.includes("right")?h+a:h+a/2,f=s.includes("top")?l:s.includes("bottom")?l+o:l+o/2;n=null!=t.ox?t.ox:c,i=null!=t.oy?t.oy:f}else n=r[0],i=r[1];return[n,i]}var W={},J=Symbol("root");function Z(t){if(t instanceof F)return t;if("object"===l(t))return K(t);if(null==t)return new W[J];if("string"==typeof t&&"<"!==t.charAt(0))return K(document.querySelector(t));var e=ot("svg");return e.innerHTML=t,t=K(e.firstChild)}function K(t){return t?t.instance instanceof F?t.instance:t instanceof window.SVGElement?"svg"===t.nodeName?new W[J](t):"linearGradient"===t.nodeName||"radialGradient"===t.nodeName?new W.Gradient(t):W[Y(t.nodeName)]?new(W[Y(t.nodeName)])(t):new W.Bare(t):new W.HtmlNode(t):null}function tt(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t.name,n=2<arguments.length&&void 0!==arguments[2]&&arguments[2];return W[e]=t,n&&(W[J]=t),t}function et(t){return W[t]}var nt=1e3;function it(t){return"Svgjs"+Y(t)+nt++}function rt(t){for(var e=t.children.length-1;0<=e;e--)rt(t.children[e]);return t.id?K(t).id(it(t.nodeName)):K(t)}var st=Object.freeze({root:J,makeInstance:Z,adopt:K,register:tt,getClass:et,eid:it,assignNewId:rt});function ut(t,e){return e||ot(t)}function ot(t){return document.createElementNS(P,t)}function at(t,e){var n,i;for(i=(t=Array.isArray(t)?t:[t]).length-1;0<=i;i--)for(n in e)t[i].prototype[n]=e[n]}var ht=Object.freeze({nodeOrNew:ut,makeNode:ot,extend:at,addFactory:function(t,e){at(t,e)},invent:function(e){var t="function"==typeof e.create?e.create:function(t){e.inherit.call(this,t||ot(e.create))};return e.inherit&&(t.prototype=new e.inherit,t.prototype.constructor=t),e.extend&&at(t,e.extend),e.construct&&at(e.parent||et("Container"),e.construct),t}}),lt=D("SVGArray",Array,function(){this.init.apply(this,arguments)});at(lt,{init:function(){this.length=0,this.push.apply(this,O(this.parse.apply(this,arguments)))},toArray:function(){return Array.prototype.concat.apply([],this)},toString:function(){return this.join(" ")},valueOf:function(){var t=[];return t.push.apply(t,O(this)),t},parse:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];return t instanceof Array?t:t.trim().split(C).map(parseFloat)},clone:function(){return new this.constructor(this)},toSet:function(){return new Set(this)}});var ct=function(){function n(){o(this,n),this.init.apply(this,arguments)}return a(n,[{key:"init",value:function(t,e){e=Array.isArray(t)?t[1]:e,t=Array.isArray(t)?t[0]:t,this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-34e37:34e37:"string"==typeof t?(e=t.match(v))&&(this.value=parseFloat(e[1]),"%"===e[5]?this.value/=100:"s"===e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof n&&(this.value=t.valueOf(),this.unit=t.unit)}},{key:"toString",value:function(){return("%"===this.unit?~~(1e8*this.value)/1e6:"s"===this.unit?this.value/1e3:this.value)+this.unit}},{key:"toJSON",value:function(){return this.toString()}},{key:"toArray",value:function(){return[this.value,this.unit]}},{key:"valueOf",value:function(){return this.value}},{key:"plus",value:function(t){return new n(this+(t=new n(t)),this.unit||t.unit)}},{key:"minus",value:function(t){return new n(this-(t=new n(t)),this.unit||t.unit)}},{key:"times",value:function(t){return new n(this*(t=new n(t)),this.unit||t.unit)}},{key:"divide",value:function(t){return new n(this/(t=new n(t)),this.unit||t.unit)}}]),n}(),ft=0;function dt(t){var e=Z(t).getEventHolder();return e.events||(e.events={}),e.events}function vt(t){return Z(t).getEventTarget()}function yt(t,e,i,n,r){var s=i.bind(n||t),u=dt(t),o=vt(t);e=Array.isArray(e)?e:e.split(C),i._svgjsListenerId||(i._svgjsListenerId=++ft),e.forEach(function(t){var e=t.split(".")[0],n=t.split(".")[1]||"*";u[e]=u[e]||{},u[e][n]=u[e][n]||{},u[e][n][i._svgjsListenerId]=s,o.addEventListener(e,s,r||!1)})}function pt(u,t,o,a){var h=dt(u),l=vt(u);("function"!=typeof o||(o=o._svgjsListenerId))&&(t=Array.isArray(t)?t:(t||"").split(C)).forEach(function(t){var e,n,i,r=t&&t.split(".")[0],s=t&&t.split(".")[1];if(o)h[r]&&h[r][s||"*"]&&(l.removeEventListener(r,h[r][s||"*"][o],a||!1),delete h[r][s||"*"][o]);else if(r&&s){if(h[r]&&h[r][s]){for(n in h[r][s])pt(l,[r,s].join("."),n);delete h[r][s]}}else if(s)for(t in h)for(e in h[t])s===e&&pt(l,[t,s].join("."));else if(r){if(h[r]){for(e in h[r])pt(l,[r,e].join("."));delete h[r]}}else{for(t in h)pt(l,t);(i=Z(u).getEventHolder()).events&&(i.events={})}})}function mt(t,e,n){var i=vt(t);return e instanceof window.Event||(e=new window.CustomEvent(e,{detail:n,cancelable:!0})),i.dispatchEvent(e),e}var gt=Object.freeze({on:yt,off:pt,dispatch:mt}),wt={};function kt(t,e){if(Array.isArray(t)){var n=!0,i=!1,r=void 0;try{for(var s,u=t[Symbol.iterator]();!(n=(s=u.next()).done);n=!0){kt(s.value,e)}}catch(t){i=!0,r=t}finally{try{n||null==u.return||u.return()}finally{if(i)throw r}}}else if("object"!==l(t))wt[t]=Object.assign(wt[t]||{},e);else for(var o=Object.entries(t),a=0;a<o.length;a++){var h=f(o[a],2);kt(h[0],h[1])}}function bt(t){return wt[t]||{}}var xt=function(t){function i(){var t,e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).events,n=void 0===e?{}:e;return o(this,i),(t=h(this,u(i).call(this))).events=n,t}return r(i,F),a(i,[{key:"addEventListener",value:function(){}},{key:"on",value:function(t,e,n,i){return yt(this,t,e,n,i),this}},{key:"off",value:function(t,e){return pt(this,t,e),this}},{key:"dispatch",value:function(t,e){return mt(this,t,e)}},{key:"dispatchEvent",value:function(t){var e=this.getEventHolder().events;if(!e)return!0;var n=e[t.type];for(var i in n)for(var r in n[i])n[i][r](t);return!t.defaultPrevented}},{key:"fire",value:function(t,e){return this.dispatch(t,e),this}},{key:"getEventHolder",value:function(){return this}},{key:"getEventTarget",value:function(){return this}},{key:"removeEventListener",value:function(){}}]),i}();function _t(t,e){var n,i=t.length,r=[];for(n=0;n<i;n++)r.push(e(t[n]));return r}function Ot(t){return t%360*Math.PI/180}kt("Element",["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchmove","touchleave","touchend","touchcancel"].reduce(function(t,e){return t[e]=function(t){return null===t?pt(this,e):yt(this,e,t),this},t},{}));var At=Object.freeze({map:_t,filter:function(t,e){var n,i=t.length,r=[];for(n=0;n<i;n++)e(t[n])&&r.push(t[n]);return r},radians:Ot,degrees:function(t){return 180*t/Math.PI%360},filterSVGElements:function(t){return this.filter(t,function(t){return t instanceof window.SVGElement})}});function Ct(){}var jt={duration:400,ease:">",delay:0},Mt={"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"},St=Object.freeze({noop:Ct,timeline:jt,attrs:Mt}),Tt=function(){function t(){o(this,t),this.init.apply(this,arguments)}return a(t,[{key:"init",value:function(t,e,n){var i,r;(this.r=0,this.g=0,this.b=0,t)&&("string"==typeof t?k.test(t)?(i=p.exec(t.replace(g,"")),this.r=parseInt(i[1]),this.g=parseInt(i[2]),this.b=parseInt(i[3])):w.test(t)&&(i=y.exec(4===(r=t).length?["#",r.substring(1,2),r.substring(1,2),r.substring(2,3),r.substring(2,3),r.substring(3,4),r.substring(3,4)].join(""):r),this.r=parseInt(i[1],16),this.g=parseInt(i[2],16),this.b=parseInt(i[3],16)):Array.isArray(t)?(this.r=t[0],this.g=t[1],this.b=t[2]):"object"===l(t)?(this.r=t.r,this.g=t.g,this.b=t.b):3===arguments.length&&(this.r=t,this.g=e,this.b=n))}},{key:"toString",value:function(){return this.toHex()}},{key:"toArray",value:function(){return[this.r,this.g,this.b]}},{key:"toHex",value:function(){return"#"+H(Math.round(this.r))+H(Math.round(this.g))+H(Math.round(this.b))}},{key:"toRgb",value:function(){return"rgb("+[this.r,this.g,this.b].join()+")"}},{key:"brightness",value:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11}}],[{key:"test",value:function(t){return t+="",w.test(t)||k.test(t)}},{key:"isRgb",value:function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b}},{key:"isColor",value:function(t){return this.isRgb(t)||this.test(t)}}]),t}();var Et=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this,t))).node=t,e.type=t.nodeName,e}return r(n,xt),a(n,[{key:"add",value:function(t,e){return t=Z(t),null==e?this.node.appendChild(t.node):t.node!==this.node.childNodes[e]&&this.node.insertBefore(t.node,this.node.childNodes[e]),this}},{key:"addTo",value:function(t){return Z(t).put(this)}},{key:"children",value:function(){return _t(this.node.children,function(t){return K(t)})}},{key:"clear",value:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this}},{key:"clone",value:function(t){this.writeDataToDom();var e=rt(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e}},{key:"each",value:function(t,e){var n,i,r=this.children();for(n=0,i=r.length;n<i;n++)t.apply(r[n],[n,r]),e&&r[n].each(t,e);return this}},{key:"first",value:function(){return K(this.node.firstChild)}},{key:"get",value:function(t){return K(this.node.childNodes[t])}},{key:"getEventHolder",value:function(){return this.node}},{key:"getEventTarget",value:function(){return this.node}},{key:"has",value:function(t){return 0<=this.index(t)}},{key:"id",value:function(t){return void 0!==t||this.node.id||(this.node.id=it(this.type)),this.attr("id",t)}},{key:"index",value:function(t){return[].slice.call(this.node.childNodes).indexOf(t.node)}},{key:"last",value:function(){return K(this.node.lastChild)}},{key:"matches",value:function(t){return e=this.node,n=t,(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector).call(e,n);var e,n}},{key:"native",value:function(){return this.node}},{key:"parent",value:function(t){var e=this;if(!e.node.parentNode)return null;if(e=K(e.node.parentNode),!t)return e;for(;e&&e.node instanceof window.SVGElement;){if("string"==typeof t?e.matches(t):e instanceof t)return e;e=K(e.node.parentNode)}}},{key:"put",value:function(t,e){return this.add(t,e),t}},{key:"putIn",value:function(t){return Z(t).add(this)}},{key:"remove",value:function(){return this.parent()&&this.parent().removeElement(this),this}},{key:"removeElement",value:function(t){return this.node.removeChild(t.node),this}},{key:"replace",value:function(t){return this.after(t).remove(),t}},{key:"toString",value:function(){return this.id()}},{key:"svg",value:function(t){var e,n;if(!t)return this.writeDataToDom(),this.node.outerHTML;for((e=document.createElementNS(P,"svg")).innerHTML=t,n=e.children.length;n--;)this.node.appendChild(e.firstElementChild);return this}},{key:"writeDataToDom",value:function(){return this.each(function(){this.writeDataToDom()}),this}}]),n}();at(Et,{attr:function(t,e,n){if(null==t){t={},e=this.node.attributes;var i=!0,r=!1,s=void 0;try{for(var u,o=e[Symbol.iterator]();!(i=(u=o.next()).done);i=!0){var a=u.value;t[a.nodeName]=x.test(a.nodeValue)?parseFloat(a.nodeValue):a.nodeValue}}catch(t){r=!0,s=t}finally{try{i||null==o.return||o.return()}finally{if(r)throw s}}return t}if(Array.isArray(t));else if("object"===l(t))for(e in t)this.attr(e,t[e]);else if(null===e)this.node.removeAttribute(t);else{if(null==e)return null==(e=this.node.getAttribute(t))?Mt[t]:x.test(e)?parseFloat(e):e;for("fill"!==t&&"stroke"!==t||A.test(e)&&(e=this.doc().defs().image(e));"function"==typeof e.attrHook;)e=e.attrHook(this,t);"number"==typeof e?e=new ct(e):Tt.isColor(e)?e=new Tt(e):e.constructor===Array&&(e=new lt(e)),"leading"===t?this.leading&&this.leading(e):"string"==typeof n?this.node.setAttributeNS(n,t,e.toString()):this.node.setAttribute(t,e.toString()),!this.rebuild||"font-size"!==t&&"x"!==t||this.rebuild()}return this}});var Nt=et(J),Dt=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this,t))).dom={},e.node.instance=s(s(e)),t.hasAttribute("svgjs:data")&&e.setData(JSON.parse(t.getAttribute("svgjs:data"))||{}),e}return r(n,Et),a(n,[{key:"center",value:function(t,e){return this.cx(t).cy(e)}},{key:"cx",value:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)}},{key:"cy",value:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)}},{key:"defs",value:function(){return this.doc().defs()}},{key:"doc",value:function(){var t=this.parent(Nt);return t&&t.doc()}},{key:"getEventHolder",value:function(){return this}},{key:"height",value:function(t){return this.attr("height",t)}},{key:"inside",value:function(t,e){var n=this.bbox();return t>n.x&&e>n.y&&t<n.x+n.width&&e<n.y+n.height}},{key:"move",value:function(t,e){return this.x(t).y(e)}},{key:"parents",value:function(t){var e=[],n=this;do{if(!(n=n.parent(t))||n instanceof et("HtmlNode"))break;e.push(n)}while(n.parent);return e}},{key:"reference",value:function(t){var e=function(t){var e=(t||"").toString().match(m);if(e)return e[1]}(this.attr(t));return e?Z(e):null}},{key:"setData",value:function(t){return this.dom=t,this}},{key:"size",value:function(t,e){var n=G(this,t,e);return this.width(new ct(n.width)).height(new ct(n.height))}},{key:"width",value:function(t){return this.attr("width",t)}},{key:"writeDataToDom",value:function(){return this.node.removeAttribute("svgjs:data"),Object.keys(this.dom).length&&this.node.setAttribute("svgjs:data",JSON.stringify(this.dom)),c(u(n.prototype),"writeDataToDom",this).call(this)}},{key:"x",value:function(t){return this.attr("x",t)}},{key:"y",value:function(t){return this.attr("y",t)}}]),n}(),Pt=function(t){function e(){return o(this,e),h(this,u(e).apply(this,arguments))}return r(e,Dt),a(e,[{key:"flatten",value:function(t){return this.each(function(){return this instanceof e?this.flatten(t).ungroup(t):this.toParent(t)}),this.node.firstElementChild||this.remove(),this}},{key:"ungroup",value:function(t){return t=t||this.parent(),this.each(function(){return this.toParent(t)}),this.remove(),this}}]),e}(),zt=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut(t,"string"==typeof t?null:t),e))}return r(e,Pt),a(e,[{key:"words",value:function(t){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this.node.appendChild(document.createTextNode(t)),this}}]),e}();tt(zt),kt("Container",{element:function(t,e){return this.put(new zt(t,e))}});var Rt=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("defs",t),e))}return r(e,Pt),a(e,[{key:"flatten",value:function(){return this}},{key:"ungroup",value:function(){return this}}]),e}();tt(Rt);var qt=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this,ut("svg",t),n))).namespace(),e}return r(n,Pt),a(n,[{key:"isRoot",value:function(){return!(this.node.parentNode&&this.node.parentNode instanceof window.SVGElement&&"#document"!==this.node.parentNode.nodeName)}},{key:"doc",value:function(){return this.isRoot()?this:c(u(n.prototype),"doc",this).call(this)}},{key:"namespace",value:function(){return this.isRoot()?this.attr({xmlns:P,version:"1.1"}).attr("xmlns:xlink",R,z).attr("xmlns:svgjs",q,z):this.doc().namespace()}},{key:"defs",value:function(){return this.isRoot()?K(this.node.getElementsByTagName("defs")[0])||this.put(new Rt):this.doc().defs()}},{key:"parent",value:function(t){return this.isRoot()?"#document"===this.node.parentNode.nodeName?null:K(this.node.parentNode):c(u(n.prototype),"parent",this).call(this,t)}},{key:"clear",value:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this}}]),n}();function Lt(){if(!Lt.nodes){var t=(new qt).size(2,0).css({opacity:0,position:"absolute",left:"-100%",top:"-100%",overflow:"hidden"}),e=t.path().node;Lt.nodes={svg:t,path:e}}if(!Lt.nodes.svg.node.parentNode){var n=document.body||document.documentElement;Lt.nodes.svg.addTo(n)}return Lt.nodes}kt({Container:{nested:function(){return this.put(new qt)}}}),tt(qt,"Doc",!0);var Ft=function(){function r(t,e,n){var i;o(this,r),n=n||{x:0,y:0},i=Array.isArray(t)?{x:t[0],y:t[1]}:"object"===l(t)?{x:t.x,y:t.y}:{x:t,y:e},this.x=null==i.x?n.x:i.x,this.y=null==i.y?n.y:i.y}return a(r,[{key:"clone",value:function(){return new r(this)}},{key:"native",value:function(){var t=Lt().svg.node.createSVGPoint();return t.x=this.x,t.y=this.y,t}},{key:"transform",value:function(t){return new r(t.a*this.x+t.c*this.y+t.e,t.b*this.x+t.d*this.y+t.f)}}]),r}();kt({Element:{point:function(t,e){return new Ft(t,e).transform(this.screenCTM().inverse())}}});var It=function(){function u(){o(this,u),this.init.apply(this,arguments)}return a(u,[{key:"init",value:function(t){var e;t="string"==typeof t?t.split(C).map(parseFloat):Array.isArray(t)?t:"object"===l(t)?[null!=t.left?t.left:t.x,null!=t.top?t.top:t.y,t.width,t.height]:4===arguments.length?[].slice.call(arguments):[0,0,0,0],this.x=t[0],this.y=t[1],this.width=t[2],this.height=t[3],null==(e=this).x&&(e.x=0,e.y=0,e.width=0,e.height=0),e.w=e.width,e.h=e.height,e.x2=e.x+e.width,e.y2=e.y+e.height,e.cx=e.x+e.width/2,e.cy=e.y+e.height/2}},{key:"merge",value:function(t){var e=Math.min(this.x,t.x),n=Math.min(this.y,t.y);return new u(e,n,Math.max(this.x+this.width,t.x+t.width)-e,Math.max(this.y+this.height,t.y+t.height)-n)}},{key:"transform",value:function(e){var n=1/0,i=-1/0,r=1/0,s=-1/0;return[new Ft(this.x,this.y),new Ft(this.x2,this.y),new Ft(this.x,this.y2),new Ft(this.x2,this.y2)].forEach(function(t){t=t.transform(e),n=Math.min(n,t.x),i=Math.max(i,t.x),r=Math.min(r,t.y),s=Math.max(s,t.y)}),new u(n,r,i-n,s-r)}},{key:"addOffset",value:function(){return this.x+=window.pageXOffset,this.y+=window.pageYOffset,this}},{key:"toString",value:function(){return this.x+" "+this.y+" "+this.width+" "+this.height}},{key:"toArray",value:function(){return[this.x,this.y,this.width,this.height]}}]),u}();function Xt(e){var n,t,i;try{if(n=e(this.node),!((i=n).w||i.h||i.x||i.y||(t=this.node,(document.documentElement.contains||function(t){for(;t.parentNode;)t=t.parentNode;return t===document}).call(document.documentElement,t))))throw new Error("Element not in the dom")}catch(t){try{var r=this.clone(Lt().svg).show();n=e(r.node),r.remove()}catch(t){console.warn("Getting a bounding box of this element is not possible")}}return n}kt({Element:{bbox:function(){return new It(Xt.call(this,function(t){return t.getBBox()}))},rbox:function(t){var e=new It(Xt.call(this,function(t){return t.getBoundingClientRect()}));return t?e.transform(t.screenCTM().inverse()):e.addOffset()}},viewbox:{viewbox:function(t,e,n,i){return null==t?new It(this.attr("viewBox")):this.attr("viewBox",new It(t,e,n,i))}}});var Yt=function(t){function e(){return o(this,e),h(this,u(e).apply(this,arguments))}return r(e,Dt),e}();function Ht(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())}function Gt(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())}function Vt(t){return null==t?this.attr("cx"):this.attr("cx",t)}function Bt(t){return null==t?this.attr("cy"):this.attr("cy",t)}function Qt(t){return null==t?2*this.rx():this.rx(new ct(t).divide(2))}function Ut(t){return null==t?2*this.ry():this.ry(new ct(t).divide(2))}function $t(t,e){var n=G(this,t,e);return this.rx(new ct(n.width).divide(2)).ry(new ct(n.height).divide(2))}var Wt=Object.freeze({rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)},x:Ht,y:Gt,cx:Vt,cy:Bt,width:Qt,height:Ut,size:$t}),Jt=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("circle",t),e))}return r(e,Yt),a(e,[{key:"radius",value:function(t){return this.attr("r",t)}},{key:"rx",value:function(t){return this.attr("r",t)}},{key:"ry",value:function(t){return this.rx(t)}}]),e}();function Zt(t,e){return _t((e||document).querySelectorAll(t),function(t){return K(t)})}function Kt(t){return Zt(t,this.node)}at(Jt,{x:Ht,y:Gt,cx:Vt,cy:Bt,width:Qt,height:Ut,size:$t}),kt({Element:{circle:function(t){return this.put(new Jt).radius(new ct(t).divide(2)).move(0,0)}}}),tt(Jt),kt("Dom",{find:Kt});var te=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("clipPath",t),e))}return r(e,Pt),a(e,[{key:"remove",value:function(){return this.targets().forEach(function(t){t.unclip()}),c(u(e.prototype),"remove",this).call(this)}},{key:"targets",value:function(){return Zt('svg [clip-path*="'+this.id()+'"]')}}]),e}();function ee(e,n){return function(t){return null==t?this[t]:(this[e]=t,n&&n.call(this),this)}}kt({Container:{clip:function(){return this.defs().put(new te)}},Element:{clipWith:function(t){var e=t instanceof te?t:this.parent().clip().add(t);return this.attr("clip-path",'url("#'+e.id()+'")')},unclip:function(){return this.attr("clip-path",null)},clipper:function(){return this.reference("clip-path")}}}),tt(te);var ne={"-":function(t){return t},"<>":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)},bezier:function(t,e,n,i){return function(t){}}},ie=function(){function t(){o(this,t)}return a(t,[{key:"done",value:function(){return!1}}]),t}(),re=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this))).ease=ne[t||jt.ease]||t,e}return r(n,ie),a(n,[{key:"step",value:function(t,e,n){return"number"!=typeof t?n<1?t:e:t+(e-t)*this.ease(n)}}]),n}(),se=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this))).stepper=t,e}return r(n,ie),a(n,[{key:"step",value:function(t,e,n,i){return this.stepper(t,e,n,i)}},{key:"done",value:function(t){return t.done}}]),n}();function ue(){var t=(this._duration||500)/1e3,e=this._overshoot||0,n=Math.PI,i=Math.log(e/100+1e-10),r=-i/Math.sqrt(n*n+i*i),s=3.9/(r*t);this.d=2*r*s,this.k=s*s}var oe=function(t){function i(t,e){var n;return o(this,i),(n=h(this,u(i).call(this))).duration(t||500).overshoot(e||0),n}return r(i,se),a(i,[{key:"step",value:function(t,e,n,i){if("string"==typeof t)return t;if(i.done=n===1/0,n===1/0)return e;if(0===n)return t;100<n&&(n=16),n/=1e3;var r=i.velocity||0,s=-this.d*r-this.k*(t-e),u=t+r*n+s*n*n/2;return i.velocity=r+s*n,i.done=Math.abs(e-u)+Math.abs(r)<.002,i.done?e:u}}]),i}();at(oe,{duration:ee("_duration",ue),overshoot:ee("_overshoot",ue)});var ae=function(t){function s(t,e,n,i){var r;return o(this,s),t=null==t?.1:t,e=null==e?.01:e,n=null==n?0:n,i=null==i?1e3:i,(r=h(this,u(s).call(this))).p(t).i(e).d(n).windup(i),r}return r(s,se),a(s,[{key:"step",value:function(t,e,n,i){if("string"==typeof t)return t;if(i.done=n===1/0,n===1/0)return e;if(0===n)return t;var r=e-t,s=(i.integral||0)+r*n,u=(r-(i.error||0))/n,o=this.windup;return!1!==o&&(s=Math.max(-o,Math.min(s,o))),i.error=r,i.integral=s,i.done=Math.abs(r)<.001,i.done?e:t+(this.P*r+this.I*s+this.D*u)}}]),s}();at(ae,{windup:ee("windup"),p:ee("P"),i:ee("I"),d:ee("D")});var he=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("ellipse",t),e))}return r(e,Yt),e}();at(he,Wt),kt("Container",{ellipse:function(t,e){return this.put(new he).size(t,e).move(0,0)}}),tt(he);var le=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("stop",t),e))}return r(e,Dt),a(e,[{key:"update",value:function(t){return("number"==typeof t||t instanceof ct)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new ct(t.offset)),this}}]),e}();tt(le);var ce=Object.freeze({from:function(t,e){return"radialGradient"===(this._element||this).type?this.attr({fx:new ct(t),fy:new ct(e)}):this.attr({x1:new ct(t),y1:new ct(e)})},to:function(t,e){return"radialGradient"===(this._element||this).type?this.attr({cx:new ct(t),cy:new ct(e)}):this.attr({x2:new ct(t),y2:new ct(e)})}}),fe=function(t){function i(t){return o(this,i),h(this,u(i).call(this,ut(t+"Gradient","string"==typeof t?null:t),i))}return r(i,Pt),a(i,[{key:"stop",value:function(t,e,n){return this.put(new le).update(t,e,n)}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"url",value:function(){return"url(#"+this.id()+")"}},{key:"toString",value:function(){return this.url()}},{key:"attr",value:function(t,e,n){return"transform"===t&&(t="gradientTransform"),c(u(i.prototype),"attr",this).call(this,t,e,n)}},{key:"targets",value:function(){return Kt('svg [fill*="'+this.id()+'"]')}},{key:"bbox",value:function(){return new It}}]),i}();at(fe,ce),kt({Container:{gradient:function(t,e){return this.defs().gradient(t,e)}},Defs:{gradient:function(t,e){return this.put(new fe(t)).update(e)}}}),tt(fe);var de=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("g",t),e))}return r(e,Pt),e}();kt({Element:{group:function(){return this.put(new de)}}}),tt(de);var ve=function(t){function e(t){return o(this,e),h(this,u(e).call(this,t,e))}return r(e,Et),e}();tt(ve);var ye=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("a",t),e))}return r(e,Pt),a(e,[{key:"to",value:function(t){return this.attr("href",t,R)}},{key:"target",value:function(t){return this.attr("target",t)}}]),e}();kt({Container:{link:function(t){return this.put(new ye).to(t)}},Element:{linkTo:function(t){var e=new ye;return"function"==typeof t?t.call(e,e):e.to(t),this.parent().put(e).put(this)}}}),tt(ye);var pe=function(t){function i(t){return o(this,i),h(this,u(i).call(this,ut("pattern",t),i))}return r(i,Pt),a(i,[{key:"url",value:function(){return"url(#"+this.id()+")"}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"toString",value:function(){return this.url()}},{key:"attr",value:function(t,e,n){return"transform"===t&&(t="patternTransform"),c(u(i.prototype),"attr",this).call(this,t,e,n)}},{key:"targets",value:function(){return Kt('svg [fill*="'+this.id()+'"]')}},{key:"bbox",value:function(){return new It}}]),i}();kt({Container:{pattern:function(t,e,n){return this.defs().pattern(t,e,n)}},Defs:{pattern:function(t,e,n){return this.put(new pe).update(n).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}}),tt(pe);var me=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("image",t),e))}return r(e,Yt),a(e,[{key:"load",value:function(n,i){if(!n)return this;var r=new window.Image;return yt(r,"load",function(t){var e=this.parent(pe);0===this.width()&&0===this.height()&&this.size(r.width,r.height),e instanceof pe&&0===e.width()&&0===e.height()&&e.size(this.width(),this.height()),"function"==typeof i&&i.call(this,{width:r.width,height:r.height,ratio:r.width/r.height,url:n})},this),yt(r,"load error",function(){pt(r)}),this.attr("href",r.src=n,R)}},{key:"attrHook",value:function(t){var e=this;return t.doc().defs().pattern(0,0,function(t){t.add(e)})}}]),e}();kt({Container:{image:function(t,e){return this.put(new me).size(0,0).load(t,e)}}}),tt(me);var ge=D("PointArray",lt);at(ge,{toString:function(){for(var t=0,e=this.length,n=[];t<e;t++)n.push(this[t].join(","));return n.join(" ")},toLine:function(){return{x1:this[0][0],y1:this[0][1],x2:this[1][0],y2:this[1][1]}},at:function(t){if(!this.destination)return this;for(var e=0,n=this.length,i=[];e<n;e++)i.push([this[e][0]+(this.destination[e][0]-this[e][0])*t,this[e][1]+(this.destination[e][1]-this[e][1])*t]);return new ge(i)},parse:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[[0,0]],e=[];if(t instanceof Array){if(t[0]instanceof Array)return t}else t=t.trim().split(C).map(parseFloat);t.length%2!=0&&t.pop();for(var n=0,i=t.length;n<i;n+=2)e.push([t[n],t[n+1]]);return e},move:function(t,e){var n=this.bbox();if(t-=n.x,e-=n.y,!isNaN(t)&&!isNaN(e))for(var i=this.length-1;0<=i;i--)this[i]=[this[i][0]+t,this[i][1]+e];return this},size:function(t,e){var n,i=this.bbox();for(n=this.length-1;0<=n;n--)i.width&&(this[n][0]=(this[n][0]-i.x)*t/i.width+i.x),i.height&&(this[n][1]=(this[n][1]-i.y)*e/i.height+i.y);return this},bbox:function(){var e=-1/0,n=-1/0,i=1/0,r=1/0;return this.forEach(function(t){e=Math.max(t[0],e),n=Math.max(t[1],n),i=Math.min(t[0],i),r=Math.min(t[1],r)}),{x:i,y:r,width:e-i,height:n-r}}});var we=ge;var ke=Object.freeze({MorphArray:we,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),be=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("line",t),e))}return r(e,Yt),a(e,[{key:"array",value:function(){return new ge([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])}},{key:"plot",value:function(t,e,n,i){return null==t?this.array():(t=void 0!==e?{x1:t,y1:e,x2:n,y2:i}:new ge(t).toLine(),this.attr(t))}},{key:"move",value:function(t,e){return this.attr(this.array().move(t,e).toLine())}},{key:"size",value:function(t,e){var n=G(this,t,e);return this.attr(this.array().size(n.width,n.height).toLine())}}]),e}();at(be,ke),kt({Container:{line:function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return be.prototype.plot.apply(this.put(new be),null!=e[0]?e:[0,0,0,0])}}}),tt(be);var xe=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("marker",t),e))}return r(e,Pt),a(e,[{key:"width",value:function(t){return this.attr("markerWidth",t)}},{key:"height",value:function(t){return this.attr("markerHeight",t)}},{key:"ref",value:function(t,e){return this.attr("refX",t).attr("refY",e)}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"toString",value:function(){return"url(#"+this.id()+")"}}]),e}();kt({Container:{marker:function(t,e,n){return this.defs().marker(t,e,n)}},Defs:{marker:function(t,e,n){return this.put(new xe).size(t,e).ref(t/2,e/2).viewbox(0,0,t,e).attr("orient","auto").update(n)}},marker:{marker:function(t,e,n,i){var r=["marker"];return"all"!==t&&r.push(t),r=r.join("-"),t=e instanceof xe?e:this.defs().marker(e,n,i),this.attr(r,t)}}}),tt(xe);var _e=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("mask",t),e))}return r(e,Pt),a(e,[{key:"remove",value:function(){return this.targets().forEach(function(t){t.unmask()}),c(u(e.prototype),"remove",this).call(this)}},{key:"targets",value:function(){return Zt('svg [mask*="'+this.id()+'"]')}}]),e}();kt({Container:{mask:function(){return this.defs().put(new _e)}},Element:{maskWith:function(t){var e=t instanceof _e?t:this.parent().mask().add(t);return this.attr("mask",'url("#'+e.id()+'")')},unmask:function(){return this.attr("mask",null)},masker:function(){return this.reference("mask")}}}),tt(_e);var Oe=function(){function h(){o(this,h),this.init.apply(this,arguments)}return a(h,[{key:"init",value:function(t){var e=V([1,0,0,1,0,0]);t=t instanceof Dt?t.matrixify():"string"==typeof t?V(t.split(C).map(parseFloat)):Array.isArray(t)?V(t):"object"===l(t)&&U(t)?t:"object"===l(t)?(new h).transform(t):6===arguments.length?V([].slice.call(arguments)):e,this.a=null!=t.a?t.a:e.a,this.b=null!=t.b?t.b:e.b,this.c=null!=t.c?t.c:e.c,this.d=null!=t.d?t.d:e.d,this.e=null!=t.e?t.e:e.e,this.f=null!=t.f?t.f:e.f}},{key:"clone",value:function(){return new h(this)}},{key:"transform",value:function(t){if(U(t))return new h(t).multiplyO(this);var e=h.formatTransforms(t),n=new Ft(e.ox,e.oy).transform(this),i=n.x,r=n.y,s=(new h).translateO(e.rx,e.ry).lmultiplyO(this).translateO(-i,-r).scaleO(e.scaleX,e.scaleY).skewO(e.skewX,e.skewY).shearO(e.shear).rotateO(e.theta).translateO(i,r);if(isFinite(e.px)||isFinite(e.py)){var u=new Ft(i,r).transform(s),o=e.px?e.px-u.x:0,a=e.py?e.py-u.y:0;s.translateO(o,a)}return s.translateO(e.tx,e.ty),s}},{key:"compose",value:function(t){t.origin&&(t.originX=t.origin[0],t.originY=t.origin[1]);var e=t.originX||0,n=t.originY||0,i=t.scaleX||1,r=t.scaleY||1,s=t.shear||0,u=t.rotate||0,o=t.translateX||0,a=t.translateY||0;return(new h).translateO(-e,-n).scaleO(i,r).shearO(s).rotateO(u).translateO(o,a).lmultiplyO(this).translateO(e,n)}},{key:"decompose",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,n=this.a,i=this.b,r=this.c,s=this.d,u=this.e,o=this.f,a=n*s-i*r,h=0<a?1:-1,l=h*Math.sqrt(n*n+i*i),c=Math.atan2(h*i,h*n),f=180/Math.PI*c,d=Math.cos(c),v=Math.sin(c),y=(n*r+i*s)/a,p=r*l/(y*n-i)||s*l/(y*i+n);return{scaleX:l,scaleY:p,shear:y,rotate:f,translateX:u-t+t*d*l+e*(y*d*l-v*p),translateY:o-e+t*v*l+e*(y*v*l+d*p),originX:t,originY:e,a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f}}},{key:"multiply",value:function(t){return this.clone().multiplyO(t)}},{key:"multiplyO",value:function(t){var e=t instanceof h?t:new h(t);return h.matrixMultiply(this,e,this)}},{key:"lmultiply",value:function(t){return this.clone().lmultiplyO(t)}},{key:"lmultiplyO",value:function(t){var e=t instanceof h?t:new h(t);return h.matrixMultiply(e,this,this)}},{key:"inverseO",value:function(){var t=this.a,e=this.b,n=this.c,i=this.d,r=this.e,s=this.f,u=t*i-e*n;if(!u)throw new Error("Cannot invert "+this);var o=i/u,a=-e/u,h=-n/u,l=t/u,c=-(o*r+h*s),f=-(a*r+l*s);return this.a=o,this.b=a,this.c=h,this.d=l,this.e=c,this.f=f,this}},{key:"inverse",value:function(){return this.clone().inverseO()}},{key:"translate",value:function(t,e){return this.clone().translateO(t,e)}},{key:"translateO",value:function(t,e){return this.e+=t||0,this.f+=e||0,this}},{key:"scale",value:function(t,e,n,i){var r;return(r=this.clone()).scaleO.apply(r,arguments)}},{key:"scaleO",value:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0,i=3<arguments.length&&void 0!==arguments[3]?arguments[3]:0;3===arguments.length&&(i=n,n=e,e=t);var r=this.a,s=this.b,u=this.c,o=this.d,a=this.e,h=this.f;return this.a=r*t,this.b=s*e,this.c=u*t,this.d=o*e,this.e=a*t-n*t+n,this.f=h*e-i*e+i,this}},{key:"rotate",value:function(t,e,n){return this.clone().rotateO(t,e,n)}},{key:"rotateO",value:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0;t=Ot(t);var i=Math.cos(t),r=Math.sin(t),s=this.a,u=this.b,o=this.c,a=this.d,h=this.e,l=this.f;return this.a=s*i-u*r,this.b=u*i+s*r,this.c=o*i-a*r,this.d=a*i+o*r,this.e=h*i-l*r+n*r-e*i+e,this.f=l*i+h*r-e*r-n*i+n,this}},{key:"flip",value:function(t,e){return this.clone().flipO(t,e)}},{key:"flipO",value:function(t,e){return"x"===t?this.scaleO(-1,1,e,0):"y"===t?this.scaleO(1,-1,0,e):this.scaleO(-1,-1,t,e||t)}},{key:"shear",value:function(t,e,n){return this.clone().shearO(t,e,n)}},{key:"shearO",value:function(t){var e=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0,n=this.a,i=this.b,r=this.c,s=this.d,u=this.e,o=this.f;return this.a=n+i*t,this.c=r+s*t,this.e=u+o*t-e*t,this}},{key:"skew",value:function(t,e,n,i){var r;return(r=this.clone()).skewO.apply(r,arguments)}},{key:"skewO",value:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0,i=3<arguments.length&&void 0!==arguments[3]?arguments[3]:0;3===arguments.length&&(i=n,n=e,e=t),t=Ot(t),e=Ot(e);var r=Math.tan(t),s=Math.tan(e),u=this.a,o=this.b,a=this.c,h=this.d,l=this.e,c=this.f;return this.a=u+o*r,this.b=o+u*s,this.c=a+h*r,this.d=h+a*s,this.e=l+c*r-i*r,this.f=c+l*s-n*s,this}},{key:"skewX",value:function(t,e,n){return this.skew(t,0,e,n)}},{key:"skewXO",value:function(t,e,n){return this.skewO(t,0,e,n)}},{key:"skewY",value:function(t,e,n){return this.skew(0,t,e,n)}},{key:"skewYO",value:function(t,e,n){return this.skewO(0,t,e,n)}},{key:"aroundO",value:function(t,e,n){var i=t||0,r=e||0;return this.translateO(-i,-r).lmultiplyO(n).translateO(i,r)}},{key:"around",value:function(t,e,n){return this.clone().aroundO(t,e,n)}},{key:"native",value:function(){for(var t=Lt().svg.node.createSVGMatrix(),e=B.length-1;0<=e;e--)t[B[e]]=this[B[e]];return t}},{key:"equals",value:function(t){var e=new h(t);return Q(this.a,e.a)&&Q(this.b,e.b)&&Q(this.c,e.c)&&Q(this.d,e.d)&&Q(this.e,e.e)&&Q(this.f,e.f)}},{key:"toString",value:function(){return"matrix("+this.a+","+this.b+","+this.c+","+this.d+","+this.e+","+this.f+")"}},{key:"toArray",value:function(){return[this.a,this.b,this.c,this.d,this.e,this.f]}},{key:"valueOf",value:function(){return{a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f}}}],[{key:"formatTransforms",value:function(t){var e="both"===t.flip||!0===t.flip,n=t.flip&&(e||"x"===t.flip)?-1:1,i=t.flip&&(e||"y"===t.flip)?-1:1,r=t.skew&&t.skew.length?t.skew[0]:isFinite(t.skew)?t.skew:isFinite(t.skewX)?t.skewX:0,s=t.skew&&t.skew.length?t.skew[1]:isFinite(t.skew)?t.skew:isFinite(t.skewY)?t.skewY:0,u=t.scale&&t.scale.length?t.scale[0]*n:isFinite(t.scale)?t.scale*n:isFinite(t.scaleX)?t.scaleX*n:n,o=t.scale&&t.scale.length?t.scale[1]*i:isFinite(t.scale)?t.scale*i:isFinite(t.scaleY)?t.scaleY*i:i,a=t.shear||0,h=t.rotate||t.theta||0,l=new Ft(t.origin||t.around||t.ox||t.originX,t.oy||t.originY),c=l.x,f=l.y,d=new Ft(t.position||t.px||t.positionX,t.py||t.positionY),v=d.x,y=d.y,p=new Ft(t.translate||t.tx||t.translateX,t.ty||t.translateY),m=p.x,g=p.y,w=new Ft(t.relative||t.rx||t.relativeX,t.ry||t.relativeY);return{scaleX:u,scaleY:o,skewX:r,skewY:s,shear:a,theta:h,rx:w.x,ry:w.y,tx:m,ty:g,ox:c,oy:f,px:v,py:y}}},{key:"matrixMultiply",value:function(t,e,n){var i=t.a*e.a+t.c*e.b,r=t.b*e.a+t.d*e.b,s=t.a*e.c+t.c*e.d,u=t.b*e.c+t.d*e.d,o=t.e+t.a*e.e+t.c*e.f,a=t.f+t.b*e.e+t.d*e.f;return n.a=i,n.b=r,n.c=s,n.d=u,n.e=o,n.f=a,n}}]),h}();kt({Element:{ctm:function(){return new Oe(this.node.getCTM())},screenCTM:function(){if("function"!=typeof this.isRoot||this.isRoot())return new Oe(this.node.getScreenCTM());var t=this.rect(1,1),e=t.node.getScreenCTM();return t.remove(),new Oe(e)}}});for(var Ae=D("PathArray",lt),Ce={M:function(t,e,n){return e.x=n.x=t[0],e.y=n.y=t[1],["M",e.x,e.y]},L:function(t,e){return e.x=t[0],e.y=t[1],["L",t[0],t[1]]},H:function(t,e){return e.x=t[0],["H",t[0]]},V:function(t,e){return e.y=t[0],["V",t[0]]},C:function(t,e){return e.x=t[4],e.y=t[5],["C",t[0],t[1],t[2],t[3],t[4],t[5]]},S:function(t,e){return e.x=t[2],e.y=t[3],["S",t[0],t[1],t[2],t[3]]},Q:function(t,e){return e.x=t[2],e.y=t[3],["Q",t[0],t[1],t[2],t[3]]},T:function(t,e){return e.x=t[0],e.y=t[1],["T",t[0],t[1]]},Z:function(t,e,n){return e.x=n.x,e.y=n.y,["Z"]},A:function(t,e){return e.x=t[5],e.y=t[6],["A",t[0],t[1],t[2],t[3],t[4],t[5],t[6]]}},je="mlhvqtcsaz".split(""),Me=0,Se=je.length;Me<Se;++Me)Ce[je[Me]]=function(s){return function(t,e,n){if("H"===s)t[0]=t[0]+e.x;else if("V"===s)t[0]=t[0]+e.y;else if("A"===s)t[5]=t[5]+e.x,t[6]=t[6]+e.y;else for(var i=0,r=t.length;i<r;++i)t[i]=t[i]+(i%2?e.y:e.x);return Ce[s](t,e,n)}}(je[Me].toUpperCase());at(Ae,{toString:function(){return function(t){for(var e=0,n=t.length,i="";e<n;e++)i+=t[e][0],null!=t[e][1]&&(i+=t[e][1],null!=t[e][2]&&(i+=" ",i+=t[e][2],null!=t[e][3]&&(i+=" ",i+=t[e][3],i+=" ",i+=t[e][4],null!=t[e][5]&&(i+=" ",i+=t[e][5],i+=" ",i+=t[e][6],null!=t[e][7]&&(i+=" ",i+=t[e][7])))));return i+" "}(this)},move:function(t,e){var n=this.bbox();if(t-=n.x,e-=n.y,!isNaN(t)&&!isNaN(e))for(var i,r=this.length-1;0<=r;r--)"M"===(i=this[r][0])||"L"===i||"T"===i?(this[r][1]+=t,this[r][2]+=e):"H"===i?this[r][1]+=t:"V"===i?this[r][1]+=e:"C"===i||"S"===i||"Q"===i?(this[r][1]+=t,this[r][2]+=e,this[r][3]+=t,this[r][4]+=e,"C"===i&&(this[r][5]+=t,this[r][6]+=e)):"A"===i&&(this[r][6]+=t,this[r][7]+=e);return this},size:function(t,e){var n,i,r=this.bbox();for(n=this.length-1;0<=n;n--)"M"===(i=this[n][0])||"L"===i||"T"===i?(this[n][1]=(this[n][1]-r.x)*t/r.width+r.x,this[n][2]=(this[n][2]-r.y)*e/r.height+r.y):"H"===i?this[n][1]=(this[n][1]-r.x)*t/r.width+r.x:"V"===i?this[n][1]=(this[n][1]-r.y)*e/r.height+r.y:"C"===i||"S"===i||"Q"===i?(this[n][1]=(this[n][1]-r.x)*t/r.width+r.x,this[n][2]=(this[n][2]-r.y)*e/r.height+r.y,this[n][3]=(this[n][3]-r.x)*t/r.width+r.x,this[n][4]=(this[n][4]-r.y)*e/r.height+r.y,"C"===i&&(this[n][5]=(this[n][5]-r.x)*t/r.width+r.x,this[n][6]=(this[n][6]-r.y)*e/r.height+r.y)):"A"===i&&(this[n][1]=this[n][1]*t/r.width,this[n][2]=this[n][2]*e/r.height,this[n][6]=(this[n][6]-r.x)*t/r.width+r.x,this[n][7]=(this[n][7]-r.y)*e/r.height+r.y);return this},equalCommands:function(t){var e,n,i;for(t=new Ae(t),i=this.length===t.length,e=0,n=this.length;i&&e<n;e++)i=this[e][0]===t[e][0];return i},morph:function(t){return t=new Ae(t),this.equalCommands(t)?this.destination=t:this.destination=null,this},at:function(t){if(!this.destination)return this;var e,n,i,r,s=this,u=this.destination.value,o=[],a=new Ae;for(e=0,n=s.length;e<n;e++){for(o[e]=[s[e][0]],i=1,r=s[e].length;i<r;i++)o[e][i]=s[e][i]+(u[e][i]-s[e][i])*t;"A"===o[e][0]&&(o[e][4]=+(0!==o[e][4]),o[e][5]=+(0!==o[e][5]))}return a.value=o,a},parse:function(){var t,e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[["M",0,0]];if(e instanceof Ae)return e;var n={M:2,L:2,H:1,V:1,C:6,S:4,Q:4,T:2,A:7,Z:0};e="string"==typeof e?e.replace(T,I).replace(M," $& ").replace(j,"$1 -").trim().split(C):e.reduce(function(t,e){return[].concat.call(t,e)},[]);for(var i=[],r=new Ft,s=new Ft,u=0,o=e.length;S.test(e[u])?(t=e[u],++u):"M"===t?t="L":"m"===t&&(t="l"),i.push(Ce[t].call(null,e.slice(u,u+=n[t.toUpperCase()]).map(parseFloat),r,s)),u<o;);return i},bbox:function(){return Lt().path.setAttribute("d",this.toString()),Lt.nodes.path.getBBox()}});var Te=function(){function e(t){o(this,e),this._stepper=t||new re("-"),this._from=null,this._to=null,this._type=null,this._context=null,this._morphObj=null}return a(e,[{key:"from",value:function(t){return null==t?this._from:(this._from=this._set(t),this)}},{key:"to",value:function(t){return null==t?this._to:(this._to=this._set(t),this)}},{key:"type",value:function(t){return null==t?this._type:(this._type=t,this)}},{key:"_set",value:function(t){if(!this._type){var e=l(t);"number"===e?this.type(ct):"string"===e?Tt.isColor(t)?this.type(Tt):C.test(t)?this.type(M.test(t)?Ae:lt):v.test(t)?this.type(ct):this.type(Ee):-1<Pe.indexOf(t.constructor)?this.type(t.constructor):Array.isArray(t)?this.type(lt):"object"===e?this.type(De):this.type(Ee)}var n=new this._type(t).toArray();return this._morphObj=this._morphObj||new this._type,this._context=this._context||Array.apply(null,Array(n.length)).map(Object),n}},{key:"stepper",value:function(t){return null==t?this._stepper:(this._stepper=t,this)}},{key:"done",value:function(){return this._context.map(this._stepper.done).reduce(function(t,e){return t&&e},!0)}},{key:"at",value:function(n){var i=this;return this._morphObj.fromArray(this._from.map(function(t,e){return i._stepper.step(t,i._to[e],n,i._context[e],i._context)}))}}]),e}(),Ee=function(){function t(){o(this,t),this.init.apply(this,arguments)}return a(t,[{key:"init",value:function(t){t=Array.isArray(t)?t[0]:t,this.value=t}},{key:"valueOf",value:function(){return this.value}},{key:"toArray",value:function(){return[this.value]}}]),t}(),Ne=function(){function e(){o(this,e),this.init.apply(this,arguments)}return a(e,[{key:"init",value:function(t){Array.isArray(t)&&(t={scaleX:t[0],scaleY:t[1],shear:t[2],rotate:t[3],translateX:t[4],translateY:t[5],originX:t[6],originY:t[7]}),Object.assign(this,e.defaults,t)}},{key:"toArray",value:function(){var t=this;return[t.scaleX,t.scaleY,t.shear,t.rotate,t.translateX,t.translateY,t.originX,t.originY]}}]),e}();Ne.defaults={scaleX:1,scaleY:1,shear:0,rotate:0,translateX:0,translateY:0,originX:0,originY:0};var De=function(){function t(){o(this,t),this.init.apply(this,arguments)}return a(t,[{key:"init",value:function(t){if(this.values=[],Array.isArray(t))this.values=t;else{var e=Object.entries(t||{}).sort(function(t,e){return t[0]-e[0]});this.values=e.reduce(function(t,e){return t.concat(e)},[])}}},{key:"valueOf",value:function(){for(var t={},e=this.values,n=0,i=e.length;n<i;n+=2)t[e[n]]=e[n+1];return t}},{key:"toArray",value:function(){return this.values}}]),t}(),Pe=[Ee,Ne,De];var ze=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("path",t),e))}return r(e,Yt),a(e,[{key:"array",value:function(){return this._array||(this._array=new Ae(this.attr("d")))}},{key:"plot",value:function(t){return null==t?this.array():this.clear().attr("d","string"==typeof t?t:this._array=new Ae(t))}},{key:"clear",value:function(){return delete this._array,this}},{key:"move",value:function(t,e){return this.attr("d",this.array().move(t,e))}},{key:"x",value:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)}},{key:"y",value:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)}},{key:"size",value:function(t,e){var n=G(this,t,e);return this.attr("d",this.array().size(n.width,n.height))}},{key:"width",value:function(t){return null==t?this.bbox().width:this.size(t,this.bbox().height)}},{key:"height",value:function(t){return null==t?this.bbox().height:this.size(this.bbox().width,t)}},{key:"targets",value:function(){return Zt('svg textpath [href*="'+this.id()+'"]')}}]),e}();ze.prototype.MorphArray=Ae,kt({Container:{path:function(t){return this.put(new ze).plot(t||new Ae)}}}),tt(ze);var Re=Object.freeze({array:function(){return this._array||(this._array=new ge(this.attr("points")))},plot:function(t){return null==t?this.array():this.clear().attr("points","string"==typeof t?t:this._array=new ge(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var n=G(this,t,e);return this.attr("points",this.array().size(n.width,n.height))}}),qe=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("polygon",t),e))}return r(e,Yt),e}();kt({Container:{polygon:function(t){return this.put(new qe).plot(t||new ge)}}}),at(qe,ke),at(qe,Re),tt(qe);var Le=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("polyline",t),e))}return r(e,Yt),e}();kt({Container:{polyline:function(t){return this.put(new Le).plot(t||new ge)}}}),at(Le,ke),at(Le,Re),tt(Le);var Fe=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("rect",t),e))}return r(e,Yt),a(e,[{key:"rx",value:function(t){return this.attr("rx",t)}},{key:"ry",value:function(t){return this.attr("ry",t)}}]),e}();kt({Container:{rect:function(t,e){return this.put(new Fe).size(t,e)}}}),tt(Fe);var Ie=window.performance||Date,Xe=function(t){var e=t.start,n=t.runner.duration();return{start:e,duration:n,end:e+n,runner:t.runner}},Ye=function(){function t(){o(this,t),this._timeSource=function(){return Ie.now()},this._dispatcher=document.createElement("div"),this._startTime=0,this._speed=1,this._reverse=!1,this._persist=0,this._nextFrame=null,this._paused=!1,this._runners=[],this._order=[],this._time=0,this._lastSourceTime=0,this._lastStepTime=0}return a(t,[{key:"getEventTarget",value:function(){return this._dispatcher}},{key:"schedule",value:function(t,e,n){if(null==t)return this._runners.map(Xe).sort(function(t,e){return t.start-e.start||t.duration-e.duration});this.active()||(this._step(),null==n&&(n="now"));var i=0;if(e=e||0,null==n||"last"===n||"after"===n)i=this._startTime;else if("absolute"===n||"start"===n)i=e,e=0;else if("now"===n)i=this._time;else{if("relative"!==n)throw new Error('Invalid value for the "when" parameter');var r=this._runners[t.id];r&&(i=r.start+e,e=0)}return t.unschedule(),t.timeline(this),t.time(-e),this._startTime=i+t.duration()+e,this._runners[t.id]={persist:this.persist(),runner:t,start:i},this._order.push(t.id),this._continue(),this}},{key:"unschedule",value:function(t){var e=this._order.indexOf(t.id);return e<0||(delete this._runners[t.id],this._order.splice(e,1),t.timeline(null)),this}},{key:"play",value:function(){return this._paused=!1,this._continue()}},{key:"pause",value:function(){return this._nextFrame=null,this._paused=!0,this}},{key:"stop",value:function(){return this.seek(-this._time),this.pause()}},{key:"finish",value:function(){return this.seek(1/0),this.pause()}},{key:"speed",value:function(t){return null==t?this._speed:(this._speed=t,this)}},{key:"reverse",value:function(t){var e=this.speed();if(null==t)return this.speed(-e);var n=Math.abs(e);return this.speed(t?n:-n)}},{key:"seek",value:function(t){return this._time+=t,this._continue()}},{key:"time",value:function(t){return null==t?this._time:(this._time=t,this)}},{key:"persist",value:function(t){return null==t?this._persist:(this._persist=t,this)}},{key:"source",value:function(t){return null==t?this._timeSource:(this._timeSource=t,this)}},{key:"_step",value:function(){if(!this._paused){var t=this._timeSource(),e=t-this._lastSourceTime,n=this._speed*e+(this._time-this._lastStepTime);this._lastSourceTime=t,this._time+=n,this._lastStepTime=this._time;for(var i=!1,r=0,s=this._order.length;r<s;r++){var u=this._runners[this._order[r]],o=u.runner,a=n,h=this._time-u.start;if(h<0)i=!0;else if(h<a&&(a=h),o.active())if(o.step(a).done){if(!0!==u.persist){o.duration()-o.time()+this._time+this._persist<this._time&&(delete this._runners[this._order[r]],this._order.splice(r--,1)&&--s,o.timeline(null))}}else i=!0}return this._nextFrame=i?d.frame(this._step.bind(this)):null,this}}},{key:"_continue",value:function(){return this._paused||this._nextFrame||(this._nextFrame=d.frame(this._step.bind(this))),this}},{key:"active",value:function(){return!!this._nextFrame}}]),t}();kt({Element:{timeline:function(){return this._timeline=this._timeline||new Ye,this._timeline}}});var He=function(t){function s(t){var e;return o(this,s),(e=h(this,u(s).call(this))).id=s.id++,t="function"==typeof(t=null==t?jt.duration:t)?new se(t):t,e._element=null,e._timeline=null,e.done=!1,e._queue=[],e._duration="number"==typeof t&&t,e._isDeclarative=t instanceof se,e._stepper=e._isDeclarative?t:new re,e._history={},e.enabled=!0,e._time=0,e._last=0,e.transforms=new Oe,e.transformId=1,e._haveReversed=!1,e._reverse=!1,e._loopsDone=0,e._swing=!1,e._wait=0,e._times=1,e}return r(s,xt),a(s,[{key:"element",value:function(t){return null==t?this._element:((this._element=t)._prepareRunner(),this)}},{key:"timeline",value:function(t){return void 0===t?this._timeline:(this._timeline=t,this)}},{key:"animate",value:function(t,e,n){var i=s.sanitise(t,e,n),r=new s(i.duration);return this._timeline&&r.timeline(this._timeline),this._element&&r.element(this._element),r.loop(i).schedule(e,n)}},{key:"schedule",value:function(t,e,n){if(t instanceof Ye||(n=e,e=t,t=this.timeline()),!t)throw Error("Runner cannot be scheduled without timeline");return t.schedule(this,e,n),this}},{key:"unschedule",value:function(){var t=this.timeline();return t&&t.unschedule(this),this}},{key:"loop",value:function(t,e,n){return"object"===l(t)&&(e=t.swing,n=t.wait,t=t.times),this._times=t||1/0,this._swing=e||!1,this._wait=n||0,this}},{key:"delay",value:function(t){return this.animate(0,t)}},{key:"queue",value:function(t,e,n){return this._queue.push({initialiser:t||Ct,runner:e||Ct,isTransform:n,initialised:!1,finished:!1}),this.timeline()&&this.timeline()._continue(),this}},{key:"during",value:function(t){return this.queue(null,t)}},{key:"after",value:function(t){return this.on("finish",t)}},{key:"time",value:function(t){if(null==t)return this._time;var e=t-this._time;return this.step(e),this}},{key:"duration",value:function(){return this._times*(this._wait+this._duration)-this._wait}},{key:"loops",value:function(t){var e=this._duration+this._wait;if(null==t){var n=Math.floor(this._time/e),i=(this._time-n*e)/this._duration;return Math.min(n+i,this._times)}var r=t%1,s=e*Math.floor(t)+this._duration*r;return this.time(s)}},{key:"position",value:function(t){var e,n=this._time,r=this._duration,s=this._wait,i=this._times,u=this._swing,o=this._reverse;if(null==t){var a=function(t){var e=u*Math.floor(t%(2*(s+r))/(s+r)),n=e&&!o||!e&&o,i=Math.pow(-1,n)*(t%(s+r))/r+n;return Math.max(Math.min(i,1),0)},h=i*(s+r)-s;return e=n<=0?Math.round(a(1e-5)):n<h?a(n):Math.round(a(h-1e-5)),e}var l=Math.floor(this.loops()),c=u&&l%2==0;return e=l+(c&&!o||o&&c?t:1-t),this.loops(e)}},{key:"progress",value:function(t){return null==t?Math.min(1,this._time/this.duration()):this.time(t*this.duration())}},{key:"step",value:function(t){if(!this.enabled)return this;t=null==t?16:t,this._time+=t;var e=this.position(),n=this._lastPosition!==e&&0<=this._time;this._lastPosition=e;var i=this.duration(),r=this._lastTime<0&&0<this._time,s=this._lastTime<this._time&&this.time>i;this._lastTime=this._time,r&&this.fire("start",this);var u=this._isDeclarative;if(this.done=!u&&!s&&this._time>=i,n||u){this._initialise(n),this.transforms=new Oe;var o=this._run(u?t:e);this.fire("step",this)}return this.done=this.done||o&&u,this.done&&this.fire("finish",this),this}},{key:"finish",value:function(){return this.step(1/0)}},{key:"reverse",value:function(t){return this._reverse=null==t?!this._reverse:t,this}},{key:"ease",value:function(t){return this._stepper=new re(t),this}},{key:"active",value:function(t){return null==t?this.enabled:(this.enabled=t,this)}},{key:"_rememberMorpher",value:function(t,e){this._history[t]={morpher:e,caller:this._queue[this._queue.length-1]}}},{key:"_tryRetarget",value:function(t,e){if(this._history[t]){if(!this._history[t].caller.initialised){var n=this._queue.indexOf(this._history[t].caller);return this._queue.splice(n,1),!1}this._history[t].caller.isTransform?this._history[t].caller.isTransform(e):this._history[t].morpher.to(e),this._history[t].caller.finished=!1;var i=this.timeline();return i&&i._continue(),!0}return!1}},{key:"_initialise",value:function(t){if(t||this._isDeclarative)for(var e=0,n=this._queue.length;e<n;++e){var i=this._queue[e],r=this._isDeclarative||!i.initialised&&t;t=!i.finished,r&&t&&(i.initialiser.call(this),i.initialised=!0)}}},{key:"_run",value:function(t){for(var e=!0,n=0,i=this._queue.length;n<i;++n){var r=this._queue[n],s=r.runner.call(this,t);r.finished=r.finished||!0===s,e=e&&r.finished}return e}},{key:"addTransform",value:function(t,e){return this.transforms.lmultiplyO(t),this}},{key:"clearTransform",value:function(){return this.transforms=new Oe,this}}],[{key:"sanitise",value:function(t,e,n){var i=1,r=!1,s=0;return e=e||jt.delay,n=n||"last","object"!==l(t=t||jt.duration)||t instanceof ie||(e=t.delay||e,n=t.when||n,r=t.swing||r,i=t.times||i,s=t.wait||s,t=t.duration||jt.duration),{duration:t,delay:e,swing:r,times:i,wait:s,when:n}}}]),s}();He.id=0;var Ge=function t(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:new Oe,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:-1,i=!(2<arguments.length&&void 0!==arguments[2])||arguments[2];o(this,t),this.transforms=e,this.id=n,this.done=i};at([He,Ge],{mergeWith:function(t){return new Ge(t.transforms.lmultiply(this.transforms),t.id)}});var Ve=function(t,e){return t.lmultiplyO(e)},Be=function(t){return t.transforms};var Qe=function(){function t(){o(this,t),this.runners=[],this.ids=[]}return a(t,[{key:"add",value:function(t){if(!this.runners.includes(t)){var n=t.id+1,e=this.ids.reduce(function(t,e){return t<e&&e<n?e:t},0),i=this.ids.indexOf(e)+1;return this.ids.splice(i,0,n),this.runners.splice(i,0,t),this}}},{key:"getByID",value:function(t){return this.runners[this.ids.indexOf(t+1)]}},{key:"remove",value:function(t){var e=this.ids.indexOf(t+1);return this.ids.splice(e,1),this.runners.splice(e,1),this}},{key:"merge",value:function(){var n=this,i=null;return this.runners.forEach(function(t,e){i&&t.done&&i.done&&(n.remove(t.id),n.edit(i.id,t.mergeWith(i))),i=t}),this}},{key:"edit",value:function(t,e){var n=this.ids.indexOf(t+1);return this.ids.splice(n,1,t),this.runners.splice(n,1,e),this}},{key:"length",value:function(){return this.ids.length}},{key:"clearBefore",value:function(t){var e=this.ids.indexOf(t+1)||1;return this.ids.splice(0,e,0),this.runners.splice(0,e,new Ge),this}}]),t}(),Ue=0;kt({Element:{animate:function(t,e,n){var i=He.sanitise(t,e,n),r=this.timeline();return new He(i.duration).loop(i).element(this).timeline(r).schedule(e,n)},delay:function(t,e){return this.animate(0,t,e)},_clearTransformRunnersBefore:function(t){this._transformationRunners.clearBefore(t.id)},_currentTransform:function(e){return this._transformationRunners.runners.filter(function(t){return t.id<=e.id}).map(Be).reduce(Ve,new Oe)},addRunner:function(t){this._transformationRunners.add(t),d.transform_frame(function(){var t=this._transformationRunners.runners.map(Be).reduce(Ve,new Oe);this.transform(t),this._transformationRunners.merge(),1===this._transformationRunners.length()&&(this._frameId=null)}.bind(this),this._frameId)},_prepareRunner:function(){null==this._frameId&&(this._transformationRunners=(new Qe).add(new Ge(new Oe(this))),this._frameId=Ue++)}}}),at(He,{attr:function(t,e){return this.styleAttr("attr",t,e)},css:function(t,e){return this.styleAttr("css",t,e)},styleAttr:function(e,n,t){if("object"===l(n))for(var i in t)this.styleAttr(e,i,t[i]);var r=new Te(this._stepper).to(t);return this.queue(function(){r=r.from(this.element()[e](n))},function(t){return this.element()[e](n,r.at(t)),r.done()}),this},zoom:function(t,e){var n=new Te(this._stepper).to(new ct(t));return this.queue(function(){n=n.from(this.zoom())},function(t){return this.element().zoom(n.at(t),e),n.done()}),this},transform:function(d,v,y){if(v=d.relative||v,this._isDeclarative&&!v&&this._tryRetarget("transform",d))return this;var p=U(d);y=null!=d.affine?d.affine:null!=y?y:!p;var m,g,w,k,b,x=(new Te).type(y?Ne:Oe).stepper(this._stepper);return this.queue(function(){g=g||this.element(),m=m||$(d,g),b=new Oe(v?void 0:g),g.addRunner(this),v||g._clearTransformRunnersBefore(this)},function(t){v||this.clearTransform();var e=new Ft(m).transform(g._currentTransform(this)),n=e.x,i=e.y,r=new Oe(_({},d,{origin:[n,i]})),s=this._isDeclarative&&w?w:b;if(y){r=r.decompose(n,i),s=s.decompose(n,i);var u=r.rotate,o=s.rotate,a=[u-360,u,u+360],h=a.map(function(t){return Math.abs(t-o)}),l=Math.min.apply(Math,O(h)),c=h.indexOf(l);r.rotate=a[c]}v&&(p||(r.rotate=d.rotate||0),this._isDeclarative&&k&&(s.rotate=k)),x.from(s),x.to(r);var f=x.at(t);return k=f.rotate,w=new Oe(f),this.addTransform(w),x.done()},function(t){(t.origin||"center").toString()!==(d.origin||"center").toString()&&(m=$(d,g)),d=_({},t,{origin:m})}),this._isDeclarative&&this._rememberMorpher("transform",x),this},x:function(t,e){return this._queueNumber("x",t)},y:function(t){return this._queueNumber("y",t)},dx:function(t){return this._queueNumberDelta("dx",t)},dy:function(t){return this._queueNumberDelta("dy",t)},_queueNumberDelta:function(e,n){if(n=new ct(n),this._tryRetargetDelta(e,n))return this;var i=new Te(this._stepper).to(n);return this.queue(function(){var t=this.element()[e]();i.from(t),i.to(t+n)},function(t){return this.element()[e](i.at(t)),i.done()}),this._rememberMorpher(e,i),this},_queueObject:function(e,t){if(this._tryRetarget(e,t))return this;var n=new Te(this._stepper).to(t);return this.queue(function(){n.from(this.element()[e]())},function(t){return this.element()[e](n.at(t)),n.done()}),this._rememberMorpher(e,n),this},_queueNumber:function(t,e){return this._queueObject(t,new ct(e))},cx:function(t){return this._queueNumber("cx",t)},cy:function(t){return this._queueNumber("cy",t)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},size:function(t,e){var n;return t&&e||(n=this._element.bbox()),t||(t=n.width/n.height*e),e||(e=n.height/n.width*t),this.width(t).height(e)},width:function(t){return this._queueNumber("width",t)},height:function(t){return this._queueNumber("height",t)},plot:function(t,e,n,i){return 4===arguments.length?this.plot([t,e,n,i]):this._queueObject("plot",new this._element.MorphArray(t))},leading:function(t){return this._queueNumber("leading",t)},viewbox:function(t,e,n,i){return this._queueObject("viewbox",new It(t,e,n,i))},update:function(t){return"object"!==l(t)?this.update({offset:t,color:arguments[1],opacity:arguments[2]}):(null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",t.offset),this)}});var $e=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("symbol",t),e))}return r(e,Pt),e}();kt({Container:{symbol:function(){return this.put(new $e)}}}),tt($e);var We=Object.freeze({plain:function(t){return!1===this._build&&this.clear(),this.node.appendChild(document.createTextNode(t)),this},length:function(){return this.node.getComputedTextLength()}}),Je=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this,ut("text",t),n))).dom.leading=new ct(1.3),e._rebuild=!0,e._build=!1,e.attr("font-family",Mt["font-family"]),e}return r(n,Yt),a(n,[{key:"x",value:function(t){return null==t?this.attr("x"):this.attr("x",t)}},{key:"y",value:function(t){var e=this.attr("y"),n="number"==typeof e?e-this.bbox().y:0;return null==t?"number"==typeof e?e-n:e:this.attr("y","number"==typeof t?t+n:t)}},{key:"cx",value:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)}},{key:"cy",value:function(t){return null==t?this.bbox().cy:this.y(t-this.bbox().height/2)}},{key:"text",value:function(t){if(void 0===t){var e=this.node.childNodes,n=0;t="";for(var i=0,r=e.length;i<r;++i)"textPath"!==e[i].nodeName?(i!==n&&3!==e[i].nodeType&&!0===K(e[i]).dom.newLined&&(t+="\n"),t+=e[i].textContent):0===i&&(n=1);return t}if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else for(var s=0,u=(t=t.split("\n")).length;s<u;s++)this.tspan(t[s]).newLine();return this.build(!1).rebuild()}},{key:"leading",value:function(t){return null==t?this.dom.leading:(this.dom.leading=new ct(t),this.rebuild())}},{key:"rebuild",value:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this,n=0,i=this.dom.leading*new ct(this.attr("font-size"));this.each(function(){this.dom.newLined&&(this.attr("x",e.attr("x")),"\n"===this.text()?n+=i:(this.attr("dy",i+n),n=0))}),this.fire("rebuild")}return this}},{key:"build",value:function(t){return this._build=!!t,this}},{key:"setData",value:function(t){return this.dom=t,this.dom.leading=new ct(t.leading||1.3),this}}]),n}();at(Je,We),kt({Container:{text:function(t){return this.put(new Je).text(t)},plain:function(t){return this.put(new Je).plain(t)}}}),tt(Je);var Ze=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("textPath",t),e))}return r(e,Je),a(e,[{key:"array",value:function(){var t=this.track();return t?t.array():null}},{key:"plot",value:function(t){var e=this.track(),n=null;return e&&(n=e.plot(t)),null==t?n:this}},{key:"track",value:function(){return this.reference("href")}}]),e}();kt({Container:{textPath:function(t,e){return this.defs().path(e).text(t).addTo(this)}},Text:{path:function(t){var e=new Ze;return t instanceof ze||(t=this.doc().defs().path(t)),e.attr("href","#"+t,R),this.put(e)},textPath:function(){return this.find("textPath")}},Path:{text:function(t){if(t instanceof Je){var e=t.text();return t.clear().path(this).text(e)}return this.parent().put(new Je).path(this).text(t)}}}),Ze.prototype.MorphArray=Ae,tt(Ze);var Ke=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("tspan",t),e))}return r(e,Je),a(e,[{key:"text",value:function(t){return null==t?this.node.textContent+(this.dom.newLined?"\n":""):("function"==typeof t?t.call(this,this):this.plain(t),this)}},{key:"dx",value:function(t){return this.attr("dx",t)}},{key:"dy",value:function(t){return this.attr("dy",t)}},{key:"newLine",value:function(){var t=this.parent(Je);return this.dom.newLined=!0,this.dy(t.dom.leading*t.attr("font-size")).attr("x",t.x())}}]),e}();at(Ke,We),kt({Tspan:{tspan:function(t){var e=new Ke;return this._build||this.clear(),this.node.appendChild(e.node),e.text(t)}}}),tt(Ke);var tn=function(t){function e(t){return o(this,e),h(this,u(e).call(this,ut("use",t),e))}return r(e,Yt),a(e,[{key:"element",value:function(t,e){return this.attr("href",(e||"")+"#"+t,R)}}]),e}();kt({Container:{use:function(t,e){return this.put(new tn).element(t,e)}}}),tt(tn);var en=Object.freeze({Animator:d,SVGArray:lt,Bare:zt,Box:It,Circle:Jt,ClipPath:te,Color:Tt,Container:Pt,Controller:se,Ease:re,PID:ae,Spring:oe,Defs:Rt,Doc:qt,Dom:Et,Element:Dt,Ellipse:he,EventTarget:xt,Gradient:fe,G:de,HtmlNode:ve,A:ye,Image:me,Line:be,Marker:xe,Mask:_e,Matrix:Oe,Morphable:Te,SVGNumber:ct,Path:ze,PathArray:Ae,Pattern:pe,Point:Ft,PointArray:ge,Polygon:qe,Polyline:Le,Queue:t,Rect:Fe,Runner:He,Shape:Yt,Stop:le,Symbol:$e,Text:Je,TextPath:Ze,Timeline:Ye,Tspan:Ke,Use:tn});kt("Dom",{siblings:function(){return this.parent().children()},position:function(){return this.parent().index(this)},next:function(){return this.siblings()[this.position()+1]},prev:function(){return this.siblings()[this.position()-1]},forward:function(){var t=this.position()+1,e=this.parent();return e.removeElement(this).add(this,t),"function"==typeof e.isRoot&&e.isRoot()&&e.node.appendChild(e.defs().node),this},backward:function(){var t=this.position();return 0<t&&this.parent().removeElement(this).add(this,t-1),this},front:function(){var t=this.parent();return t.node.appendChild(this.node),"function"==typeof t.isRoot&&t.isRoot()&&t.node.appendChild(t.defs().node),this},back:function(){return 0<this.position()&&this.parent().removeElement(this).add(this,0),this},before:function(t){t.remove();var e=this.position();return this.parent().add(t,e),this},after:function(t){t.remove();var e=this.position();return this.parent().add(t,e+1),this}}),kt("Dom",{data:function(e,t,n){if("object"===l(e))for(t in e)this.data(t,e[t]);else if(arguments.length<2)try{return JSON.parse(this.attr("data-"+e))}catch(t){return this.attr("data-"+e)}else this.attr("data-"+e,null===t?null:!0===n||"string"==typeof t||"number"==typeof t?t:JSON.stringify(t));return this}}),kt("Dom",{classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(C)},hasClass:function(t){return-1!==this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(e){return this.hasClass(e)&&this.attr("class",this.classes().filter(function(t){return t!==e}).join(" ")),this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)}}),kt("Dom",{css:function(t,e){var n={};if(0===arguments.length)return this.node.style.cssText.split(/\s*;\s*/).filter(function(t){return!!t.length}).forEach(function(t){var e=t.split(/\s*:\s*/);n[e[0]]=e[1]}),n;if(arguments.length<2){if(Array.isArray(t)){var i=!0,r=!1,s=void 0;try{for(var u,o=t[Symbol.iterator]();!(i=(u=o.next()).done);i=!0){var a=X(u.value);n[a]=this.node.style[a]}}catch(t){r=!0,s=t}finally{try{i||null==o.return||o.return()}finally{if(r)throw s}}return n}if("string"==typeof t)return this.node.style[X(t)];if("object"===l(t))for(var h in t)this.node.style[X(h)]=null==t[h]||b.test(t[h])?"":t[h]}return 2===arguments.length&&(this.node.style[X(t)]=null==e||b.test(e)?"":e),this},show:function(){return this.css("display","")},hide:function(){return this.css("display","none")},visible:function(){return"none"!==this.css("display")}}),kt("Element",{untransform:function(){return this.attr("transform",null)},matrixify:function(){return(this.attr("transform")||"").split(e).slice(0,-1).map(function(t){var e=t.trim().split("(");return[e[0],e[1].split(C).map(function(t){return parseFloat(t)})]}).reverse().reduce(function(t,e){return"matrix"===e[0]?t.lmultiply(V(e[1])):t[e[0]].apply(t,e[1])},new Oe)},toParent:function(t){if(this===t)return this;var e=this.screenCTM(),n=t.screenCTM().inverse();return this.addTo(t).untransform().transform(n.multiply(e)),this},toDoc:function(){return this.toParent(this.doc())},transform:function(t,e){if(null==t||"string"==typeof t){var n=new Oe(this).decompose();return n[t]||n}U(t)||(t=_({},t,{origin:$(t,this)}));var i=new Oe(!0===e?this:e||!1).transform(t);return this.attr("transform",i)}}),kt("Dom",{remember:function(t,e){if("object"===l(t))for(var n in t)this.remember(n,t[n]);else{if(1===arguments.length)return this.memory()[t];this.memory()[t]=e}return this},forget:function(){if(0===arguments.length)this._memory={};else for(var t=arguments.length-1;0<=t;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory=this._memory||{}}});var nn={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"===e?t:t+"-"+e}};["fill","stroke"].forEach(function(e){var n,t={};t[e]=function(t){if(void 0===t)return this;if("string"==typeof t||Tt.isRgb(t)||t instanceof Dt)this.attr(e,t);else for(n=nn[e].length-1;0<=n;n--)null!=t[nn[e][n]]&&this.attr(nn.prefix(e,nn[e][n]),t[nn[e][n]]);return this},kt(["Shape","Runner"],t)}),kt(["Element","Runner"],{matrix:function(t,e,n,i,r,s){return null==t?new Oe(this):this.attr("transform",new Oe(t,e,n,i,r,s))},rotate:function(t,e,n){return this.transform({rotate:t,ox:e,oy:n},!0)},skew:function(t,e,n,i){return 1===arguments.length||3===arguments.length?this.transform({skew:t,ox:e,oy:n},!0):this.transform({skew:[t,e],ox:n,oy:i},!0)},shear:function(t,e,n){return this.transform({shear:t,ox:e,oy:n},!0)},scale:function(t,e,n,i){return 1===arguments.length||3===arguments.length?this.transform({scale:t,ox:e,oy:n},!0):this.transform({scale:[t,e],ox:n,oy:i},!0)},translate:function(t,e){return this.transform({translate:[t,e]},!0)},relative:function(t,e){return this.transform({relative:[t,e]},!0)},flip:function(t,e){var n="string"==typeof t?t:(isFinite(t),"both"),i="both"===t&&isFinite(e)?[e,e]:"x"===t?[e,0]:"y"===t?[0,e]:isFinite(t)?[t,t]:[0,0];this.transform({flip:n,origin:i},!0)},opacity:function(t){return this.attr("opacity",t)},dx:function(t){return this.x(new ct(t).plus(this instanceof He?0:this.x()),!0)},dy:function(t){return this.y(new ct(t).plus(this instanceof He?0:this.y()),!0)},dmove:function(t,e){return this.dx(t).dy(e)}}),kt("radius",{radius:function(t,e){var n=(this._element||this).type;return"radialGradient"===n||"radialGradient"===n?this.attr("r",new ct(t)):this.rx(t).ry(null==e?t:e)}}),kt("Path",{length:function(){return this.node.getTotalLength()},pointAt:function(t){return new Ft(this.node.getPointAtLength(t))}}),kt(["Element","Runner"],{font:function(t,e){if("object"===l(t))for(e in t)this.font(e,t[e]);return"leading"===t?this.leading(e):"anchor"===t?this.attr("text-anchor",e):"size"===t||"family"===t||"weight"===t||"stretch"===t||"variant"===t||"style"===t?this.attr("font-"+t,e):this.attr(t,e)}});var rn=at;function sn(t){return Z(t)}return rn([qt,$e,me,pe,xe],bt("viewbox")),rn([be,Le,qe,ze],bt("marker")),rn(Je,bt("Text")),rn(ze,bt("Path")),rn(Rt,bt("Defs")),rn([Je,Ke],bt("Tspan")),rn([Fe,he,Jt,fe],bt("radius")),rn(xt,bt("EventTarget")),rn(Et,bt("Dom")),rn(Dt,bt("Element")),rn(Yt,bt("Shape")),rn(Pt,bt("Container")),function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];Pe.push.apply(Pe,O([].concat(t)))}([ct,Tt,It,Oe,lt,ge,Ae]),at(Pe,{to:function(t,e){return(new Te).type(this.constructor).from(this.valueOf()).to(t,e)},fromArray:function(t){return this.init(t),this}}),Object.assign(sn,en),Object.assign(sn,ht),Object.assign(sn,st),sn.utils=At,sn.regex=N,(sn.get=sn).find=Zt,Object.assign(sn,L),sn.easing=ne,Object.assign(sn,gt),sn.TransformBag=Ne,sn.ObjectBag=De,sn.NonMorphable=Ee,sn.parser=Lt,sn.defaults=St,sn}();
+var SVG=function(){"use strict";function l(t){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function a(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function _(r){for(var t=1;t<arguments.length;t++){var s=null!=arguments[t]?arguments[t]:{},e=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(s).filter(function(t){return Object.getOwnPropertyDescriptor(s,t).enumerable}))),e.forEach(function(t){var e,n,i;e=r,i=s[n=t],n in e?Object.defineProperty(e,n,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[n]=i})}return r}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&n(t,e)}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function h(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?s(t):e}function c(t,e,n){return(c="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var i=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=u(t)););return t}(t,e);if(i){var r=Object.getOwnPropertyDescriptor(i,e);return r.get?r.get.call(n):r.value}})(t,e,n||t)}function f(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,r=!1,s=void 0;try{for(var u,o=t[Symbol.iterator]();!(i=(u=o.next()).done)&&(n.push(u.value),!e||n.length!==e);i=!0);}catch(t){r=!0,s=t}finally{try{i||null==o.return||o.return()}finally{if(r)throw s}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function O(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var d={};function v(t,e){if(Array.isArray(t)){var n=!0,i=!1,r=void 0;try{for(var s,u=t[Symbol.iterator]();!(n=(s=u.next()).done);n=!0){v(s.value,e)}}catch(t){i=!0,r=t}finally{try{n||null==u.return||u.return()}finally{if(i)throw r}}}else if("object"!==l(t))d[t]=Object.assign(d[t]||{},e);else for(var o=Object.entries(t),a=0;a<o.length;a++){var h=f(o[a],2);v(h[0],h[1])}}function t(t){return d[t]||{}}v("Dom",{siblings:function(){return this.parent().children()},position:function(){return this.parent().index(this)},next:function(){return this.siblings()[this.position()+1]},prev:function(){return this.siblings()[this.position()-1]},forward:function(){var t=this.position()+1,e=this.parent();return e.removeElement(this).add(this,t),"function"==typeof e.isRoot&&e.isRoot()&&e.node.appendChild(e.defs().node),this},backward:function(){var t=this.position();return 0<t&&this.parent().removeElement(this).add(this,t-1),this},front:function(){var t=this.parent();return t.node.appendChild(this.node),"function"==typeof t.isRoot&&t.isRoot()&&t.node.appendChild(t.defs().node),this},back:function(){return 0<this.position()&&this.parent().removeElement(this).add(this,0),this},before:function(t){t.remove();var e=this.position();return this.parent().add(t,e),this},after:function(t){t.remove();var e=this.position();return this.parent().add(t,e+1),this}});var y=/^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,p=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,m=/rgb\((\d+),(\d+),(\d+)\)/,g=/(#[a-z0-9\-_]+)/i,e=/\)\s*,?\s*/,w=/\s/g,k=/^#[a-f0-9]{3,6}$/i,x=/^rgb\(/,b=/^(\s+)?$/,A=/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,M=/\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,C=/[\s,]+/,j=/([^e])-/gi,S=/[MLHVCSQTAZ]/gi,T=/[MLHVCSQTAZ]/i,E=/((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,N=/\./g,D=Object.freeze({numberAndUnit:y,hex:p,rgb:m,reference:g,transforms:e,whitespace:w,isHex:k,isRgb:x,isCss:/[^:]+:[^;]+;?/,isBlank:b,isNumber:A,isPercent:/^-?[\d.]+%$/,isImage:M,delimiter:C,hyphen:j,pathLetters:S,isPathLetter:T,numbersWithDots:E,dots:N});function P(t,e){var n,i=t.length,r=[];for(n=0;n<i;n++)r.push(e(t[n]));return r}function z(t){return t%360*Math.PI/180}function R(t){return t.toLowerCase().replace(/-(.)/g,function(t,e){return e.toUpperCase()})}function q(t){return t.charAt(0).toUpperCase()+t.slice(1)}function L(t,e,n){if(null==e||null==n){var i=t.bbox();null==e?e=i.width/i.height*n:null==n&&(n=i.height/i.width*e)}return{width:e,height:n}}function I(t,e){var n,i,r=t.origin;if("string"==typeof r||null==r){var s=(r||"center").toLowerCase().trim(),u=e.bbox(),o=u.height,a=u.width,h=u.x,l=u.y,c=s.includes("left")?h:s.includes("right")?h+a:h+a/2,f=s.includes("top")?l:s.includes("bottom")?l+o:l+o/2;n=null!=t.ox?t.ox:c,i=null!=t.oy?t.oy:f}else n=r[0],i=r[1];return[n,i]}function F(t){var e=t.toString(16);return 1===e.length?"0"+e:e}v("Dom",{classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(C)},hasClass:function(t){return-1!==this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(e){return this.hasClass(e)&&this.attr("class",this.classes().filter(function(t){return t!==e}).join(" ")),this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)}}),v("Dom",{css:function(t,e){var n={};if(0===arguments.length)return this.node.style.cssText.split(/\s*;\s*/).filter(function(t){return!!t.length}).forEach(function(t){var e=t.split(/\s*:\s*/);n[e[0]]=e[1]}),n;if(arguments.length<2){if(Array.isArray(t)){var i=!0,r=!1,s=void 0;try{for(var u,o=t[Symbol.iterator]();!(i=(u=o.next()).done);i=!0){var a=R(u.value);n[a]=this.node.style[a]}}catch(t){r=!0,s=t}finally{try{i||null==o.return||o.return()}finally{if(r)throw s}}return n}if("string"==typeof t)return this.node.style[R(t)];if("object"===l(t))for(var h in t)this.node.style[R(h)]=null==t[h]||b.test(t[h])?"":t[h]}return 2===arguments.length&&(this.node.style[R(t)]=null==e||b.test(e)?"":e),this},show:function(){return this.css("display","")},hide:function(){return this.css("display","none")},visible:function(){return"none"!==this.css("display")}}),v("Dom",{data:function(e,t,n){if("object"===l(e))for(t in e)this.data(t,e[t]);else if(arguments.length<2)try{return JSON.parse(this.attr("data-"+e))}catch(t){return this.attr("data-"+e)}else this.attr("data-"+e,null===t?null:!0===n||"string"==typeof t||"number"==typeof t?t:JSON.stringify(t));return this}}),v("Dom",{remember:function(t,e){if("object"===l(t))for(var n in t)this.remember(n,t[n]);else{if(1===arguments.length)return this.memory()[t];this.memory()[t]=e}return this},forget:function(){if(0===arguments.length)this._memory={};else for(var t=arguments.length-1;0<=t;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory=this._memory||{}}});var X=function(){function t(){o(this,t),this.init.apply(this,arguments)}return a(t,[{key:"init",value:function(t,e,n){var i,r;(this.r=0,this.g=0,this.b=0,t)&&("string"==typeof t?x.test(t)?(i=m.exec(t.replace(w,"")),this.r=parseInt(i[1]),this.g=parseInt(i[2]),this.b=parseInt(i[3])):k.test(t)&&(i=p.exec(4===(r=t).length?["#",r.substring(1,2),r.substring(1,2),r.substring(2,3),r.substring(2,3),r.substring(3,4),r.substring(3,4)].join(""):r),this.r=parseInt(i[1],16),this.g=parseInt(i[2],16),this.b=parseInt(i[3],16)):Array.isArray(t)?(this.r=t[0],this.g=t[1],this.b=t[2]):"object"===l(t)?(this.r=t.r,this.g=t.g,this.b=t.b):3===arguments.length&&(this.r=t,this.g=e,this.b=n))}},{key:"toString",value:function(){return this.toHex()}},{key:"toArray",value:function(){return[this.r,this.g,this.b]}},{key:"toHex",value:function(){return"#"+F(Math.round(this.r))+F(Math.round(this.g))+F(Math.round(this.b))}},{key:"toRgb",value:function(){return"rgb("+[this.r,this.g,this.b].join()+")"}},{key:"brightness",value:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11}}],[{key:"test",value:function(t){return t+="",k.test(t)||x.test(t)}},{key:"isRgb",value:function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b}},{key:"isColor",value:function(t){return this.isRgb(t)||this.test(t)}}]),t}(),Y="http://www.w3.org/2000/svg",H="http://www.w3.org/2000/xmlns/",B="http://www.w3.org/1999/xlink",G="http://svgjs.com/svgjs",V=function t(){o(this,t)},Q={},U=Symbol("root");function $(t){return document.createElementNS(Y,t)}function W(t){if(t instanceof V)return t;if("object"===l(t))return Z(t);if(null==t)return new Q[U];if("string"==typeof t&&"<"!==t.charAt(0))return Z(document.querySelector(t));var e=$("svg");return e.innerHTML=t,t=Z(e.firstChild)}function J(t,e){return e||$(t)}function Z(t){return t?t.instance instanceof V?t.instance:t instanceof window.SVGElement?"svg"===t.nodeName?new Q[U](t):"linearGradient"===t.nodeName||"radialGradient"===t.nodeName?new Q.Gradient(t):Q[q(t.nodeName)]?new(Q[q(t.nodeName)])(t):new Q.Bare(t):new Q.HtmlNode(t):null}function K(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t.name,n=2<arguments.length&&void 0!==arguments[2]&&arguments[2];return Q[e]=t,n&&(Q[U]=t),t}function tt(t){return Q[t]}var et=1e3;function nt(t){return"Svgjs"+q(t)+et++}function it(t){for(var e=t.children.length-1;0<=e;e--)it(t.children[e]);return t.id?Z(t).id(nt(t.nodeName)):Z(t)}function rt(t,e){var n,i;for(i=(t=Array.isArray(t)?t:[t]).length-1;0<=i;i--)for(n in e)t[i].prototype[n]=e[n]}var st=0;function ut(t){var e=W(t).getEventHolder();return e.events||(e.events={}),e.events}function ot(t){return W(t).getEventTarget()}function at(t,e,i,n,r){var s=i.bind(n||t),u=ut(t),o=ot(t);e=Array.isArray(e)?e:e.split(C),i._svgjsListenerId||(i._svgjsListenerId=++st),e.forEach(function(t){var e=t.split(".")[0],n=t.split(".")[1]||"*";u[e]=u[e]||{},u[e][n]=u[e][n]||{},u[e][n][i._svgjsListenerId]=s,o.addEventListener(e,s,r||!1)})}function ht(u,t,o,a){var h=ut(u),l=ot(u);("function"!=typeof o||(o=o._svgjsListenerId))&&(t=Array.isArray(t)?t:(t||"").split(C)).forEach(function(t){var e,n,i,r=t&&t.split(".")[0],s=t&&t.split(".")[1];if(o)h[r]&&h[r][s||"*"]&&(l.removeEventListener(r,h[r][s||"*"][o],a||!1),delete h[r][s||"*"][o]);else if(r&&s){if(h[r]&&h[r][s]){for(n in h[r][s])ht(l,[r,s].join("."),n);delete h[r][s]}}else if(s)for(t in h)for(e in h[t])s===e&&ht(l,[t,s].join("."));else if(r){if(h[r]){for(e in h[r])ht(l,[r,e].join("."));delete h[r]}}else{for(t in h)ht(l,t);(i=W(u).getEventHolder()).events&&(i.events={})}})}function lt(t,e,n){var i=ot(t);return e instanceof window.Event||(e=new window.CustomEvent(e,{detail:n,cancelable:!0})),i.dispatchEvent(e),e}var ct=function(t){function i(){var t,e=(0<arguments.length&&void 0!==arguments[0]?arguments[0]:{}).events,n=void 0===e?{}:e;return o(this,i),(t=h(this,u(i).call(this))).events=n,t}return r(i,V),a(i,[{key:"addEventListener",value:function(){}},{key:"on",value:function(t,e,n,i){return at(this,t,e,n,i),this}},{key:"off",value:function(t,e){return ht(this,t,e),this}},{key:"dispatch",value:function(t,e){return lt(this,t,e)}},{key:"dispatchEvent",value:function(t){var e=this.getEventHolder().events;if(!e)return!0;var n=e[t.type];for(var i in n)for(var r in n[i])n[i][r](t);return!t.defaultPrevented}},{key:"fire",value:function(t,e){return this.dispatch(t,e),this}},{key:"getEventHolder",value:function(){return this}},{key:"getEventTarget",value:function(){return this}},{key:"removeEventListener",value:function(){}}]),i}();function ft(){}v("Element",["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchmove","touchleave","touchend","touchcancel"].reduce(function(t,e){return t[e]=function(t){return null===t?ht(this,e):at(this,e,t),this},t},{}));var dt={duration:400,ease:">",delay:0},vt={"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"},yt=Object.freeze({noop:ft,timeline:dt,attrs:vt}),pt=function(){try{return Function("name","baseClass","_constructor",["baseClass = baseClass || Array","return {","[name]: class extends baseClass {","constructor (...args) {","super(...args)","_constructor && _constructor.apply(this, args)","}","}","}[name]"].join("\n"))}catch(t){return function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:Array,n=2<arguments.length?arguments[2]:void 0,i=function(){e.apply(this,arguments),n&&n.apply(this,arguments)};return(i.prototype=Object.create(e.prototype)).constructor=i}}}(),mt=pt("SVGArray",Array,function(t){this.init(t)});rt(mt,{init:function(t){this.length=0,this.push.apply(this,O(this.parse(t)))},toArray:function(){return Array.prototype.concat.apply([],this)},toString:function(){return this.join(" ")},valueOf:function(){var t=[];return t.push.apply(t,O(this)),t},parse:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];return t instanceof Array?t:t.trim().split(C).map(parseFloat)},clone:function(){return new this.constructor(this)},toSet:function(){return new Set(this)}});var gt=function(){function n(){o(this,n),this.init.apply(this,arguments)}return a(n,[{key:"init",value:function(t,e){e=Array.isArray(t)?t[1]:e,t=Array.isArray(t)?t[0]:t,this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-34e37:34e37:"string"==typeof t?(e=t.match(y))&&(this.value=parseFloat(e[1]),"%"===e[5]?this.value/=100:"s"===e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof n&&(this.value=t.valueOf(),this.unit=t.unit)}},{key:"toString",value:function(){return("%"===this.unit?~~(1e8*this.value)/1e6:"s"===this.unit?this.value/1e3:this.value)+this.unit}},{key:"toJSON",value:function(){return this.toString()}},{key:"toArray",value:function(){return[this.value,this.unit]}},{key:"valueOf",value:function(){return this.value}},{key:"plus",value:function(t){return new n(this+(t=new n(t)),this.unit||t.unit)}},{key:"minus",value:function(t){return new n(this-(t=new n(t)),this.unit||t.unit)}},{key:"times",value:function(t){return new n(this*(t=new n(t)),this.unit||t.unit)}},{key:"divide",value:function(t){return new n(this/(t=new n(t)),this.unit||t.unit)}}]),n}();var wt=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this,t))).node=t,e.type=t.nodeName,e}return r(n,ct),a(n,[{key:"add",value:function(t,e){return t=W(t),null==e?this.node.appendChild(t.node):t.node!==this.node.childNodes[e]&&this.node.insertBefore(t.node,this.node.childNodes[e]),this}},{key:"addTo",value:function(t){return W(t).put(this)}},{key:"children",value:function(){return P(this.node.children,function(t){return Z(t)})}},{key:"clear",value:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this}},{key:"clone",value:function(t){this.writeDataToDom();var e=it(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e}},{key:"each",value:function(t,e){var n,i,r=this.children();for(n=0,i=r.length;n<i;n++)t.apply(r[n],[n,r]),e&&r[n].each(t,e);return this}},{key:"first",value:function(){return Z(this.node.firstChild)}},{key:"get",value:function(t){return Z(this.node.childNodes[t])}},{key:"getEventHolder",value:function(){return this.node}},{key:"getEventTarget",value:function(){return this.node}},{key:"has",value:function(t){return 0<=this.index(t)}},{key:"id",value:function(t){return void 0!==t||this.node.id||(this.node.id=nt(this.type)),this.attr("id",t)}},{key:"index",value:function(t){return[].slice.call(this.node.childNodes).indexOf(t.node)}},{key:"last",value:function(){return Z(this.node.lastChild)}},{key:"matches",value:function(t){var e=this.node;return(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector).call(e,t)}},{key:"native",value:function(){return this.node}},{key:"parent",value:function(t){var e=this;if(!e.node.parentNode)return null;if(e=Z(e.node.parentNode),!t)return e;for(;e&&e.node instanceof window.SVGElement;){if("string"==typeof t?e.matches(t):e instanceof t)return e;e=Z(e.node.parentNode)}}},{key:"put",value:function(t,e){return this.add(t,e),t}},{key:"putIn",value:function(t){return W(t).add(this)}},{key:"remove",value:function(){return this.parent()&&this.parent().removeElement(this),this}},{key:"removeElement",value:function(t){return this.node.removeChild(t.node),this}},{key:"replace",value:function(t){return this.after(t).remove(),t}},{key:"toString",value:function(){return this.id()}},{key:"svg",value:function(t){var e,n;if(!t)return this.writeDataToDom(),this.node.outerHTML;for((e=document.createElementNS(Y,"svg")).innerHTML=t,n=e.children.length;n--;)this.node.appendChild(e.firstElementChild);return this}},{key:"writeDataToDom",value:function(){return this.each(function(){this.writeDataToDom()}),this}}]),n}();rt(wt,{attr:function(t,e,n){if(null==t){t={},e=this.node.attributes;var i=!0,r=!1,s=void 0;try{for(var u,o=e[Symbol.iterator]();!(i=(u=o.next()).done);i=!0){var a=u.value;t[a.nodeName]=A.test(a.nodeValue)?parseFloat(a.nodeValue):a.nodeValue}}catch(t){r=!0,s=t}finally{try{i||null==o.return||o.return()}finally{if(r)throw s}}return t}if(Array.isArray(t));else if("object"===l(t))for(e in t)this.attr(e,t[e]);else if(null===e)this.node.removeAttribute(t);else{if(null==e)return null==(e=this.node.getAttribute(t))?vt[t]:A.test(e)?parseFloat(e):e;for("fill"!==t&&"stroke"!==t||M.test(e)&&(e=this.doc().defs().image(e));"function"==typeof e.attrHook;)e=e.attrHook(this,t);"number"==typeof e?e=new gt(e):X.isColor(e)?e=new X(e):e.constructor===Array&&(e=new mt(e)),"leading"===t?this.leading&&this.leading(e):"string"==typeof n?this.node.setAttributeNS(n,t,e.toString()):this.node.setAttribute(t,e.toString()),!this.rebuild||"font-size"!==t&&"x"!==t||this.rebuild()}return this}});var kt=tt(U),xt=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this,t))).dom={},e.node.instance=s(s(e)),t.hasAttribute("svgjs:data")&&e.setData(JSON.parse(t.getAttribute("svgjs:data"))||{}),e}return r(n,wt),a(n,[{key:"center",value:function(t,e){return this.cx(t).cy(e)}},{key:"cx",value:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)}},{key:"cy",value:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)}},{key:"defs",value:function(){return this.doc().defs()}},{key:"doc",value:function(){var t=this.parent(kt);return t&&t.doc()}},{key:"getEventHolder",value:function(){return this}},{key:"height",value:function(t){return this.attr("height",t)}},{key:"inside",value:function(t,e){var n=this.bbox();return t>n.x&&e>n.y&&t<n.x+n.width&&e<n.y+n.height}},{key:"move",value:function(t,e){return this.x(t).y(e)}},{key:"parents",value:function(t){var e=[],n=this;do{if(!(n=n.parent(t))||n instanceof tt("HtmlNode"))break;e.push(n)}while(n.parent);return e}},{key:"reference",value:function(t){if(!(t=this.attr(t)))return null;var e=t.match(g);return e?W(e[1]):null}},{key:"setData",value:function(t){return this.dom=t,this}},{key:"size",value:function(t,e){var n=L(this,t,e);return this.width(new gt(n.width)).height(new gt(n.height))}},{key:"width",value:function(t){return this.attr("width",t)}},{key:"writeDataToDom",value:function(){return this.node.removeAttribute("svgjs:data"),Object.keys(this.dom).length&&this.node.setAttribute("svgjs:data",JSON.stringify(this.dom)),c(u(n.prototype),"writeDataToDom",this).call(this)}},{key:"x",value:function(t){return this.attr("x",t)}},{key:"y",value:function(t){return this.attr("y",t)}}]),n}(),bt=function(t){function e(){return o(this,e),h(this,u(e).apply(this,arguments))}return r(e,xt),a(e,[{key:"flatten",value:function(t){return this.each(function(){return this instanceof e?this.flatten(t).ungroup(t):this.toParent(t)}),this.node.firstElementChild||this.remove(),this}},{key:"ungroup",value:function(t){return t=t||this.parent(),this.each(function(){return this.toParent(t)}),this.remove(),this}}]),e}(),_t=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("defs",t),e))}return r(e,bt),a(e,[{key:"flatten",value:function(){return this}},{key:"ungroup",value:function(){return this}}]),e}();K(_t);var Ot=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this,J("svg",t),n))).namespace(),e}return r(n,bt),a(n,[{key:"isRoot",value:function(){return!(this.node.parentNode&&this.node.parentNode instanceof window.SVGElement&&"#document"!==this.node.parentNode.nodeName)}},{key:"doc",value:function(){return this.isRoot()?this:c(u(n.prototype),"doc",this).call(this)}},{key:"namespace",value:function(){return this.isRoot()?this.attr({xmlns:Y,version:"1.1"}).attr("xmlns:xlink",B,H).attr("xmlns:svgjs",G,H):this.doc().namespace()}},{key:"defs",value:function(){return this.isRoot()?Z(this.node.getElementsByTagName("defs")[0])||this.put(new _t):this.doc().defs()}},{key:"parent",value:function(t){return this.isRoot()?"#document"===this.node.parentNode.nodeName?null:Z(this.node.parentNode):c(u(n.prototype),"parent",this).call(this,t)}},{key:"clear",value:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this}}]),n}();function At(){if(!At.nodes){var t=(new Ot).size(2,0);t.node.cssText=["opacity: 0","position: absolute","left: -100%","top: -100%","overflow: hidden"].join(";");var e=t.path().node;At.nodes={svg:t,path:e}}if(!At.nodes.svg.node.parentNode){var n=document.body||document.documentElement;At.nodes.svg.addTo(n)}return At.nodes}v({Container:{nested:function(){return this.put(new Ot)}}}),K(Ot,"Doc",!0);var Mt=function(){function r(t,e,n){var i;o(this,r),n=n||{x:0,y:0},i=Array.isArray(t)?{x:t[0],y:t[1]}:"object"===l(t)?{x:t.x,y:t.y}:{x:t,y:e},this.x=null==i.x?n.x:i.x,this.y=null==i.y?n.y:i.y}return a(r,[{key:"clone",value:function(){return new r(this)}},{key:"native",value:function(){var t=At().svg.node.createSVGPoint();return t.x=this.x,t.y=this.y,t}},{key:"transform",value:function(t){return new r(t.a*this.x+t.c*this.y+t.e,t.b*this.x+t.d*this.y+t.f)}}]),r}();v({Element:{point:function(t,e){return new Mt(t,e).transform(this.screenCTM().inverse())}}});var Ct="abcdef".split("");function jt(t,e,n){return Math.abs(e-t)<(n||1e-6)}var St=function(){function h(){o(this,h),this.init.apply(this,arguments)}return a(h,[{key:"init",value:function(t){var e=h.fromArray([1,0,0,1,0,0]);t=t instanceof xt?t.matrixify():"string"==typeof t?h.fromArray(t.split(C).map(parseFloat)):Array.isArray(t)?h.fromArray(t):"object"===l(t)&&h.isMatrixLike(t)?t:"object"===l(t)?(new h).transform(t):6===arguments.length?h.fromArray([].slice.call(arguments)):e,this.a=null!=t.a?t.a:e.a,this.b=null!=t.b?t.b:e.b,this.c=null!=t.c?t.c:e.c,this.d=null!=t.d?t.d:e.d,this.e=null!=t.e?t.e:e.e,this.f=null!=t.f?t.f:e.f}},{key:"clone",value:function(){return new h(this)}},{key:"transform",value:function(t){if(h.isMatrixLike(t))return new h(t).multiplyO(this);var e=h.formatTransforms(t),n=new Mt(e.ox,e.oy).transform(this),i=n.x,r=n.y,s=(new h).translateO(e.rx,e.ry).lmultiplyO(this).translateO(-i,-r).scaleO(e.scaleX,e.scaleY).skewO(e.skewX,e.skewY).shearO(e.shear).rotateO(e.theta).translateO(i,r);if(isFinite(e.px)||isFinite(e.py)){var u=new Mt(i,r).transform(s),o=e.px?e.px-u.x:0,a=e.py?e.py-u.y:0;s.translateO(o,a)}return s.translateO(e.tx,e.ty),s}},{key:"compose",value:function(t){t.origin&&(t.originX=t.origin[0],t.originY=t.origin[1]);var e=t.originX||0,n=t.originY||0,i=t.scaleX||1,r=t.scaleY||1,s=t.shear||0,u=t.rotate||0,o=t.translateX||0,a=t.translateY||0;return(new h).translateO(-e,-n).scaleO(i,r).shearO(s).rotateO(u).translateO(o,a).lmultiplyO(this).translateO(e,n)}},{key:"decompose",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,n=this.a,i=this.b,r=this.c,s=this.d,u=this.e,o=this.f,a=n*s-i*r,h=0<a?1:-1,l=h*Math.sqrt(n*n+i*i),c=Math.atan2(h*i,h*n),f=180/Math.PI*c,d=Math.cos(c),v=Math.sin(c),y=(n*r+i*s)/a,p=r*l/(y*n-i)||s*l/(y*i+n);return{scaleX:l,scaleY:p,shear:y,rotate:f,translateX:u-t+t*d*l+e*(y*d*l-v*p),translateY:o-e+t*v*l+e*(y*v*l+d*p),originX:t,originY:e,a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f}}},{key:"multiply",value:function(t){return this.clone().multiplyO(t)}},{key:"multiplyO",value:function(t){var e=t instanceof h?t:new h(t);return h.matrixMultiply(this,e,this)}},{key:"lmultiply",value:function(t){return this.clone().lmultiplyO(t)}},{key:"lmultiplyO",value:function(t){var e=t instanceof h?t:new h(t);return h.matrixMultiply(e,this,this)}},{key:"inverseO",value:function(){var t=this.a,e=this.b,n=this.c,i=this.d,r=this.e,s=this.f,u=t*i-e*n;if(!u)throw new Error("Cannot invert "+this);var o=i/u,a=-e/u,h=-n/u,l=t/u,c=-(o*r+h*s),f=-(a*r+l*s);return this.a=o,this.b=a,this.c=h,this.d=l,this.e=c,this.f=f,this}},{key:"inverse",value:function(){return this.clone().inverseO()}},{key:"translate",value:function(t,e){return this.clone().translateO(t,e)}},{key:"translateO",value:function(t,e){return this.e+=t||0,this.f+=e||0,this}},{key:"scale",value:function(t,e,n,i){var r;return(r=this.clone()).scaleO.apply(r,arguments)}},{key:"scaleO",value:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0,i=3<arguments.length&&void 0!==arguments[3]?arguments[3]:0;3===arguments.length&&(i=n,n=e,e=t);var r=this.a,s=this.b,u=this.c,o=this.d,a=this.e,h=this.f;return this.a=r*t,this.b=s*e,this.c=u*t,this.d=o*e,this.e=a*t-n*t+n,this.f=h*e-i*e+i,this}},{key:"rotate",value:function(t,e,n){return this.clone().rotateO(t,e,n)}},{key:"rotateO",value:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0;t=z(t);var i=Math.cos(t),r=Math.sin(t),s=this.a,u=this.b,o=this.c,a=this.d,h=this.e,l=this.f;return this.a=s*i-u*r,this.b=u*i+s*r,this.c=o*i-a*r,this.d=a*i+o*r,this.e=h*i-l*r+n*r-e*i+e,this.f=l*i+h*r-e*r-n*i+n,this}},{key:"flip",value:function(t,e){return this.clone().flipO(t,e)}},{key:"flipO",value:function(t,e){return"x"===t?this.scaleO(-1,1,e,0):"y"===t?this.scaleO(1,-1,0,e):this.scaleO(-1,-1,t,e||t)}},{key:"shear",value:function(t,e,n){return this.clone().shearO(t,e,n)}},{key:"shearO",value:function(t){var e=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0,n=this.a,i=this.b,r=this.c,s=this.d,u=this.e,o=this.f;return this.a=n+i*t,this.c=r+s*t,this.e=u+o*t-e*t,this}},{key:"skew",value:function(t,e,n,i){var r;return(r=this.clone()).skewO.apply(r,arguments)}},{key:"skewO",value:function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:t,n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:0,i=3<arguments.length&&void 0!==arguments[3]?arguments[3]:0;3===arguments.length&&(i=n,n=e,e=t),t=z(t),e=z(e);var r=Math.tan(t),s=Math.tan(e),u=this.a,o=this.b,a=this.c,h=this.d,l=this.e,c=this.f;return this.a=u+o*r,this.b=o+u*s,this.c=a+h*r,this.d=h+a*s,this.e=l+c*r-i*r,this.f=c+l*s-n*s,this}},{key:"skewX",value:function(t,e,n){return this.skew(t,0,e,n)}},{key:"skewXO",value:function(t,e,n){return this.skewO(t,0,e,n)}},{key:"skewY",value:function(t,e,n){return this.skew(0,t,e,n)}},{key:"skewYO",value:function(t,e,n){return this.skewO(0,t,e,n)}},{key:"aroundO",value:function(t,e,n){var i=t||0,r=e||0;return this.translateO(-i,-r).lmultiplyO(n).translateO(i,r)}},{key:"around",value:function(t,e,n){return this.clone().aroundO(t,e,n)}},{key:"native",value:function(){for(var t=At().svg.node.createSVGMatrix(),e=Ct.length-1;0<=e;e--)t[Ct[e]]=this[Ct[e]];return t}},{key:"equals",value:function(t){var e=new h(t);return jt(this.a,e.a)&&jt(this.b,e.b)&&jt(this.c,e.c)&&jt(this.d,e.d)&&jt(this.e,e.e)&&jt(this.f,e.f)}},{key:"toString",value:function(){return"matrix("+this.a+","+this.b+","+this.c+","+this.d+","+this.e+","+this.f+")"}},{key:"toArray",value:function(){return[this.a,this.b,this.c,this.d,this.e,this.f]}},{key:"valueOf",value:function(){return{a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f}}}],[{key:"fromArray",value:function(t){return{a:t[0],b:t[1],c:t[2],d:t[3],e:t[4],f:t[5]}}},{key:"isMatrixLike",value:function(t){return null!=t.a||null!=t.b||null!=t.c||null!=t.d||null!=t.e||null!=t.f}},{key:"formatTransforms",value:function(t){var e="both"===t.flip||!0===t.flip,n=t.flip&&(e||"x"===t.flip)?-1:1,i=t.flip&&(e||"y"===t.flip)?-1:1,r=t.skew&&t.skew.length?t.skew[0]:isFinite(t.skew)?t.skew:isFinite(t.skewX)?t.skewX:0,s=t.skew&&t.skew.length?t.skew[1]:isFinite(t.skew)?t.skew:isFinite(t.skewY)?t.skewY:0,u=t.scale&&t.scale.length?t.scale[0]*n:isFinite(t.scale)?t.scale*n:isFinite(t.scaleX)?t.scaleX*n:n,o=t.scale&&t.scale.length?t.scale[1]*i:isFinite(t.scale)?t.scale*i:isFinite(t.scaleY)?t.scaleY*i:i,a=t.shear||0,h=t.rotate||t.theta||0,l=new Mt(t.origin||t.around||t.ox||t.originX,t.oy||t.originY),c=l.x,f=l.y,d=new Mt(t.position||t.px||t.positionX,t.py||t.positionY),v=d.x,y=d.y,p=new Mt(t.translate||t.tx||t.translateX,t.ty||t.translateY),m=p.x,g=p.y,w=new Mt(t.relative||t.rx||t.relativeX,t.ry||t.relativeY);return{scaleX:u,scaleY:o,skewX:r,skewY:s,shear:a,theta:h,rx:w.x,ry:w.y,tx:m,ty:g,ox:c,oy:f,px:v,py:y}}},{key:"matrixMultiply",value:function(t,e,n){var i=t.a*e.a+t.c*e.b,r=t.b*e.a+t.d*e.b,s=t.a*e.c+t.c*e.d,u=t.b*e.c+t.d*e.d,o=t.e+t.a*e.e+t.c*e.f,a=t.f+t.b*e.e+t.d*e.f;return n.a=i,n.b=r,n.c=s,n.d=u,n.e=o,n.f=a,n}}]),h}();function Tt(e,n){return function(t){return null==t?this[t]:(this[e]=t,n&&n.call(this),this)}}v({Element:{ctm:function(){return new St(this.node.getCTM())},screenCTM:function(){if("function"!=typeof this.isRoot||this.isRoot())return new St(this.node.getScreenCTM());var t=this.rect(1,1),e=t.node.getScreenCTM();return t.remove(),new St(e)}}});var Et={"-":function(t){return t},"<>":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)},bezier:function(t,e,n,i){return function(t){}}},Nt=function(){function t(){o(this,t)}return a(t,[{key:"done",value:function(){return!1}}]),t}(),Dt=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this))).ease=Et[t||dt.ease]||t,e}return r(n,Nt),a(n,[{key:"step",value:function(t,e,n){return"number"!=typeof t?n<1?t:e:t+(e-t)*this.ease(n)}}]),n}(),Pt=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this))).stepper=t,e}return r(n,Nt),a(n,[{key:"step",value:function(t,e,n,i){return this.stepper(t,e,n,i)}},{key:"done",value:function(t){return t.done}}]),n}();function zt(){var t=(this._duration||500)/1e3,e=this._overshoot||0,n=Math.PI,i=Math.log(e/100+1e-10),r=-i/Math.sqrt(n*n+i*i),s=3.9/(r*t);this.d=2*r*s,this.k=s*s}var Rt=function(t){function i(t,e){var n;return o(this,i),(n=h(this,u(i).call(this))).duration(t||500).overshoot(e||0),n}return r(i,Pt),a(i,[{key:"step",value:function(t,e,n,i){if("string"==typeof t)return t;if(i.done=n===1/0,n===1/0)return e;if(0===n)return t;100<n&&(n=16),n/=1e3;var r=i.velocity||0,s=-this.d*r-this.k*(t-e),u=t+r*n+s*n*n/2;return i.velocity=r+s*n,i.done=Math.abs(e-u)+Math.abs(r)<.002,i.done?e:u}}]),i}();rt(Rt,{duration:Tt("_duration",zt),overshoot:Tt("_overshoot",zt)});var qt=function(t){function s(t,e,n,i){var r;return o(this,s),t=null==t?.1:t,e=null==e?.01:e,n=null==n?0:n,i=null==i?1e3:i,(r=h(this,u(s).call(this))).p(t).i(e).d(n).windup(i),r}return r(s,Pt),a(s,[{key:"step",value:function(t,e,n,i){if("string"==typeof t)return t;if(i.done=n===1/0,n===1/0)return e;if(0===n)return t;var r=e-t,s=(i.integral||0)+r*n,u=(r-(i.error||0))/n,o=this.windup;return!1!==o&&(s=Math.max(-o,Math.min(s,o))),i.error=r,i.integral=s,i.done=Math.abs(r)<.001,i.done?e:t+(this.P*r+this.I*s+this.D*u)}}]),s}();rt(qt,{windup:Tt("windup"),p:Tt("P"),i:Tt("I"),d:Tt("D")});var Lt=function(){function t(){o(this,t),this._first=null,this._last=null}return a(t,[{key:"push",value:function(t){var e=t.next?t:{value:t,next:null,prev:null};return this._last?(e.prev=this._last,this._last.next=e,this._last=e):(this._last=e,this._first=e),e}},{key:"shift",value:function(){var t=this._first;return t?(this._first=t.next,this._first&&(this._first.prev=null),this._last=this._first?this._last:null,t.value):null}},{key:"first",value:function(){return this._first&&this._first.value}},{key:"last",value:function(){return this._last&&this._last.value}},{key:"remove",value:function(t){t.prev&&(t.prev.next=t.next),t.next&&(t.next.prev=t.prev),t===this._last&&(this._last=t.prev),t===this._first&&(this._first=t.next),t.prev=null,t.next=null}}]),t}(),It={nextDraw:null,frames:new Lt,timeouts:new Lt,timer:window.performance||window.Date,transforms:[],frame:function(t){var e=It.frames.push({run:t});return null===It.nextDraw&&(It.nextDraw=window.requestAnimationFrame(It._draw)),e},transform_frame:function(t,e){It.transforms[e]=t},timeout:function(t,e){e=e||0;var n=It.timer.now()+e,i=It.timeouts.push({run:t,time:n});return null===It.nextDraw&&(It.nextDraw=window.requestAnimationFrame(It._draw)),i},cancelFrame:function(t){It.frames.remove(t)},clearTimeout:function(t){It.timeouts.remove(t)},_draw:function(t){for(var e=null,n=It.timeouts.last();(e=It.timeouts.shift())&&(t>=e.time?e.run():It.timeouts.push(e),e!==n););for(var i=null,r=It.frames.last();i!==r&&(i=It.frames.shift());)i.run();It.transforms.forEach(function(t){t()}),It.nextDraw=It.timeouts.first()||It.frames.first()?window.requestAnimationFrame(It._draw):null}};function Ft(t){return!(t.w||t.h||t.x||t.y)}var Xt=function(){function u(){o(this,u),this.init.apply(this,arguments)}return a(u,[{key:"init",value:function(t){t="string"==typeof t?t.split(C).map(parseFloat):Array.isArray(t)?t:"object"===l(t)?[null!=t.left?t.left:t.x,null!=t.top?t.top:t.y,t.width,t.height]:4===arguments.length?[].slice.call(arguments):[0,0,0,0],this.x=t[0]||0,this.y=t[1]||0,this.width=this.w=t[2]||0,this.height=this.h=t[3]||0,this.x2=this.x+this.w,this.y2=this.y+this.h,this.cx=this.x+this.w/2,this.cy=this.y+this.h/2}},{key:"merge",value:function(t){var e=Math.min(this.x,t.x),n=Math.min(this.y,t.y);return new u(e,n,Math.max(this.x+this.width,t.x+t.width)-e,Math.max(this.y+this.height,t.y+t.height)-n)}},{key:"transform",value:function(e){var n=1/0,i=-1/0,r=1/0,s=-1/0;return[new Mt(this.x,this.y),new Mt(this.x2,this.y),new Mt(this.x,this.y2),new Mt(this.x2,this.y2)].forEach(function(t){t=t.transform(e),n=Math.min(n,t.x),i=Math.max(i,t.x),r=Math.min(r,t.y),s=Math.max(s,t.y)}),new u(n,r,i-n,s-r)}},{key:"addOffset",value:function(){return this.x+=window.pageXOffset,this.y+=window.pageYOffset,this}},{key:"toString",value:function(){return this.x+" "+this.y+" "+this.width+" "+this.height}},{key:"toArray",value:function(){return[this.x,this.y,this.width,this.height]}},{key:"isNulled",value:function(){return Ft(this)}}]),u}();function Yt(e){var n,t;try{if(Ft(n=e(this.node))&&(t=this.node,!(document.documentElement.contains||function(t){for(;t.parentNode;)t=t.parentNode;return t===document}).call(document.documentElement,t)))throw new Error("Element not in the dom")}catch(t){try{var i=this.clone(At().svg).show();n=e(i.node),i.remove()}catch(t){console.warn("Getting a bounding box of this element is not possible")}}return n}v({Element:{bbox:function(){return new Xt(Yt.call(this,function(t){return t.getBBox()}))},rbox:function(t){var e=new Xt(Yt.call(this,function(t){return t.getBoundingClientRect()}));return t?e.transform(t.screenCTM().inverse()):e.addOffset()}},viewbox:{viewbox:function(t,e,n,i){return null==t?new Xt(this.attr("viewBox")):this.attr("viewBox",new Xt(t,e,n,i))}}});var Ht=pt("PathArray",mt);function Bt(t,e,n,i){return n+i.replace(N," .")}for(var Gt={M:function(t,e,n){return e.x=n.x=t[0],e.y=n.y=t[1],["M",e.x,e.y]},L:function(t,e){return e.x=t[0],e.y=t[1],["L",t[0],t[1]]},H:function(t,e){return e.x=t[0],["H",t[0]]},V:function(t,e){return e.y=t[0],["V",t[0]]},C:function(t,e){return e.x=t[4],e.y=t[5],["C",t[0],t[1],t[2],t[3],t[4],t[5]]},S:function(t,e){return e.x=t[2],e.y=t[3],["S",t[0],t[1],t[2],t[3]]},Q:function(t,e){return e.x=t[2],e.y=t[3],["Q",t[0],t[1],t[2],t[3]]},T:function(t,e){return e.x=t[0],e.y=t[1],["T",t[0],t[1]]},Z:function(t,e,n){return e.x=n.x,e.y=n.y,["Z"]},A:function(t,e){return e.x=t[5],e.y=t[6],["A",t[0],t[1],t[2],t[3],t[4],t[5],t[6]]}},Vt="mlhvqtcsaz".split(""),Qt=0,Ut=Vt.length;Qt<Ut;++Qt)Gt[Vt[Qt]]=function(s){return function(t,e,n){if("H"===s)t[0]=t[0]+e.x;else if("V"===s)t[0]=t[0]+e.y;else if("A"===s)t[5]=t[5]+e.x,t[6]=t[6]+e.y;else for(var i=0,r=t.length;i<r;++i)t[i]=t[i]+(i%2?e.y:e.x);return Gt[s](t,e,n)}}(Vt[Qt].toUpperCase());rt(Ht,{toString:function(){return function(t){for(var e=0,n=t.length,i="";e<n;e++)i+=t[e][0],null!=t[e][1]&&(i+=t[e][1],null!=t[e][2]&&(i+=" ",i+=t[e][2],null!=t[e][3]&&(i+=" ",i+=t[e][3],i+=" ",i+=t[e][4],null!=t[e][5]&&(i+=" ",i+=t[e][5],i+=" ",i+=t[e][6],null!=t[e][7]&&(i+=" ",i+=t[e][7])))));return i+" "}(this)},move:function(t,e){var n=this.bbox();if(t-=n.x,e-=n.y,!isNaN(t)&&!isNaN(e))for(var i,r=this.length-1;0<=r;r--)"M"===(i=this[r][0])||"L"===i||"T"===i?(this[r][1]+=t,this[r][2]+=e):"H"===i?this[r][1]+=t:"V"===i?this[r][1]+=e:"C"===i||"S"===i||"Q"===i?(this[r][1]+=t,this[r][2]+=e,this[r][3]+=t,this[r][4]+=e,"C"===i&&(this[r][5]+=t,this[r][6]+=e)):"A"===i&&(this[r][6]+=t,this[r][7]+=e);return this},size:function(t,e){var n,i,r=this.bbox();for(n=this.length-1;0<=n;n--)"M"===(i=this[n][0])||"L"===i||"T"===i?(this[n][1]=(this[n][1]-r.x)*t/r.width+r.x,this[n][2]=(this[n][2]-r.y)*e/r.height+r.y):"H"===i?this[n][1]=(this[n][1]-r.x)*t/r.width+r.x:"V"===i?this[n][1]=(this[n][1]-r.y)*e/r.height+r.y:"C"===i||"S"===i||"Q"===i?(this[n][1]=(this[n][1]-r.x)*t/r.width+r.x,this[n][2]=(this[n][2]-r.y)*e/r.height+r.y,this[n][3]=(this[n][3]-r.x)*t/r.width+r.x,this[n][4]=(this[n][4]-r.y)*e/r.height+r.y,"C"===i&&(this[n][5]=(this[n][5]-r.x)*t/r.width+r.x,this[n][6]=(this[n][6]-r.y)*e/r.height+r.y)):"A"===i&&(this[n][1]=this[n][1]*t/r.width,this[n][2]=this[n][2]*e/r.height,this[n][6]=(this[n][6]-r.x)*t/r.width+r.x,this[n][7]=(this[n][7]-r.y)*e/r.height+r.y);return this},equalCommands:function(t){var e,n,i;for(t=new Ht(t),i=this.length===t.length,e=0,n=this.length;i&&e<n;e++)i=this[e][0]===t[e][0];return i},morph:function(t){return t=new Ht(t),this.equalCommands(t)?this.destination=t:this.destination=null,this},at:function(t){if(!this.destination)return this;var e,n,i,r,s=this,u=this.destination.value,o=[],a=new Ht;for(e=0,n=s.length;e<n;e++){for(o[e]=[s[e][0]],i=1,r=s[e].length;i<r;i++)o[e][i]=s[e][i]+(u[e][i]-s[e][i])*t;"A"===o[e][0]&&(o[e][4]=+(0!==o[e][4]),o[e][5]=+(0!==o[e][5]))}return a.value=o,a},parse:function(){var t,e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[["M",0,0]];if(e instanceof Ht)return e;var n={M:2,L:2,H:1,V:1,C:6,S:4,Q:4,T:2,A:7,Z:0};e="string"==typeof e?e.replace(E,Bt).replace(S," $& ").replace(j,"$1 -").trim().split(C):e.reduce(function(t,e){return[].concat.call(t,e)},[]);for(var i=[],r=new Mt,s=new Mt,u=0,o=e.length;T.test(e[u])?(t=e[u],++u):"M"===t?t="L":"m"===t&&(t="l"),i.push(Gt[t].call(null,e.slice(u,u+=n[t.toUpperCase()]).map(parseFloat),r,s)),u<o;);return i},bbox:function(){return At().path.setAttribute("d",this.toString()),At.nodes.path.getBBox()}});var $t=function(){function e(t){o(this,e),this._stepper=t||new Dt("-"),this._from=null,this._to=null,this._type=null,this._context=null,this._morphObj=null}return a(e,[{key:"from",value:function(t){return null==t?this._from:(this._from=this._set(t),this)}},{key:"to",value:function(t){return null==t?this._to:(this._to=this._set(t),this)}},{key:"type",value:function(t){return null==t?this._type:(this._type=t,this)}},{key:"_set",value:function(t){if(!this._type){var e=l(t);"number"===e?this.type(gt):"string"===e?X.isColor(t)?this.type(X):C.test(t)?this.type(S.test(t)?Ht:mt):y.test(t)?this.type(gt):this.type(Wt):-1<Kt.indexOf(t.constructor)?this.type(t.constructor):Array.isArray(t)?this.type(mt):"object"===e?this.type(Zt):this.type(Wt)}var n=new this._type(t).toArray();return this._morphObj=this._morphObj||new this._type,this._context=this._context||Array.apply(null,Array(n.length)).map(Object),n}},{key:"stepper",value:function(t){return null==t?this._stepper:(this._stepper=t,this)}},{key:"done",value:function(){return this._context.map(this._stepper.done).reduce(function(t,e){return t&&e},!0)}},{key:"at",value:function(n){var i=this;return this._morphObj.fromArray(this._from.map(function(t,e){return i._stepper.step(t,i._to[e],n,i._context[e],i._context)}))}}]),e}(),Wt=function(){function t(){o(this,t),this.init.apply(this,arguments)}return a(t,[{key:"init",value:function(t){t=Array.isArray(t)?t[0]:t,this.value=t}},{key:"valueOf",value:function(){return this.value}},{key:"toArray",value:function(){return[this.value]}}]),t}(),Jt=function(){function e(){o(this,e),this.init.apply(this,arguments)}return a(e,[{key:"init",value:function(t){Array.isArray(t)&&(t={scaleX:t[0],scaleY:t[1],shear:t[2],rotate:t[3],translateX:t[4],translateY:t[5],originX:t[6],originY:t[7]}),Object.assign(this,e.defaults,t)}},{key:"toArray",value:function(){var t=this;return[t.scaleX,t.scaleY,t.shear,t.rotate,t.translateX,t.translateY,t.originX,t.originY]}}]),e}();Jt.defaults={scaleX:1,scaleY:1,shear:0,rotate:0,translateX:0,translateY:0,originX:0,originY:0};var Zt=function(){function t(){o(this,t),this.init.apply(this,arguments)}return a(t,[{key:"init",value:function(t){if(this.values=[],Array.isArray(t))this.values=t;else{var e=Object.entries(t||{}).sort(function(t,e){return t[0]-e[0]});this.values=e.reduce(function(t,e){return t.concat(e)},[])}}},{key:"valueOf",value:function(){for(var t={},e=this.values,n=0,i=e.length;n<i;n+=2)t[e[n]]=e[n+1];return t}},{key:"toArray",value:function(){return this.values}}]),t}(),Kt=[Wt,Jt,Zt];function te(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[];Kt.push.apply(Kt,O([].concat(t)))}function ee(){rt(Kt,{to:function(t,e){return(new $t).type(this.constructor).from(this.valueOf()).to(t,e)},fromArray:function(t){return this.init(t),this}})}var ne=window.performance||Date,ie=function(t){var e=t.start,n=t.runner.duration();return{start:e,duration:n,end:e+n,runner:t.runner}},re=function(){function t(){o(this,t),this._timeSource=function(){return ne.now()},this._dispatcher=document.createElement("div"),this._startTime=0,this._speed=1,this._reverse=!1,this._persist=0,this._nextFrame=null,this._paused=!1,this._runners=[],this._order=[],this._time=0,this._lastSourceTime=0,this._lastStepTime=0}return a(t,[{key:"getEventTarget",value:function(){return this._dispatcher}},{key:"schedule",value:function(t,e,n){if(null==t)return this._runners.map(ie).sort(function(t,e){return t.start-e.start||t.duration-e.duration});this.active()||(this._step(),null==n&&(n="now"));var i=0;if(e=e||0,null==n||"last"===n||"after"===n)i=this._startTime;else if("absolute"===n||"start"===n)i=e,e=0;else if("now"===n)i=this._time;else{if("relative"!==n)throw new Error('Invalid value for the "when" parameter');var r=this._runners[t.id];r&&(i=r.start+e,e=0)}return t.unschedule(),t.timeline(this),t.time(-e),this._startTime=i+t.duration()+e,this._runners[t.id]={persist:this.persist(),runner:t,start:i},this._order.push(t.id),this._continue(),this}},{key:"unschedule",value:function(t){var e=this._order.indexOf(t.id);return e<0||(delete this._runners[t.id],this._order.splice(e,1),t.timeline(null)),this}},{key:"play",value:function(){return this._paused=!1,this._continue()}},{key:"pause",value:function(){return this._nextFrame=null,this._paused=!0,this}},{key:"stop",value:function(){return this.seek(-this._time),this.pause()}},{key:"finish",value:function(){return this.seek(1/0),this.pause()}},{key:"speed",value:function(t){return null==t?this._speed:(this._speed=t,this)}},{key:"reverse",value:function(t){var e=this.speed();if(null==t)return this.speed(-e);var n=Math.abs(e);return this.speed(t?n:-n)}},{key:"seek",value:function(t){return this._time+=t,this._continue()}},{key:"time",value:function(t){return null==t?this._time:(this._time=t,this)}},{key:"persist",value:function(t){return null==t?this._persist:(this._persist=t,this)}},{key:"source",value:function(t){return null==t?this._timeSource:(this._timeSource=t,this)}},{key:"_step",value:function(){if(!this._paused){var t=this._timeSource(),e=t-this._lastSourceTime,n=this._speed*e+(this._time-this._lastStepTime);this._lastSourceTime=t,this._time+=n,this._lastStepTime=this._time;for(var i=!1,r=0,s=this._order.length;r<s;r++){var u=this._runners[this._order[r]],o=u.runner,a=n,h=this._time-u.start;if(h<0)i=!0;else if(h<a&&(a=h),o.active())if(o.step(a).done){if(!0!==u.persist){o.duration()-o.time()+this._time+this._persist<this._time&&(delete this._runners[this._order[r]],this._order.splice(r--,1)&&--s,o.timeline(null))}}else i=!0}return this._nextFrame=i?It.frame(this._step.bind(this)):null,this}}},{key:"_continue",value:function(){return this._paused||this._nextFrame||(this._nextFrame=It.frame(this._step.bind(this))),this}},{key:"active",value:function(){return!!this._nextFrame}}]),t}();v({Element:{timeline:function(){return this._timeline=this._timeline||new re,this._timeline}}});var se=function(t){function s(t){var e;return o(this,s),(e=h(this,u(s).call(this))).id=s.id++,t="function"==typeof(t=null==t?dt.duration:t)?new Pt(t):t,e._element=null,e._timeline=null,e.done=!1,e._queue=[],e._duration="number"==typeof t&&t,e._isDeclarative=t instanceof Pt,e._stepper=e._isDeclarative?t:new Dt,e._history={},e.enabled=!0,e._time=0,e._last=0,e.transforms=new St,e.transformId=1,e._haveReversed=!1,e._reverse=!1,e._loopsDone=0,e._swing=!1,e._wait=0,e._times=1,e}return r(s,ct),a(s,[{key:"element",value:function(t){return null==t?this._element:((this._element=t)._prepareRunner(),this)}},{key:"timeline",value:function(t){return void 0===t?this._timeline:(this._timeline=t,this)}},{key:"animate",value:function(t,e,n){var i=s.sanitise(t,e,n),r=new s(i.duration);return this._timeline&&r.timeline(this._timeline),this._element&&r.element(this._element),r.loop(i).schedule(e,n)}},{key:"schedule",value:function(t,e,n){if(t instanceof re||(n=e,e=t,t=this.timeline()),!t)throw Error("Runner cannot be scheduled without timeline");return t.schedule(this,e,n),this}},{key:"unschedule",value:function(){var t=this.timeline();return t&&t.unschedule(this),this}},{key:"loop",value:function(t,e,n){return"object"===l(t)&&(e=t.swing,n=t.wait,t=t.times),this._times=t||1/0,this._swing=e||!1,this._wait=n||0,this}},{key:"delay",value:function(t){return this.animate(0,t)}},{key:"queue",value:function(t,e,n){return this._queue.push({initialiser:t||ft,runner:e||ft,isTransform:n,initialised:!1,finished:!1}),this.timeline()&&this.timeline()._continue(),this}},{key:"during",value:function(t){return this.queue(null,t)}},{key:"after",value:function(t){return this.on("finish",t)}},{key:"time",value:function(t){if(null==t)return this._time;var e=t-this._time;return this.step(e),this}},{key:"duration",value:function(){return this._times*(this._wait+this._duration)-this._wait}},{key:"loops",value:function(t){var e=this._duration+this._wait;if(null==t){var n=Math.floor(this._time/e),i=(this._time-n*e)/this._duration;return Math.min(n+i,this._times)}var r=t%1,s=e*Math.floor(t)+this._duration*r;return this.time(s)}},{key:"position",value:function(t){var e,n=this._time,r=this._duration,s=this._wait,i=this._times,u=this._swing,o=this._reverse;if(null==t){var a=function(t){var e=u*Math.floor(t%(2*(s+r))/(s+r)),n=e&&!o||!e&&o,i=Math.pow(-1,n)*(t%(s+r))/r+n;return Math.max(Math.min(i,1),0)},h=i*(s+r)-s;return e=n<=0?Math.round(a(1e-5)):n<h?a(n):Math.round(a(h-1e-5)),e}var l=Math.floor(this.loops()),c=u&&l%2==0;return e=l+(c&&!o||o&&c?t:1-t),this.loops(e)}},{key:"progress",value:function(t){return null==t?Math.min(1,this._time/this.duration()):this.time(t*this.duration())}},{key:"step",value:function(t){if(!this.enabled)return this;t=null==t?16:t,this._time+=t;var e=this.position(),n=this._lastPosition!==e&&0<=this._time;this._lastPosition=e;var i=this.duration(),r=this._lastTime<0&&0<this._time,s=this._lastTime<this._time&&this.time>i;this._lastTime=this._time,r&&this.fire("start",this);var u=this._isDeclarative;if(this.done=!u&&!s&&this._time>=i,n||u){this._initialise(n),this.transforms=new St;var o=this._run(u?t:e);this.fire("step",this)}return this.done=this.done||o&&u,this.done&&this.fire("finish",this),this}},{key:"finish",value:function(){return this.step(1/0)}},{key:"reverse",value:function(t){return this._reverse=null==t?!this._reverse:t,this}},{key:"ease",value:function(t){return this._stepper=new Dt(t),this}},{key:"active",value:function(t){return null==t?this.enabled:(this.enabled=t,this)}},{key:"_rememberMorpher",value:function(t,e){this._history[t]={morpher:e,caller:this._queue[this._queue.length-1]}}},{key:"_tryRetarget",value:function(t,e){if(this._history[t]){if(!this._history[t].caller.initialised){var n=this._queue.indexOf(this._history[t].caller);return this._queue.splice(n,1),!1}this._history[t].caller.isTransform?this._history[t].caller.isTransform(e):this._history[t].morpher.to(e),this._history[t].caller.finished=!1;var i=this.timeline();return i&&i._continue(),!0}return!1}},{key:"_initialise",value:function(t){if(t||this._isDeclarative)for(var e=0,n=this._queue.length;e<n;++e){var i=this._queue[e],r=this._isDeclarative||!i.initialised&&t;t=!i.finished,r&&t&&(i.initialiser.call(this),i.initialised=!0)}}},{key:"_run",value:function(t){for(var e=!0,n=0,i=this._queue.length;n<i;++n){var r=this._queue[n],s=r.runner.call(this,t);r.finished=r.finished||!0===s,e=e&&r.finished}return e}},{key:"addTransform",value:function(t,e){return this.transforms.lmultiplyO(t),this}},{key:"clearTransform",value:function(){return this.transforms=new St,this}}],[{key:"sanitise",value:function(t,e,n){var i=1,r=!1,s=0;return e=e||dt.delay,n=n||"last","object"!==l(t=t||dt.duration)||t instanceof Nt||(e=t.delay||e,n=t.when||n,r=t.swing||r,i=t.times||i,s=t.wait||s,t=t.duration||dt.duration),{duration:t,delay:e,swing:r,times:i,wait:s,when:n}}}]),s}();se.id=0;var ue=function t(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:new St,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:-1,i=!(2<arguments.length&&void 0!==arguments[2])||arguments[2];o(this,t),this.transforms=e,this.id=n,this.done=i};rt([se,ue],{mergeWith:function(t){return new ue(t.transforms.lmultiply(this.transforms),t.id)}});var oe=function(t,e){return t.lmultiplyO(e)},ae=function(t){return t.transforms};var he=function(){function t(){o(this,t),this.runners=[],this.ids=[]}return a(t,[{key:"add",value:function(t){if(!this.runners.includes(t)){var n=t.id+1,e=this.ids.reduce(function(t,e){return t<e&&e<n?e:t},0),i=this.ids.indexOf(e)+1;return this.ids.splice(i,0,n),this.runners.splice(i,0,t),this}}},{key:"getByID",value:function(t){return this.runners[this.ids.indexOf(t+1)]}},{key:"remove",value:function(t){var e=this.ids.indexOf(t+1);return this.ids.splice(e,1),this.runners.splice(e,1),this}},{key:"merge",value:function(){var n=this,i=null;return this.runners.forEach(function(t,e){i&&t.done&&i.done&&(n.remove(t.id),n.edit(i.id,t.mergeWith(i))),i=t}),this}},{key:"edit",value:function(t,e){var n=this.ids.indexOf(t+1);return this.ids.splice(n,1,t),this.runners.splice(n,1,e),this}},{key:"length",value:function(){return this.ids.length}},{key:"clearBefore",value:function(t){var e=this.ids.indexOf(t+1)||1;return this.ids.splice(0,e,0),this.runners.splice(0,e,new ue),this}}]),t}(),le=0;v({Element:{animate:function(t,e,n){var i=se.sanitise(t,e,n),r=this.timeline();return new se(i.duration).loop(i).element(this).timeline(r).schedule(e,n)},delay:function(t,e){return this.animate(0,t,e)},_clearTransformRunnersBefore:function(t){this._transformationRunners.clearBefore(t.id)},_currentTransform:function(e){return this._transformationRunners.runners.filter(function(t){return t.id<=e.id}).map(ae).reduce(oe,new St)},addRunner:function(t){this._transformationRunners.add(t),It.transform_frame(function(){var t=this._transformationRunners.runners.map(ae).reduce(oe,new St);this.transform(t),this._transformationRunners.merge(),1===this._transformationRunners.length()&&(this._frameId=null)}.bind(this),this._frameId)},_prepareRunner:function(){null==this._frameId&&(this._transformationRunners=(new he).add(new ue(new St(this))),this._frameId=le++)}}}),rt(se,{attr:function(t,e){return this.styleAttr("attr",t,e)},css:function(t,e){return this.styleAttr("css",t,e)},styleAttr:function(e,n,t){if("object"===l(n))for(var i in t)this.styleAttr(e,i,t[i]);var r=new $t(this._stepper).to(t);return this.queue(function(){r=r.from(this.element()[e](n))},function(t){return this.element()[e](n,r.at(t)),r.done()}),this},zoom:function(t,e){var n=new $t(this._stepper).to(new gt(t));return this.queue(function(){n=n.from(this.zoom())},function(t){return this.element().zoom(n.at(t),e),n.done()}),this},transform:function(d,v,y){if(v=d.relative||v,this._isDeclarative&&!v&&this._tryRetarget("transform",d))return this;var p=St.isMatrixLike(d);y=null!=d.affine?d.affine:null!=y?y:!p;var m,g,w,k,x,b=(new $t).type(y?Jt:St).stepper(this._stepper);return this.queue(function(){g=g||this.element(),m=m||I(d,g),x=new St(v?void 0:g),g.addRunner(this),v||g._clearTransformRunnersBefore(this)},function(t){v||this.clearTransform();var e=new Mt(m).transform(g._currentTransform(this)),n=e.x,i=e.y,r=new St(_({},d,{origin:[n,i]})),s=this._isDeclarative&&w?w:x;if(y){r=r.decompose(n,i),s=s.decompose(n,i);var u=r.rotate,o=s.rotate,a=[u-360,u,u+360],h=a.map(function(t){return Math.abs(t-o)}),l=Math.min.apply(Math,O(h)),c=h.indexOf(l);r.rotate=a[c]}v&&(p||(r.rotate=d.rotate||0),this._isDeclarative&&k&&(s.rotate=k)),b.from(s),b.to(r);var f=b.at(t);return k=f.rotate,w=new St(f),this.addTransform(w),b.done()},function(t){(t.origin||"center").toString()!==(d.origin||"center").toString()&&(m=I(d,g)),d=_({},t,{origin:m})}),this._isDeclarative&&this._rememberMorpher("transform",b),this},x:function(t,e){return this._queueNumber("x",t)},y:function(t){return this._queueNumber("y",t)},dx:function(t){return this._queueNumberDelta("dx",t)},dy:function(t){return this._queueNumberDelta("dy",t)},_queueNumberDelta:function(e,n){if(n=new gt(n),this._tryRetargetDelta(e,n))return this;var i=new $t(this._stepper).to(n);return this.queue(function(){var t=this.element()[e]();i.from(t),i.to(t+n)},function(t){return this.element()[e](i.at(t)),i.done()}),this._rememberMorpher(e,i),this},_queueObject:function(e,t){if(this._tryRetarget(e,t))return this;var n=new $t(this._stepper).to(t);return this.queue(function(){n.from(this.element()[e]())},function(t){return this.element()[e](n.at(t)),n.done()}),this._rememberMorpher(e,n),this},_queueNumber:function(t,e){return this._queueObject(t,new gt(e))},cx:function(t){return this._queueNumber("cx",t)},cy:function(t){return this._queueNumber("cy",t)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},size:function(t,e){var n;return t&&e||(n=this._element.bbox()),t||(t=n.width/n.height*e),e||(e=n.height/n.width*t),this.width(t).height(e)},width:function(t){return this._queueNumber("width",t)},height:function(t){return this._queueNumber("height",t)},plot:function(t,e,n,i){return 4===arguments.length?this.plot([t,e,n,i]):this._queueObject("plot",new this._element.MorphArray(t))},leading:function(t){return this._queueNumber("leading",t)},viewbox:function(t,e,n,i){return this._queueObject("viewbox",new Xt(t,e,n,i))},update:function(t){return"object"!==l(t)?this.update({offset:t,color:arguments[1],opacity:arguments[2]}):(null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",t.offset),this)}});var ce={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"===e?t:t+"-"+e}};function fe(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())}function de(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())}function ve(t){return null==t?this.attr("cx"):this.attr("cx",t)}function ye(t){return null==t?this.attr("cy"):this.attr("cy",t)}function pe(t){return null==t?2*this.rx():this.rx(new gt(t).divide(2))}function me(t){return null==t?2*this.ry():this.ry(new gt(t).divide(2))}function ge(t,e){var n=L(this,t,e);return this.rx(new gt(n.width).divide(2)).ry(new gt(n.height).divide(2))}["fill","stroke"].forEach(function(e){var n,t={};t[e]=function(t){if(void 0===t)return this;if("string"==typeof t||X.isRgb(t)||t instanceof xt)this.attr(e,t);else for(n=ce[e].length-1;0<=n;n--)null!=t[ce[e][n]]&&this.attr(ce.prefix(e,ce[e][n]),t[ce[e][n]]);return this},v(["Shape","Runner"],t)}),v(["Element","Runner"],{matrix:function(t,e,n,i,r,s){return null==t?new St(this):this.attr("transform",new St(t,e,n,i,r,s))},rotate:function(t,e,n){return this.transform({rotate:t,ox:e,oy:n},!0)},skew:function(t,e,n,i){return 1===arguments.length||3===arguments.length?this.transform({skew:t,ox:e,oy:n},!0):this.transform({skew:[t,e],ox:n,oy:i},!0)},shear:function(t,e,n){return this.transform({shear:t,ox:e,oy:n},!0)},scale:function(t,e,n,i){return 1===arguments.length||3===arguments.length?this.transform({scale:t,ox:e,oy:n},!0):this.transform({scale:[t,e],ox:n,oy:i},!0)},translate:function(t,e){return this.transform({translate:[t,e]},!0)},relative:function(t,e){return this.transform({relative:[t,e]},!0)},flip:function(t,e){var n="string"==typeof t?t:(isFinite(t),"both"),i="both"===t&&isFinite(e)?[e,e]:"x"===t?[e,0]:"y"===t?[0,e]:isFinite(t)?[t,t]:[0,0];this.transform({flip:n,origin:i},!0)},opacity:function(t){return this.attr("opacity",t)},dx:function(t){return this.x(new gt(t).plus(this instanceof se?0:this.x()),!0)},dy:function(t){return this.y(new gt(t).plus(this instanceof se?0:this.y()),!0)},dmove:function(t,e){return this.dx(t).dy(e)}}),v("radius",{radius:function(t,e){var n=(this._element||this).type;return"radialGradient"===n||"radialGradient"===n?this.attr("r",new gt(t)):this.rx(t).ry(null==e?t:e)}}),v("Path",{length:function(){return this.node.getTotalLength()},pointAt:function(t){return new Mt(this.node.getPointAtLength(t))}}),v(["Element","Runner"],{font:function(t,e){if("object"===l(t))for(e in t)this.font(e,t[e]);return"leading"===t?this.leading(e):"anchor"===t?this.attr("text-anchor",e):"size"===t||"family"===t||"weight"===t||"stretch"===t||"variant"===t||"style"===t?this.attr("font-"+t,e):this.attr(t,e)}}),v("Element",{untransform:function(){return this.attr("transform",null)},matrixify:function(){return(this.attr("transform")||"").split(e).slice(0,-1).map(function(t){var e=t.trim().split("(");return[e[0],e[1].split(C).map(function(t){return parseFloat(t)})]}).reverse().reduce(function(t,e){return"matrix"===e[0]?t.lmultiply(St.fromArray(e[1])):t[e[0]].apply(t,e[1])},new St)},toParent:function(t){if(this===t)return this;var e=this.screenCTM(),n=t.screenCTM().inverse();return this.addTo(t).untransform().transform(n.multiply(e)),this},toDoc:function(){return this.toParent(this.doc())},transform:function(t,e){if(null==t||"string"==typeof t){var n=new St(this).decompose();return n[t]||n}St.isMatrixLike(t)||(t=_({},t,{origin:I(t,this)}));var i=new St(!0===e?this:e||!1).transform(t);return this.attr("transform",i)}});var we=Object.freeze({rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)},x:fe,y:de,cx:ve,cy:ye,width:pe,height:me,size:ge}),ke=function(t){function e(){return o(this,e),h(this,u(e).apply(this,arguments))}return r(e,xt),e}(),xe=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("circle",t),e))}return r(e,ke),a(e,[{key:"radius",value:function(t){return this.attr("r",t)}},{key:"rx",value:function(t){return this.attr("r",t)}},{key:"ry",value:function(t){return this.rx(t)}}]),e}();rt(xe,{x:fe,y:de,cx:ve,cy:ye,width:pe,height:me,size:ge}),v({Element:{circle:function(t){return this.put(new xe).radius(new gt(t).divide(2)).move(0,0)}}}),K(xe);var be=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("ellipse",t),e))}return r(e,ke),e}();rt(be,we),v("Container",{ellipse:function(t,e){return this.put(new be).size(t,e).move(0,0)}}),K(be);var _e=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("stop",t),e))}return r(e,xt),a(e,[{key:"update",value:function(t){return("number"==typeof t||t instanceof gt)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new gt(t.offset)),this}}]),e}();function Oe(t,e){return P((e||document).querySelectorAll(t),function(t){return Z(t)})}K(_e),v("Dom",{find:function(t){return Oe(t,this.node)}});var Ae=Object.freeze({from:function(t,e){return"radialGradient"===(this._element||this).type?this.attr({fx:new gt(t),fy:new gt(e)}):this.attr({x1:new gt(t),y1:new gt(e)})},to:function(t,e){return"radialGradient"===(this._element||this).type?this.attr({cx:new gt(t),cy:new gt(e)}):this.attr({x2:new gt(t),y2:new gt(e)})}}),Me=function(t){function i(t){return o(this,i),h(this,u(i).call(this,J(t+"Gradient","string"==typeof t?null:t),i))}return r(i,bt),a(i,[{key:"stop",value:function(t,e,n){return this.put(new _e).update(t,e,n)}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"url",value:function(){return"url(#"+this.id()+")"}},{key:"toString",value:function(){return this.url()}},{key:"attr",value:function(t,e,n){return"transform"===t&&(t="gradientTransform"),c(u(i.prototype),"attr",this).call(this,t,e,n)}},{key:"targets",value:function(){return Oe('svg [fill*="'+this.id()+'"]')}},{key:"bbox",value:function(){return new Xt}}]),i}();rt(Me,Ae),v({Container:{gradient:function(t,e){return this.defs().gradient(t,e)}},Defs:{gradient:function(t,e){return this.put(new Me(t)).update(e)}}}),K(Me);var Ce=function(t){function i(t){return o(this,i),h(this,u(i).call(this,J("pattern",t),i))}return r(i,bt),a(i,[{key:"url",value:function(){return"url(#"+this.id()+")"}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"toString",value:function(){return this.url()}},{key:"attr",value:function(t,e,n){return"transform"===t&&(t="patternTransform"),c(u(i.prototype),"attr",this).call(this,t,e,n)}},{key:"targets",value:function(){return Oe('svg [fill*="'+this.id()+'"]')}},{key:"bbox",value:function(){return new Xt}}]),i}();v({Container:{pattern:function(t,e,n){return this.defs().pattern(t,e,n)}},Defs:{pattern:function(t,e,n){return this.put(new Ce).update(n).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}}),K(Ce);var je=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("image",t),e))}return r(e,ke),a(e,[{key:"load",value:function(n,i){if(!n)return this;var r=new window.Image;return at(r,"load",function(t){var e=this.parent(Ce);0===this.width()&&0===this.height()&&this.size(r.width,r.height),e instanceof Ce&&0===e.width()&&0===e.height()&&e.size(this.width(),this.height()),"function"==typeof i&&i.call(this,{width:r.width,height:r.height,ratio:r.width/r.height,url:n})},this),at(r,"load error",function(){ht(r)}),this.attr("href",r.src=n,B)}},{key:"attrHook",value:function(t){var e=this;return t.doc().defs().pattern(0,0,function(t){t.add(e)})}}]),e}();v({Container:{image:function(t,e){return this.put(new je).size(0,0).load(t,e)}}}),K(je);var Se=pt("PointArray",mt);rt(Se,{toString:function(){for(var t=0,e=this.length,n=[];t<e;t++)n.push(this[t].join(","));return n.join(" ")},toLine:function(){return{x1:this[0][0],y1:this[0][1],x2:this[1][0],y2:this[1][1]}},at:function(t){if(!this.destination)return this;for(var e=0,n=this.length,i=[];e<n;e++)i.push([this[e][0]+(this.destination[e][0]-this[e][0])*t,this[e][1]+(this.destination[e][1]-this[e][1])*t]);return new Se(i)},parse:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:[[0,0]],e=[];if(t instanceof Array){if(t[0]instanceof Array)return t}else t=t.trim().split(C).map(parseFloat);t.length%2!=0&&t.pop();for(var n=0,i=t.length;n<i;n+=2)e.push([t[n],t[n+1]]);return e},move:function(t,e){var n=this.bbox();if(t-=n.x,e-=n.y,!isNaN(t)&&!isNaN(e))for(var i=this.length-1;0<=i;i--)this[i]=[this[i][0]+t,this[i][1]+e];return this},size:function(t,e){var n,i=this.bbox();for(n=this.length-1;0<=n;n--)i.width&&(this[n][0]=(this[n][0]-i.x)*t/i.width+i.x),i.height&&(this[n][1]=(this[n][1]-i.y)*e/i.height+i.y);return this},bbox:function(){var e=-1/0,n=-1/0,i=1/0,r=1/0;return this.forEach(function(t){e=Math.max(t[0],e),n=Math.max(t[1],n),i=Math.min(t[0],i),r=Math.min(t[1],r)}),{x:i,y:r,width:e-i,height:n-r}}});var Te=Se;var Ee=Object.freeze({MorphArray:Te,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),Ne=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("line",t),e))}return r(e,ke),a(e,[{key:"array",value:function(){return new Se([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])}},{key:"plot",value:function(t,e,n,i){return null==t?this.array():(t=void 0!==e?{x1:t,y1:e,x2:n,y2:i}:new Se(t).toLine(),this.attr(t))}},{key:"move",value:function(t,e){return this.attr(this.array().move(t,e).toLine())}},{key:"size",value:function(t,e){var n=L(this,t,e);return this.attr(this.array().size(n.width,n.height).toLine())}}]),e}();rt(Ne,Ee),v({Container:{line:function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return Ne.prototype.plot.apply(this.put(new Ne),null!=e[0]?e:[0,0,0,0])}}}),K(Ne);var De=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("marker",t),e))}return r(e,bt),a(e,[{key:"width",value:function(t){return this.attr("markerWidth",t)}},{key:"height",value:function(t){return this.attr("markerHeight",t)}},{key:"ref",value:function(t,e){return this.attr("refX",t).attr("refY",e)}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"toString",value:function(){return"url(#"+this.id()+")"}}]),e}();v({Container:{marker:function(t,e,n){return this.defs().marker(t,e,n)}},Defs:{marker:function(t,e,n){return this.put(new De).size(t,e).ref(t/2,e/2).viewbox(0,0,t,e).attr("orient","auto").update(n)}},marker:{marker:function(t,e,n,i){var r=["marker"];return"all"!==t&&r.push(t),r=r.join("-"),t=e instanceof De?e:this.defs().marker(e,n,i),this.attr(r,t)}}}),K(De);var Pe=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("path",t),e))}return r(e,ke),a(e,[{key:"array",value:function(){return this._array||(this._array=new Ht(this.attr("d")))}},{key:"plot",value:function(t){return null==t?this.array():this.clear().attr("d","string"==typeof t?t:this._array=new Ht(t))}},{key:"clear",value:function(){return delete this._array,this}},{key:"move",value:function(t,e){return this.attr("d",this.array().move(t,e))}},{key:"x",value:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)}},{key:"y",value:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)}},{key:"size",value:function(t,e){var n=L(this,t,e);return this.attr("d",this.array().size(n.width,n.height))}},{key:"width",value:function(t){return null==t?this.bbox().width:this.size(t,this.bbox().height)}},{key:"height",value:function(t){return null==t?this.bbox().height:this.size(this.bbox().width,t)}},{key:"targets",value:function(){return Oe('svg textpath [href*="'+this.id()+'"]')}}]),e}();Pe.prototype.MorphArray=Ht,v({Container:{path:function(t){return this.put(new Pe).plot(t||new Ht)}}}),K(Pe);var ze=Object.freeze({array:function(){return this._array||(this._array=new Se(this.attr("points")))},plot:function(t){return null==t?this.array():this.clear().attr("points","string"==typeof t?t:this._array=new Se(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var n=L(this,t,e);return this.attr("points",this.array().size(n.width,n.height))}}),Re=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("polygon",t),e))}return r(e,ke),e}();v({Container:{polygon:function(t){return this.put(new Re).plot(t||new Se)}}}),rt(Re,Ee),rt(Re,ze),K(Re);var qe=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("polyline",t),e))}return r(e,ke),e}();v({Container:{polyline:function(t){return this.put(new qe).plot(t||new Se)}}}),rt(qe,Ee),rt(qe,ze),K(qe);var Le=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("rect",t),e))}return r(e,ke),a(e,[{key:"rx",value:function(t){return this.attr("rx",t)}},{key:"ry",value:function(t){return this.attr("ry",t)}}]),e}();v({Container:{rect:function(t,e){return this.put(new Le).size(t,e)}}}),K(Le);var Ie=Object.freeze({plain:function(t){return!1===this._build&&this.clear(),this.node.appendChild(document.createTextNode(t)),this},length:function(){return this.node.getComputedTextLength()}}),Fe=function(t){function n(t){var e;return o(this,n),(e=h(this,u(n).call(this,J("text",t),n))).dom.leading=new gt(1.3),e._rebuild=!0,e._build=!1,e.attr("font-family",vt["font-family"]),e}return r(n,ke),a(n,[{key:"x",value:function(t){return null==t?this.attr("x"):this.attr("x",t)}},{key:"y",value:function(t){var e=this.attr("y"),n="number"==typeof e?e-this.bbox().y:0;return null==t?"number"==typeof e?e-n:e:this.attr("y","number"==typeof t?t+n:t)}},{key:"cx",value:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)}},{key:"cy",value:function(t){return null==t?this.bbox().cy:this.y(t-this.bbox().height/2)}},{key:"text",value:function(t){if(void 0===t){var e=this.node.childNodes,n=0;t="";for(var i=0,r=e.length;i<r;++i)"textPath"!==e[i].nodeName?(i!==n&&3!==e[i].nodeType&&!0===Z(e[i]).dom.newLined&&(t+="\n"),t+=e[i].textContent):0===i&&(n=1);return t}if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else for(var s=0,u=(t=t.split("\n")).length;s<u;s++)this.tspan(t[s]).newLine();return this.build(!1).rebuild()}},{key:"leading",value:function(t){return null==t?this.dom.leading:(this.dom.leading=new gt(t),this.rebuild())}},{key:"rebuild",value:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this,n=0,i=this.dom.leading*new gt(this.attr("font-size"));this.each(function(){this.dom.newLined&&(this.attr("x",e.attr("x")),"\n"===this.text()?n+=i:(this.attr("dy",i+n),n=0))}),this.fire("rebuild")}return this}},{key:"build",value:function(t){return this._build=!!t,this}},{key:"setData",value:function(t){return this.dom=t,this.dom.leading=new gt(t.leading||1.3),this}}]),n}();rt(Fe,Ie),v({Container:{text:function(t){return this.put(new Fe).text(t)},plain:function(t){return this.put(new Fe).plain(t)}}}),K(Fe);var Xe=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("tspan",t),e))}return r(e,Fe),a(e,[{key:"text",value:function(t){return null==t?this.node.textContent+(this.dom.newLined?"\n":""):("function"==typeof t?t.call(this,this):this.plain(t),this)}},{key:"dx",value:function(t){return this.attr("dx",t)}},{key:"dy",value:function(t){return this.attr("dy",t)}},{key:"newLine",value:function(){var t=this.parent(Fe);return this.dom.newLined=!0,this.dy(t.dom.leading*t.attr("font-size")).attr("x",t.x())}}]),e}();rt(Xe,Ie),v({Tspan:{tspan:function(t){var e=new Xe;return this._build||this.clear(),this.node.appendChild(e.node),e.text(t)}}}),K(Xe);var Ye=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J(t,"string"==typeof t?null:t),e))}return r(e,bt),a(e,[{key:"words",value:function(t){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this.node.appendChild(document.createTextNode(t)),this}}]),e}();K(Ye),v("Container",{element:function(t,e){return this.put(new Ye(t,e))}});var He=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("clipPath",t),e))}return r(e,bt),a(e,[{key:"remove",value:function(){return this.targets().forEach(function(t){t.unclip()}),c(u(e.prototype),"remove",this).call(this)}},{key:"targets",value:function(){return Oe('svg [clip-path*="'+this.id()+'"]')}}]),e}();v({Container:{clip:function(){return this.defs().put(new He)}},Element:{clipWith:function(t){var e=t instanceof He?t:this.parent().clip().add(t);return this.attr("clip-path",'url("#'+e.id()+'")')},unclip:function(){return this.attr("clip-path",null)},clipper:function(){return this.reference("clip-path")}}}),K(He);var Be=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("g",t),e))}return r(e,bt),e}();v({Element:{group:function(){return this.put(new Be)}}}),K(Be);var Ge=function(t){function e(t){return o(this,e),h(this,u(e).call(this,t,e))}return r(e,wt),e}();K(Ge);var Ve=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("a",t),e))}return r(e,bt),a(e,[{key:"to",value:function(t){return this.attr("href",t,B)}},{key:"target",value:function(t){return this.attr("target",t)}}]),e}();v({Container:{link:function(t){return this.put(new Ve).to(t)}},Element:{linkTo:function(t){var e=new Ve;return"function"==typeof t?t.call(e,e):e.to(t),this.parent().put(e).put(this)}}}),K(Ve);var Qe=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("mask",t),e))}return r(e,bt),a(e,[{key:"remove",value:function(){return this.targets().forEach(function(t){t.unmask()}),c(u(e.prototype),"remove",this).call(this)}},{key:"targets",value:function(){return Oe('svg [mask*="'+this.id()+'"]')}}]),e}();v({Container:{mask:function(){return this.defs().put(new Qe)}},Element:{maskWith:function(t){var e=t instanceof Qe?t:this.parent().mask().add(t);return this.attr("mask",'url("#'+e.id()+'")')},unmask:function(){return this.attr("mask",null)},masker:function(){return this.reference("mask")}}}),K(Qe);var Ue=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("symbol",t),e))}return r(e,bt),e}();v({Container:{symbol:function(){return this.put(new Ue)}}}),K(Ue);var $e=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("textPath",t),e))}return r(e,Fe),a(e,[{key:"array",value:function(){var t=this.track();return t?t.array():null}},{key:"plot",value:function(t){var e=this.track(),n=null;return e&&(n=e.plot(t)),null==t?n:this}},{key:"track",value:function(){return this.reference("href")}}]),e}();v({Container:{textPath:function(t,e){return this.defs().path(e).text(t).addTo(this)}},Text:{path:function(t){var e=new $e;return t instanceof Pe||(t=this.doc().defs().path(t)),e.attr("href","#"+t,B),this.put(e)},textPath:function(){return this.find("textPath")}},Path:{text:function(t){if(t instanceof Fe){var e=t.text();return t.clear().path(this).text(e)}return this.parent().put(new Fe).path(this).text(t)}}}),$e.prototype.MorphArray=Ht,K($e);var We=function(t){function e(t){return o(this,e),h(this,u(e).call(this,J("use",t),e))}return r(e,ke),a(e,[{key:"element",value:function(t,e){return this.attr("href",(e||"")+"#"+t,B)}}]),e}();v({Container:{use:function(t,e){return this.put(new We).element(t,e)}}}),K(We),rt([Ot,Symbol,je,Ce,De],t("viewbox")),rt([Ne,qe,Re,Pe],t("marker")),rt(Fe,t("Text")),rt(Pe,t("Path")),rt(_t,t("Defs")),rt([Fe,Xe],t("Tspan")),rt([Le,be,xe,Me],t("radius")),rt(ct,t("EventTarget")),rt(wt,t("Dom")),rt(xt,t("Element")),rt(ke,t("Shape")),rt(bt,t("Container")),te([gt,X,Xt,St,mt,Se,Ht]),ee();var Je=Object.freeze({Morphable:$t,registerMorphableType:te,makeMorphable:ee,TransformBag:Jt,ObjectBag:Zt,NonMorphable:Wt,defaults:yt,parser:At,find:Oe,Animator:It,Controller:Pt,Ease:Dt,PID:qt,Spring:Rt,easing:Et,Queue:Lt,Runner:se,Timeline:re,SVGArray:mt,Box:Xt,Color:X,EventTarget:ct,Matrix:St,SVGNumber:gt,PathArray:Ht,Point:Mt,PointArray:Se,Bare:Ye,Circle:xe,ClipPath:He,Container:bt,Defs:_t,Doc:Ot,Dom:wt,Element:xt,Ellipse:be,Gradient:Me,G:Be,HtmlNode:Ge,A:Ve,Image:je,Line:Ne,Marker:De,Mask:Qe,Path:Pe,Pattern:Ce,Polygon:Re,Polyline:qe,Rect:Le,Shape:ke,Stop:_e,Symbol:Ue,Text:Fe,TextPath:$e,Tspan:Xe,Use:We,map:P,filter:function(t,e){var n,i=t.length,r=[];for(n=0;n<i;n++)e(t[n])&&r.push(t[n]);return r},radians:z,degrees:function(t){return 180*t/Math.PI%360},camelCase:R,capitalize:q,proportionalSize:L,getOrigin:I,ns:Y,xmlns:H,xlink:B,svgjs:G,on:at,off:ht,dispatch:lt,root:U,makeNode:$,makeInstance:W,nodeOrNew:J,adopt:Z,register:K,getClass:tt,eid:nt,assignNewId:it,extend:rt});function Ze(t){return W(t)}return Object.assign(Ze,Je),(Ze.utils=Ze).regex=D,Ze.get=Ze}();
diff --git a/package.json b/package.json
index f77fe3c..3c6ef31 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,8 @@
   "license": "MIT",
   "typings": "./svg.js.d.ts",
   "scripts": {
-    "build": "npx rollup -c",
+    "build": "npx eslint ./src --fix && npx rollup -c",
+    "rollup": "npx rollup -c",
     "lint": "npx eslint ./src",
     "fix": "npx eslint ./src --fix",
     "test": "npx karma start .config/karma.conf.js --single-run",
diff --git a/rollup.config.js b/rollup.config.js
index 9c48a23..ca9f3df 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -34,6 +34,20 @@ export default [{
     filesize(),
   ]
 }, {
+  input: 'src/main.js',
+  output: {
+    file: 'dist/svg.es6.js',
+    name: 'SVG',
+    sourceMap: true,
+    format: 'esm',
+    banner: headerLong
+  },
+  plugins: [
+    babel({
+      include: 'src/**'
+    })
+  ]
+}, {
   input: 'src/svg.js',
   output: {
     file: 'dist/svg.min.js',
diff --git a/src/Animator.js b/src/animation/Animator.js
index b015163..fdb2326 100644
--- a/src/Animator.js
+++ b/src/animation/Animator.js
@@ -52,7 +52,7 @@ const Animator = {
   _draw (now) {
     // Run all the timeouts we can run, if they are not ready yet, add them
     // to the end of the queue immediately! (bad timeouts!!! [sarcasm])
-    var nextTimeout = null

+    var nextTimeout = null
     var lastTimeout = Animator.timeouts.last()
     while ((nextTimeout = Animator.timeouts.shift())) {
       // Run the timeout if its time, or push it to the end
diff --git a/src/Controller.js b/src/animation/Controller.js
index 0bf5ac0..1716545 100644
--- a/src/Controller.js
+++ b/src/animation/Controller.js
@@ -1,6 +1,5 @@
-
-import { timeline } from './defaults.js'
-import { extend } from './tools.js'
+import { timeline } from '../modules/core/defaults.js'
+import { extend } from '../utils/adopter.js'
 
 /***
 Base Class
diff --git a/src/Queue.js b/src/animation/Queue.js
index 14b92b4..14b92b4 100644
--- a/src/Queue.js
+++ b/src/animation/Queue.js
diff --git a/src/Runner.js b/src/animation/Runner.js
index 00ddf97..f752185 100644
--- a/src/Runner.js
+++ b/src/animation/Runner.js
@@ -1,24 +1,16 @@
-import { isMatrixLike, getOrigin } from './helpers.js'
-import Matrix from './Matrix.js'
-import Morphable, { TransformBag } from './Morphable.js'
-import SVGNumber from './SVGNumber.js'
-import Timeline from './Timeline.js'
 import { Controller, Ease, Stepper } from './Controller.js'
-import { noop, timeline } from './defaults.js'
-import { extend } from './tools.js'
+import { extend } from '../utils/adopter.js'
+import { getOrigin } from '../utils/utils.js'
+import { noop, timeline } from '../modules/core/defaults.js'
+import { registerMethods } from '../utils/methods.js'
 import Animator from './Animator.js'
-import Point from './Point.js'
-import { registerMethods } from './methods.js'
-import EventTarget from './EventTarget.js'
-import Box from './Box.js'
-
-// FIXME: What is this doing here?
-// easing = {
-//   '-': function (pos) { return pos },
-//   '<>': function (pos) { return -Math.cos(pos * Math.PI) / 2 + 0.5 },
-//   '>': function (pos) { return Math.sin(pos * Math.PI / 2) },
-//   '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 }
-// }
+import Box from '../types/Box.js'
+import EventTarget from '../types/EventTarget.js'
+import Matrix from '../types/Matrix.js'
+import Morphable, { TransformBag } from '../types/Morphable.js'
+import Point from '../types/Point.js'
+import SVGNumber from '../types/SVGNumber.js'
+import Timeline from './Timeline.js'
 
 export default class Runner extends EventTarget {
   constructor (options) {
@@ -670,7 +662,7 @@ extend(Runner, {
     }
 
     // Parse the parameters
-    var isMatrix = isMatrixLike(transforms)
+    var isMatrix = Matrix.isMatrixLike(transforms)
     affine = transforms.affine != null
       ? transforms.affine
       : (affine != null ? affine : !isMatrix)
diff --git a/src/Timeline.js b/src/animation/Timeline.js
index c5ce9d3..619e50a 100644
--- a/src/Timeline.js
+++ b/src/animation/Timeline.js
@@ -1,5 +1,5 @@
+import { registerMethods } from '../utils/methods.js'
 import Animator from './Animator.js'
-import { registerMethods } from './methods.js'
 
 var time = window.performance || Date
 
diff --git a/src/classes.js b/src/classes.js
deleted file mode 100644
index 8e1b866..0000000
--- a/src/classes.js
+++ /dev/null
@@ -1,44 +0,0 @@
-export { default as Animator } from './Animator.js'
-export { default as SVGArray } from './SVGArray.js'
-export { default as Bare } from './Bare.js'
-export { default as Box } from './Box.js'
-export { default as Circle } from './Circle.js'
-export { default as ClipPath } from './ClipPath.js'
-export { default as Color } from './Color.js'
-export { default as Container } from './Container.js'
-export { Controller, Ease, PID, Spring } from './Controller.js'
-export { default as Defs } from './Defs.js'
-export { default as Doc } from './Doc.js'
-export { default as Dom } from './Dom.js'
-export { default as Element } from './Element.js'
-export { default as Ellipse } from './Ellipse.js'
-export { default as EventTarget } from './EventTarget.js'
-export { default as Gradient } from './Gradient.js'
-export { default as G } from './G.js'
-export { default as HtmlNode } from './HtmlNode.js'
-export { default as A } from './A.js'
-export { default as Image } from './Image.js'
-export { default as Line } from './Line.js'
-export { default as Marker } from './Marker.js'
-export { default as Mask } from './Mask.js'
-export { default as Matrix } from './Matrix.js'
-export { default as Morphable } from './Morphable.js'
-export { default as SVGNumber } from './SVGNumber.js'
-export { default as Path } from './Path.js'
-export { default as PathArray } from './PathArray.js'
-export { default as Pattern } from './Pattern.js'
-export { default as Point } from './Point.js'
-export { default as PointArray } from './PointArray.js'
-export { default as Polygon } from './Polygon.js'
-export { default as Polyline } from './Polyline.js'
-export { default as Queue } from './Queue.js'
-export { default as Rect } from './Rect.js'
-export { default as Runner } from './Runner.js'
-export { default as Shape } from './Shape.js'
-export { default as Stop } from './Stop.js'
-export { default as Symbol } from './Symbol.js'
-export { default as Text } from './Text.js'
-export { default as TextPath } from './TextPath.js'
-export { default as Timeline } from './Timeline.js'
-export { default as Tspan } from './Tspan.js'
-export { default as Use } from './Use.js'
diff --git a/src/A.js b/src/elements/A.js
index 5bd1719..68da597 100644
--- a/src/A.js
+++ b/src/elements/A.js
@@ -1,8 +1,7 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import { xlink } from '../modules/core/namespaces.js'
 import Container from './Container.js'
-import { nodeOrNew } from './tools.js'
-import { xlink } from './namespaces.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
 
 export default class A extends Container {
   constructor (node) {
diff --git a/src/Bare.js b/src/elements/Bare.js
index 7b3be98..43fc075 100644
--- a/src/Bare.js
+++ b/src/elements/Bare.js
@@ -1,7 +1,6 @@
-import { nodeOrNew } from './tools.js'
-import { register } from './adopter.js'
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Container from './Container.js'
-import { registerMethods } from './methods.js'
 
 export default class Bare extends Container {
   constructor (node) {
diff --git a/src/Circle.js b/src/elements/Circle.js
index 8879eec..c296885 100644
--- a/src/Circle.js
+++ b/src/elements/Circle.js
@@ -1,9 +1,8 @@
+import { cx, cy, height, size, width, x, y } from '../modules/core/circled.js'
+import { extend, nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import SVGNumber from '../types/SVGNumber.js'
 import Shape from './Shape.js'
-import { nodeOrNew, extend } from './tools.js'
-import { x, y, cx, cy, width, height, size } from './circled.js'
-import SVGNumber from './SVGNumber.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
 
 export default class Circle extends Shape {
   constructor (node) {
diff --git a/src/ClipPath.js b/src/elements/ClipPath.js
index 953d5cf..2828d6e 100644
--- a/src/ClipPath.js
+++ b/src/elements/ClipPath.js
@@ -1,9 +1,7 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Container from './Container.js'
-import { nodeOrNew } from './tools.js'
-import find from './selector.js'
-// import {remove} from './Element.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
+import baseFind from '../modules/core/selector.js'
 
 export default class ClipPath extends Container {
   constructor (node) {
@@ -22,7 +20,7 @@ export default class ClipPath extends Container {
   }
 
   targets () {
-    return find('svg [clip-path*="' + this.id() + '"]')
+    return baseFind('svg [clip-path*="' + this.id() + '"]')
   }
 }
 
diff --git a/src/Container.js b/src/elements/Container.js
index c45d805..cdf8495 100644
--- a/src/Container.js
+++ b/src/elements/Container.js
@@ -1,4 +1,5 @@
 import Element from './Element.js'
+
 export default class Container extends Element {
   flatten (parent) {
     this.each(function () {
diff --git a/src/Defs.js b/src/elements/Defs.js
index ddcf733..58932cb 100644
--- a/src/Defs.js
+++ b/src/elements/Defs.js
@@ -1,6 +1,5 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
 import Container from './Container.js'
-import { nodeOrNew } from './tools.js'
-import { register } from './adopter.js'
 
 export default class Defs extends Container {
   constructor (node) {
diff --git a/src/Doc.js b/src/elements/Doc.js
index b44a122..8d450ce 100644
--- a/src/Doc.js
+++ b/src/elements/Doc.js
@@ -1,9 +1,8 @@
+import { adopt, nodeOrNew, register } from '../utils/adopter.js'
+import { ns, svgjs, xlink, xmlns } from '../modules/core/namespaces.js'
+import { registerMethods } from '../utils/methods.js'
 import Container from './Container.js'
 import Defs from './Defs.js'
-import { nodeOrNew } from './tools.js'
-import { ns, xlink, xmlns, svgjs } from './namespaces.js'
-import { adopt, register } from './adopter.js'
-import { registerMethods } from './methods.js'
 
 export default class Doc extends Container {
   constructor (node) {
diff --git a/src/Dom.js b/src/elements/Dom.js
index 5c84308..eab3f0d 100644
--- a/src/Dom.js
+++ b/src/elements/Dom.js
@@ -1,11 +1,14 @@
-import EventTarget from './EventTarget.js'
-import { assignNewId, adopt, makeInstance, eid } from './adopter.js'
-import { map } from './utils.js'
-import { matcher } from './helpers.js'
-import { ns } from './namespaces.js'
-
-import { extend } from './tools.js'
-import attr from './attr.js'
+import {
+  adopt,
+  assignNewId,
+  eid,
+  extend,
+  makeInstance
+} from '../utils/adopter.js'
+import { map } from '../utils/utils.js'
+import { ns } from '../modules/core/namespaces.js'
+import EventTarget from '../types/EventTarget.js'
+import attr from '../modules/core/attr.js'
 
 export default class Dom extends EventTarget {
   constructor (node) {
@@ -130,7 +133,8 @@ export default class Dom extends EventTarget {
 
   // matches the element vs a css selector
   matches (selector) {
-    return matcher(this.node, selector)
+    const el = this.node
+    return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)
   }
 
   // Returns the svg node to call native svg methods on it
diff --git a/src/Element.js b/src/elements/Element.js
index 4c3dcf6..a38b2ac 100644
--- a/src/Element.js
+++ b/src/elements/Element.js
@@ -1,7 +1,8 @@
-import { proportionalSize, idFromReference } from './helpers.js'
-import { makeInstance, root, getClass } from './adopter.js'
-import SVGNumber from './SVGNumber.js'
+import { getClass, makeInstance, root } from '../utils/adopter.js'
+import { proportionalSize } from '../utils/utils.js'
+import { reference } from '../modules/core/regex.js'
 import Dom from './Dom.js'
+import SVGNumber from '../types/SVGNumber.js'
 
 const Doc = getClass(root)
 
@@ -90,8 +91,11 @@ export default class Element extends Dom {
 
   // Get referenced element form attribute value
   reference (attr) {
-    let id = idFromReference(this.attr(attr))
-    return id ? makeInstance(id) : null
+    attr = this.attr(attr)
+    if (!attr) return null
+
+    const m = attr.match(reference)
+    return m ? makeInstance(m[1]) : null
   }
 
   // set given data to the elements data property
diff --git a/src/Ellipse.js b/src/elements/Ellipse.js
index 2cc1d09..40b9369 100644
--- a/src/Ellipse.js
+++ b/src/elements/Ellipse.js
@@ -1,8 +1,7 @@
+import { extend, nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Shape from './Shape.js'
-import * as circled from './circled.js'
-import { extend, nodeOrNew } from './tools.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
+import * as circled from '../modules/core/circled.js'
 
 export default class Ellipse extends Shape {
   constructor (node) {
diff --git a/src/G.js b/src/elements/G.js
index 2532f30..00803c0 100644
--- a/src/G.js
+++ b/src/elements/G.js
@@ -1,7 +1,6 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Container from './Container.js'
-import { nodeOrNew } from './tools.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
 
 export default class G extends Container {
   constructor (node) {
diff --git a/src/Gradient.js b/src/elements/Gradient.js
index 5d7dd2a..cf8aeaa 100644
--- a/src/Gradient.js
+++ b/src/elements/Gradient.js
@@ -1,12 +1,10 @@
-import Stop from './Stop.js'
+import { extend, nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import Box from '../types/Box.js'
 import Container from './Container.js'
-import * as gradiented from './gradiented.js'
-import { nodeOrNew, extend } from './tools.js'
-// import attr from './attr.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
-import Box from './Box.js'
-import { find } from './selector.js'
+import Stop from './Stop.js'
+import baseFind from '../modules/core/selector.js'
+import * as gradiented from '../modules/core/gradiented.js'
 
 export default class Gradient extends Container {
   constructor (type) {
@@ -51,7 +49,7 @@ export default class Gradient extends Container {
   }
 
   targets () {
-    return find('svg [fill*="' + this.id() + '"]')
+    return baseFind('svg [fill*="' + this.id() + '"]')
   }
 
   bbox () {
diff --git a/src/HtmlNode.js b/src/elements/HtmlNode.js
index ced223f..59152d3 100644
--- a/src/HtmlNode.js
+++ b/src/elements/HtmlNode.js
@@ -1,5 +1,5 @@
+import { register } from '../utils/adopter.js'
 import Dom from './Dom.js'
-import { register } from './adopter.js'
 
 export default class HtmlNode extends Dom {
   constructor (node) {
diff --git a/src/Image.js b/src/elements/Image.js
index f257492..5e672f4 100644
--- a/src/Image.js
+++ b/src/elements/Image.js
@@ -1,10 +1,9 @@
-import Shape from './Shape.js'
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { off, on } from '../modules/core/event.js'
+import { registerMethods } from '../utils/methods.js'
+import { xlink } from '../modules/core/namespaces.js'
 import Pattern from './Pattern.js'
-import { on, off } from './event.js'
-import { nodeOrNew } from './tools.js'
-import { xlink } from './namespaces.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
+import Shape from './Shape.js'
 
 export default class Image extends Shape {
   constructor (node) {
diff --git a/src/Line.js b/src/elements/Line.js
index 4028e48..b9bc4e8 100644
--- a/src/Line.js
+++ b/src/elements/Line.js
@@ -1,10 +1,9 @@
-import { proportionalSize } from './helpers.js'
-import { nodeOrNew, extend } from './tools.js'
-import PointArray from './PointArray.js'
+import { extend, nodeOrNew, register } from '../utils/adopter.js'
+import { proportionalSize } from '../utils/utils.js'
+import { registerMethods } from '../utils/methods.js'
+import PointArray from '../types/PointArray.js'
 import Shape from './Shape.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
-import * as pointed from './pointed.js'
+import * as pointed from '../modules/core/pointed.js'
 
 export default class Line extends Shape {
   // Initialize node
diff --git a/src/Marker.js b/src/elements/Marker.js
index 16b2480..2b0541b 100644
--- a/src/Marker.js
+++ b/src/elements/Marker.js
@@ -1,7 +1,6 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Container from './Container.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
-import { nodeOrNew } from './tools.js'
 
 export default class Marker extends Container {
   // Initialize node
diff --git a/src/Mask.js b/src/elements/Mask.js
index c5a2faa..1ed5a8b 100644
--- a/src/Mask.js
+++ b/src/elements/Mask.js
@@ -1,9 +1,7 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Container from './Container.js'
-import { nodeOrNew } from './tools.js'
-import find from './selector.js'
-// import {remove} from  './Element.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
+import baseFind from '../modules/core/selector.js'
 
 export default class Mask extends Container {
   // Initialize node
@@ -23,7 +21,7 @@ export default class Mask extends Container {
   }
 
   targets () {
-    return find('svg [mask*="' + this.id() + '"]')
+    return baseFind('svg [mask*="' + this.id() + '"]')
   }
 }
 
diff --git a/src/Path.js b/src/elements/Path.js
index 3557e22..71be8a1 100644
--- a/src/Path.js
+++ b/src/elements/Path.js
@@ -1,10 +1,9 @@
-import { proportionalSize } from './helpers.js'
-import { nodeOrNew } from './tools.js'
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { proportionalSize } from '../utils/utils.js'
+import { registerMethods } from '../utils/methods.js'
+import PathArray from '../types/PathArray.js'
 import Shape from './Shape.js'
-import PathArray from './PathArray.js'
-import find from './selector.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
+import baseFind from '../modules/core/selector.js'
 
 export default class Path extends Shape {
   // Initialize node
@@ -61,7 +60,7 @@ export default class Path extends Shape {
   }
 
   targets () {
-    return find('svg textpath [href*="' + this.id() + '"]')
+    return baseFind('svg textpath [href*="' + this.id() + '"]')
   }
 }
 
diff --git a/src/Pattern.js b/src/elements/Pattern.js
index 4a3e1ad..9111837 100644
--- a/src/Pattern.js
+++ b/src/elements/Pattern.js
@@ -1,10 +1,8 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import Box from '../types/Box.js'
 import Container from './Container.js'
-import { nodeOrNew } from './tools.js'
-// import attr from './attr.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
-import Box from './Box.js'
-import { find } from './selector.js'
+import baseFind from '../modules/core/selector.js'
 
 export default class Pattern extends Container {
   // Initialize node
@@ -42,7 +40,7 @@ export default class Pattern extends Container {
   }
 
   targets () {
-    return find('svg [fill*="' + this.id() + '"]')
+    return baseFind('svg [fill*="' + this.id() + '"]')
   }
 
   bbox () {
diff --git a/src/Polygon.js b/src/elements/Polygon.js
index c4afac6..6097977 100644
--- a/src/Polygon.js
+++ b/src/elements/Polygon.js
@@ -1,10 +1,9 @@
+import { extend, nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import PointArray from '../types/PointArray.js'
 import Shape from './Shape.js'
-import { nodeOrNew, extend } from './tools.js'
-import * as pointed from './pointed.js'
-import * as poly from './poly.js'
-import PointArray from './PointArray.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
+import * as pointed from '../modules/core/pointed.js'
+import * as poly from '../modules/core/poly.js'
 
 export default class Polygon extends Shape {
   // Initialize node
diff --git a/src/Polyline.js b/src/elements/Polyline.js
index 7d1664e..b2cb15b 100644
--- a/src/Polyline.js
+++ b/src/elements/Polyline.js
@@ -1,10 +1,9 @@
+import { extend, nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import PointArray from '../types/PointArray.js'
 import Shape from './Shape.js'
-import { nodeOrNew, extend } from './tools.js'
-import PointArray from './PointArray.js'
-import * as pointed from './pointed.js'
-import * as poly from './poly.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
+import * as pointed from '../modules/core/pointed.js'
+import * as poly from '../modules/core/poly.js'
 
 export default class Polyline extends Shape {
   // Initialize node
diff --git a/src/Rect.js b/src/elements/Rect.js
index 535f562..9d6163c 100644
--- a/src/Rect.js
+++ b/src/elements/Rect.js
@@ -1,7 +1,6 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Shape from './Shape.js'
-import { nodeOrNew } from './tools.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
 
 export default class Rect extends Shape {
   // Initialize node
diff --git a/src/Shape.js b/src/elements/Shape.js
index f02fec2..bf68a8d 100644
--- a/src/Shape.js
+++ b/src/elements/Shape.js
@@ -1,2 +1,3 @@
 import Element from './Element.js'
+
 export default class Shape extends Element {}
diff --git a/src/Stop.js b/src/elements/Stop.js
index df33dbf..bf919e8 100644
--- a/src/Stop.js
+++ b/src/elements/Stop.js
@@ -1,7 +1,6 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
 import Element from './Element.js'
-import SVGNumber from './SVGNumber.js'
-import { nodeOrNew } from './tools.js'
-import { register } from './adopter.js'
+import SVGNumber from '../types/SVGNumber.js'
 
 export default class Stop extends Element {
   constructor (node) {
diff --git a/src/Symbol.js b/src/elements/Symbol.js
index 9efb86c..183f449 100644
--- a/src/Symbol.js
+++ b/src/elements/Symbol.js
@@ -1,7 +1,6 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Container from './Container.js'
-import { nodeOrNew } from './tools.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
 
 export default class Symbol extends Container {
   // Initialize node
diff --git a/src/Text.js b/src/elements/Text.js
index 1b4c442..58d50a3 100644
--- a/src/Text.js
+++ b/src/elements/Text.js
@@ -1,10 +1,9 @@
+import { adopt, extend, nodeOrNew, register } from '../utils/adopter.js'
+import { attrs } from '../modules/core/defaults.js'
+import { registerMethods } from '../utils/methods.js'
+import SVGNumber from '../types/SVGNumber.js'
 import Shape from './Shape.js'
-import SVGNumber from './SVGNumber.js'
-import { nodeOrNew, extend } from './tools.js'
-import { attrs } from './defaults.js'
-import * as textable from './textable.js'
-import { register, adopt } from './adopter.js'
-import { registerMethods } from './methods.js'
+import * as textable from '../modules/core/textable.js'
 
 export default class Text extends Shape {
   // Initialize node
diff --git a/src/TextPath.js b/src/elements/TextPath.js
index ce5115b..04146bc 100644
--- a/src/TextPath.js
+++ b/src/elements/TextPath.js
@@ -1,10 +1,9 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import { xlink } from '../modules/core/namespaces.js'
 import Path from './Path.js'
+import PathArray from '../types/PathArray.js'
 import Text from './Text.js'
-import PathArray from './PathArray.js'
-import { nodeOrNew } from './tools.js'
-import { xlink } from './namespaces.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
 
 export default class TextPath extends Text {
   // Initialize node
diff --git a/src/Tspan.js b/src/elements/Tspan.js
index f3a9469..69815d4 100644
--- a/src/Tspan.js
+++ b/src/elements/Tspan.js
@@ -1,8 +1,7 @@
+import { extend, nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
 import Text from './Text.js'
-import { nodeOrNew, extend } from './tools.js'
-import * as textable from './textable.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
+import * as textable from '../modules/core/textable.js'
 
 export default class Tspan extends Text {
   // Initialize node
diff --git a/src/Use.js b/src/elements/Use.js
index 5d4b5f4..43a4e9b 100644
--- a/src/Use.js
+++ b/src/elements/Use.js
@@ -1,8 +1,7 @@
+import { nodeOrNew, register } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import { xlink } from '../modules/core/namespaces.js'
 import Shape from './Shape.js'
-import { xlink } from './namespaces.js'
-import { register } from './adopter.js'
-import { registerMethods } from './methods.js'
-import { nodeOrNew } from './tools.js'
 
 export default class Use extends Shape {
   constructor (node) {
diff --git a/src/helpers.js b/src/helpers.js
deleted file mode 100644
index 9bf393c..0000000
--- a/src/helpers.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import { dots, reference } from './regex.js'
-
-export function isNulledBox (box) {
-  return !box.w && !box.h && !box.x && !box.y
-}
-
-export function domContains (node) {
-  return (document.documentElement.contains || function (node) {
-    // This is IE - it does not support contains() for top-level SVGs
-    while (node.parentNode) {
-      node = node.parentNode
-    }
-    return node === document
-  }).call(document.documentElement, node)
-}
-
-export function pathRegReplace (a, b, c, d) {
-  return c + d.replace(dots, ' .')
-}
-
-// creates deep clone of array
-export function arrayClone (arr) {
-  var clone = arr.slice(0)
-  for (var i = clone.length; i--;) {
-    if (Array.isArray(clone[i])) {
-      clone[i] = arrayClone(clone[i])
-    }
-  }
-  return clone
-}
-
-// tests if a given selector matches an element
-export function matcher (el, selector) {
-  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)
-}
-
-// Convert dash-separated-string to camelCase
-export function camelCase (s) {
-  return s.toLowerCase().replace(/-(.)/g, function (m, g) {
-    return g.toUpperCase()
-  })
-}
-
-// Capitalize first letter of a string
-export function capitalize (s) {
-  return s.charAt(0).toUpperCase() + s.slice(1)
-}
-
-// Ensure to six-based hex
-export function fullHex (hex) {
-  return hex.length === 4
-    ? [ '#',
-      hex.substring(1, 2), hex.substring(1, 2),
-      hex.substring(2, 3), hex.substring(2, 3),
-      hex.substring(3, 4), hex.substring(3, 4)
-    ].join('')
-    : hex
-}
-
-// Component to hex value
-export function compToHex (comp) {
-  var hex = comp.toString(16)
-  return hex.length === 1 ? '0' + hex : hex
-}
-
-// Calculate proportional width and height values when necessary
-export function proportionalSize (element, width, height) {
-  if (width == null || height == null) {
-    var box = element.bbox()
-
-    if (width == null) {
-      width = box.width / box.height * height
-    } else if (height == null) {
-      height = box.height / box.width * width
-    }
-  }
-
-  return {
-    width: width,
-    height: height
-  }
-}
-
-// Map matrix array to object
-export function arrayToMatrix (a) {
-  return { a: a[0], b: a[1], c: a[2], d: a[3], e: a[4], f: a[5] }
-}
-
-// Add centre point to transform object
-export function ensureCentre (o, target) {
-  o.cx = o.cx == null ? target.bbox().cx : o.cx
-  o.cy = o.cy == null ? target.bbox().cy : o.cy
-}
-
-// PathArray Helpers
-export function arrayToString (a) {
-  for (var i = 0, il = a.length, s = ''; i < il; i++) {
-    s += a[i][0]
-
-    if (a[i][1] != null) {
-      s += a[i][1]
-
-      if (a[i][2] != null) {
-        s += ' '
-        s += a[i][2]
-
-        if (a[i][3] != null) {
-          s += ' '
-          s += a[i][3]
-          s += ' '
-          s += a[i][4]
-
-          if (a[i][5] != null) {
-            s += ' '
-            s += a[i][5]
-            s += ' '
-            s += a[i][6]
-
-            if (a[i][7] != null) {
-              s += ' '
-              s += a[i][7]
-            }
-          }
-        }
-      }
-    }
-  }
-
-  return s + ' '
-}
-
-// Add more bounding box properties
-export function fullBox (b) {
-  if (b.x == null) {
-    b.x = 0
-    b.y = 0
-    b.width = 0
-    b.height = 0
-  }
-
-  b.w = b.width
-  b.h = b.height
-  b.x2 = b.x + b.width
-  b.y2 = b.y + b.height
-  b.cx = b.x + b.width / 2
-  b.cy = b.y + b.height / 2
-
-  return b
-}
-
-// Get id from reference string
-export function idFromReference (url) {
-  var m = (url || '').toString().match(reference)
-
-  if (m) return m[1]
-}
-
-// Create matrix array for looping
-export let abcdef = 'abcdef'.split('')
-
-export function closeEnough (a, b, threshold) {
-  return Math.abs(b - a) < (threshold || 1e-6)
-}
-
-// move this to static matrix method
-export function isMatrixLike (o) {
-  return (
-    o.a != null ||
-    o.b != null ||
-    o.c != null ||
-    o.d != null ||
-    o.e != null ||
-    o.f != null
-  )
-}
-
-export function getOrigin (o, element) {
-  // Allow origin or around as the names
-  let origin = o.origin // o.around == null ? o.origin : o.around
-  let ox, oy
-
-  // Allow the user to pass a string to rotate around a given point
-  if (typeof origin === 'string' || origin == null) {
-    // Get the bounding box of the element with no transformations applied
-    const string = (origin || 'center').toLowerCase().trim()
-    const { height, width, x, y } = element.bbox()
-
-    // Calculate the transformed x and y coordinates
-    let bx = string.includes('left') ? x
-      : string.includes('right') ? x + width
-        : x + width / 2
-    let by = string.includes('top') ? y
-      : string.includes('bottom') ? y + height
-        : y + height / 2
-
-    // Set the bounds eg : "bottom-left", "Top right", "middle" etc...
-    ox = o.ox != null ? o.ox : bx
-    oy = o.oy != null ? o.oy : by
-  } else {
-    ox = origin[0]
-    oy = origin[1]
-  }
-
-  // Return the origin as it is if it wasn't a string
-  return [ ox, oy ]
-}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..278e8fd
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,163 @@
+/* Optional Modules */
+import './modules/optional/arrange.js'
+import './modules/optional/class.js'
+import './modules/optional/css.js'
+import './modules/optional/data.js'
+import './modules/optional/memory.js'
+import './modules/optional/sugar.js'
+import './modules/optional/transform.js'
+
+import Morphable, {
+  NonMorphable,
+  ObjectBag,
+  TransformBag,
+  makeMorphable,
+  registerMorphableType
+} from './types/Morphable.js'
+import { extend } from './utils/adopter.js'
+import { getMethodsFor } from './utils/methods.js'
+import Box from './types/Box.js'
+import Circle from './elements/Circle.js'
+import Color from './types/Color.js'
+import Container from './elements/Container.js'
+import Defs from './elements/Defs.js'
+import Doc from './elements/Doc.js'
+import Dom from './elements/Dom.js'
+import Element from './elements/Element.js'
+import Ellipse from './elements/Ellipse.js'
+import EventTarget from './types/EventTarget.js'
+import Gradient from './elements/Gradient.js'
+import Image from './elements/Image.js'
+import Line from './elements/Line.js'
+import Marker from './elements/Marker.js'
+import Matrix from './types/Matrix.js'
+import Path from './elements/Path.js'
+import PathArray from './types/PathArray.js'
+import Pattern from './elements/Pattern.js'
+import PointArray from './types/PointArray.js'
+import Polygon from './elements/Polygon.js'
+import Polyline from './elements/Polyline.js'
+import Rect from './elements/Rect.js'
+import SVGArray from './types/SVGArray.js'
+import SVGNumber from './types/SVGNumber.js'
+import Shape from './elements/Shape.js'
+import Text from './elements/Text.js'
+import Tspan from './elements/Tspan.js'
+import * as defaults from './modules/core/defaults.js'
+
+export {
+  Morphable,
+  registerMorphableType,
+  makeMorphable,
+  TransformBag,
+  ObjectBag,
+  NonMorphable
+}
+
+export { defaults }
+export * from './utils/utils.js'
+export * from './modules/core/namespaces.js'
+export { default as parser } from './modules/core/parser.js'
+export { default as find } from './modules/core/selector.js'
+export * from './modules/core/event.js'
+export * from './utils/adopter.js'
+
+/* Animation Modules */
+export { default as Animator } from './animation/Animator.js'
+export { Controller, Ease, PID, Spring, easing } from './animation/Controller.js'
+export { default as Queue } from './animation/Queue.js'
+export { default as Runner } from './animation/Runner.js'
+export { default as Timeline } from './animation/Timeline.js'
+
+/* Types */
+export { default as SVGArray } from './types/SVGArray.js'
+export { default as Box } from './types/Box.js'
+export { default as Color } from './types/Color.js'
+export { default as EventTarget } from './types/EventTarget.js'
+export { default as Matrix } from './types/Matrix.js'
+export { default as SVGNumber } from './types/SVGNumber.js'
+export { default as PathArray } from './types/PathArray.js'
+export { default as Point } from './types/Point.js'
+export { default as PointArray } from './types/PointArray.js'
+
+/* Elements */
+export { default as Bare } from './elements/Bare.js'
+export { default as Circle } from './elements/Circle.js'
+export { default as ClipPath } from './elements/ClipPath.js'
+export { default as Container } from './elements/Container.js'
+export { default as Defs } from './elements/Defs.js'
+export { default as Doc } from './elements/Doc.js'
+export { default as Dom } from './elements/Dom.js'
+export { default as Element } from './elements/Element.js'
+export { default as Ellipse } from './elements/Ellipse.js'
+export { default as Gradient } from './elements/Gradient.js'
+export { default as G } from './elements/G.js'
+export { default as HtmlNode } from './elements/HtmlNode.js'
+export { default as A } from './elements/A.js'
+export { default as Image } from './elements/Image.js'
+export { default as Line } from './elements/Line.js'
+export { default as Marker } from './elements/Marker.js'
+export { default as Mask } from './elements/Mask.js'
+export { default as Path } from './elements/Path.js'
+export { default as Pattern } from './elements/Pattern.js'
+export { default as Polygon } from './elements/Polygon.js'
+export { default as Polyline } from './elements/Polyline.js'
+export { default as Rect } from './elements/Rect.js'
+export { default as Shape } from './elements/Shape.js'
+export { default as Stop } from './elements/Stop.js'
+export { default as Symbol } from './elements/Symbol.js'
+export { default as Text } from './elements/Text.js'
+export { default as TextPath } from './elements/TextPath.js'
+export { default as Tspan } from './elements/Tspan.js'
+export { default as Use } from './elements/Use.js'
+
+extend([
+  Doc,
+  Symbol,
+  Image,
+  Pattern,
+  Marker
+], getMethodsFor('viewbox'))
+
+extend([
+  Line,
+  Polyline,
+  Polygon,
+  Path
+], getMethodsFor('marker'))
+
+extend(Text, getMethodsFor('Text'))
+extend(Path, getMethodsFor('Path'))
+
+extend(Defs, getMethodsFor('Defs'))
+
+extend([
+  Text,
+  Tspan
+], getMethodsFor('Tspan'))
+
+extend([
+  Rect,
+  Ellipse,
+  Circle,
+  Gradient
+], getMethodsFor('radius'))
+
+extend(EventTarget, getMethodsFor('EventTarget'))
+extend(Dom, getMethodsFor('Dom'))
+extend(Element, getMethodsFor('Element'))
+extend(Shape, getMethodsFor('Shape'))
+// extend(Element, getConstructor('Memory'))
+extend(Container, getMethodsFor('Container'))
+
+registerMorphableType([
+  SVGNumber,
+  Color,
+  Box,
+  Matrix,
+  SVGArray,
+  PointArray,
+  PathArray
+])
+
+makeMorphable()
diff --git a/src/attr.js b/src/modules/core/attr.js
index f3aa230..ed34dc9 100644
--- a/src/attr.js
+++ b/src/modules/core/attr.js
@@ -1,9 +1,8 @@
-import { isNumber, isImage } from './regex.js'
+import { isImage, isNumber } from './regex.js'
 import { attrs as defaults } from './defaults.js'
-import Color from './Color.js'
-import SVGArray from './SVGArray.js'
-import SVGNumber from './SVGNumber.js'
-// import {registerMethods} from './methods.js'
+import Color from '../../types/Color.js'
+import SVGArray from '../../types/SVGArray.js'
+import SVGNumber from '../../types/SVGNumber.js'
 
 // Set svg element attribute
 export default function attr (attr, val, ns) {
diff --git a/src/circled.js b/src/modules/core/circled.js
index 7df7a5b..9a3b1ad 100644
--- a/src/circled.js
+++ b/src/modules/core/circled.js
@@ -1,6 +1,6 @@
 // FIXME: import this to runner
-import { proportionalSize } from './helpers.js'
-import SVGNumber from './SVGNumber.js'
+import { proportionalSize } from '../../utils/utils.js'
+import SVGNumber from '../../types/SVGNumber.js'
 
 // Radius x value
 export function rx (rx) {
diff --git a/src/defaults.js b/src/modules/core/defaults.js
index 0d496bc..0d496bc 100644
--- a/src/defaults.js
+++ b/src/modules/core/defaults.js
diff --git a/src/event.js b/src/modules/core/event.js
index d3cf26d..2fcaf58 100644
--- a/src/event.js
+++ b/src/modules/core/event.js
@@ -1,5 +1,5 @@
 import { delimiter } from './regex.js'
-import { makeInstance } from './adopter.js'
+import { makeInstance } from '../../utils/adopter.js'
 
 let listenerId = 0
 
diff --git a/src/gradiented.js b/src/modules/core/gradiented.js
index da2bc41..d34a9fe 100644
--- a/src/gradiented.js
+++ b/src/modules/core/gradiented.js
@@ -1,5 +1,5 @@
 // FIXME: add to runner
-import SVGNumber from './SVGNumber.js'
+import SVGNumber from '../../types/SVGNumber.js'
 
 export function from (x, y) {
   return (this._element || this).type === 'radialGradient'
diff --git a/src/namespaces.js b/src/modules/core/namespaces.js
index 3791298..3791298 100644
--- a/src/namespaces.js
+++ b/src/modules/core/namespaces.js
diff --git a/src/parser.js b/src/modules/core/parser.js
index aa58db4..7a656ef 100644
--- a/src/parser.js
+++ b/src/modules/core/parser.js
@@ -1,15 +1,16 @@
-import Doc from './Doc.js'
+import Doc from '../../elements/Doc.js'
 
 export default function parser () {
   // Reuse cached element if possible
   if (!parser.nodes) {
-    let svg = new Doc().size(2, 0).css({
-      opacity: 0,
-      position: 'absolute',
-      left: '-100%',
-      top: '-100%',
-      overflow: 'hidden'
-    })
+    let svg = new Doc().size(2, 0)
+    svg.node.cssText = [
+      'opacity: 0',
+      'position: absolute',
+      'left: -100%',
+      'top: -100%',
+      'overflow: hidden'
+    ].join(';')
 
     let path = svg.path().node
 
diff --git a/src/pointed.js b/src/modules/core/pointed.js
index d5deaf1..95e6819 100644
--- a/src/pointed.js
+++ b/src/modules/core/pointed.js
@@ -1,4 +1,4 @@
-import PointArray from './PointArray.js'
+import PointArray from '../../types/PointArray.js'
 
 export let MorphArray = PointArray
 
diff --git a/src/poly.js b/src/modules/core/poly.js
index 269b0c9..ad12020 100644
--- a/src/poly.js
+++ b/src/modules/core/poly.js
@@ -1,6 +1,5 @@
-// Add polygon-specific functions
-import PointArray from './PointArray.js'
-import { proportionalSize } from './helpers.js'
+import { proportionalSize } from '../../utils/utils.js'
+import PointArray from '../../types/PointArray.js'
 
 // Get array
 export function array () {
diff --git a/src/regex.js b/src/modules/core/regex.js
index 1056554..1056554 100644
--- a/src/regex.js
+++ b/src/modules/core/regex.js
diff --git a/src/selector.js b/src/modules/core/selector.js
index 7208153..1e0b55e 100644
--- a/src/selector.js
+++ b/src/modules/core/selector.js
@@ -1,6 +1,6 @@
-import { map } from './utils.js'
-import { adopt } from './adopter.js'
-import { registerMethods } from './methods.js'
+import { adopt } from '../../utils/adopter.js'
+import { map } from '../../utils/utils.js'
+import { registerMethods } from '../../utils/methods.js'
 
 export default function baseFind (query, parent) {
   return map((parent || document).querySelectorAll(query), function (node) {
diff --git a/src/textable.js b/src/modules/core/textable.js
index c9a90db..c9a90db 100644
--- a/src/textable.js
+++ b/src/modules/core/textable.js
diff --git a/src/arrange.js b/src/modules/optional/arrange.js
index 169cf93..ca0e074 100644
--- a/src/arrange.js
+++ b/src/modules/optional/arrange.js
@@ -1,5 +1,4 @@
-// ### This module adds backward / forward functionality to elements.
-import { registerMethods } from './methods.js'
+import { registerMethods } from '../../utils/methods.js'
 
 // Get all siblings, including myself
 export function siblings () {
diff --git a/src/classHandling.js b/src/modules/optional/class.js
index fd148b7..1d28fd5 100644
--- a/src/classHandling.js
+++ b/src/modules/optional/class.js
@@ -1,5 +1,5 @@
-import { registerMethods } from './methods.js'
-import { delimiter } from './regex.js'
+import { delimiter } from '../core/regex.js'
+import { registerMethods } from '../../utils/methods.js'
 
 // Return array of classes on the node
 function classes () {
diff --git a/src/css.js b/src/modules/optional/css.js
index a7d38a6..924b13d 100644
--- a/src/css.js
+++ b/src/modules/optional/css.js
@@ -1,8 +1,7 @@
-import { camelCase } from './helpers.js'
-import { isBlank } from './regex.js'
-import { registerMethods } from './methods.js'
-
 // FIXME: We dont need exports
+import { camelCase } from '../../utils/utils.js'
+import { isBlank } from '../core/regex.js'
+import { registerMethods } from '../../utils/methods.js'
 
 // Dynamic style generator
 export function css (style, val) {
diff --git a/src/data.js b/src/modules/optional/data.js
index ce50abb..341d129 100644
--- a/src/data.js
+++ b/src/modules/optional/data.js
@@ -1,4 +1,4 @@
-import { registerMethods } from './methods.js'
+import { registerMethods } from '../../utils/methods.js'
 
 // Store data values on svg nodes
 export function data (a, v, r) {
diff --git a/src/memory.js b/src/modules/optional/memory.js
index 9c826a2..d1bf7cf 100644
--- a/src/memory.js
+++ b/src/modules/optional/memory.js
@@ -1,5 +1,4 @@
-import { registerMethods } from './methods.js'
-
+import { registerMethods } from '../../utils/methods.js'
 // FIXME: We need a constructor to set this up
 
 // Remember arbitrary data
diff --git a/src/sugar.js b/src/modules/optional/sugar.js
index 7d34cee..904e353 100644
--- a/src/sugar.js
+++ b/src/modules/optional/sugar.js
@@ -1,10 +1,10 @@
-import Color from './Color.js'
-import Runner from './Runner.js'
-import SVGNumber from './SVGNumber.js'
-import Matrix from './Matrix.js'
-import Point from './Point.js'
-import Element from './Element.js'
-import { registerMethods } from './methods.js'
+import { registerMethods } from '../../utils/methods.js'
+import Color from '../../types/Color.js'
+import Element from '../../elements/Element.js'
+import Matrix from '../../types/Matrix.js'
+import Point from '../../types/Point.js'
+import Runner from '../../animation/Runner.js'
+import SVGNumber from '../../types/SVGNumber.js'
 
 // Define list of available attributes for stroke and fill
 var sugar = {
diff --git a/src/transform.js b/src/modules/optional/transform.js
index ff3364e..7535fdc 100644
--- a/src/transform.js
+++ b/src/modules/optional/transform.js
@@ -1,7 +1,7 @@
-import { arrayToMatrix, getOrigin, isMatrixLike } from './helpers.js'
-import Matrix from './Matrix.js'
-import { delimiter, transforms } from './regex.js'
-import { registerMethods } from './methods.js'
+import { getOrigin } from '../../utils/utils.js'
+import { delimiter, transforms } from '../core/regex.js'
+import { registerMethods } from '../../utils/methods.js'
+import Matrix from '../../types/Matrix.js'
 
 // Reset all transformations
 export function untransform () {
@@ -24,7 +24,7 @@ export function matrixify () {
     // merge every transformation into one matrix
     .reduce(function (matrix, transform) {
       if (transform[0] === 'matrix') {
-        return matrix.lmultiply(arrayToMatrix(transform[1]))
+        return matrix.lmultiply(Matrix.fromArray(transform[1]))
       }
       return matrix[transform[0]].apply(matrix, transform[1])
     }, new Matrix())
@@ -56,7 +56,7 @@ export function transform (o, relative) {
     return decomposed[o] || decomposed
   }
 
-  if (!isMatrixLike(o)) {
+  if (!Matrix.isMatrixLike(o)) {
     // Set the origin according to the defined transform
     o = { ...o, origin: getOrigin(o, this) }
   }
diff --git a/src/svg.js b/src/svg.js
index a7e92d0..4026598 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -1,101 +1,14 @@
-import * as Classes from './classes.js'
-import * as adopter from './adopter.js'
-import * as tools from './tools.js'
-import './attr.js'
-import './arrange.js'
-import './data.js'
-import './classHandling.js'
-import find from './selector.js'
-import './css.js'
-import './transform.js'
-import './memory.js'
-import './sugar.js'
-import { getMethodsFor } from './methods.js'
-import { registerMorphableType, makeMorphable, TransformBag, ObjectBag, NonMorphable } from './Morphable.js'
-
-import './EventTarget.js'
-import './Element.js'
-
-import * as utils from './utils.js'
-
-import * as regex from './regex.js'
-
-// satisfy tests, fix later
-import * as ns from './namespaces.js'
-import { easing } from './Controller.js'
-import * as events from './event.js'
-import parser from './parser.js'
-import * as defaults from './defaults.js'
-const extend = tools.extend
-
-extend([
-  Classes.Doc,
-  Classes.Symbol,
-  Classes.Image,
-  Classes.Pattern,
-  Classes.Marker
-], getMethodsFor('viewbox'))
-
-extend([
-  Classes.Line,
-  Classes.Polyline,
-  Classes.Polygon,
-  Classes.Path
-], getMethodsFor('marker'))
-
-extend(Classes.Text, getMethodsFor('Text'))
-extend(Classes.Path, getMethodsFor('Path'))
-
-extend(Classes.Defs, getMethodsFor('Defs'))
-
-extend([
-  Classes.Text,
-  Classes.Tspan
-], getMethodsFor('Tspan'))
-
-extend([
-  Classes.Rect,
-  Classes.Ellipse,
-  Classes.Circle,
-  Classes.Gradient
-], getMethodsFor('radius'))
-
-extend(Classes.EventTarget, getMethodsFor('EventTarget'))
-extend(Classes.Dom, getMethodsFor('Dom'))
-extend(Classes.Element, getMethodsFor('Element'))
-extend(Classes.Shape, getMethodsFor('Shape'))
-// extend(Classes.Element, getConstructor('Memory'))
-extend(Classes.Container, getMethodsFor('Container'))
-
-registerMorphableType([
-  Classes.SVGNumber,
-  Classes.Color,
-  Classes.Box,
-  Classes.Matrix,
-  Classes.SVGArray,
-  Classes.PointArray,
-  Classes.PathArray
-])
-
-makeMorphable()
+import * as svgMembers from './main.js'
+import * as regex from './modules/core/regex.js'
+import { makeInstance } from './utils/adopter'
 
 // The main wrapping element
 export default function SVG (element) {
-  return adopter.makeInstance(element)
+  return makeInstance(element)
 }
 
-Object.assign(SVG, Classes)
-Object.assign(SVG, tools)
-Object.assign(SVG, adopter)
-SVG.utils = utils
+Object.assign(SVG, svgMembers)
+
+SVG.utils = SVG
 SVG.regex = regex
 SVG.get = SVG
-SVG.find = find
-Object.assign(SVG, ns)
-SVG.easing = easing
-Object.assign(SVG, events)
-SVG.TransformBag = TransformBag
-SVG.ObjectBag = ObjectBag
-SVG.NonMorphable = NonMorphable
-SVG.parser = parser
-SVG.defaults = defaults
diff --git a/src/tools.js b/src/tools.js
deleted file mode 100644
index 14e19a3..0000000
--- a/src/tools.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ns } from './namespaces.js'
-import { getClass } from './adopter.js'
-
-export function nodeOrNew (name, node) {
-  return node || makeNode(name)
-}
-
-// Method for element creation
-export function makeNode (name) {
-  // create element
-  return document.createElementNS(ns, name)
-}
-
-// Method for extending objects
-export function extend (modules, methods) {
-  var key, i
-
-  modules = Array.isArray(modules) ? modules : [modules]
-
-  for (i = modules.length - 1; i >= 0; i--) {
-    for (key in methods) {
-      modules[i].prototype[key] = methods[key]
-    }
-  }
-}
-
-// FIXME: enhanced constructors here
-export function addFactory (modules, methods) {
-  extend(modules, methods)
-}
-
-// Invent new element
-export function invent (config) {
-  // Create element initializer
-  var initializer = typeof config.create === 'function' ? config.create
-    : function (node) {
-      config.inherit.call(this, node || makeNode(config.create))
-    }
-
-  // Inherit prototype
-  if (config.inherit) {
-    /* eslint new-cap: "off" */
-    initializer.prototype = new config.inherit()
-    initializer.prototype.constructor = initializer
-  }
-
-  // Extend with methods
-  if (config.extend) {
-    extend(initializer, config.extend)
-  }
-
-  // Attach construct method to parent
-  if (config.construct) { extend(config.parent || getClass('Container'), config.construct) }
-
-  return initializer
-}
diff --git a/src/ArrayPolyfill.js b/src/types/ArrayPolyfill.js
index cf95d54..cf95d54 100644
--- a/src/ArrayPolyfill.js
+++ b/src/types/ArrayPolyfill.js
diff --git a/src/Base.js b/src/types/Base.js
index d2897a1..d2897a1 100644
--- a/src/Base.js
+++ b/src/types/Base.js
diff --git a/src/Box.js b/src/types/Box.js
index 148beb3..b51415f 100644
--- a/src/Box.js
+++ b/src/types/Box.js
@@ -1,8 +1,21 @@
+import { delimiter } from '../modules/core/regex.js'
+import { registerMethods } from '../utils/methods.js'
 import Point from './Point.js'
-import parser from './parser.js'
-import { fullBox, domContains, isNulledBox } from './helpers.js'
-import { delimiter } from './regex.js'
-import { registerMethods } from './methods.js'
+import parser from '../modules/core/parser.js'
+
+function isNulledBox (box) {
+  return !box.w && !box.h && !box.x && !box.y
+}
+
+function domContains (node) {
+  return (document.documentElement.contains || function (node) {
+    // This is IE - it does not support contains() for top-level SVGs
+    while (node.parentNode) {
+      node = node.parentNode
+    }
+    return node === document
+  }).call(document.documentElement, node)
+}
 
 export default class Box {
   constructor (...args) {
@@ -18,13 +31,16 @@ export default class Box {
           : arguments.length === 4 ? [].slice.call(arguments)
             : base
 
-    this.x = source[0]
-    this.y = source[1]
-    this.width = source[2]
-    this.height = source[3]
+    this.x = source[0] || 0
+    this.y = source[1] || 0
+    this.width = this.w = source[2] || 0
+    this.height = this.h = source[3] || 0
 
-    // add center, right, bottom...
-    fullBox(this)
+    // Add more bounding box properties
+    this.x2 = this.x + this.w
+    this.y2 = this.y + this.h
+    this.cx = this.x + this.w / 2
+    this.cy = this.y + this.h / 2
   }
 
   // Merge rect box with another, return a new instance
@@ -79,6 +95,10 @@ export default class Box {
   toArray () {
     return [this.x, this.y, this.width, this.height]
   }
+
+  isNulled () {
+    return isNulledBox(this)
+  }
 }
 
 function getBox (cb) {
diff --git a/src/Color.js b/src/types/Color.js
index ed3531c..6bbfd82 100644
--- a/src/Color.js
+++ b/src/types/Color.js
@@ -27,8 +27,24 @@ SVG.hsl()
 SVG.lab('rgb(100, 100, 100)')
 */
 
-import { isHex, isRgb, whitespace, rgb, hex } from './regex.js'
-import { fullHex, compToHex } from './helpers.js'
+import { hex, isHex, isRgb, rgb, whitespace } from '../modules/core/regex.js'
+
+// Ensure to six-based hex
+function fullHex (hex) {
+  return hex.length === 4
+    ? [ '#',
+      hex.substring(1, 2), hex.substring(1, 2),
+      hex.substring(2, 3), hex.substring(2, 3),
+      hex.substring(3, 4), hex.substring(3, 4)
+    ].join('')
+    : hex
+}
+
+// Component to hex value
+function compToHex (comp) {
+  var hex = comp.toString(16)
+  return hex.length === 1 ? '0' + hex : hex
+}
 
 export default class Color {
   constructor (...args) {
diff --git a/src/EventTarget.js b/src/types/EventTarget.js
index bc7a09c..a32a1f1 100644
--- a/src/EventTarget.js
+++ b/src/types/EventTarget.js
@@ -1,6 +1,6 @@
+import { dispatch, off, on } from '../modules/core/event.js'
+import { registerMethods } from '../utils/methods.js'
 import Base from './Base.js'
-import { on, off, dispatch } from './event.js'
-import { registerMethods } from './methods.js'
 
 export default class EventTarget extends Base {
   constructor ({ events = {} } = {}) {
diff --git a/src/Matrix.js b/src/types/Matrix.js
index 00e4448..963fd1a 100644
--- a/src/Matrix.js
+++ b/src/types/Matrix.js
@@ -1,10 +1,16 @@
-import { abcdef, arrayToMatrix, closeEnough, isMatrixLike } from './helpers.js'
+import { delimiter } from '../modules/core/regex.js'
+import { radians } from '../utils/utils.js'
+import { registerMethods } from '../utils/methods.js'
+import Element from '../elements/Element.js'
 import Point from './Point.js'
-import { delimiter } from './regex.js'
-import { radians } from './utils.js'
-import parser from './parser.js'
-import Element from './Element.js'
-import { registerMethods } from './methods.js'
+import parser from '../modules/core/parser.js'
+
+// Create matrix array for looping
+const abcdef = 'abcdef'.split('')
+
+function closeEnough (a, b, threshold) {
+  return Math.abs(b - a) < (threshold || 1e-6)
+}
 
 export default class Matrix {
   constructor (...args) {
@@ -13,15 +19,15 @@ export default class Matrix {
 
   // Initialize
   init (source) {
-    var base = arrayToMatrix([1, 0, 0, 1, 0, 0])
+    var base = Matrix.fromArray([1, 0, 0, 1, 0, 0])
 
     // ensure source as object
     source = source instanceof Element ? source.matrixify()
-      : typeof source === 'string' ? arrayToMatrix(source.split(delimiter).map(parseFloat))
-        : Array.isArray(source) ? arrayToMatrix(source)
-          : (typeof source === 'object' && isMatrixLike(source)) ? source
+      : typeof source === 'string' ? Matrix.fromArray(source.split(delimiter).map(parseFloat))
+        : Array.isArray(source) ? Matrix.fromArray(source)
+          : (typeof source === 'object' && Matrix.isMatrixLike(source)) ? source
             : (typeof source === 'object') ? new Matrix().transform(source)
-              : arguments.length === 6 ? arrayToMatrix([].slice.call(arguments))
+              : arguments.length === 6 ? Matrix.fromArray([].slice.call(arguments))
                 : base
 
     // Merge the source matrix with the base matrix
@@ -41,7 +47,7 @@ export default class Matrix {
   // Transform a matrix into another matrix by manipulating the space
   transform (o) {
     // Check if o is a matrix and then left multiply it directly
-    if (isMatrixLike(o)) {
+    if (Matrix.isMatrixLike(o)) {
       var matrix = new Matrix(o)
       return matrix.multiplyO(this)
     }
@@ -412,7 +418,21 @@ export default class Matrix {
     }
   }
 
-  // TODO: Refactor this to a static function of matrix.js
+  static fromArray (a) {
+    return { a: a[0], b: a[1], c: a[2], d: a[3], e: a[4], f: a[5] }
+  }
+
+  static isMatrixLike (o) {
+    return (
+      o.a != null ||
+      o.b != null ||
+      o.c != null ||
+      o.d != null ||
+      o.e != null ||
+      o.f != null
+    )
+  }
+
   static formatTransforms (o) {
     // Get all of the parameters required to form the matrix
     var flipBoth = o.flip === 'both' || o.flip === true
diff --git a/src/Morphable.js b/src/types/Morphable.js
index f9dd7f0..2b12375 100644
--- a/src/Morphable.js
+++ b/src/types/Morphable.js
@@ -1,10 +1,14 @@
-import { extend } from './tools.js'
-import { Ease } from './Controller.js'
+import { Ease } from '../animation/Controller.js'
+import {
+  delimiter,
+  numberAndUnit,
+  pathLetters
+} from '../modules/core/regex.js'
+import { extend } from '../utils/adopter.js'
 import Color from './Color.js'
-import SVGNumber from './SVGNumber.js'
-import SVGArray from './SVGArray.js'
 import PathArray from './PathArray.js'
-import { delimiter, pathLetters, numberAndUnit } from './regex.js'
+import SVGArray from './SVGArray.js'
+import SVGNumber from './SVGNumber.js'
 
 export default class Morphable {
   constructor (stepper) {
diff --git a/src/PathArray.js b/src/types/PathArray.js
index 9fa5b99..989cd8f 100644
--- a/src/PathArray.js
+++ b/src/types/PathArray.js
@@ -1,15 +1,61 @@
-import { arrayToString, pathRegReplace } from './helpers.js'
-import parser from './parser.js'
-import { numbersWithDots, pathLetters, hyphen, delimiter, isPathLetter } from './regex.js'
+import {
+  delimiter,
+  dots,
+  hyphen,
+  isPathLetter,
+  numbersWithDots,
+  pathLetters
+} from '../modules/core/regex.js'
+import { extend } from '../utils/adopter.js'
+import { subClassArray } from './ArrayPolyfill.js'
 import Point from './Point.js'
 import SVGArray from './SVGArray.js'
-import { subClassArray } from './ArrayPolyfill.js'
-import { extend } from './tools.js'
+import parser from '../modules/core/parser.js'
 
 const PathArray = subClassArray('PathArray', SVGArray)
 
 export default PathArray
 
+export function pathRegReplace (a, b, c, d) {
+  return c + d.replace(dots, ' .')
+}
+
+function arrayToString (a) {
+  for (var i = 0, il = a.length, s = ''; i < il; i++) {
+    s += a[i][0]
+
+    if (a[i][1] != null) {
+      s += a[i][1]
+
+      if (a[i][2] != null) {
+        s += ' '
+        s += a[i][2]
+
+        if (a[i][3] != null) {
+          s += ' '
+          s += a[i][3]
+          s += ' '
+          s += a[i][4]
+
+          if (a[i][5] != null) {
+            s += ' '
+            s += a[i][5]
+            s += ' '
+            s += a[i][6]
+
+            if (a[i][7] != null) {
+              s += ' '
+              s += a[i][7]
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return s + ' '
+}
+
 const pathHandlers = {
   M: function (c, p, p0) {
     p.x = p0.x = c[0]
diff --git a/src/Point.js b/src/types/Point.js
index a2b119c..0adcd90 100644
--- a/src/Point.js
+++ b/src/types/Point.js
@@ -1,5 +1,5 @@
-import parser from './parser.js'
-import { registerMethods } from './methods.js'
+import { registerMethods } from '../utils/methods.js'
+import parser from '../modules/core/parser.js'
 
 export default class Point {
   // Initialize
diff --git a/src/PointArray.js b/src/types/PointArray.js
index 42299e0..b246b2f 100644
--- a/src/PointArray.js
+++ b/src/types/PointArray.js
@@ -1,7 +1,7 @@
-import SVGArray from './SVGArray.js'
-import { delimiter } from './regex.js'
+import { delimiter } from '../modules/core/regex.js'
+import { extend } from '../utils/adopter.js'
 import { subClassArray } from './ArrayPolyfill.js'
-import { extend } from './tools.js'
+import SVGArray from './SVGArray.js'
 
 const PointArray = subClassArray('PointArray', SVGArray)
 
diff --git a/src/SVGArray.js b/src/types/SVGArray.js
index 351e166..3894b22 100644
--- a/src/SVGArray.js
+++ b/src/types/SVGArray.js
@@ -1,17 +1,17 @@
-import { delimiter } from './regex.js'
+import { delimiter } from '../modules/core/regex.js'
+import { extend } from '../utils/adopter.js'
 import { subClassArray } from './ArrayPolyfill.js'
-import { extend } from './tools.js'
 
-const SVGArray = subClassArray('SVGArray', Array, function (...args) {
-  this.init(...args)
+const SVGArray = subClassArray('SVGArray', Array, function (arr) {
+  this.init(arr)
 })
 
 export default SVGArray
 
 extend(SVGArray, {
-  init (...args) {
+  init (arr) {
     this.length = 0
-    this.push(...this.parse(...args))
+    this.push(...this.parse(arr))
   },
 
   toArray () {
diff --git a/src/SVGNumber.js b/src/types/SVGNumber.js
index 095e2e7..bba9741 100644
--- a/src/SVGNumber.js
+++ b/src/types/SVGNumber.js
@@ -1,4 +1,4 @@
-import { numberAndUnit } from './regex.js'
+import { numberAndUnit } from '../modules/core/regex.js'
 
 // Module for unit convertions
 export default class SVGNumber {
diff --git a/src/set.js b/src/types/set.js
index c755c2c..c755c2c 100644
--- a/src/set.js
+++ b/src/types/set.js
diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index c7407de..0000000
--- a/src/utils.js
+++ /dev/null
@@ -1,40 +0,0 @@
-
-// Map function
-export function map (array, block) {
-  var i
-  var il = array.length
-  var result = []
-
-  for (i = 0; i < il; i++) {
-    result.push(block(array[i]))
-  }
-
-  return result
-}
-
-// Filter function
-export function filter (array, block) {
-  var i
-  var il = array.length
-  var result = []
-
-  for (i = 0; i < il; i++) {
-    if (block(array[i])) { result.push(array[i]) }
-  }
-
-  return result
-}
-
-// Degrees to radians
-export function radians (d) {
-  return d % 360 * Math.PI / 180
-}
-
-// Radians to degrees
-export function degrees (r) {
-  return r * 180 / Math.PI % 360
-}
-
-export function filterSVGElements (nodes) {
-  return this.filter(nodes, function (el) { return el instanceof window.SVGElement })
-}
diff --git a/src/adopter.js b/src/utils/adopter.js
index ed692b8..8017359 100644
--- a/src/adopter.js
+++ b/src/utils/adopter.js
@@ -1,10 +1,16 @@
-import Base from './Base.js'
-import { capitalize } from './helpers.js'
-import { makeNode } from './tools.js'
+import { capitalize } from './utils.js'
+import { ns } from '../modules/core/namespaces.js'
+import Base from '../types/Base.js'
 
 const elements = {}
 export const root = Symbol('root')
 
+// Method for element creation
+export function makeNode (name) {
+  // create element
+  return document.createElementNS(ns, name)
+}
+
 export function makeInstance (element) {
   if (element instanceof Base) return element
 
@@ -30,6 +36,10 @@ export function makeInstance (element) {
   return element
 }
 
+export function nodeOrNew (name, node) {
+  return node || makeNode(name)
+}
+
 // Adopt existing svg elements
 export function adopt (node) {
   // check for presence of node
@@ -90,3 +100,16 @@ export function assignNewId (node) {
 
   return adopt(node)
 }
+
+// Method for extending objects
+export function extend (modules, methods) {
+  var key, i
+
+  modules = Array.isArray(modules) ? modules : [modules]
+
+  for (i = modules.length - 1; i >= 0; i--) {
+    for (key in methods) {
+      modules[i].prototype[key] = methods[key]
+    }
+  }
+}
diff --git a/src/methods.js b/src/utils/methods.js
index 2373445..2373445 100644
--- a/src/methods.js
+++ b/src/utils/methods.js
diff --git a/src/utils/utils.js b/src/utils/utils.js
new file mode 100644
index 0000000..e3c9111
--- /dev/null
+++ b/src/utils/utils.js
@@ -0,0 +1,96 @@
+// Map function
+export function map (array, block) {
+  var i
+  var il = array.length
+  var result = []
+
+  for (i = 0; i < il; i++) {
+    result.push(block(array[i]))
+  }
+
+  return result
+}
+
+// Filter function
+export function filter (array, block) {
+  var i
+  var il = array.length
+  var result = []
+
+  for (i = 0; i < il; i++) {
+    if (block(array[i])) { result.push(array[i]) }
+  }
+
+  return result
+}
+
+// Degrees to radians
+export function radians (d) {
+  return d % 360 * Math.PI / 180
+}
+
+// Radians to degrees
+export function degrees (r) {
+  return r * 180 / Math.PI % 360
+}
+
+// Convert dash-separated-string to camelCase
+export function camelCase (s) {
+  return s.toLowerCase().replace(/-(.)/g, function (m, g) {
+    return g.toUpperCase()
+  })
+}
+
+// Capitalize first letter of a string
+export function capitalize (s) {
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+// Calculate proportional width and height values when necessary
+export function proportionalSize (element, width, height) {
+  if (width == null || height == null) {
+    var box = element.bbox()
+
+    if (width == null) {
+      width = box.width / box.height * height
+    } else if (height == null) {
+      height = box.height / box.width * width
+    }
+  }
+
+  return {
+    width: width,
+    height: height
+  }
+}
+
+export function getOrigin (o, element) {
+  // Allow origin or around as the names
+  let origin = o.origin // o.around == null ? o.origin : o.around
+  let ox, oy
+
+  // Allow the user to pass a string to rotate around a given point
+  if (typeof origin === 'string' || origin == null) {
+    // Get the bounding box of the element with no transformations applied
+    const string = (origin || 'center').toLowerCase().trim()
+    const { height, width, x, y } = element.bbox()
+
+    // Calculate the transformed x and y coordinates
+    let bx = string.includes('left') ? x
+      : string.includes('right') ? x + width
+        : x + width / 2
+    let by = string.includes('top') ? y
+      : string.includes('bottom') ? y + height
+        : y + height / 2
+
+    // Set the bounds eg : "bottom-left", "Top right", "middle" etc...
+    ox = o.ox != null ? o.ox : bx
+    oy = o.oy != null ? o.oy : by
+  } else {
+    ox = origin[0]
+    oy = origin[1]
+  }
+
+  // Return the origin as it is if it wasn't a string
+  return [ ox, oy ]
+}