text:
(this || self || window).Two = (function(previousTwo) {

  var root;
  if (typeof window !== 'undefined') {
    root = window;
  } else if (typeof global !== 'undefined') {
    root = global;
  } else if (typeof self !== 'undefined') {
    root = self;
  } else {
    root = this;
  }

  var toString = Object.prototype.toString;
  /**
   * @name _
   * @interface
   * @private
   * @description A collection of useful functions borrowed and repurposed from Underscore.js.
   * @see {@link http://underscorejs.org/}
   */
  var _ = {
    // http://underscorejs.org/ • 1.8.3
    _indexAmount: 0,
    natural: {
      slice: Array.prototype.slice,
      indexOf: Array.prototype.indexOf,
      keys: Object.keys,
      bind: Function.prototype.bind,
      create: Object.create
    },
    identity: function(value) {
      return value;
    },
    isArguments: function(obj) {
      return toString.call(obj) === '[object Arguments]';
    },
    isFunction: function(obj) {
      return toString.call(obj) === '[object Function]';
    },
    isString: function(obj) {
      return toString.call(obj) === '[object String]';
    },
    isNumber: function(obj) {
      return toString.call(obj) === '[object Number]';
    },
    isDate: function(obj) {
      return toString.call(obj) === '[object Date]';
    },
    isRegExp: function(obj) {
      return toString.call(obj) === '[object RegExp]';
    },
    isError: function(obj) {
      return toString.call(obj) === '[object Error]';
    },
    isFinite: function(obj) {
      return isFinite(obj) && !isNaN(parseFloat(obj));
    },
    isNaN: function(obj) {
      return _.isNumber(obj) && obj !== +obj;
    },
    isBoolean: function(obj) {
      return obj === true || obj === false || toString.call(obj) === '[object Boolean]';
    },
    isNull: function(obj) {
      return obj === null;
    },
    isUndefined: function(obj) {
      return obj === void 0;
    },
    isEmpty: function(obj) {
      if (obj == null) return true;
      if (isArrayLike && (_.isArray(obj) || _.isString(obj) || _.isArguments(obj))) return obj.length === 0;
      return _.keys(obj).length === 0;
    },
    isElement: function(obj) {
      return !!(obj && obj.nodeType === 1);
    },
    isArray: Array.isArray || function(obj) {
      return toString.call(obj) === '[object Array]';
    },
    isObject: function(obj) {
      var type = typeof obj;
      return type === 'function' || type === 'object' && !!obj;
    },
    toArray: function(obj) {
      if (!obj) {
        return [];
      }
      if (_.isArray(obj)) {
        return slice.call(obj);
      }
      if (isArrayLike(obj)) {
        return _.map(obj, _.identity);
      }
      return _.values(obj);
    },
    range: function(start, stop, step) {
      if (stop == null) {
        stop = start || 0;
        start = 0;
      }
      step = step || 1;

      var length = Math.max(Math.ceil((stop - start) / step), 0);
      var range = Array(length);

      for (var idx = 0; idx < length; idx++, start += step) {
        range[idx] = start;
      }

      return range;
    },
    indexOf: function(list, item) {
      if (_.natural.indexOf) {
        return _.natural.indexOf.call(list, item);
      }
      for (var i = 0; i < list.length; i++) {
        if (list[i] === item) {
          return i;
        }
      }
      return -1;
    },
    has: function(obj, key) {
      return obj != null && hasOwnProperty.call(obj, key);
    },
    bind: function(func, ctx) {
      var natural = _.natural.bind;
      if (natural && func.bind === natural) {
        return natural.apply(func, slice.call(arguments, 1));
      }
      var args = slice.call(arguments, 2);
      return function() {
        func.apply(ctx, args);
      };
    },
    extend: function(base) {
      var sources = slice.call(arguments, 1);
      for (var i = 0; i < sources.length; i++) {
        var obj = sources[i];
        for (var k in obj) {
          base[k] = obj[k];
        }
      }
      return base;
    },
    defaults: function(base) {
      var sources = slice.call(arguments, 1);
      for (var i = 0; i < sources.length; i++) {
        var obj = sources[i];
        for (var k in obj) {
          if (base[k] === void 0) {
            base[k] = obj[k];
          }
        }
      }
      return base;
    },
    keys: function(obj) {
      if (!_.isObject(obj)) {
        return [];
      }
      if (_.natural.keys) {
        return _.natural.keys(obj);
      }
      var keys = [];
      for (var k in obj) {
        if (_.has(obj, k)) {
          keys.push(k);
        }
      }
      return keys;
    },
    values: function(obj) {
      var keys = _.keys(obj);
      var values = [];
      for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        values.push(obj[k]);
      }
      return values;
    },
    each: function(obj, iteratee, context) {
      var ctx = context || this;
      var keys = !isArrayLike(obj) && _.keys(obj);
      var length = (keys || obj).length;
      for (var i = 0; i < length; i++) {
        var k = keys ? keys[i] : i;
        iteratee.call(ctx, obj[k], k, obj);
      }
      return obj;
    },
    map: function(obj, iteratee, context) {
      var ctx = context || this;
      var keys = !isArrayLike(obj) && _.keys(obj);
      var length = (keys || obj).length;
      var result = [];
      for (var i = 0; i < length; i++) {
        var k = keys ? keys[i] : i;
        result[i] = iteratee.call(ctx, obj[k], k, obj);
      }
      return result;
    },
    once: function(func) {
      var init = false;
      return function() {
        if (init) {
          return func;
        }
        init = true;
        return func.apply(this, arguments);
      };
    },
    after: function(times, func) {
      return function() {
        while (--times < 1) {
          return func.apply(this, arguments);
        }
      };
    },
    uniqueId: function(prefix) {
      var id = ++_._indexAmount + '';
      return prefix ? prefix + id : id;
    }
  };

  // Constants

  var sin = Math.sin,
    cos = Math.cos,
    acos = Math.acos,
    atan2 = Math.atan2,
    sqrt = Math.sqrt,
    round = Math.round,
    abs = Math.abs,
    PI = Math.PI,
    TWO_PI = PI * 2,
    HALF_PI = PI / 2,
    pow = Math.pow,
    min = Math.min,
    max = Math.max;

  // Localized variables

  var count = 0;
  var slice = _.natural.slice;
  var perf = ((root.performance && root.performance.now) ? root.performance : Date);
  var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
  var getLength = function(obj) {
    return obj == null ? void 0 : obj['length'];
  };
  var isArrayLike = function(collection) {
    var length = getLength(collection);
    return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
  };

  // Cross browser dom events.

  var dom = {

    temp: (root.document ? root.document.createElement('div') : {}),

    hasEventListeners: _.isFunction(root.addEventListener),

    bind: function(elem, event, func, bool) {
      if (this.hasEventListeners) {
        elem.addEventListener(event, func, !!bool);
      } else {
        elem.attachEvent('on' + event, func);
      }
      return dom;
    },

    unbind: function(elem, event, func, bool) {
      if (dom.hasEventListeners) {
        elem.removeEventListeners(event, func, !!bool);
      } else {
        elem.detachEvent('on' + event, func);
      }
      return dom;
    },

    getRequestAnimationFrame: function() {

      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      var request = root.requestAnimationFrame, cancel;

      if(!request) {
        for (var i = 0; i < vendors.length; i++) {
          request = root[vendors[i] + 'RequestAnimationFrame'] || request;
          cancel = root[vendors[i] + 'CancelAnimationFrame']
            || root[vendors[i] + 'CancelRequestAnimationFrame'] || cancel;
        }

        request = request || function(callback, element) {
          var currTime = new Date().getTime();
          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
          var id = root.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
          lastTime = currTime + timeToCall;
          return id;
        };
        // cancel = cancel || function(id) {
        //   clearTimeout(id);
        // };
      }

      request.init = _.once(loop);

      return request;

    }

  };

  /**
   * @name Two
   * @class
   * @global
   * @param {Object} [options]
   * @param {Boolean} [options.fullscreen=false] - Set to `true` to automatically make the stage adapt to the width and height of the parent document. This parameter overrides `width` and `height` parameters if set to `true`.
   * @param {Number} [options.width=640] - The width of the stage on construction. This can be set at a later time.
   * @param {Number} [options.height=480] - The height of the stage on construction. This can be set at a later time.
   * @param {String} [options.type=Two.Types.svg] - The type of renderer to setup drawing with. See {@link  Two.Types} for available options.
   * @param {Boolean} [options.autostart=false] - Set to `true` to add the instance to draw on `requestAnimationFrame`. This is a convenient substitute for {@link Two#play}.
   * @description The entrypoint for Two.js. Instantiate a `new Two` in order to setup a scene to render to. `Two` is also the publicly accessible namespace that all other sub-classes, functions, and utilities attach to.
   */
  var Two = root.Two = function(options) {

    // Determine what Renderer to use and setup a scene.

    var params = _.defaults(options || {}, {
      fullscreen: false,
      width: 640,
      height: 480,
      type: Two.Types.svg,
      autostart: false
    });

    _.each(params, function(v, k) {
      if (/fullscreen/i.test(k) || /autostart/i.test(k)) {
        return;
      }
      this[k] = v;
    }, this);

    // Specified domElement overrides type declaration only if the element does not support declared renderer type.
    if (_.isElement(params.domElement)) {
      var tagName = params.domElement.tagName.toLowerCase();
      // TODO: Reconsider this if statement's logic.
      if (!/^(CanvasRenderer-canvas|WebGLRenderer-canvas|SVGRenderer-svg)$/.test(this.type+'-'+tagName)) {
        this.type = Two.Types[tagName];
      }
    }

    this.renderer = new Two[this.type](this);
    Two.Utils.setPlaying.call(this, params.autostart);
    this.frameCount = 0;

    if (params.fullscreen) {

      var fitted = _.bind(fitToWindow, this);
      _.extend(document.body.style, {
        overflow: 'hidden',
        margin: 0,
        padding: 0,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        position: 'fixed'
      });
      _.extend(this.renderer.domElement.style, {
        display: 'block',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        position: 'fixed'
      });
      dom.bind(root, 'resize', fitted);
      fitted();

    } else if (!_.isElement(params.domElement)) {

      this.renderer.setSize(params.width, params.height, this.ratio);
      this.width = params.width;
      this.height = params.height;

    }

    this.renderer.bind(Two.Events.resize, _.bind(updateDimensions, this));
    this.scene = this.renderer.scene;

    Two.Instances.push(this);
    if (params.autostart) {
      raf.init();
    }

  };

  _.extend(Two, {

    // Access to root in other files.

    /**
     * @name Two.root
     * @description The root of the session context. In the browser this is the `window` variable. This varies in headless environments.
     */
    root: root,

    /**
     * @name Two.nextFrameID
     * @property {Integer}
     * @description The id of the next requestAnimationFrame function.
     */
    nextFrameID: null,

    // Primitive

    /**
     * @name Two.Array
     * @description A simple polyfill for Float32Array.
     */
    Array: root.Float32Array || Array,

    /**
     * @name Two.Types
     * @property {Object} - The different rendering types availabe in the library.
     */
    Types: {
      webgl: 'WebGLRenderer',
      svg: 'SVGRenderer',
      canvas: 'CanvasRenderer'
    },

    /**
     * @name Two.Version
     * @property {String} - The current working version of the library.
     */
    Version: 'v0.7.0',

    /**
     * @name Two.PublishDate
     * @property {String} - The automatically generated publish date in the build process to verify version release candidates.
     */
    PublishDate: '2020-01-22T21:17:28.421Z',

    /**
     * @name Two.Identifier
     * @property {String} - String prefix for all Two.js object's ids. This trickles down to SVG ids.
     */
    Identifier: 'two-',

    /**
     * @name Two.Events
     * @property {Object} - Map of possible events in Two.js.
     */
    Events: {
      play: 'play',
      pause: 'pause',
      update: 'update',
      render: 'render',
      resize: 'resize',
      change: 'change',
      remove: 'remove',
      insert: 'insert',
      order: 'order',
      load: 'load'
    },

    /**
     * @name Two.Commands
     * @property {Object} - Map of possible path commands. Taken from the SVG specification.
     */
    Commands: {
      move: 'M',
      line: 'L',
      curve: 'C',
      arc: 'A',
      close: 'Z'
    },

    /**
     * @name Two.Resolution
     * @property {Number} - Default amount of vertices to be used for interpreting Arcs and ArcSegments.
     */
    Resolution: 12,

    /**
     * @name Two.Instances
     * @property {Two[]} - Registered list of all Two.js instances in the current session.
     */
    Instances: [],

    /**
     * @function Two.noConflict
     * @description A function to revert the global namespaced `Two` variable to its previous incarnation.
     * @returns {Two} Returns access to the top-level Two.js library for local use.
     */
    noConflict: function() {
      root.Two = previousTwo;
      return Two;
    },

    /**
     * @function Two.uniqueId
     * @description Simple method to access an incrementing value. Used for `id` allocation on all Two.js objects.
     * @returns {Number} Ever increasing integer.
     */
    uniqueId: function() {
      var id = count;
      count++;
      return id;
    },

    /**
     * @name Two.Utils
     * @interface
     * @implements {_}
     * @description A hodgepodge of handy functions, math, and properties are stored here.
     */
    Utils: _.extend(_, {

      /**
       * @name Two.Utils.performance
       * @property {Date} - A special `Date` like object to get the current millis of the session. Used internally to calculate time between frames.
       * e.g: `Two.Utils.performance.now() // milliseconds since epoch`
       */
      performance: perf,

      /**
       * @name Two.Utils.defineProperty
       * @function
       * @this Two#
       * @param {String} property - The property to add an enumerable getter / setter to.
       * @description Convenience function to setup the flag based getter / setter that most properties are defined as in Two.js.
       */
      defineProperty: function(property) {

        var object = this;
        var secret = '_' + property;
        var flag = '_flag' + property.charAt(0).toUpperCase() + property.slice(1);

        Object.defineProperty(object, property, {
          enumerable: true,
          get: function() {
            return this[secret];
          },
          set: function(v) {
            this[secret] = v;
            this[flag] = true;
          }
        });

      },

      Image: null,

      isHeadless: false,

      /**
       * @name Two.Utils.shim
       * @function
       * @param {canvas} canvas - The instanced `Canvas` object provided by `node-canvas`.
       * @param {Image} [Image] - The prototypical `Image` object provided by `node-canvas`. This is only necessary to pass if you're going to load bitmap imagery.
       * @returns {canvas} Returns the instanced canvas object you passed from with additional attributes needed for Two.js.
       * @description Convenience method for defining all the dependencies from the npm package `node-canvas`. See [node-canvas]{@link https://github.com/Automattic/node-canvas} for additional information on setting up HTML5 `<canvas />` drawing in a node.js environment.
       */
      shim: function(canvas, Image) {
        Two.CanvasRenderer.Utils.shim(canvas);
        if (!_.isUndefined(Image)) {
          Two.Utils.Image = Image;
        }
        Two.Utils.isHeadless = true;
        return canvas;
      },

      /**
       * @name Two.Utils.release
       * @function
       * @param {Object} obj
       * @returns {Object} The object passed for event deallocation.
       * @description Release an arbitrary class' events from the Two.js corpus and recurse through its children and or vertices.
       */
      release: function(obj) {

        if (!_.isObject(obj)) {
          return;
        }

        if (_.isFunction(obj.unbind)) {
          obj.unbind();
        }

        if (obj.vertices) {
          if (_.isFunction(obj.vertices.unbind)) {
            obj.vertices.unbind();
          }
          _.each(obj.vertices, function(v) {
            if (_.isFunction(v.unbind)) {
              v.unbind();
            }
          });
        }

        if (obj.children) {
          _.each(obj.children, function(obj) {
            Two.Utils.release(obj);
          });
        }

        return obj;

      },

      /**
       * @name Two.Utils.xhr
       * @function
       * @param {String} path
       * @param {Function} callback
       * @returns {XMLHttpRequest} The constructed and called XHR request.
       * @description Canonical method to initiate `GET` requests in the browser. Mainly used by {@link Two#load} method.
       */
      xhr: function(path, callback) {

        var xhr = new XMLHttpRequest();
        xhr.open('GET', path);

        xhr.onreadystatechange = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
          }
        };

        xhr.send();
        return xhr;

      },

      /**
       * @name Two.Utils.Curve
       * @property {Object} - Additional utility constant variables related to curve math and calculations.
       */
      Curve: {

        CollinearityEpsilon: pow(10, -30),

        RecursionLimit: 16,

        CuspLimit: 0,

        Tolerance: {
          distance: 0.25,
          angle: 0,
          epsilon: Number.EPSILON
        },

        // Lookup tables for abscissas and weights with values for n = 2 .. 16.
        // As values are symmetric, only store half of them and adapt algorithm
        // to factor in symmetry.
        abscissas: [
          [  0.5773502691896257645091488],
          [0,0.7745966692414833770358531],
          [  0.3399810435848562648026658,0.8611363115940525752239465],
          [0,0.5384693101056830910363144,0.9061798459386639927976269],
          [  0.2386191860831969086305017,0.6612093864662645136613996,0.9324695142031520278123016],
          [0,0.4058451513773971669066064,0.7415311855993944398638648,0.9491079123427585245261897],
          [  0.1834346424956498049394761,0.5255324099163289858177390,0.7966664774136267395915539,0.9602898564975362316835609],
          [0,0.3242534234038089290385380,0.6133714327005903973087020,0.8360311073266357942994298,0.9681602395076260898355762],
          [  0.1488743389816312108848260,0.4333953941292471907992659,0.6794095682990244062343274,0.8650633666889845107320967,0.9739065285171717200779640],
          [0,0.2695431559523449723315320,0.5190961292068118159257257,0.7301520055740493240934163,0.8870625997680952990751578,0.9782286581460569928039380],
          [  0.1252334085114689154724414,0.3678314989981801937526915,0.5873179542866174472967024,0.7699026741943046870368938,0.9041172563704748566784659,0.9815606342467192506905491],
          [0,0.2304583159551347940655281,0.4484927510364468528779129,0.6423493394403402206439846,0.8015780907333099127942065,0.9175983992229779652065478,0.9841830547185881494728294],
          [  0.1080549487073436620662447,0.3191123689278897604356718,0.5152486363581540919652907,0.6872929048116854701480198,0.8272013150697649931897947,0.9284348836635735173363911,0.9862838086968123388415973],
          [0,0.2011940939974345223006283,0.3941513470775633698972074,0.5709721726085388475372267,0.7244177313601700474161861,0.8482065834104272162006483,0.9372733924007059043077589,0.9879925180204854284895657],
          [  0.0950125098376374401853193,0.2816035507792589132304605,0.4580167776572273863424194,0.6178762444026437484466718,0.7554044083550030338951012,0.8656312023878317438804679,0.9445750230732325760779884,0.9894009349916499325961542]
        ],

        weights: [
          [1],
          [0.8888888888888888888888889,0.5555555555555555555555556],
          [0.6521451548625461426269361,0.3478548451374538573730639],
          [0.5688888888888888888888889,0.4786286704993664680412915,0.2369268850561890875142640],
          [0.4679139345726910473898703,0.3607615730481386075698335,0.1713244923791703450402961],
          [0.4179591836734693877551020,0.3818300505051189449503698,0.2797053914892766679014678,0.1294849661688696932706114],
          [0.3626837833783619829651504,0.3137066458778872873379622,0.2223810344533744705443560,0.1012285362903762591525314],
          [0.3302393550012597631645251,0.3123470770400028400686304,0.2606106964029354623187429,0.1806481606948574040584720,0.0812743883615744119718922],
          [0.2955242247147528701738930,0.2692667193099963550912269,0.2190863625159820439955349,0.1494513491505805931457763,0.0666713443086881375935688],
          [0.2729250867779006307144835,0.2628045445102466621806889,0.2331937645919904799185237,0.1862902109277342514260976,0.1255803694649046246346943,0.0556685671161736664827537],
          [0.2491470458134027850005624,0.2334925365383548087608499,0.2031674267230659217490645,0.1600783285433462263346525,0.1069393259953184309602547,0.0471753363865118271946160],
          [0.2325515532308739101945895,0.2262831802628972384120902,0.2078160475368885023125232,0.1781459807619457382800467,0.1388735102197872384636018,0.0921214998377284479144218,0.0404840047653158795200216],
          [0.2152638534631577901958764,0.2051984637212956039659241,0.1855383974779378137417166,0.1572031671581935345696019,0.1215185706879031846894148,0.0801580871597602098056333,0.0351194603317518630318329],
          [0.2025782419255612728806202,0.1984314853271115764561183,0.1861610000155622110268006,0.1662692058169939335532009,0.1395706779261543144478048,0.1071592204671719350118695,0.0703660474881081247092674,0.0307532419961172683546284],
          [0.1894506104550684962853967,0.1826034150449235888667637,0.1691565193950025381893121,0.1495959888165767320815017,0.1246289712555338720524763,0.0951585116824927848099251,0.0622535239386478928628438,0.0271524594117540948517806]
        ]

      },

      devicePixelRatio: root.devicePixelRatio || 1,

      getBackingStoreRatio: function(ctx) {
        return ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio || 1;
      },

      /**
       * @name Two.Utils.getRatio
       * @function
       * @param {Canvas.context2D} ctx
       * @returns {Number} The ratio of a unit in Two.js to the pixel density of a session's screen.
       * @see [High DPI Rendering]{@link http://www.html5rocks.com/en/tutorials/canvas/hidpi/}
       */
      getRatio: function(ctx) {
        return Two.Utils.devicePixelRatio / getBackingStoreRatio(ctx);
      },

      /**
       * @name Two.Utils.setPlaying
       * @function
       * @this Two#
       * @returns {Two} The instance called with for potential chaining.
       * @description Internal convenience method to properly defer play calling until after all objects have been updated with their newest styles.
       */
      setPlaying: function(b) {

        this.playing = !!b;
        return this;

      },

      /**
       * @name Two.Utils.getComputedMatrix
       * @function
       * @param {Two.Shape} object - The Two.js object that has a matrix property to calculate from.
       * @param {Two.Matrix} [matrix] - The matrix to apply calculated transformations to if available.
       * @returns {Two.Matrix} The computed matrix of a nested object. If no `matrix` was passed in arguments then a `new Two.Matrix` is returned.
       * @description Method to get the world space transformation of a given object in a Two.js scene.
       */
      getComputedMatrix: function(object, matrix) {

        matrix = (matrix && matrix.identity()) || new Two.Matrix();
        var parent = object, matrices = [];

        while (parent && parent._matrix) {
          matrices.push(parent._matrix);
          parent = parent.parent;
        }

        matrices.reverse();

        for (var i = 0; i < matrices.length; i++) {

          var m = matrices[i];
          var e = m.elements;
          matrix.multiply(
            e[0], e[1], e[2], e[3], e[4], e[5], e[6], e[7], e[8], e[9]);

        }

        return matrix;

      },

      /**
       * @name Two.Utils.decomposeMatrix
       * @function
       * @param {Two.Matrix} matrix - The matrix to decompose.
       * @returns {Object} An object containing relevant skew values.
       * @description Decompose a 2D 3x3 Matrix to find the skew.
       */
      decomposeMatrix: function(matrix) {

        // TODO: Include skewX, skewY

        return {
            translateX: matrix.e,
            translateY: matrix.f,
            scaleX: matrix.a,
            scaleY: matrix.d,
            rotation: Math.asin(- matrix.b)
        };

      },

      /**
       * @name Two.Utils.extractCSSText
       * @function
       * @param {String} text - The CSS text body to be parsed and extracted.
       * @param {Object} [styles] - The styles object to apply CSS key values to.
       * @returns {Object} styles
       * @description Parse CSS text body and apply them as key value pairs to a JavaScript object.
       */
      extractCSSText: function(text, styles) {

        var commands, command, name, value;

        if (!styles) {
          styles = {};
        }

        commands = text.split(';');

        for (var i = 0; i < commands.length; i++) {
          command = commands[i].split(':');
          name = command[0];
          value = command[1];
          if (_.isUndefined(name) || _.isUndefined(value)) {
            continue;
          }
          styles[name] = value.replace(/\s/, '');
        }

        return styles;

      },

      /**
       * @name Two.Utils.getSvgStyles
       * @function
       * @param {SvgNode} node - The SVG node to parse.
       * @returns {Object} styles
       * @description Get the CSS comands from the `style` attribute of an SVG node and apply them as key value pairs to a JavaScript object.
       */
      getSvgStyles: function(node) {

        var styles = {};
        var attributes = Two.Utils.getSvgAttributes(node);
        var length = Math.max(attributes.length, node.style.length);

        for (var i = 0; i < length; i++) {

          var command = node.style[i];
          var attribute = attributes[i];

          if (command) {
            styles[command] = node.style[command];
          }
          if (attribute) {
            styles[attribute] = node.getAttribute(attribute);
          }

        }

        return styles;

      },

      getSvgAttributes: function(node) {

        var attributes = node.getAttributeNames();

        // Reserved attributes to remove
        var keywords = ['id', 'class', 'transform', 'xmlns', 'viewBox'];

        for (var i = 0; i < keywords.length; i++) {
          var keyword = keywords[i];
          var index = _.indexOf(attributes, keyword);
          if (index >= 0) {
            attributes.splice(index, 1);
          }
        }

        return attributes;

      },

      /**
       * @name Two.Utils.applySvgViewBox
       * @function
       * @param {Two.Shape} node - The Two.js object to apply viewbox matrix to
       * @param {String} value - The viewBox value from the SVG attribute
       * @returns {Two.Shape} node
       @ @description
       */
      applySvgViewBox: function(node, value) {

        var elements = value.split(/\s/);

        var x = parseFloat(elements[0]);
        var y = parseFloat(elements[1]);
        var width = parseFloat(elements[2]);
        var height = parseFloat(elements[3]);

        var s = Math.min(this.width / width, this.height / height);

        node.translation.x -= x * s;
        node.translation.y -= y * s;
        node.scale = s;

        return node;

      },

      /**
       * @name Two.Utils.applySvgAttributes
       * @function
       * @param {SvgNode} node - An SVG Node to extrapolate attributes from.
       * @param {Two.Shape} elem - The Two.js object to apply extrapolated attributes to.
       * @returns {Two.Shape} The Two.js object passed now with applied attributes.
       * @description This function iterates through an SVG Node's properties and stores ones of interest. It tries to resolve styles applied via CSS as well.
       * @TODO Reverse calculate {@link Two.Gradient}s for fill / stroke of any given path.
       */
      applySvgAttributes: function(node, elem, parentStyles) {

        var  styles = {}, attributes = {}, extracted = {}, i, key, value, attr;

        // Not available in non browser environments
        if (root.getComputedStyle) {
          // Convert CSSStyleDeclaration to a normal object
          var computedStyles = root.getComputedStyle(node);
          i = computedStyles.length;

          while (i--) {
            key = computedStyles[i];
            value = computedStyles[key];
            // Gecko returns undefined for unset properties
            // Webkit returns the default value
            if (!_.isUndefined(value)) {
              styles[key] = value;
            }
          }
        }

        // Convert NodeMap to a normal object
        for (i = 0; i < node.attributes.length; i++) {
          attr = node.attributes[i];
          if (/style/i.test(attr.nodeName)) {
            Two.Utils.extractCSSText(attr.value, extracted);
          } else {
            attributes[attr.nodeName] = attr.value;
          }
        }

        // Getting the correct opacity is a bit tricky, since SVG path elements don't
        // support opacity as an attribute, but you can apply it via CSS.
        // So we take the opacity and set (stroke/fill)-opacity to the same value.
        if (!_.isUndefined(styles.opacity)) {
          styles['stroke-opacity'] = styles.opacity;
          styles['fill-opacity'] = styles.opacity;
          delete styles.opacity;
        }

        // Merge attributes and applied styles (attributes take precedence)
        if (parentStyles) {
          _.defaults(styles, parentStyles);
        }
        _.extend(styles, attributes, extracted);

        // Similarly visibility is influenced by the value of both display and visibility.
        // Calculate a unified value here which defaults to `true`.
        styles.visible = !(_.isUndefined(styles.display) && /none/i.test(styles.display))
          || (_.isUndefined(styles.visibility) && /hidden/i.test(styles.visibility));

        // Now iterate the whole thing
        for (key in styles) {
          value = styles[key];

          switch (key) {
            case 'transform':
              // TODO: Check this out https://github.com/paperjs/paper.js/blob/develop/src/svg/SvgImport.js#L315
              if (/none/i.test(value)) break;
              var m = (node.transform && node.transform.baseVal && node.transform.baseVal.length > 0)
                ? node.transform.baseVal[0].matrix
                : (node.getCTM ? node.getCTM() : null);

              // Might happen when transform string is empty or not valid.
              if (_.isNull(m)) break;

              // // Option 1: edit the underlying matrix and don't force an auto calc.
              // var m = node.getCTM();
              // elem._matrix.manual = true;
              // elem._matrix.set(m.a, m.b, m.c, m.d, m.e, m.f);

              // Option 2: Decompose and infer Two.js related properties.
              var transforms = Two.Utils.decomposeMatrix(m);

              elem.translation.set(transforms.translateX, transforms.translateY);
              elem.rotation = Math.PI * (transforms.rotation / 180);
              elem.scale = new Two.Vector(transforms.scaleX, transforms.scaleY);

              var x = parseFloat((styles.x + '').replace('px'));
              var y = parseFloat((styles.y + '').replace('px'));

              // Override based on attributes.
              if (x) {
                elem.translation.x = x;
              }

              if (y) {
                elem.translation.y = y;
              }

              break;
            case 'viewBox':
              Two.Utils.applySvgViewBox.call(this, elem, value);
              break;
            case 'visible':
              if (elem instanceof Two.Group) {
                elem._visible = value;
                break;
              }
              elem.visible = value;
              break;
            case 'stroke-linecap':
              if (elem instanceof Two.Group) {
                elem._cap = value;
                break;
              }
              elem.cap = value;
              break;
            case 'stroke-linejoin':
              if (elem instanceof Two.Group) {
                elem._join = value;
                break;
              }
              elem.join = value;
              break;
            case 'stroke-miterlimit':
              if (elem instanceof Two.Group) {
                elem._miter = value;
                break;
              }
              elem.miter = value;
              break;
            case 'stroke-width':
              if (elem instanceof Two.Group) {
                elem._linewidth = parseFloat(value);
                break;
              }
              elem.linewidth = parseFloat(value);
              break;
            case 'opacity':
            case 'stroke-opacity':
            case 'fill-opacity':
              // Only apply styles to rendered shapes
              // in the scene.
              if (elem instanceof Two.Group) {
                elem._opacity = parseFloat(value);
                break;
              }
              elem.opacity = parseFloat(value);
              break;
            case 'fill':
            case 'stroke':
              if (elem instanceof Two.Group) {
                key = '_' + key;
              }
              if (/url\(#.*\)/i.test(value)) {
                var scene = Two.Utils.getScene(this);
                elem[key] = scene.getById(
                  value.replace(/url\(#(.*)\)/i, '$1'));
              } else {
                elem[key] = (/none/i.test(value)) ? 'transparent' : value;
              }
              break;
            case 'id':
              elem.id = value;
              // Overwritten id for non-conflicts on same page SVG documents
              // TODO: Make this non-descructive
              node.id = value + '-' + Two.Identifier + 'applied';
              break;
            case 'class':
            case 'className':
              elem.classList = value.split(' ');
              break;
          }
        }

        return styles;

      },

      /**
       * @name two.Utils.getScene
       * @param {Two.Shape} node - The currently available object in the scenegraph.
       * @returns {Two.Group} - The highest order {@link Two.Group} in the scenegraph.
       * @property {Function}
       */
      getScene: function(node) {

        while (node.parent) {
          node = node.parent;
        }

        return node.scene;

      },

      /**
       * @name Two.Utils.read
       * @property {Object} read - A map of functions to read any number of SVG node types and create Two.js equivalents of them. Primarily used by the {@link Two#interpret} method.
       */
      read: {

        svg: function(node) {

          var svg = Two.Utils.read.g.call(this, node);
          var viewBox = node.getAttribute('viewBox');
          // Two.Utils.applySvgViewBox(svg, viewBox);

          return svg;

        },

        defs: function(node) {
          var error = new Two.Utils.Error('interpret <defs /> not supported.');
          console.warn(error.name, error.message);
          return null;
        },

        use: function(node) {
          var error = new Two.Utils.Error('interpret <use /> not supported.');
          console.warn(error.name, error.message);
          return null;
        },

        g: function(node, parentStyles) {

          var styles, attrs;
          var group = new Two.Group();

          Two.Utils.applySvgAttributes.call(this, node, group, parentStyles);

          this.add(group);

          // Switched up order to inherit more specific styles
          styles = Two.Utils.getSvgStyles.call(this, node);

          for (var i = 0, l = node.childNodes.length; i < l; i++) {
            var n = node.childNodes[i];
            var tag = n.nodeName;
            if (!tag) return;

            var tagName = tag.replace(/svg:/ig, '').toLowerCase();

            if (tagName in Two.Utils.read) {
              var o = Two.Utils.read[tagName].call(group, n, styles);
              if (!!o && !o.parent) {
                group.add(o);
              }
            }
          }

          return group;

        },

        polygon: function(node, parentStyles) {

          var points = node.getAttribute('points');

          var verts = [];
          points.replace(/(-?[\d.?]+)[,|\s](-?[\d.?]+)/g, function(match, p1, p2) {
            verts.push(new Two.Anchor(parseFloat(p1), parseFloat(p2)));
          });

          var poly = new Two.Path(verts, true).noStroke();
          poly.fill = 'black';

          Two.Utils.applySvgAttributes.call(this, node, poly, parentStyles);

          return poly;

        },

        polyline: function(node, parentStyles) {
          var poly = Two.Utils.read.polygon.call(this, node, parentStyles);
          poly.closed = false;
          return poly;
        },

        path: function(node, parentStyles) {

          var path = node.getAttribute('d');
          var points = [];
          var closed = false, relative = false;

          if (path) {

            // Create a Two.Path from the paths.

            var coord = new Two.Anchor();
            var control, coords;
            var commands = path.match(/[a-df-z][^a-df-z]*/ig);
            var last = commands.length - 1;

            // Split up polybeziers

            _.each(commands.slice(0), function(command, i) {

              var number, fid, lid, numbers, first, s;
              var j, k, ct, l, times;

              var type = command[0];
              var lower = type.toLowerCase();
              var items = command.slice(1).trim().split(/[\s,]+|(?=\s?[+-])/);
              var pre, post, result = [], bin;
              var hasDoubleDecimals = false;

              // Handle double decimal values e.g: 48.6037.71.8
              // Like: https://m.abcsofchinese.com/images/svg/亼ji2.svg
              for (j = 0; j < items.length; j++) {

                number = items[j];
                fid = number.indexOf('.');
                lid = number.lastIndexOf('.');

                if (fid !== lid) {

                  numbers = number.split('.');
                  first = numbers[0] + '.' + numbers[1];

                  items.splice(j, 1, first);

                  for (s = 2; s < numbers.length; s++) {
                    items.splice(j + s - 1, 0, '0.' + numbers[s]);
                  }

                  hasDoubleDecimals = true;

                }

              }

              if (hasDoubleDecimals) {
                command = type + items.join(',');
              }

              if (i <= 0) {
                commands = [];
              }

              switch (lower) {
                case 'h':
                case 'v':
                  if (items.length > 1) {
                    bin = 1;
                  }
                  break;
                case 'm':
                case 'l':
                case 't':
                  if (items.length > 2) {
                    bin = 2;
                  }
                  break;
                case 's':
                case 'q':
                  if (items.length > 4) {
                    bin = 4;
                  }
                  break;
                case 'c':
                  if (items.length > 6) {
                    bin = 6;
                  }
                  break;
                case 'a':
                  if (items.length > 7) {
                    bin = 7;
                  }
                  break;
              }

              // This means we have a polybezier.
              if (bin) {

                for (j = 0, l = items.length, times = 0; j < l; j+=bin) {

                  ct = type;
                  if (times > 0) {

                    switch (type) {
                      case 'm':
                        ct = 'l';
                        break;
                      case 'M':
                        ct = 'L';
                        break;
                    }

                  }

                  result.push(ct + items.slice(j, j + bin).join(' '));
                  times++;

                }

                commands = Array.prototype.concat.apply(commands, result);

              } else {

                commands.push(command);

              }

            });

            // Create the vertices for our Two.Path

            _.each(commands, function(command, i) {

              var result, x, y;
              var type = command[0];
              var lower = type.toLowerCase();

              coords = command.slice(1).trim();
              coords = coords.replace(/(-?\d+(?:\.\d*)?)[eE]([+-]?\d+)/g, function(match, n1, n2) {
                return parseFloat(n1) * pow(10, n2);
              });
              coords = coords.split(/[\s,]+|(?=\s?[+-])/);
              relative = type === lower;

              var x1, y1, x2, y2, x3, y3, x4, y4, reflection;

              switch (lower) {

                case 'z':
                  if (i >= last) {
                    closed = true;
                  } else {
                    x = coord.x;
                    y = coord.y;
                    result = new Two.Anchor(
                      x, y,
                      undefined, undefined,
                      undefined, undefined,
                      Two.Commands.close
                    );
                    // Make coord be the last `m` command
                    for (var j = points.length - 1; j >= 0; j--) {
                      var point = points[j];
                      if (/m/i.test(point.command)) {
                        coord = point;
                        break;
                      }
                    }
                  }
                  break;

                case 'm':
                case 'l':

                  control = undefined;

                  x = parseFloat(coords[0]);
                  y = parseFloat(coords[1]);

                  result = new Two.Anchor(
                    x, y,
                    undefined, undefined,
                    undefined, undefined,
                    /m/i.test(lower) ? Two.Commands.move : Two.Commands.line
                  );

                  if (relative) {
                    result.addSelf(coord);
                  }

                  // result.controls.left.copy(result);
                  // result.controls.right.copy(result);

                  coord = result;
                  break;

                case 'h':
                case 'v':

                  var a = /h/i.test(lower) ? 'x' : 'y';
                  var b = /x/i.test(a) ? 'y' : 'x';

                  result = new Two.Anchor(
                    undefined, undefined,
                    undefined, undefined,
                    undefined, undefined,
                    Two.Commands.line
                  );
                  result[a] = parseFloat(coords[0]);
                  result[b] = coord[b];

                  if (relative) {
                    result[a] += coord[a];
                  }

                  // result.controls.left.copy(result);
                  // result.controls.right.copy(result);

                  coord = result;
                  break;

                case 'c':
                case 's':

                  x1 = coord.x;
                  y1 = coord.y;

                  if (!control) {
                    control = new Two.Vector();//.copy(coord);
                  }

                  if (/c/i.test(lower)) {

                    x2 = parseFloat(coords[0]);
                    y2 = parseFloat(coords[1]);
                    x3 = parseFloat(coords[2]);
                    y3 = parseFloat(coords[3]);
                    x4 = parseFloat(coords[4]);
                    y4 = parseFloat(coords[5]);

                  } else {

                    // Calculate reflection control point for proper x2, y2
                    // inclusion.

                    reflection = getReflection(coord, control, relative);

                    x2 = reflection.x;
                    y2 = reflection.y;
                    x3 = parseFloat(coords[0]);
                    y3 = parseFloat(coords[1]);
                    x4 = parseFloat(coords[2]);
                    y4 = parseFloat(coords[3]);

                  }

                  if (relative) {
                    x2 += x1;
                    y2 += y1;
                    x3 += x1;
                    y3 += y1;
                    x4 += x1;
                    y4 += y1;
                  }

                  if (!_.isObject(coord.controls)) {
                    Two.Anchor.AppendCurveProperties(coord);
                  }

                  coord.controls.right.set(x2 - coord.x, y2 - coord.y);
                  result = new Two.Anchor(
                    x4, y4,
                    x3 - x4, y3 - y4,
                    undefined, undefined,
                    Two.Commands.curve
                  );

                  coord = result;
                  control = result.controls.left;

                  break;

                case 't':
                case 'q':

                  x1 = coord.x;
                  y1 = coord.y;

                  if (!control) {
                    control = new Two.Vector();
                  }

                  if (/q/i.test(lower)) {

                    x2 = parseFloat(coords[0]);
                    y2 = parseFloat(coords[1]);
                    x3 = parseFloat(coords[0]);
                    y3 = parseFloat(coords[1]);
                    x4 = parseFloat(coords[2]);
                    y4 = parseFloat(coords[3]);

                  } else {

                    reflection = getReflection(coord, control, relative);

                    x2 = reflection.x;
                    y2 = reflection.y;
                    x3 = reflection.x;
                    y3 = reflection.y;
                    x4 = parseFloat(coords[0]);
                    y4 = parseFloat(coords[1]);

                  }

                  if (relative) {
                    x2 += x1;
                    y2 += y1;
                    x3 += x1;
                    y3 += y1;
                    x4 += x1;
                    y4 += y1;
                  }

                  if (!_.isObject(coord.controls)) {
                    Two.Anchor.AppendCurveProperties(coord);
                  }

                  coord.controls.right.set(
                    (x2 - coord.x) * 0.33, (y2 - coord.y) * 0.33);
                  result = new Two.Anchor(
                    x4, y4,
                    x3 - x4, y3 - y4,
                    undefined, undefined,
                    Two.Commands.curve
                  );

                  coord = result;
                  control = result.controls.left;

                  break;

                case 'a':

                  x1 = coord.x;
                  y1 = coord.y;

                  var rx = parseFloat(coords[0]);
                  var ry = parseFloat(coords[1]);
                  var xAxisRotation = parseFloat(coords[2]);// * PI / 180;
                  var largeArcFlag = parseFloat(coords[3]);
                  var sweepFlag = parseFloat(coords[4]);

                  x4 = parseFloat(coords[5]);
                  y4 = parseFloat(coords[6]);

                  if (relative) {
                    x4 += x1;
                    y4 += y1;
                  }

                  var anchor = new Two.Anchor(x4, y4);
                  anchor.command = Two.Commands.arc;
                  anchor.rx = rx;
                  anchor.ry = ry;
                  anchor.xAxisRotation = xAxisRotation;
                  anchor.largeArcFlag = largeArcFlag;
                  anchor.sweepFlag = sweepFlag;

                  result = anchor;

                  coord = anchor;
                  control = undefined;

                  break;

              }

              if (result) {
                if (_.isArray(result)) {
                  points = points.concat(result);
                } else {
                  points.push(result);
                }
              }

            });

          }

          path = new Two.Path(points, closed, undefined, true).noStroke();
          path.fill = 'black';

          var rect = path.getBoundingClientRect(true);

          // Center objects to stay consistent
          // with the rest of the Two.js API.
          rect.centroid = {
            x: rect.left + rect.width / 2,
            y: rect.top + rect.height / 2
          };

          _.each(path.vertices, function(v) {
            v.subSelf(rect.centroid);
          });

          Two.Utils.applySvgAttributes.call(this, node, path, parentStyles);

          path.translation.addSelf(rect.centroid);

          return path;

        },

        circle: function(node, parentStyles) {

          var x = parseFloat(node.getAttribute('cx'));
          var y = parseFloat(node.getAttribute('cy'));
          var r = parseFloat(node.getAttribute('r'));

          var circle = new Two.Circle(x, y, r).noStroke();
          circle.fill = 'black';

          Two.Utils.applySvgAttributes.call(this, node, circle, parentStyles);

          return circle;

        },

        ellipse: function(node, parentStyles) {

          var x = parseFloat(node.getAttribute('cx'));
          var y = parseFloat(node.getAttribute('cy'));
          var width = parseFloat(node.getAttribute('rx'));
          var height = parseFloat(node.getAttribute('ry'));

          var ellipse = new Two.Ellipse(x, y, width, height).noStroke();
          ellipse.fill = 'black';

          Two.Utils.applySvgAttributes.call(this, node, ellipse, parentStyles);

          return ellipse;

        },

        rect: function(node, parentStyles) {

          var rx = parseFloat(node.getAttribute('rx'));
          var ry = parseFloat(node.getAttribute('ry'));

          if (!_.isNaN(rx) || !_.isNaN(ry)) {
            return Two.Utils.read['rounded-rect'](node);
          }

          var x = parseFloat(node.getAttribute('x')) || 0;
          var y = parseFloat(node.getAttribute('y')) || 0;
          var width = parseFloat(node.getAttribute('width'));
          var height = parseFloat(node.getAttribute('height'));

          var w2 = width / 2;
          var h2 = height / 2;

          var rect = new Two.Rectangle(x + w2, y + h2, width, height)
            .noStroke();
          rect.fill = 'black';

          Two.Utils.applySvgAttributes.call(this, node, rect, parentStyles);

          return rect;

        },

        'rounded-rect': function(node, parentStyles) {

          var x = parseFloat(node.getAttribute('x')) || 0;
          var y = parseFloat(node.getAttribute('y')) || 0;
          var rx = parseFloat(node.getAttribute('rx')) || 0;
          var ry = parseFloat(node.getAttribute('ry')) || 0;

          var width = parseFloat(node.getAttribute('width'));
          var height = parseFloat(node.getAttribute('height'));

          var w2 = width / 2;
          var h2 = height / 2;
          var radius = new Two.Vector(rx, ry);

          var rect = new Two.RoundedRectangle(x + w2, y + h2, width, height, radius)
            .noStroke();
          rect.fill = 'black';

          Two.Utils.applySvgAttributes.call(this, node, rect, parentStyles);

          return rect;

        },

        line: function(node, parentStyles) {

          var x1 = parseFloat(node.getAttribute('x1'));
          var y1 = parseFloat(node.getAttribute('y1'));
          var x2 = parseFloat(node.getAttribute('x2'));
          var y2 = parseFloat(node.getAttribute('y2'));

          var line = new Two.Line(x1, y1, x2, y2).noFill();

          Two.Utils.applySvgAttributes.call(this, node, line, parentStyles);

          return line;

        },

        lineargradient: function(node, parentStyles) {

          var x1 = parseFloat(node.getAttribute('x1'));
          var y1 = parseFloat(node.getAttribute('y1'));
          var x2 = parseFloat(node.getAttribute('x2'));
          var y2 = parseFloat(node.getAttribute('y2'));

          var ox = (x2 + x1) / 2;
          var oy = (y2 + y1) / 2;

          var stops = [];
          for (var i = 0; i < node.children.length; i++) {

            var child = node.children[i];

            var offset = child.getAttribute('offset');
            if (/%/ig.test(offset)) {
              offset = parseFloat(offset.replace(/%/ig, '')) / 100;
            }
            offset = parseFloat(offset);

            var color = child.getAttribute('stop-color');
            var opacity = child.getAttribute('stop-opacity');
            var style = child.getAttribute('style');

            var matches;
            if (_.isNull(color)) {
              matches = style ? style.match(/stop-color:\s?([#a-fA-F0-9]*)/) : false;
              color = matches && matches.length > 1 ? matches[1] : undefined;
            }

            if (_.isNull(opacity)) {
              matches = style ? style.match(/stop-opacity:\s?([0-9.-]*)/) : false;
              opacity = matches && matches.length > 1 ? parseFloat(matches[1]) : 1;
            } else {
              opacity = parseFloat(opacity);
            }

            stops.push(new Two.Gradient.Stop(offset, color, opacity));

          }

          var gradient = new Two.LinearGradient(x1 - ox, y1 - oy, x2 - ox,
            y2 - oy, stops);

          Two.Utils.applySvgAttributes.call(this, node, gradient, parentStyles);

          return gradient;

        },

        radialgradient: function(node, parentStyles) {

          var cx = parseFloat(node.getAttribute('cx')) || 0;
          var cy = parseFloat(node.getAttribute('cy')) || 0;
          var r = parseFloat(node.getAttribute('r'));

          var fx = parseFloat(node.getAttribute('fx'));
          var fy = parseFloat(node.getAttribute('fy'));

          if (_.isNaN(fx)) {
            fx = cx;
          }

          if (_.isNaN(fy)) {
            fy = cy;
          }

          var ox = abs(cx + fx) / 2;
          var oy = abs(cy + fy) / 2;

          var stops = [];
          for (var i = 0; i < node.children.length; i++) {

            var child = node.children[i];

            var offset = child.getAttribute('offset');
            if (/%/ig.test(offset)) {
              offset = parseFloat(offset.replace(/%/ig, '')) / 100;
            }
            offset = parseFloat(offset);

            var color = child.getAttribute('stop-color');
            var opacity = child.getAttribute('stop-opacity');
            var style = child.getAttribute('style');

            var matches;
            if (_.isNull(color)) {
              matches = style ? style.match(/stop-color:\s?([#a-fA-F0-9]*)/) : false;
              color = matches && matches.length > 1 ? matches[1] : undefined;
            }

            if (_.isNull(opacity)) {
              matches = style ? style.match(/stop-opacity:\s?([0-9.-]*)/) : false;
              opacity = matches && matches.length > 1 ? parseFloat(matches[1]) : 1;
            } else {
              opacity = parseFloat(opacity);
            }

            stops.push(new Two.Gradient.Stop(offset, color, opacity));

          }

          var gradient = new Two.RadialGradient(cx - ox, cy - oy, r,
            stops, fx - ox, fy - oy);

          Two.Utils.applySvgAttributes.call(this, node, gradient, parentStyles);

          return gradient;

        }

      },

      /**
       * @name Two.Utils.subdivide
       * @function
       * @param {Number} x1 - x position of first anchor point.
       * @param {Number} y1 - y position of first anchor point.
       * @param {Number} x2 - x position of first anchor point's "right" bezier handle.
       * @param {Number} y2 - y position of first anchor point's "right" bezier handle.
       * @param {Number} x3 - x position of second anchor point's "left" bezier handle.
       * @param {Number} y3 - y position of second anchor point's "left" bezier handle.
       * @param {Number} x4 - x position of second anchor point.
       * @param {Number} y4 - y position of second anchor point.
       * @param {Number} [limit=Two.Utils.Curve.RecursionLimit] - The amount of vertices to create by subdividing.
       * @returns {Two.Anchor[]} A list of anchor points ordered in between `x1`, `y1` and `x4`, `y4`
       * @description Given 2 points (a, b) and corresponding control point for each return an array of points that represent points plotted along the curve. The number of returned points is determined by `limit`.
       */
      subdivide: function(x1, y1, x2, y2, x3, y3, x4, y4, limit) {

        limit = limit || Two.Utils.Curve.RecursionLimit;
        var amount = limit + 1;

        // TODO: Abstract 0.001 to a limiting variable
        // Don't recurse if the end points are identical
        if (abs(x1 - x4) < 0.001 && abs(y1 - y4) < 0.001) {
          return [new Two.Anchor(x4, y4)];
        }

        var result = [];

        for (var i = 0; i < amount; i++) {
          var t = i / amount;
          var x = getComponentOnCubicBezier(t, x1, x2, x3, x4);
          var y = getComponentOnCubicBezier(t, y1, y2, y3, y4);
          result.push(new Two.Anchor(x, y));
        }

        return result;

      },

      /**
       * @name Two.Utils.getComponentOnCubicBezier
       * @function
       * @param {Number} t - Zero-to-one value describing what percentage to calculate.
       * @param {Number} a - The firt point's component value.
       * @param {Number} b - The first point's bezier component value.
       * @param {Number} c - The second point's bezier component value.
       * @param {Number} d - The second point's component value.
       * @returns {Number} The coordinate value for a specific component along a cubic bezier curve by `t`.
       */
      getComponentOnCubicBezier: function(t, a, b, c, d) {
        var k = 1 - t;
        return (k * k * k * a) + (3 * k * k * t * b) + (3 * k * t * t * c) +
           (t * t * t * d);
      },

      /**
       * @name Two.Utils.getCurveLength
       * @function
       * @param {Number} x1 - x position of first anchor point.
       * @param {Number} y1 - y position of first anchor point.
       * @param {Number} x2 - x position of first anchor point's "right" bezier handle.
       * @param {Number} y2 - y position of first anchor point's "right" bezier handle.
       * @param {Number} x3 - x position of second anchor point's "left" bezier handle.
       * @param {Number} y3 - y position of second anchor point's "left" bezier handle.
       * @param {Number} x4 - x position of second anchor point.
       * @param {Number} y4 - y position of second anchor point.
       * @param {Number} [limit=Two.Utils.Curve.RecursionLimit] - The amount of vertices to create by subdividing.
       * @returns {Number} The length of a curve.
       * @description Given 2 points (a, b) and corresponding control point for each, return a float that represents the length of the curve using Gauss-Legendre algorithm. Limit iterations of calculation by `limit`.
       */
      getCurveLength: function(x1, y1, x2, y2, x3, y3, x4, y4, limit) {

        // TODO: Better / fuzzier equality check
        // Linear calculation
        if (x1 === x2 && y1 === y2 && x3 === x4 && y3 === y4) {
          var dx = x4 - x1;
          var dy = y4 - y1;
          return sqrt(dx * dx + dy * dy);
        }

        // Calculate the coefficients of a Bezier derivative.
        var ax = 9 * (x2 - x3) + 3 * (x4 - x1),
          bx = 6 * (x1 + x3) - 12 * x2,
          cx = 3 * (x2 - x1),

          ay = 9 * (y2 - y3) + 3 * (y4 - y1),
          by = 6 * (y1 + y3) - 12 * y2,
          cy = 3 * (y2 - y1);

        var integrand = function(t) {
          // Calculate quadratic equations of derivatives for x and y
          var dx = (ax * t + bx) * t + cx,
            dy = (ay * t + by) * t + cy;
          return sqrt(dx * dx + dy * dy);
        };

        return integrate(
          integrand, 0, 1, limit || Two.Utils.Curve.RecursionLimit
        );

      },

      /**
       * @name Two.Utils.getCurveBoundingBox
       * @function
       * @param {Number} x1 - x position of first anchor point.
       * @param {Number} y1 - y position of first anchor point.
       * @param {Number} x2 - x position of first anchor point's "right" bezier handle.
       * @param {Number} y2 - y position of first anchor point's "right" bezier handle.
       * @param {Number} x3 - x position of second anchor point's "left" bezier handle.
       * @param {Number} y3 - y position of second anchor point's "left" bezier handle.
       * @param {Number} x4 - x position of second anchor point.
       * @param {Number} y4 - y position of second anchor point.
       * @returns {Object} Object contains min and max `x` / `y` bounds.
       * @see {@link https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js#L856}
       */
      getCurveBoundingBox: function(x1, y1, x2, y2, x3, y3, x4, y4) {

        var tvalues = [];
        var bounds = [[], []];
        var a, b, c, t, t1, t2, b2ac, sqrtb2ac;

        for (var i = 0; i < 2; ++i) {
            if (i == 0) {
              b = 6 * x1 - 12 * x2 + 6 * x3;
              a = -3 * x1 + 9 * x2 - 9 * x3 + 3 * x4;
              c = 3 * x2 - 3 * x1;
            } else {
              b = 6 * y1 - 12 * y2 + 6 * y3;
              a = -3 * y1 + 9 * y2 - 9 * y3 + 3 * y4;
              c = 3 * y2 - 3 * y1;
            }
            if (abs(a) < 1e-12) {
              if (abs(b) < 1e-12) {
                continue;
              }
              t = -c / b;
              if (0 < t && t < 1) {
                tvalues.push(t);
              }
              continue;
            }
            b2ac = b * b - 4 * c * a;
            sqrtb2ac = Math.sqrt(b2ac);
            if (b2ac < 0) {
              continue;
            }
            t1 = (-b + sqrtb2ac) / (2 * a);
            if (0 < t1 && t1 < 1) {
              tvalues.push(t1);
            }
            t2 = (-b - sqrtb2ac) / (2 * a);
            if (0 < t2 && t2 < 1) {
              tvalues.push(t2);
            }
        }

        var x, y, j = tvalues.length;
        var jlen = j;
        var mt;

        while (j--) {
          t = tvalues[j];
          mt = 1 - t;
          bounds[0][j] = mt * mt * mt * x1 + 3 * mt * mt * t * x2 + 3 * mt * t * t * x3 + t * t * t * x4;
          bounds[1][j] = mt * mt * mt * y1 + 3 * mt * mt * t * y2 + 3 * mt * t * t * y3 + t * t * t * y4;
        }

        bounds[0][jlen] = x1;
        bounds[1][jlen] = y1;
        bounds[0][jlen + 1] = x4;
        bounds[1][jlen + 1] = y4;
        bounds[0].length = bounds[1].length = jlen + 2;

        return {
          min: { x: Math.min.apply(0, bounds[0]), y: Math.min.apply(0, bounds[1]) },
          max: { x: Math.max.apply(0, bounds[0]), y: Math.max.apply(0, bounds[1]) }
        };

      },

      /**
       * @name Two.Utils.integrate
       * @function
       * @param {Function} f
       * @param {Number} a
       * @param {Number} b
       * @param {Integer} n
       * @description Integration for `getCurveLength` calculations.
       * @see [Paper.js]{@link https://github.com/paperjs/paper.js/blob/master/src/util/Numerical.js#L101}
       */
      integrate: function(f, a, b, n) {
        var x = Two.Utils.Curve.abscissas[n - 2],
          w = Two.Utils.Curve.weights[n - 2],
          A = 0.5 * (b - a),
          B = A + a,
          i = 0,
          m = (n + 1) >> 1,
          sum = n & 1 ? w[i++] * f(B) : 0; // Handle odd n
        while (i < m) {
          var Ax = A * x[i];
          sum += w[i++] * (f(B + Ax) + f(B - Ax));
        }
        return A * sum;
      },

      /**
       * @name Two.Utils.getCurveFromPoints
       * @function
       * @param {Two.Anchor[]} points
       * @param {Boolean} closed
       * @description Sets the bezier handles on {@link Two.Anchor}s in the `points` list with estimated values to create a catmull-rom like curve. Used by {@link Two.Path#plot}.
       */
      getCurveFromPoints: function(points, closed) {

        var l = points.length, last = l - 1;

        for (var i = 0; i < l; i++) {

          var point = points[i];

          if (!_.isObject(point.controls)) {
            Two.Anchor.AppendCurveProperties(point);
          }

          var prev = closed ? mod(i - 1, l) : max(i - 1, 0);
          var next = closed ? mod(i + 1, l) : min(i + 1, last);

          var a = points[prev];
          var b = point;
          var c = points[next];
          getControlPoints(a, b, c);

          b.command = i === 0 ? Two.Commands.move : Two.Commands.curve;

        }

      },

      /**
       * @name Two.Utils.getControlPoints
       * @function
       * @param {Two.Anchor} a
       * @param {Two.Anchor} b
       * @param {Two.Anchor} c
       * @returns {Two.Anchor} Returns the passed middle point `b`.
       * @description Given three coordinates set the control points for the middle, b, vertex based on its position with the adjacent points.
       */
      getControlPoints: function(a, b, c) {

        var a1 = Two.Vector.angleBetween(a, b);
        var a2 = Two.Vector.angleBetween(c, b);

        var d1 = Two.Vector.distanceBetween(a, b);
        var d2 = Two.Vector.distanceBetween(c, b);

        var mid = (a1 + a2) / 2;

        // TODO: Issue 73
        if (d1 < 0.0001 || d2 < 0.0001) {
          if (_.isBoolean(b.relative) && !b.relative) {
            b.controls.left.copy(b);
            b.controls.right.copy(b);
          }
          return b;
        }

        d1 *= 0.33; // Why 0.33?
        d2 *= 0.33;

        if (a2 < a1) {
          mid += HALF_PI;
        } else {
          mid -= HALF_PI;
        }

        b.controls.left.x = cos(mid) * d1;
        b.controls.left.y = sin(mid) * d1;

        mid -= PI;

        b.controls.right.x = cos(mid) * d2;
        b.controls.right.y = sin(mid) * d2;

        if (_.isBoolean(b.relative) && !b.relative) {
          b.controls.left.x += b.x;
          b.controls.left.y += b.y;
          b.controls.right.x += b.x;
          b.controls.right.y += b.y;
        }

        return b;

      },

      /**
       * @name Two.Utils.getReflection
       * @function
       * @param {Two.Vector} a
       * @param {Two.Vector} b
       * @param {Boolean} [relative=false]
       * @returns {Two.Vector} New {@link Two.Vector} that represents the reflection point.
       * @description Get the reflection of a point `b` about point `a`. Where `a` is in absolute space and `b` is relative to `a`.
       * @see {@link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes}
       */
      getReflection: function(a, b, relative) {

        return new Two.Vector(
          2 * a.x - (b.x + a.x) - (relative ? a.x : 0),
          2 * a.y - (b.y + a.y) - (relative ? a.y : 0)
        );

      },

      /**
       * @name Two.Utils.getAnchorsFromArcData
       * @function
       * @param {Two.Vector} center
       * @param {Radians} xAxisRotation
       * @param {Number} rx - x radius
       * @param {Number} ry - y radius
       * @param {Radians} ts
       * @param {Radians} td
       * @param {Boolean} [ccw=false] - Set path traversal to counter-clockwise
       */
      getAnchorsFromArcData: function(center, xAxisRotation, rx, ry, ts, td, ccw) {

        var l = Two.Resolution;

        return _.map(_.range(l), function(i) {

          var pct = (i + 1) / l;
          if (ccw) {
            pct = 1 - pct;
          }

          var theta = pct * td + ts;
          var x = rx * Math.cos(theta);
          var y = ry * Math.sin(theta);

          // x += center.x;
          // y += center.y;

          var anchor = new Two.Anchor(x, y);
          Two.Anchor.AppendCurveProperties(anchor);
          anchor.command = Two.Commands.line;

          // TODO: Calculate control points here...

          return anchor;

        });

      },

      /**
       * @name Two.Utils.lerp
       * @function
       * @param {Number} a - Start value.
       * @param {Number} b - End value.
       * @param {Number} t - Zero-to-one value describing percentage between a and b.
       * @returns {Number}
       * @description Linear interpolation between two values `a` and `b` by an amount `t`.
       */
      lerp: function(a, b, t) {
        return t * (b - a) + a;
      },

      /**
       * @name Two.Utils.toFixed
       * @function
       * @param {Number} v - Any float
       * @returns {Number} That float trimmed to the third decimal place.
       * @description A pretty fast toFixed(3) alternative.
       * @see {@link http://jsperf.com/parsefloat-tofixed-vs-math-round/18}
       */
      toFixed: function(v) {
        return Math.floor(v * 1000) / 1000;
      },

      /**
       * @name Two.Utils.mod
       * @param {Number} v - The value to modulo
       * @param {Number} l - The value to modulo by
       * @returns {Number}
       * @description Modulo with added functionality to handle negative values in a positive manner.
       */
      mod: function(v, l) {

        while (v < 0) {
          v += l;
        }

        return v % l;

      },

      /**
       * @name Two.Utils.Collection
       * @class
       * @extends Two.Utils.Events
       * @description An `Array` like object with additional event propagation on actions. `pop`, `shift`, and `splice` trigger `removed` events. `push`, `unshift`, and `splice` with more than 2 arguments trigger 'inserted'. Finally, `sort` and `reverse` trigger `order` events.
       */
      Collection: function() {

        Array.call(this);

        if (arguments.length > 1) {
          Array.prototype.push.apply(this, arguments);
        } else if (arguments[0] && Array.isArray(arguments[0])) {
          Array.prototype.push.apply(this, arguments[0]);
        }

      },

      /**
       * @name Two.Utils.Error
       * @class
       * @description Custom error throwing for Two.js specific identification.
       */
      Error: function(message) {
        this.name = 'Two.js';
        this.message = message;
      },

      /**
       * @name Two.Utils.Events
       * @interface
       * @description Object inherited by many Two.js objects in order to facilitate custom events.
       */
      Events: {

        /**
         * @name Two.Utils.Events.on
         * @function
         * @param {String} name - The name of the event to bind a function to.
         * @param {Function} handler - The function to be invoked when the event is dispatched.
         * @description Call to add a listener to a specific event name.
         */
        on: function(name, handler) {

          this._events || (this._events = {});
          var list = this._events[name] || (this._events[name] = []);

          list.push(handler);

          return this;

        },

        /**
         * @name Two.Utils.Events.off
         * @function
         * @param {String} [name] - The name of the event intended to be removed.
         * @param {Function} [handler] - The handler intended to be reomved.
         * @description Call to remove listeners from a specific event. If only `name` is passed then all the handlers attached to that `name` will be removed. If no arguments are passed then all handlers for every event on the obejct are removed.
         */
        off: function(name, handler) {

          if (!this._events) {
            return this;
          }
          if (!name && !handler) {
            this._events = {};
            return this;
          }

          var names = name ? [name] : _.keys(this._events);
          for (var i = 0, l = names.length; i < l; i++) {

            name = names[i];
            var list = this._events[name];

            if (list) {
              var events = [];
              if (handler) {
                for (var j = 0, k = list.length; j < k; j++) {
                  var ev = list[j];
                  ev = ev.handler ? ev.handler : ev;
                  if (handler && handler !== ev) {
                    events.push(ev);
                  }
                }
              }
              this._events[name] = events;
            }
          }

          return this;
        },

        /**
         * @name Two.Utils.Events.trigger
         * @function
         * @param {String} name - The name of the event to dispatch.
         * @param arguments - Anything can be passed after the name and those will be passed on to handlers attached to the event in the order they are passed.
         * @description Call to trigger a custom event. Any additional arguments passed after the name will be passed along to the attached handlers.
         */
        trigger: function(name) {
          if (!this._events) return this;
          var args = slice.call(arguments, 1);
          var events = this._events[name];
          if (events) trigger(this, events, args);
          return this;
        },

        listen: function(obj, name, handler) {

          var bound = this;

          if (obj) {

            var event = function () {
              handler.apply(bound, arguments);
            };

            // Add references about the object that assigned this listener
            event.obj = obj;
            event.name = name;
            event.handler = handler;

            obj.on(name, event);

          }

          return this;

        },

        ignore: function(obj, name, handler) {

          obj.off(name, handler);
          return this;

        }

      }

    })

  });

  /**
   * @name Two.Utils.Events.bind
   * @borrows Two.Utils.Events.on as Two.Utils.Events.bind
   */
  Two.Utils.Events.bind = Two.Utils.Events.on;

  /**
   * @name Two.Utils.Events.unbind
   * @borrows Two.Utils.Events.off as Two.Utils.Events.unbind
   */
  Two.Utils.Events.unbind = Two.Utils.Events.off;

  var trigger = function(obj, events, args) {
    var method;
    switch (args.length) {
    case 0:
      method = function(i) {
        events[i].call(obj, args[0]);
      };
      break;
    case 1:
      method = function(i) {
        events[i].call(obj, args[0], args[1]);
      };
      break;
    case 2:
      method = function(i) {
        events[i].call(obj, args[0], args[1], args[2]);
      };
      break;
    case 3:
      method = function(i) {
        events[i].call(obj, args[0], args[1], args[2], args[3]);
      };
      break;
    default:
      method = function(i) {
        events[i].apply(obj, args);
      };
    }
    for (var i = 0; i < events.length; i++) {
      method(i);
    }
  };

  Two.Utils.Error.prototype = new Error();
  Two.Utils.Error.prototype.constructor = Two.Utils.Error;

  Two.Utils.Collection.prototype = new Array();
  Two.Utils.Collection.prototype.constructor = Two.Utils.Collection;

  _.extend(Two.Utils.Collection.prototype, Two.Utils.Events, {

    pop: function() {
      var popped = Array.prototype.pop.apply(this, arguments);
      this.trigger(Two.Events.remove, [popped]);
      return popped;
    },

    shift: function() {
      var shifted = Array.prototype.shift.apply(this, arguments);
      this.trigger(Two.Events.remove, [shifted]);
      return shifted;
    },

    push: function() {
      var pushed = Array.prototype.push.apply(this, arguments);
      this.trigger(Two.Events.insert, arguments);
      return pushed;
    },

    unshift: function() {
      var unshifted = Array.prototype.unshift.apply(this, arguments);
      this.trigger(Two.Events.insert, arguments);
      return unshifted;
    },

    splice: function() {
      var spliced = Array.prototype.splice.apply(this, arguments);
      var inserted;

      this.trigger(Two.Events.remove, spliced);

      if (arguments.length > 2) {
        inserted = this.slice(arguments[0], arguments[0] + arguments.length - 2);
        this.trigger(Two.Events.insert, inserted);
        this.trigger(Two.Events.order);
      }
      return spliced;
    },

    sort: function() {
      Array.prototype.sort.apply(this, arguments);
      this.trigger(Two.Events.order);
      return this;
    },

    reverse: function() {
      Array.prototype.reverse.apply(this, arguments);
      this.trigger(Two.Events.order);
      return this;
    }

  });

  // Localize utils

  var getAnchorsFromArcData = Two.Utils.getAnchorsFromArcData,
    getControlPoints = Two.Utils.getControlPoints,
    getCurveFromPoints = Two.Utils.getCurveFromPoints,
    solveSegmentIntersection = Two.Utils.solveSegmentIntersection,
    decoupleShapes = Two.Utils.decoupleShapes,
    mod = Two.Utils.mod,
    getBackingStoreRatio = Two.Utils.getBackingStoreRatio,
    getComponentOnCubicBezier = Two.Utils.getComponentOnCubicBezier,
    getCurveLength = Two.Utils.getCurveLength,
    integrate = Two.Utils.integrate,
    getReflection = Two.Utils.getReflection;

  _.extend(Two.prototype, Two.Utils.Events, {

    constructor: Two,

    /**
     * @name Two#appendTo
     * @function
     * @param {Element} elem - The DOM element to append the Two.js stage to.
     * @description Shorthand method to append your instance of Two.js to the `document`.
     */
    appendTo: function(elem) {

      elem.appendChild(this.renderer.domElement);
      return this;

    },

    /**
     * @name Two#play
     * @function
     * @fires Two.Events.play event
     * @description Call to start an internal animation loop.
     * @nota-bene This function initiates a `requestAnimationFrame` loop.
     */
    play: function() {

      Two.Utils.setPlaying.call(this, true);
      raf.init();
      return this.trigger(Two.Events.play);

    },

    /**
     * @name Two#pause
     * @function
     * @fires Two.Events.pause event
     * @description Call to stop the internal animation loop for a specific instance of Two.js.
     */
    pause: function() {

      this.playing = false;
      return this.trigger(Two.Events.pause);

    },

    /**
     * @name Two#update
     * @fires Two.Events.update event
     * @description Update positions and calculations in one pass before rendering. Then render to the canvas.
     * @nota-bene This function is called automatically if using {@link Two#play} or the `autostart` parameter in construction.
     */
    update: function() {

      var animated = !!this._lastFrame;
      var now = perf.now();

      if (animated) {
        this.timeDelta = parseFloat((now - this._lastFrame).toFixed(3));
      }
      this._lastFrame = now;

      var width = this.width;
      var height = this.height;
      var renderer = this.renderer;

      // Update width / height for the renderer
      if (width !== renderer.width || height !== renderer.height) {
        renderer.setSize(width, height, this.ratio);
      }

      this.trigger(Two.Events.update, this.frameCount, this.timeDelta);

      return this.render();

    },

    /**
     * @name Two#render
     * @fires Two.Events.render event
     * @description Render all drawable and visible objects of the scene.
     */
    render: function() {

      this.renderer.render();
      return this.trigger(Two.Events.render, this.frameCount++);

    },

    // Convenience Methods

    /**
     * @name Two#add
     * @function
     * @param {(Two.Shape[]|...Two.Shape)}} [objects] - An array of Two.js objects. Alternatively can add objects as individual arguments.
     * @description A shorthand method to add specific Two.js objects to the scene.
     */
    add: function(o) {

      var objects = o;
      if (!(objects instanceof Array)) {
        objects = _.toArray(arguments);
      }

      this.scene.add(objects);
      return this;

    },

    /**
     * @name Two#remove
     * @function
     * @param {(Two.Shape[]|...Two.Shape)} [objects] - An array of Two.js objects.
     * @description A shorthand method to remove specific Two.js objects from the scene.
     */
    remove: function(o) {

      var objects = o;
      if (!(objects instanceof Array)) {
        objects = _.toArray(arguments);
      }

      this.scene.remove(objects);

      return this;

    },

    /**
     * @name Two#clear
     * @function
     * @description Remove all all Two.js objects from the scene.
     */
    clear: function() {

      this.scene.remove(this.scene.children);
      return this;

    },

    /**
     * @name Two#makeLine
     * @function
     * @param {Number} x1
     * @param {Number} y1
     * @param {Number} x2
     * @param {Number} y2
     * @returns {Two.Line}
     * @description Creates a Two.js line and adds it to the scene.
     */
    makeLine: function(x1, y1, x2, y2) {

      var line = new Two.Line(x1, y1, x2, y2);
      this.scene.add(line);

      return line;

    },

    /**
     * @name Two#makeArrow
     * @function
     * @param {Number} x1
     * @param {Number} y1
     * @param {Number} x2
     * @param {Number} y2
     * @returns {Two.Path}
     * @description Creates a Two.js arrow and adds it to the scene.
     */
    makeArrow: function(x1, y1, x2, y2, size) {

      var headlen = _.isNumber(size ) ? size : 10;

      var angle = Math.atan2(y2 - y1, x2 - x1);

      var vertices = [

        new Two.Anchor(x1, y1, undefined, undefined, undefined, undefined, Two.Commands.move),
        new Two.Anchor(x2, y2, undefined, undefined, undefined, undefined, Two.Commands.line),
        new Two.Anchor(
          x2 - headlen * Math.cos(angle - Math.PI / 4),
          y2 - headlen * Math.sin(angle - Math.PI / 4),
          undefined, undefined, undefined, undefined, Two.Commands.line
        ),

        new Two.Anchor(x2, y2, undefined, undefined, undefined, undefined, Two.Commands.move),
        new Two.Anchor(
          x2 - headlen * Math.cos(angle + Math.PI / 4),
          y2 - headlen * Math.sin(angle + Math.PI / 4),
          undefined, undefined, undefined, undefined, Two.Commands.line
        )

      ];

      var path = new Two.Path(vertices, false, false, true);
      path.noFill();
      path.cap = 'round';
      path.join = 'round';

      this.scene.add(path);

      return path;
    },

    /**
     * @name Two#makeRectangle
     * @function
     * @param {Number} x
     * @param {Number} y
     * @param {Number} width
     * @param {Number} height
     * @returns {Two.Rectangle}
     * @description Creates a Two.js rectangle and adds it to the scene.
     */
    makeRectangle: function(x, y, width, height) {

      var rect = new Two.Rectangle(x, y, width, height);
      this.scene.add(rect);

      return rect;

    },

    /**
     * @name Two#makeRoundedRectangle
     * @function
     * @param {Number} x
     * @param {Number} y
     * @param {Number} width
     * @param {Number} height
     * @param {Number} sides
     * @returns {Two.Rectangle}
     * @description Creates a Two.js rounded rectangle and adds it to the scene.
     */
    makeRoundedRectangle: function(x, y, width, height, sides) {

      var rect = new Two.RoundedRectangle(x, y, width, height, sides);
      this.scene.add(rect);

      return rect;

    },

    /**
     * @name Two#makeCircle
     * @function
     * @param {Number} x
     * @param {Number} y
     * @param {Number} radius
     * @param {Number} [resolution=4]
     * @returns {Two.Circle}
     * @description Creates a Two.js circle and adds it to the scene.
     */
    makeCircle: function(x, y, radius, resolution) {

      var circle = new Two.Circle(x, y, radius, resolution);
      this.scene.add(circle);

      return circle;

    },

    /**
     * @name Two#makeEllipse
     * @function
     * @param {Number} x
     * @param {Number} y
     * @param {Number} rx
     * @param {Number} ry
     * @param {Number} [resolution=4]
     * @returns {Two.Ellipse}
     * @description Creates a Two.js ellipse and adds it to the scene.
     */
    makeEllipse: function(x, y, rx, ry, resolution) {

      var ellipse = new Two.Ellipse(x, y, rx, ry, resolution);
      this.scene.add(ellipse);

      return ellipse;

    },

    /**
     * @name Two#makeStar
     * @function
     * @param {Number} x
     * @param {Number} y
     * @param {Number} outerRadius
     * @param {Number} innerRadius
     * @param {Number} sides
     * @returns {Two.Star}
     * @description Creates a Two.js star and adds it to the scene.
     */
    makeStar: function(ox, oy, outerRadius, innerRadius, sides) {

      var star = new Two.Star(ox, oy, outerRadius, innerRadius, sides);
      this.scene.add(star);

      return star;

    },

    /**
     * @name Two#makeCurve
     * @function
     * @param {Two.Anchor[]} [points] - An array of {@link Two.Anchor} points.
     * @param {...Number} - Alternatively you can pass alternating `x` / `y` coordinate values as individual arguments. These will be combined into {@link Two.Anchor}s for use in the path.
     * @returns {Two.Path} - Where `path.curved` is set to `true`.
     * @description Creates a Two.js path that is curved and adds it to the scene.
     * @nota-bene In either case of passing an array or passing numbered arguments the last argument is an optional `Boolean` that defines whether the path should be open or closed.
     */
    makeCurve: function(p) {

      var l = arguments.length, points = p;
      if (!_.isArray(p)) {
        points = [];
        for (var i = 0; i < l; i+=2) {
          var x = arguments[i];
          if (!_.isNumber(x)) {
            break;
          }
          var y = arguments[i + 1];
          points.push(new Two.Anchor(x, y));
        }
      }

      var last = arguments[l - 1];
      var curve = new Two.Path(points, !(_.isBoolean(last) ? last : undefined), true);
      var rect = curve.getBoundingClientRect();
      curve.center().translation
        .set(rect.left + rect.width / 2, rect.top + rect.height / 2);

      this.scene.add(curve);

      return curve;

    },

    /**
     * @name Two#makePolygon
     * @function
     * @param {Number} x
     * @param {Number} y
     * @param {Number} radius
     * @param {Number} sides
     * @returns {Two.Polygon}
     * @description Creates a Two.js polygon and adds it to the scene.
     */
    makePolygon: function(x, y, radius, sides) {

      var poly = new Two.Polygon(x, y, radius, sides);
      this.scene.add(poly);

      return poly;

    },

    /**
     * @name Two#makeArcSegment
     * @function
     * @param {Number} x
     * @param {Number} y
     * @param {Number} innerRadius
     * @param {Number} outerRadius
     * @param {Number} startAngle
     * @param {Number} endAngle
     * @param {Number} [resolution=Two.Resolution] - The number of vertices that should comprise the arc segment.
     */
    makeArcSegment: function(ox, oy, ir, or, sa, ea, res) {
      var arcSegment = new Two.ArcSegment(ox, oy, ir, or, sa, ea, res);
      this.scene.add(arcSegment);
      return arcSegment;
    },

    /**
     * @name Two#makePath
     * @function
     * @param {Two.Anchor[]} [points] - An array of {@link Two.Anchor} points.
     * @param {...Number} - Alternatively you can pass alternating `x` / `y` coordinate values as individual arguments. These will be combined into {@link Two.Anchor}s for use in the path.
     * @returns {Two.Path}
     * @description Creates a Two.js path and adds it to the scene.
     * @nota-bene In either case of passing an array or passing numbered arguments the last argument is an optional `Boolean` that defines whether the path should be open or closed.
     */
    makePath: function(p) {

      var l = arguments.length, points = p;
      if (!_.isArray(p)) {
        points = [];
        for (var i = 0; i < l; i+=2) {
          var x = arguments[i];
          if (!_.isNumber(x)) {
            break;
          }
          var y = arguments[i + 1];
          points.push(new Two.Anchor(x, y));
        }
      }

      var last = arguments[l - 1];
      var path = new Two.Path(points, !(_.isBoolean(last) ? last : undefined));
      var rect = path.getBoundingClientRect();

      if (_.isNumber(rect.top)   && _.isNumber(rect.left)   &&
          _.isNumber(rect.right) && _.isNumber(rect.bottom)) {
        path.center().translation
          .set(rect.left + rect.width / 2, rect.top + rect.height / 2);
      }

      this.scene.add(path);

      return path;

    },

    /**
     * @name Two#makeText
     * @function
     * @param {String} message
     * @param {Number} x
     * @param {Number} y
     * @param {Object} [styles] - An object to describe any of the {@link Two.Text.Properties} including `fill`, `stroke`, `linewidth`, `family`, `alignment`, `leading`, `opacity`, etc..
     * @returns {Two.Text}
     * @description Creates a Two.js text object and adds it to the scene.
     */
    makeText: function(message, x, y, styles) {
      var text = new Two.Text(message, x, y, styles);
      this.add(text);
      return text;
    },

    /**
     * @name Two#makeLinearGradient
     * @function
     * @param {Number} x1
     * @param {Number} y1
     * @param {Number} x2
     * @param {Number} y2
     * @param {...Two.Stop} [stops] - Any number of color stops sometimes reffered to as ramp stops. If none are supplied then the default black-to-white two stop gradient is applied.
     * @returns {Two.LinearGradient}
     * @description Creates a Two.js linear gradient and ads it to the scene. In the case of an effect it's added to an invisible "definitions" group.
     */
    makeLinearGradient: function(x1, y1, x2, y2 /* stops */) {

      var stops = slice.call(arguments, 4);
      var gradient = new Two.LinearGradient(x1, y1, x2, y2, stops);

      this.add(gradient);

      return gradient;

    },

    /**
     * @name Two#makeRadialGradient
     * @function
     * @param {Number} x1
     * @param {Number} y1
     * @param {Number} radius
     * @param {...Two.Stop} [stops] - Any number of color stops sometimes reffered to as ramp stops. If none are supplied then the default black-to-white two stop gradient is applied.
     * @returns {Two.RadialGradient}
     * @description Creates a Two.js linear-gradient object and ads it to the scene. In the case of an effect it's added to an invisible "definitions" group.
     */
    makeRadialGradient: function(x1, y1, r /* stops */) {

      var stops = slice.call(arguments, 3);
      var gradient = new Two.RadialGradient(x1, y1, r, stops);

      this.add(gradient);

      return gradient;

    },

    /**
     * @name Two#makeSprite
     * @function
     * @param {(String|Two.Texture)} pathOrTexture - The URL path to an image or an already created {@link Two.Texture}.
     * @param {Number} x
     * @param {Number} y
     * @param {Number} [columns=1]
     * @param {Number} [rows=1]
     * @param {Integer} [frameRate=0]
     * @param {Boolean} [autostart=false]
     * @returns {Two.Sprite}
     * @description Creates a Two.js sprite object and adds it to the scene. Sprites can be used for still images as well as animations.
     */
    makeSprite: function(path, x, y, cols, rows, frameRate, autostart) {

      var sprite = new Two.Sprite(path, x, y, cols, rows, frameRate);
      if (autostart) {
        sprite.play();
      }
      this.add(sprite);

      return sprite;

    },

    /**
     * @name Two#makeImageSequence
     * @function
     * @param {(String[]|Two.Texture[])} pathsOrTextures - An array of paths or of {@link Two.Textures}.
     * @param {Number} x
     * @param {Number} y
     * @param {Number} [frameRate=0]
     * @param {Boolean} [autostart=false]
     * @returns {Two.ImageSequence}
     * @description Creates a Two.js image sequence object and adds it to the scene.
     */
    makeImageSequence: function(paths, x, y, frameRate, autostart) {

      var imageSequence = new Two.ImageSequence(paths, x, y, frameRate);
      if (autostart) {
        imageSequence.play();
      }
      this.add(imageSequence);

      return imageSequence;

    },

    /**
     * @name Two#makeTexture
     * @function
     * @param {(String|Image|Canvas|Video)} [pathOrSource] - The URL path to an image or a DOM image-like element.
     * @param {Function} [callback] - Function to be invoked when the image is loaded.
     * @returns {Two.Texture}
     * @description Creates a Two.js texture object.
     */
    makeTexture: function(path, callback) {

      var texture = new Two.Texture(path, callback);
      return texture;

    },

    /**
     * @name Two#makeGroup
     * @function
     * @param {(Two.Shape[]|...Two.Shape)} [objects] - Two.js objects to be added to the group in the form of an array or as individual arguments.
     * @returns {Two.Group}
     * @description Creates a Two.js group object and adds it to the scene.
     */
    makeGroup: function(o) {

      var objects = o;
      if (!(objects instanceof Array)) {
        objects = _.toArray(arguments);
      }

      var group = new Two.Group();
      this.scene.add(group);
      group.add(objects);

      return group;

    },

    /**
     * @name Two#interpret
     * @function
     * @param {SvgNode} svgNode - The SVG node to be parsed.
     * @param {Boolean} shallow - Don't create a top-most group but append all content directly.
     * @param {Boolean} add – Automatically add the reconstructed SVG node to scene.
     * @returns {Two.Group}
     * @description Interpret an SVG Node and add it to this instance's scene. The distinction should be made that this doesn't `import` svg's, it solely interprets them into something compatible for Two.js - this is slightly different than a direct transcription.
     */
    interpret: function(svgNode, shallow, add) {

      var tag = svgNode.tagName.toLowerCase();

      add = (typeof add !== 'undefined') ? add : true;

      if (!(tag in Two.Utils.read)) {
        return null;
      }

      var node = Two.Utils.read[tag].call(this, svgNode);

      if (add) {
        this.add(shallow && node instanceof Two.Group ? node.children : node);
      }

      return node;

    },

    /**
     * @name Two#load
     * @function
     * @param {String|SvgNode} pathOrSVGContent - The URL path of an SVG file or an SVG document as text.
     * @param {Function} callback - Function to call once loading has completed.
     * @returns {Two.Group}
     * @description Load an SVG file or SVG text and interpret it into Two.js legible objects.
     */
    load: function(text, callback) {

      var group = new Two.Group();
      var elem, i, j;

      var attach = _.bind(function(data) {

        dom.temp.innerHTML = data;

        for (i = 0; i < dom.temp.children.length; i++) {
          elem = dom.temp.children[i];
          if (/svg/i.test(elem.nodeName)) {
            // Two.Utils.applySvgViewBox.call(this, group, elem.getAttribute('viewBox'));
            for (j = 0; j < elem.children.length; j++) {
              group.add(this.interpret(elem.children[j]));
            }
          } else {
            group.add(this.interpret(elem));
          }
        }

        if (_.isFunction(callback)) {
          var svg = dom.temp.children.length <= 1
            ? dom.temp.children[0] : dom.temp.children;
          callback(group, svg);
        }

      }, this);

      if (/.*\.svg$/ig.test(text)) {

        Two.Utils.xhr(text, attach);

        return group;

      }

      attach(text);

      return group;

    }

  });

  function fitToWindow() {

    var wr = document.body.getBoundingClientRect();

    var width = this.width = wr.width;
    var height = this.height = wr.height;

    this.renderer.setSize(width, height, this.ratio);

  }

  function updateDimensions(width, height) {
    this.width = width;
    this.height = height;
    this.trigger(Two.Events.resize, width, height);
  }

  // Request Animation Frame

  var raf = dom.getRequestAnimationFrame();

  function loop() {

    for (var i = 0; i < Two.Instances.length; i++) {
      var t = Two.Instances[i];
      if (t.playing) {
        t.update();
      }
    }

    Two.nextFrameID = raf(loop);

  }

  if (typeof module != 'undefined' && module.exports) {
    module.exports = Two;
  } else if (typeof define === 'function' && define.amd) {
    define('two', [], function() {
      return Two;
    });
  }

  return Two;

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var _ = Two.Utils;

  /**
   * @name Two.Registry
   * @class
   * @description An arbitrary class to manage a directory of things. Mainly used for keeping tabs of textures in Two.js.
   */
  var Registry = Two.Registry = function() {

    this.map = {};

  };

  _.extend(Registry.prototype, {

    constructor: Registry,

    /**
     * @name Two.Registry#add
     * @function
     * @param {String} id - A unique identifier.
     * @param value - Any type of variable to be registered to the directory.
     * @description Adds any value to the directory. Assigned by the `id`.
     */
    add: function(id, obj) {
      this.map[id] = obj;
      return this;
    },

    /**
     * @name Two.Registry#remove
     * @function
     * @param {String} id - A unique identifier.
     * @description Remove any value from the directory by its `id`.
     */
    remove: function(id) {
      delete this.map[id];
      return this;
    },

    /**
     * @name Two.Registry#get
     * @function
     * @param {String} id - A unique identifier.
     * @returns value - The associated value. If unavailable then `undefined` is returned.
     * @description Get a registered value by its `id`.
     */
    get: function(id) {
      return this.map[id];
    },

    /**
     * @name Two.Registry#contains
     * @function
     * @param {String} id - A unique identifier.
     * @returns {Boolean}
     * @description Convenience method to see if a value is registered to an `id` already.
     */
    contains: function(id) {
      return id in this.map;
    }

  });

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var _ = Two.Utils;

  /**
   * @name Two.Vector
   * @class
   * @param {Number} [x=0] - Any number to represent the horizontal x-component of the vector.
   * @param {Number} [y=0] - Any number to represent the vertical y-component of the vector.
   * @description A class to store x / y component vector data. In addition to storing data `Two.Vector` has suped up methods for commonplace mathematical operations.
   */
  var Vector = Two.Vector = function(x, y) {

    /**
     * @name Two.Vector#x
     * @property {Number} - The horizontal x-component of the vector.
     */
    this.x = x || 0;

    /**
     * @name Two.Vector#y
     * @property {Number} - The vertical y-component of the vector.
     */
    this.y = y || 0;

  };

  _.extend(Vector, {

    /**
     * @name Two.Vector.zero
     * @readonly
     * @property {Two.Vector} - Handy reference to a vector with component values 0, 0 at all times.
     */
    zero: new Two.Vector(),

    /**
     * @name Two.Vector.add
     * @function
     * @param {Two.Vector} v1
     * @param {Two.Vector} v2
     * @returns {Two.Vector}
     * @description Add two vectors together.
     */
    add: function(v1, v2) {
      return new Vector(v1.x + v2.x, v1.y + v2.y);
    },

    /**
     * @name Two.Vector.sub
     * @function
     * @param {Two.Vector} v1
     * @param {Two.Vector} v2
     * @returns {Two.Vector}
     * @description Subtract two vectors: `v2` from `v1`.
     */
    sub: function(v1, v2) {
      return new Vector(v1.x - v2.x, v1.y - v2.y);
    },

    /**
     * @name Two.Vector.subtract
     * @borrows Two.Vector.sub as Two.Vector.subtract
     */
    subtract: function(v1, v2) {
      return Vector.sub(v1, v2);
    },

    /**
     * @name Two.Vector.ratioBetween
     * @function
     * @param {Two.Vector} A
     * @param {Two.Vector} B
     * @returns {Number} The ratio betwen two points `v1` and `v2`.
     */
    ratioBetween: function(v1, v2) {

      return (v1.x * v2.x + v1.y * v2.y) / (v1.length() * v2.length());

    },

    /**
     * @name Two.Vector.angleBetween
     * @function
     * @param {Two.Vector} v1
     * @param {Two.Vector} v2
     * @returns {Radians} The angle between points `v1` and `v2`.
     */
    angleBetween: function(v1, v2) {

      var dx, dy;

      if (arguments.length >= 4) {

        dx = arguments[0] - arguments[2];
        dy = arguments[1] - arguments[3];

        return Math.atan2(dy, dx);

      }

      dx = v1.x - v2.x;
      dy = v1.y - v2.y;

      return Math.atan2(dy, dx);

    },

    /**
     * @name Two.Vector.distanceBetween
     * @function
     * @param {Two.Vector} v1
     * @param {Two.Vector} v2
     * @returns {Number} The distance between points `v1` and `v2`. Distance is always positive.
     */
    distanceBetween: function(v1, v2) {

      return Math.sqrt(Vector.distanceBetweenSquared(v1, v2));

    },

    /**
     * @name Two.Vector.distanceBetweenSquared
     * @function
     * @param {Two.Vector} v1
     * @param {Two.Vector} v2
     * @returns {Number} The squared distance between points `v1` and `v2`.
     */
    distanceBetweenSquared: function(v1, v2) {

      var dx = v1.x - v2.x;
      var dy = v1.y - v2.y;

      return dx * dx + dy * dy;

    },

    /**
     * @name Two.Vector.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Vector} to any object. Handy if you'd like to extend the {@link Two.Vector} class on a custom class.
     */
    MakeObservable: function(object) {

      // /**
      //  * Override Backbone bind / on in order to add properly broadcasting.
      //  * This allows Two.Vector to not broadcast events unless event listeners
      //  * are explicity bound to it.
      //  */

      object.bind = object.on = function() {

        if (!this._bound) {
          this._x = this.x;
          this._y = this.y;
          Object.defineProperty(this, 'x', xgs);
          Object.defineProperty(this, 'y', ygs);
          _.extend(this, BoundProto);
          this._bound = true; // Reserved for event initialization check
        }

        Two.Utils.Events.bind.apply(this, arguments);

        return this;

      };

    }

  });

  _.extend(Vector.prototype, Two.Utils.Events, {

    constructor: Vector,

    /**
     * @name Two.Vector#set
     * @function
     * @param {Number} x
     * @param {Number} y
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Set the x / y components of a vector to specific number values.
     */
    set: function(x, y) {
      this.x = x;
      this.y = y;
      return this;
    },

    /**
     * @name Two.Vector#copy
     * @function
     * @param {Two.Vector} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Copy the x / y components of another object `v`.
     */
    copy: function(v) {
      this.x = v.x;
      this.y = v.y;
      return this;
    },

    /**
     * @name Two.Vector#clear
     * @function
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Set the x / y component values of the vector to zero.
     */
    clear: function() {
      this.x = 0;
      this.y = 0;
      return this;
    },

    /**
     * @name Two.Vector#clone
     * @function
     * @returns {Two.Vector} - A new instance of {@link Two.Vector}.
     * @description Create a new vector and copy the existing values onto the newly created instance.
     */
    clone: function() {
      return new Vector(this.x, this.y);
    },

    /**
     * @name Two.Vector#add
     * @function
     * @param {Two.Vector} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Add an object with x / y component values to the instance.
     * @overloaded
     */

    /**
     * @name Two.Vector#add
     * @function
     * @param {Number} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Add the **same** number to both x / y component values of the instance.
     * @overloaded
     */

    /**
     * @name Two.Vector#add
     * @function
     * @param {Number} x
     * @param {Number} y
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Add `x` / `y` values to their respective component value on the instance.
     * @overloaded
     */
    add: function(x, y) {
      if (arguments.length <= 0) {
        return this;
      } else if (arguments.length <= 1) {
        if (_.isNumber(x)) {
          this.x += x;
          this.y += x;
        } else if (x && _.isNumber(x.x) && _.isNumber(x.y)) {
          this.x += x.x;
          this.y += x.y;
        }
      } else {
        this.x += x;
        this.y += y;
      }
      return this;
    },

    /**
     * @name Two.Vector#addSelf
     * @borrows Two.Vector#add as Two.Vector#addSelf
     */
    addSelf: function(v) {
      return this.add.apply(this, arguments);
    },

    /**
     * @name Two.Vector#sub
     * @function
     * @param {Two.Vector} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Subtract an object with x / y component values to the instance.
     * @overloaded
     */

    /**
     * @name Two.Vector#sub
     * @function
     * @param {Number} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Subtract the **same** number to both x / y component values of the instance.
     * @overloaded
     */

    /**
     * @name Two.Vector#sub
     * @function
     * @param {Number} x
     * @param {Number} y
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Subtract `x` / `y` values to their respective component value on the instance.
     * @overloaded
     */
    sub: function(x, y) {
      if (arguments.length <= 0) {
        return this;
      } else if (arguments.length <= 1) {
        if (_.isNumber(x)) {
          this.x -= x;
          this.y -= x;
        } else if (x && _.isNumber(x.x) && _.isNumber(x.y)) {
          this.x -= x.x;
          this.y -= x.y;
        }
      } else {
        this.x -= x;
        this.y -= y;
      }
      return this;
    },

    /**
     * @name Two.Vector#subtract
     * @borrows Two.Vector#sub as Two.Vector#subtract
     */
    subtract: function() {
      return this.sub.apply(this, arguments);
    },

    /**
     * @name Two.Vector#subSelf
     * @borrows Two.Vector#sub as Two.Vector#subSelf
     */
    subSelf: function(v) {
      return this.sub.apply(this, arguments);
    },

    /**
     * @name Two.Vector#subtractSelf
     * @borrows Two.Vector#sub as Two.Vector#subtractSelf
     */
    subtractSelf: function(v) {
      return this.sub.apply(this, arguments);
    },

    /**
     * @name Two.Vector#multiply
     * @function
     * @param {Two.Vector} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Multiply an object with x / y component values to the instance.
     * @overloaded
     */

    /**
     * @name Two.Vector#multiply
     * @function
     * @param {Number} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Multiply the **same** number to both x / y component values of the instance.
     * @overloaded
     */

    /**
     * @name Two.Vector#multiply
     * @function
     * @param {Number} x
     * @param {Number} y
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Multiply `x` / `y` values to their respective component value on the instance.
     * @overloaded
     */
    multiply: function(x, y) {
      if (arguments.length <= 0) {
        return this;
      } else if (arguments.length <= 1) {
        if (_.isNumber(x)) {
          this.x *= x;
          this.y *= x;
        } else if (x && _.isNumber(x.x) && _.isNumber(x.y)) {
          this.x *= x.x;
          this.y *= x.y;
        }
      } else {
        this.x *= x;
        this.y *= y;
      }
      return this;
    },

    /**
     * @name Two.Vector#multiplySelf
     * @borrows Two.Vector#multiply as Two.Vector#multiplySelf
     */
    multiplySelf: function(v) {
      return this.multiply.apply(this, arguments);
    },

    /**
     * @name Two.Vector#multiplyScalar
     * @function
     * @param {Number} s - The scalar to multiply by.
     * @description Mulitiply the vector by a single number. Shorthand to call {@link Two.Vector#multiply} directly.
     */
    multiplyScalar: function(s) {
      return this.multiply(s);
    },

    /**
     * @name Two.Vector#divide
     * @function
     * @param {Two.Vector} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Divide an object with x / y component values to the instance.
     * @overloaded
     */

    /**
     * @name Two.Vector#divide
     * @function
     * @param {Number} v
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Divide the **same** number to both x / y component values of the instance.
     * @overloaded
     */

    /**
     * @name Two.Vector#divide
     * @function
     * @param {Number} x
     * @param {Number} y
     * @returns {Two.Vector} - An instance of itself for the purpose of chaining.
     * @description Divide `x` / `y` values to their respective component value on the instance.
     * @overloaded
     */
    divide: function(x, y) {
      if (arguments.length <= 0) {
        return this;
      } else if (arguments.length <= 1) {
        if (_.isNumber(x)) {
          this.x /= x;
          this.y /= x;
        } else if (x && _.isNumber(x.x) && _.isNumber(x.y)) {
          this.x /= x.x;
          this.y /= x.y;
        }
      } else {
        this.x /= x;
        this.y /= y;
      }
      if (_.isNaN(this.x)) {
        this.x = 0;
      }
      if (_.isNaN(this.y)) {
        this.y = 0;
      }
      return this;
    },

    /**
     * @name Two.Vector#divideSelf
     * @borrows Two.Vector#divide as Two.Vector#divideSelf
     */
    divideSelf: function(v) {
      return this.divide.apply(this, arguments);
    },

    /**
     * @name Two.Vector#divideScalar
     * @function
     * @param {Number} s - The scalar to divide by.
     * @description Divide the vector by a single number. Shorthand to call {@link Two.Vector#divide} directly.
     */
    divideScalar: function(s) {
      return this.divide(s);
    },

    /**
     * @name Two.Vector#negate
     * @function
     * @description Invert each component's sign value.
     */
    negate: function() {
      return this.multiply(-1);
    },

    /**
     * @name Two.Vector#negate
     * @function
     * @returns {Number}
     * @description Get the [dot product]{@link https://en.wikipedia.org/wiki/Dot_product} of the vector.
     */
    dot: function(v) {
      return this.x * v.x + this.y * v.y;
    },

    /**
     * @name Two.Vector#length
     * @function
     * @returns {Number}
     * @description Get the length of a vector.
     */
    length: function() {
      return Math.sqrt(this.lengthSquared());
    },

    /**
     * @name Two.Vector#lengthSquared
     * @function
     * @returns {Number}
     * @description Get the length of the vector to the power of two. Widely used as less expensive than {@link Two.Vector#length}, because it isn't square-rooting any numbers.
     */
    lengthSquared: function() {
      return this.x * this.x + this.y * this.y;
    },

    /**
     * @name Two.Vector#normalize
     * @function
     * @description Normalize the vector from negative one to one.
     */
    normalize: function() {
      return this.divideScalar(this.length());
    },

    /**
     * @name Two.Vector#distanceTo
     * @function
     * @returns {Number}
     * @description Get the distance between two vectors.
     */
    distanceTo: function(v) {
      return Math.sqrt(this.distanceToSquared(v));
    },

    /**
     * @name Two.Vector#distanceToSquared
     * @function
     * @returns {Number}
     * @description Get the distance between two vectors to the power of two. Widely used as less expensive than {@link Two.Vector#distanceTo}, because it isn't square-rooting any numbers.
     */
    distanceToSquared: function(v) {
      var dx = this.x - v.x,
          dy = this.y - v.y;
      return dx * dx + dy * dy;
    },

    /**
     * @name Two.Vector#setLength
     * @function
     * @param {Number} l - length to set vector to.
     * @description Set the length of a vector.
     */
    setLength: function(l) {
      return this.normalize().multiplyScalar(l);
    },

    /**
     * @name Two.Vector#equals
     * @function
     * @param {Two.Vector} v - The vector to compare against.
     * @param {Number} [eps=0.0001] - An options epsilon for precision.
     * @returns {Boolean}
     * @description Qualify if one vector roughly equal another. With a margin of error defined by epsilon.
     */
    equals: function(v, eps) {
      eps = (typeof eps === 'undefined') ?  0.0001 : eps;
      return (this.distanceTo(v) < eps);
    },

    /**
     * @name Two.Vector#lerp
     * @function
     * @param {Two.Vector} v - The destination vector to step towards.
     * @param {Number} t - The zero to one value of how close the current vector gets to the destination vector.
     * @description Linear interpolate one vector to another by an amount `t` defined as a zero to one number.
     * @see [Matt DesLauriers]{@link https://twitter.com/mattdesl/status/1031305279227478016} has a good thread about this.
     */
    lerp: function(v, t) {
      var x = (v.x - this.x) * t + this.x;
      var y = (v.y - this.y) * t + this.y;
      return this.set(x, y);
    },

    /**
     * @name Two.Vector#isZero
     * @function
     * @param {Number} [eps=0.0001] - Optional precision amount to check against.
     * @returns {Boolean}
     * @description Check to see if vector is roughly zero, based on the `epsilon` precision value.
     */
    isZero: function(eps) {
      eps = (typeof eps === 'undefined') ?  0.0001 : eps;
      return (this.length() < eps);
    },

    /**
     * @name Two.Vector#toString
     * @function
     * @returns {String}
     * @description Return a comma-separated string of x, y value. Great for storing in a database.
     */
    toString: function() {
      return this.x + ', ' + this.y;
    },

    /**
     * @name Two.Vector#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the vector.
     */
    toObject: function() {
      return { x: this.x, y: this.y };
    },

    /**
     * @name Two.Vector#rotate
     * @function
     * @param {Radians} radians - The amoun to rotate the vector by.
     * @description Rotate a vector.
     */
    rotate: function(radians) {
      var cos = Math.cos(radians);
      var sin = Math.sin(radians);
      this.x = this.x * cos - this.y * sin;
      this.y = this.x * sin + this.y * cos;
      return this;
    }

  });

  // The same set of prototypical functions, but using the underlying
  // getter or setter for `x` and `y` values. This set of functions
  // is used instead of the previously documented ones above when
  // Two.Vector#bind is invoked and there is event dispatching processed
  // on x / y property changes.
  var BoundProto = {

    constructor: Vector,

    set: function(x, y) {
      this._x = x;
      this._y = y;
      return this.trigger(Two.Events.change);
    },

    copy: function(v) {
      this._x = v.x;
      this._y = v.y;
      return this.trigger(Two.Events.change);
    },

    clear: function() {
      this._x = 0;
      this._y = 0;
      return this.trigger(Two.Events.change);
    },

    clone: function() {
      return new Vector(this._x, this._y);
    },

    add: function(x, y) {
      if (arguments.length <= 0) {
        return this;
      } else if (arguments.length <= 1) {
        if (_.isNumber(x)) {
          this._x += x;
          this._y += x;
        }  else if (x && _.isNumber(x.x) && _.isNumber(x.y)) {
          this._x += x.x;
          this._y += x.y;
        }
      } else {
        this._x += x;
        this._y += y;
      }
      return this.trigger(Two.Events.change);
    },

    sub: function(x, y) {
      if (arguments.length <= 0) {
        return this;
      } else if (arguments.length <= 1) {
        if (_.isNumber(x)) {
          this._x -= x;
          this._y -= x;
        } else if (x && _.isNumber(x.x) && _.isNumber(x.y)) {
          this._x -= x.x;
          this._y -= x.y;
        }
      } else {
        this._x -= x;
        this._y -= y;
      }
      return this.trigger(Two.Events.change);
    },

    multiply: function(x, y) {
      if (arguments.length <= 0) {
        return this;
      } else if (arguments.length <= 1) {
        if (_.isNumber(x)) {
          this._x *= x;
          this._y *= x;
        } else if (x && _.isNumber(x.x) && _.isNumber(x.y)) {
          this._x *= x.x;
          this._y *= x.y;
        }
      } else {
        this._x *= x;
        this._y *= y;
      }
      return this.trigger(Two.Events.change);
    },

    divide: function(x, y) {
      if (arguments.length <= 0) {
        return this;
      } else if (arguments.length <= 1) {
        if (_.isNumber(x)) {
          this._x /= x;
          this._y /= x;
        } else if (x && _.isNumber(x.x) && _.isNumber(x.y)) {
          this._x /= x.x;
          this._y /= x.y;
        }
      } else {
        this._x /= x;
        this._y /= y;
      }
      if (_.isNaN(this._x)) {
        this._x = 0;
      }
      if (_.isNaN(this._y)) {
        this._y = 0;
      }
      return this.trigger(Two.Events.change);
    },

    dot: function(v) {
      return this._x * v.x + this._y * v.y;
    },

    lengthSquared: function() {
      return this._x * this._x + this._y * this._y;
    },

    distanceToSquared: function(v) {
      var dx = this._x - v.x,
          dy = this._y - v.y;
      return dx * dx + dy * dy;
    },

    lerp: function(v, t) {
      var x = (v.x - this._x) * t + this._x;
      var y = (v.y - this._y) * t + this._y;
      return this.set(x, y);
    },

    toString: function() {
      return this._x + ', ' + this._y;
    },

    toObject: function() {
      return { x: this._x, y: this._y };
    },

    rotate: function (radians) {
      var cos = Math.cos(radians);
      var sin = Math.sin(radians);
      this._x = this._x * cos - this._y * sin;
      this._y = this._x * sin + this._y * cos;
      return this;
    }

  };

  var xgs = {
    enumerable: true,
    get: function() {
      return this._x;
    },
    set: function(v) {
      this._x = v;
      this.trigger(Two.Events.change, 'x');
    }
  };

  var ygs = {
    enumerable: true,
    get: function() {
      return this._y;
    },
    set: function(v) {
      this._y = v;
      this.trigger(Two.Events.change, 'y');
    }
  };

  Vector.MakeObservable(Vector.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  // Localized variables
  var commands = Two.Commands;
  var _ = Two.Utils;

  /**
   * @class
   * @name Two.Anchor
   * @param {Number} [x=0] - The x position of the root anchor point.
   * @param {Number} [y=0] - The y position of the root anchor point.
   * @param {Number} [lx=0] - The x position of the left handle point.
   * @param {Number} [ly=0] - The y position of the left handle point.
   * @param {Number} [rx=0] - The x position of the right handle point.
   * @param {Number} [ry=0] - The y position of the right handle point.
   * @param {String} [command=Two.Commands.move] - The command to describe how to render. Applicable commands are {@link Two.Commands}
   * @extends Two.Vector
   * @description An object that holds 3 {@link Two.Vector}s, the anchor point and its corresponding handles: `left` and `right`. In order to properly describe the bezier curve about the point there is also a command property to describe what type of drawing should occur when Two.js renders the anchors.
   */
  var Anchor = Two.Anchor = function(x, y, lx, ly, rx, ry, command) {

    Two.Vector.call(this, x, y);

    this._broadcast = _.bind(function() {
      this.trigger(Two.Events.change);
    }, this);

    this._command = command || commands.move;
    this._relative = true;

    var ilx = _.isNumber(lx);
    var ily = _.isNumber(ly);
    var irx = _.isNumber(rx);
    var iry = _.isNumber(ry);

    // Append the `controls` object only if control points are specified,
    // keeping the Two.Anchor inline with a Two.Vector until it needs to
    // evolve beyond those functions - e.g: a simple 2 component vector.
    if (ilx || ily || irx || iry) {
      Two.Anchor.AppendCurveProperties(this);
    }

    if (ilx) {
      this.controls.left.x = lx;
    }
    if (ily) {
      this.controls.left.y = ly;
    }
    if (irx) {
      this.controls.right.x = rx;
    }
    if (iry) {
      this.controls.right.y = ry;
    }

  };

  _.extend(Two.Anchor, {

    /**
     * @name Two.Anchor.AppendCurveProperties
     * @function
     * @param {Two.Anchor} anchor - The instance to append the `control`object to.
     * @description Adds the `controls` property as an object with `left` and `right` properties to access the bezier control handles that define how the curve is drawn. It also sets the `relative` property to `true` making vectors in the `controls` object relative to their corresponding root anchor point.
     */
    AppendCurveProperties: function(anchor) {

      anchor.relative = true;

      /**
       * @name Two.Anchor#controls
       * @property {Object} controls
       * @description An plain object that holds the controls handles for a {@link Two.Anchor}.
       */
      anchor.controls = {};

      /**
       * @name Two.Anchor#controls#left
       * @property {Two.Vector} left
       * @description The "left" control point to define handles on a bezier curve.
       */
      anchor.controls.left = new Two.Vector(0, 0);

      /**
       * @name Two.Anchor#controls#right
       * @property {Two.Vector} right
       * @description The "left" control point to define handles on a bezier curve.
       */
      anchor.controls.right = new Two.Vector(0, 0);

    },

    /**
     * @name Two.Anchor.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Anchor} to any object. Handy if you'd like to extend the {@link Two.Anchor} class on a custom class.
     */
    MakeObservable: function(object) {

      /**
       * @name Two.Anchor#command
       * @property {Two.Commands}
       * @description A draw command associated with the anchor point.
       */
      Object.defineProperty(object, 'command', {

        enumerable: true,

        get: function() {
          return this._command;
        },

        set: function(c) {
          this._command = c;
          if (this._command === commands.curve && !_.isObject(this.controls)) {
            Anchor.AppendCurveProperties(this);
          }
          return this.trigger(Two.Events.change);
        }

      });

      /**
       * @name Two.Anchor#relative
       * @property {Boolean}
       * @description A boolean to render control points relative to the root anchor point or in global coordinate-space to the rest of the scene.
       */
      Object.defineProperty(object, 'relative', {

        enumerable: true,

        get: function() {
          return this._relative;
        },

        set: function(b) {
          if (this._relative == b) {
            return this;
          }
          this._relative = !!b;
          return this.trigger(Two.Events.change);
        }

      });

      _.extend(object, Two.Vector.prototype, AnchorProto);

      // Make it possible to bind and still have the Anchor specific
      // inheritance from Two.Vector. In this case relying on `Two.Vector`
      // to do much of the heavy event-listener binding / unbinding.
      object.bind = object.on = function() {
        var bound = this._bound;
        Two.Vector.prototype.bind.apply(this, arguments);
        if (!bound) {
          _.extend(this, AnchorProto);
        }
      };

    }

  });

  var AnchorProto = {

    constructor: Two.Anchor,

    /**
     * @name Two.Anchor#listen
     * @function
     * @description Convenience method used mainly by {@link Two.Path#vertices} to listen and propagate changes from control points up to their respective anchors and further if necessary.
     */
    listen: function() {

      if (!_.isObject(this.controls)) {
        Two.Anchor.AppendCurveProperties(this);
      }

      this.controls.left.bind(Two.Events.change, this._broadcast);
      this.controls.right.bind(Two.Events.change, this._broadcast);

      return this;

    },

    /**
     * @name Two.Anchor#ignore
     * @function
     * @description Convenience method used mainly by {@link Two.Path#vertices} to ignore changes from a specific anchor's control points.
     */
    ignore: function() {

      this.controls.left.unbind(Two.Events.change, this._broadcast);
      this.controls.right.unbind(Two.Events.change, this._broadcast);

      return this;

    },

    /**
     * @name Two.Anchor#copy
     * @function
     * @param {Two.Anchor} v - The anchor to apply values to.
     * @description Copy the properties of one {@link Two.Anchor} onto another.
     */
    copy: function(v) {

      this.x = v.x;
      this.y = v.y;

      if (_.isString(v.command)) {
        this.command = v.command;
      }
      if (_.isObject(v.controls)) {
        if (!_.isObject(this.controls)) {
          Two.Anchor.AppendCurveProperties(this);
        }
        // TODO: Do we need to listen here?
        this.controls.left.copy(v.controls.left);
        this.controls.right.copy(v.controls.right);
      }
      if (_.isBoolean(v.relative)) {
        this.relative = v.relative;
      }

      // TODO: Hack for `Two.Commands.arc`
      if (this.command === Two.Commands.arc) {
        this.rx = v.rx;
        this.ry = v.ry;
        this.xAxisRotation = v.xAxisRotation;
        this.largeArcFlag = v.largeArcFlag;
        this.sweepFlag = v.sweepFlag;
      }

      return this;

    },

    /**
     * @name Two.Anchor#clone
     * @function
     * @returns {Two.Anchor}
     * @description Create a new {@link Two.Anchor}, set all its values to the current instance and return it for use.
     */
    clone: function() {

      var controls = this.controls;

      var clone = new Two.Anchor(
        this.x,
        this.y,
        controls && controls.left.x,
        controls && controls.left.y,
        controls && controls.right.x,
        controls && controls.right.y,
        this.command
      );
      clone.relative = this._relative;
      return clone;

    },

    /**
     * @name Two.Anchor#toObject
     * @function
     * @returns {Object} - An object with properties filled out to mirror {@link Two.Anchor}.
     * @description Create a JSON compatible plain object of the current instance. Intended for use with storing values in a database.
     */
    toObject: function() {
      var o = {
        x: this.x,
        y: this.y
      };
      if (this._command) {
        o.command = this._command;
      }
      if (this._relative) {
        o.relative = this._relative;
      }
      if (this.controls) {
        o.controls = {
          left: this.controls.left.toObject(),
          right: this.controls.right.toObject()
        };
      }
      return o;
    },

    /**
     * @name Two.Anchor#toString
     * @function
     * @returns {String} - A String with comma-separated values reflecting the various values on the current instance.
     * @description Create a string form of the current instance. Intended for use with storing values in a database. This is lighter to store than the JSON compatible {@link Two.Anchor#toObject}.
     */
    toString: function() {
      if (!this.controls) {
        return [this._x, this._y].join(', ');
      }
      return [this._x, this._y, this.controls.left.x, this.controls.left.y,
        this.controls.right.x, this.controls.right.y, this._command,
        this._relative ? 1 : 0].join(', ');
    }

  };

  Two.Anchor.MakeObservable(Two.Anchor.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  // Constants

  var cos = Math.cos, sin = Math.sin, tan = Math.tan;
  var _ = Two.Utils;
  var array = [];

  /**
   * @name Two.Matrix
   * @class
   * @param {Number} [a=1] - The value for element at the first column and first row.
   * @param {Number} [b=0] - The value for element at the second column and first row.
   * @param {Number} [c=0] - The value for element at the third column and first row.
   * @param {Number} [d=0] - The value for element at the first column and second row.
   * @param {Number} [e=1] - The value for element at the second column and second row.
   * @param {Number} [f=0] - The value for element at the third column and second row.
   * @param {Number} [g=0] - The value for element at the first column and third row.
   * @param {Number} [h=0] - The value for element at the second column and third row.
   * @param {Number} [i=1] - The value for element at the third column and third row.
   * @description A class to store 3 x 3 transformation matrix information. In addition to storing data `Two.Matrix` has suped up methods for commonplace mathematical operations.
   * @nota-bene Order is based on how to construct transformation strings for the browser.
   */
  var Matrix = Two.Matrix = function(a, b, c, d, e, f) {

    /**
     * @name Two.Matrix#elements
     * @property {Number[]} - The underlying data stored as an array.
     */
    this.elements = new Two.Array(9);

    var elements = a;
    if (!_.isArray(elements)) {
      elements = _.toArray(arguments);
    }

    // initialize the elements with default values.
    this.identity();

    if (elements.length > 0) {
      this.set(elements);
    }

  };

  _.extend(Matrix, {

    /**
     * @name Two.Matrix.Identity
     * @property {Number[]} - A stored reference to the default value of a 3 x 3 matrix.
     */
    Identity: [
      1, 0, 0,
      0, 1, 0,
      0, 0, 1
    ],

    /**
     * @name Two.Matrix.Multiply
     * @function
     * @param {Two.Matrix} A
     * @param {Two.Matrix} B
     * @param {Two.Matrix} [C] - An optional matrix to apply the multiplication to.
     * @returns {Two.Matrix} - If an optional `C` matrix isn't passed then a new one is created and returned.
     * @description Multiply two matrices together and return the result.
     */
    Multiply: function(A, B, C) {

      if (B.length <= 3) { // Multiply Vector

        var x, y, z, e = A;

        var a = B[0] || 0,
            b = B[1] || 0,
            c = B[2] || 0;

        // Go down rows first
        // a, d, g, b, e, h, c, f, i

        x = e[0] * a + e[1] * b + e[2] * c;
        y = e[3] * a + e[4] * b + e[5] * c;
        z = e[6] * a + e[7] * b + e[8] * c;

        return { x: x, y: y, z: z };

      }

      var A0 = A[0], A1 = A[1], A2 = A[2];
      var A3 = A[3], A4 = A[4], A5 = A[5];
      var A6 = A[6], A7 = A[7], A8 = A[8];

      var B0 = B[0], B1 = B[1], B2 = B[2];
      var B3 = B[3], B4 = B[4], B5 = B[5];
      var B6 = B[6], B7 = B[7], B8 = B[8];

      C = C || new Two.Array(9);

      C[0] = A0 * B0 + A1 * B3 + A2 * B6;
      C[1] = A0 * B1 + A1 * B4 + A2 * B7;
      C[2] = A0 * B2 + A1 * B5 + A2 * B8;
      C[3] = A3 * B0 + A4 * B3 + A5 * B6;
      C[4] = A3 * B1 + A4 * B4 + A5 * B7;
      C[5] = A3 * B2 + A4 * B5 + A5 * B8;
      C[6] = A6 * B0 + A7 * B3 + A8 * B6;
      C[7] = A6 * B1 + A7 * B4 + A8 * B7;
      C[8] = A6 * B2 + A7 * B5 + A8 * B8;

      return C;

    }

  });

  _.extend(Matrix.prototype, Two.Utils.Events, {

    constructor: Matrix,

    /**
     * @name Two.Matrix#manual
     * @property {Boolean} - Determines whether Two.js automatically calculates the values for the matrix or if the developer intends to manage the matrix.
     * @nota-bene - Setting to `true` nullifies {@link Two.Shape#translation}, {@link Two.Shape#rotation}, and {@link Two.Shape#scale}.
     */
    manual: false,

    /**
     * @name Two.Matrix#set
     * @function
     * @param {Number} a - The value for element at the first column and first row.
     * @param {Number} b - The value for element at the second column and first row.
     * @param {Number} c - The value for element at the third column and first row.
     * @param {Number} d - The value for element at the first column and second row.
     * @param {Number} e - The value for element at the second column and second row.
     * @param {Number} f - The value for element at the third column and second row.
     * @param {Number} g - The value for element at the first column and third row.
     * @param {Number} h - The value for element at the second column and third row.
     * @param {Number} i - The value for element at the third column and third row.
     * @description Set an array of values onto the matrix. Order described in {@link Two.Matrix}.
     */

     /**
      * @name Two.Matrix#set
      * @function
      * @param {Number[]} a - The array of elements to apply.
      * @description Set an array of values onto the matrix. Order described in {@link Two.Matrix}.
      */
    set: function(a, b, c, d, e, f, g, h, i) {

      var elements;

      if (_.isUndefined(b)) {
        elements = a;
        a = elements[0];
        b = elements[1];
        c = elements[2];
        d = elements[3];
        e = elements[4];
        f = elements[5];
        g = elements[6];
        h = elements[7];
        i = elements[8];
      }

      this.elements[0] = a;
      this.elements[1] = b;
      this.elements[2] = c;
      this.elements[3] = d;
      this.elements[4] = e;
      this.elements[5] = f;
      this.elements[6] = g;
      this.elements[7] = h;
      this.elements[8] = i;

      return this.trigger(Two.Events.change);

    },

    /**
     * @name Two.Matrix#copy
     * @function
     * @description Copy the matrix of one to the current instance.
     */
    copy: function(m) {

      this.elements[0] = m.elements[0];
      this.elements[1] = m.elements[1];
      this.elements[2] = m.elements[2];
      this.elements[3] = m.elements[3];
      this.elements[4] = m.elements[4];
      this.elements[5] = m.elements[5];
      this.elements[6] = m.elements[6];
      this.elements[7] = m.elements[7];
      this.elements[8] = m.elements[8];

      this.manual = m.manual;

      return this.trigger(Two.Events.change);

    },

    /**
     * @name Two.Matrix#identity
     * @function
     * @description Turn matrix to the identity, like resetting.
     */
    identity: function() {

      this.elements[0] = Matrix.Identity[0];
      this.elements[1] = Matrix.Identity[1];
      this.elements[2] = Matrix.Identity[2];
      this.elements[3] = Matrix.Identity[3];
      this.elements[4] = Matrix.Identity[4];
      this.elements[5] = Matrix.Identity[5];
      this.elements[6] = Matrix.Identity[6];
      this.elements[7] = Matrix.Identity[7];
      this.elements[8] = Matrix.Identity[8];

      return this.trigger(Two.Events.change);

    },

    /**
     * @name Two.Matrix.multiply
     * @function
     * @param {Number} a - The scalar to be multiplied.
     * @description Multiply all components of the matrix against a single scalar value.
     */

    /**
     * @name Two.Matrix.multiply
     * @function
     * @param {Number} a - The x component to be multiplied.
     * @param {Number} b - The y component to be multiplied.
     * @param {Number} c - The z component to be multiplied.
     * @description Multiply all components of a matrix against a 3 component vector.
     */

    /**
     * @name Two.Matrix.multiply
     * @function
     * @param {Number} a - The value at the first column and first row of the matrix to be multiplied.
     * @param {Number} b - The value at the second column and first row of the matrix to be multiplied.
     * @param {Number} c - The value at the third column and first row of the matrix to be multiplied.
     * @param {Number} d - The value at the first column and second row of the matrix to be multiplied.
     * @param {Number} e - The value at the second column and second row of the matrix to be multiplied.
     * @param {Number} f - The value at the third column and second row of the matrix to be multiplied.
     * @param {Number} g - The value at the first column and third row of the matrix to be multiplied.
     * @param {Number} h - The value at the second column and third row of the matrix to be multiplied.
     * @param {Number} i - The value at the third column and third row of the matrix to be multiplied.
     * @description Multiply all components of a matrix against another matrix.
     */
    multiply: function(a, b, c, d, e, f, g, h, i) {

      // Multiply scalar

      if (_.isUndefined(b)) {

        this.elements[0] *= a;
        this.elements[1] *= a;
        this.elements[2] *= a;
        this.elements[3] *= a;
        this.elements[4] *= a;
        this.elements[5] *= a;
        this.elements[6] *= a;
        this.elements[7] *= a;
        this.elements[8] *= a;

        return this.trigger(Two.Events.change);

      }

      if (_.isUndefined(d)) { // Multiply Vector

        var x, y, z;
        a = a || 0;
        b = b || 0;
        c = c || 0;
        e = this.elements;

        // Go down rows first
        // a, d, g, b, e, h, c, f, i

        x = e[0] * a + e[1] * b + e[2] * c;
        y = e[3] * a + e[4] * b + e[5] * c;
        z = e[6] * a + e[7] * b + e[8] * c;

        return { x: x, y: y, z: z };

      }

      // Multiple matrix

      var A = this.elements;
      var B = [a, b, c, d, e, f, g, h, i];

      var A0 = A[0], A1 = A[1], A2 = A[2];
      var A3 = A[3], A4 = A[4], A5 = A[5];
      var A6 = A[6], A7 = A[7], A8 = A[8];

      var B0 = B[0], B1 = B[1], B2 = B[2];
      var B3 = B[3], B4 = B[4], B5 = B[5];
      var B6 = B[6], B7 = B[7], B8 = B[8];

      this.elements[0] = A0 * B0 + A1 * B3 + A2 * B6;
      this.elements[1] = A0 * B1 + A1 * B4 + A2 * B7;
      this.elements[2] = A0 * B2 + A1 * B5 + A2 * B8;

      this.elements[3] = A3 * B0 + A4 * B3 + A5 * B6;
      this.elements[4] = A3 * B1 + A4 * B4 + A5 * B7;
      this.elements[5] = A3 * B2 + A4 * B5 + A5 * B8;

      this.elements[6] = A6 * B0 + A7 * B3 + A8 * B6;
      this.elements[7] = A6 * B1 + A7 * B4 + A8 * B7;
      this.elements[8] = A6 * B2 + A7 * B5 + A8 * B8;

      return this.trigger(Two.Events.change);

    },

    /**
     * @name Two.Matrix#inverse
     * @function
     * @param {Two.Matrix} [out] - The optional matrix to apply the inversion to.
     * @description Return an inverted version of the matrix. If no optional one is passed a new matrix is created and returned.
     */
    inverse: function(out) {

      var a = this.elements;
      out = out || new Two.Matrix();

      var a00 = a[0], a01 = a[1], a02 = a[2];
      var a10 = a[3], a11 = a[4], a12 = a[5];
      var a20 = a[6], a21 = a[7], a22 = a[8];

      var b01 = a22 * a11 - a12 * a21;
      var b11 = -a22 * a10 + a12 * a20;
      var b21 = a21 * a10 - a11 * a20;

      // Calculate the determinant
      var det = a00 * b01 + a01 * b11 + a02 * b21;

      if (!det) {
        return null;
      }

      det = 1.0 / det;

      out.elements[0] = b01 * det;
      out.elements[1] = (-a22 * a01 + a02 * a21) * det;
      out.elements[2] = (a12 * a01 - a02 * a11) * det;
      out.elements[3] = b11 * det;
      out.elements[4] = (a22 * a00 - a02 * a20) * det;
      out.elements[5] = (-a12 * a00 + a02 * a10) * det;
      out.elements[6] = b21 * det;
      out.elements[7] = (-a21 * a00 + a01 * a20) * det;
      out.elements[8] = (a11 * a00 - a01 * a10) * det;

      return out;

    },

    /**
     * @name Two.Matrix#scale
     * @function
     * @param {Number} scale - The one dimensional scale to apply to the matrix.
     * @description Uniformly scale the transformation matrix.
     */

    /**
     * @name Two.Matrix#scale
     * @function
     * @param {Number} sx - The horizontal scale factor.
     * @param {Number} sy - The vertical scale factor
     * @description Scale the transformation matrix in two dimensions.
     */
    scale: function(sx, sy) {

      var l = arguments.length;
      if (l <= 1) {
        sy = sx;
      }

      return this.multiply(sx, 0, 0, 0, sy, 0, 0, 0, 1);

    },

    /**
     * @name Two.Matrix#rotate
     * @function
     * @param {Radians} radians - The amount to rotate in radians.
     * @description Rotate the matrix.
     */
    rotate: function(radians) {

      var c = cos(radians);
      var s = sin(radians);

      return this.multiply(c, -s, 0, s, c, 0, 0, 0, 1);

    },

    /**
     * @name Two.Matrix#translate
     * @function
     * @param {Number} x - The horizontal translation value to apply.
     * @param {Number} y - The vertical translation value to apply.
     * @description Translate the matrix.
     */
    translate: function(x, y) {

      return this.multiply(1, 0, x, 0, 1, y, 0, 0, 1);

    },

    /**
     * @name Two.Matrix#skewX
     * @function
     * @param {Radians} radians - The amount to skew in radians.
     * @description Skew the matrix by an angle in the x axis direction.
     */
    skewX: function(radians) {

      var a = tan(radians);

      return this.multiply(1, a, 0, 0, 1, 0, 0, 0, 1);

    },

    /**
     * @name Two.Matrix#skewY
     * @function
     * @param {Radians} radians - The amount to skew in radians.
     * @description Skew the matrix by an angle in the y axis direction.
     */
    skewY: function(radians) {

      var a = tan(radians);

      return this.multiply(1, 0, 0, a, 1, 0, 0, 0, 1);

    },

    /**
     * @name Two.Matrix#toString
     * @function
     * @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 for 2D transformations.
     * @returns {String} - The transformation matrix as a 6 component string separated by spaces.
     * @description Create a transform string. Used for the Two.js rendering APIs.
     */
    toString: function(fullMatrix) {

      array.length = 0;
      this.toTransformArray(fullMatrix, array);

      return array.map(Two.Utils.toFixed).join(' ');

    },

    /**
     * @name Two.Matrix#toTransformArray
     * @function
     * @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 in the format for 2D transformations.
     * @param {Number[]} [output] - An array empty or otherwise to apply the values to.
     * @description Create a transform array. Used for the Two.js rendering APIs.
     */
    toTransformArray: function(fullMatrix, output) {

     var elements = this.elements;
     var hasOutput = !!output;

     var a = elements[0];
     var b = elements[1];
     var c = elements[2];
     var d = elements[3];
     var e = elements[4];
     var f = elements[5];

      if (fullMatrix) {

        var g = elements[6];
        var h = elements[7];
        var i = elements[8];

        if (hasOutput) {
          output[0] = a;
          output[1] = d;
          output[2] = g;
          output[3] = b;
          output[4] = e;
          output[5] = h;
          output[6] = c;
          output[7] = f;
          output[8] = i;
          return;
        }

        return [
          a, d, g, b, e, h, c, f, i
        ];
      }

      if (hasOutput) {
        output[0] = a;
        output[1] = d;
        output[2] = b;
        output[3] = e;
        output[4] = c;
        output[5] = f;
        return;
      }

      return [
        a, d, b, e, c, f  // Specific format see LN:19
      ];

    },

    /**
     * @name Two.Matrix#toArray
     * @function
     * @param {Boolean} [fullMatrix=false] - Return the full 9 elements of the matrix or just 6 for 2D transformations.
     * @param {Number[]} [output] - An array empty or otherwise to apply the values to.
     * @description Create a transform array. Used for the Two.js rendering APIs.
     */
    toArray: function(fullMatrix, output) {

     var elements = this.elements;
     var hasOutput = !!output;

     var a = elements[0];
     var b = elements[1];
     var c = elements[2];
     var d = elements[3];
     var e = elements[4];
     var f = elements[5];

      if (fullMatrix) {

        var g = elements[6];
        var h = elements[7];
        var i = elements[8];

        if (hasOutput) {
          output[0] = a;
          output[1] = b;
          output[2] = c;
          output[3] = d;
          output[4] = e;
          output[5] = f;
          output[6] = g;
          output[7] = h;
          output[8] = i;
          return;
        }

        return [
          a, b, c, d, e, f, g, h, i
        ];
      }

      if (hasOutput) {
        output[0] = a;
        output[1] = b;
        output[2] = c;
        output[3] = d;
        output[4] = e;
        output[5] = f;
        return;
      }

      return [
        a, b, c, d, e, f
      ];

    },

    /**
     * @name Two.Matrix#toObject
     * @function
     * @description Create a JSON compatible object that represents information of the matrix.
     */
    toObject: function() {
      return {
        elements: this.toArray(true),
        manual: !!this.manual
      };
    },

    /**
     * @name Two.Matrix#clone
     * @function
     * @description Clone the current matrix.
     */
    clone: function() {

      return new Two.Matrix().copy(this);

    }

  });

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  // Localize variables
  var mod = Two.Utils.mod, toFixed = Two.Utils.toFixed;
  var _ = Two.Utils;

  var svg = {

    version: 1.1,

    ns: 'http://www.w3.org/2000/svg',
    xlink: 'http://www.w3.org/1999/xlink',

    alignments: {
      left: 'start',
      center: 'middle',
      right: 'end'
    },

    /**
     * Create an svg namespaced element.
     */
    createElement: function(name, attrs) {
      var tag = name;
      var elem = document.createElementNS(svg.ns, tag);
      if (tag === 'svg') {
        attrs = _.defaults(attrs || {}, {
          version: svg.version
        });
      }
      if (!_.isEmpty(attrs)) {
        svg.setAttributes(elem, attrs);
      }
      return elem;
    },

    /**
     * Add attributes from an svg element.
     */
    setAttributes: function(elem, attrs) {
      var keys = Object.keys(attrs);
      for (var i = 0; i < keys.length; i++) {
        if (/href/.test(keys[i])) {
          elem.setAttributeNS(svg.xlink, keys[i], attrs[keys[i]]);
        } else {
          elem.setAttribute(keys[i], attrs[keys[i]]);
        }
      }
      return this;
    },

    /**
     * Remove attributes from an svg element.
     */
    removeAttributes: function(elem, attrs) {
      for (var key in attrs) {
        elem.removeAttribute(key);
      }
      return this;
    },

    /**
     * Turn a set of vertices into a string for the d property of a path
     * element. It is imperative that the string collation is as fast as
     * possible, because this call will be happening multiple times a
     * second.
     */
    toString: function(points, closed) {

      var l = points.length,
        last = l - 1,
        d, // The elusive last Two.Commands.move point
        string = '';

      for (var i = 0; i < l; i++) {
        var b = points[i];
        var command;
        var prev = closed ? mod(i - 1, l) : Math.max(i - 1, 0);
        var next = closed ? mod(i + 1, l) : Math.min(i + 1, last);

        var a = points[prev];
        var c = points[next];

        var vx, vy, ux, uy, ar, bl, br, cl;
        var rx, ry, xAxisRotation, largeArcFlag, sweepFlag;

        // Access x and y directly,
        // bypassing the getter
        var x = toFixed(b.x);
        var y = toFixed(b.y);

        switch (b.command) {

          case Two.Commands.close:
            command = Two.Commands.close;
            break;

          case Two.Commands.arc:

            rx = b.rx;
            ry = b.ry;
            xAxisRotation = b.xAxisRotation;
            largeArcFlag = b.largeArcFlag;
            sweepFlag = b.sweepFlag;

            command = Two.Commands.arc + ' ' + rx + ' ' + ry + ' '
              + xAxisRotation + ' ' + largeArcFlag + ' ' + sweepFlag + ' '
              + x + ' ' + y;
            break;

          case Two.Commands.curve:

            ar = (a.controls && a.controls.right) || Two.Vector.zero;
            bl = (b.controls && b.controls.left) || Two.Vector.zero;

            if (a.relative) {
              vx = toFixed((ar.x + a.x));
              vy = toFixed((ar.y + a.y));
            } else {
              vx = toFixed(ar.x);
              vy = toFixed(ar.y);
            }

            if (b.relative) {
              ux = toFixed((bl.x + b.x));
              uy = toFixed((bl.y + b.y));
            } else {
              ux = toFixed(bl.x);
              uy = toFixed(bl.y);
            }

            command = ((i === 0) ? Two.Commands.move : Two.Commands.curve) +
              ' ' + vx + ' ' + vy + ' ' + ux + ' ' + uy + ' ' + x + ' ' + y;
            break;

          case Two.Commands.move:
            d = b;
            command = Two.Commands.move + ' ' + x + ' ' + y;
            break;

          default:
            command = b.command + ' ' + x + ' ' + y;

        }

        // Add a final point and close it off

        if (i >= last && closed) {

          if (b.command === Two.Commands.curve) {

            // Make sure we close to the most previous Two.Commands.move
            c = d;

            br = (b.controls && b.controls.right) || b;
            cl = (c.controls && c.controls.left) || c;

            if (b.relative) {
              vx = toFixed((br.x + b.x));
              vy = toFixed((br.y + b.y));
            } else {
              vx = toFixed(br.x);
              vy = toFixed(br.y);
            }

            if (c.relative) {
              ux = toFixed((cl.x + c.x));
              uy = toFixed((cl.y + c.y));
            } else {
              ux = toFixed(cl.x);
              uy = toFixed(cl.y);
            }

            x = toFixed(c.x);
            y = toFixed(c.y);

            command +=
              ' C ' + vx + ' ' + vy + ' ' + ux + ' ' + uy + ' ' + x + ' ' + y;

          }

          if (b.command !== Two.Commands.close) {
            command += ' Z';
          }

        }

        string += command + ' ';

      }

      return string;

    },

    getClip: function(shape) {

      var clip = shape._renderer.clip;

      if (!clip) {

        var root = shape;

        while (root.parent) {
          root = root.parent;
        }

        clip = shape._renderer.clip = svg.createElement('clipPath');
        root.defs.appendChild(clip);

      }

      return clip;

    },

    group: {

      // TODO: Can speed up.
      // TODO: How does this effect a f
      appendChild: function(object) {

        var elem = object._renderer.elem;

        if (!elem) {
          return;
        }

        var tag = elem.nodeName;

        if (!tag || /(radial|linear)gradient/i.test(tag) || object._clip) {
          return;
        }

        this.elem.appendChild(elem);

      },

      removeChild: function(object) {

        var elem = object._renderer.elem;

        if (!elem || elem.parentNode != this.elem) {
          return;
        }

        var tag = elem.nodeName;

        if (!tag) {
          return;
        }

        // Defer subtractions while clipping.
        if (object._clip) {
          return;
        }

        this.elem.removeChild(elem);

      },

      orderChild: function(object) {
        this.elem.appendChild(object._renderer.elem);
      },

      renderChild: function(child) {
        svg[child._renderer.type].render.call(child, this);
      },

      render: function(domElement) {

        this._update();

        // Shortcut for hidden objects.
        // Doesn't reset the flags, so changes are stored and
        // applied once the object is visible again
        if (this._opacity === 0 && !this._flagOpacity) {
          return this;
        }

        if (!this._renderer.elem) {
          this._renderer.elem = svg.createElement('g', {
            id: this.id
          });
          domElement.appendChild(this._renderer.elem);
        }

        // _Update styles for the <g>
        var flagMatrix = this._matrix.manual || this._flagMatrix;
        var context = {
          domElement: domElement,
          elem: this._renderer.elem
        };

        if (flagMatrix) {
          this._renderer.elem.setAttribute('transform', 'matrix(' + this._matrix.toString() + ')');
        }

        for (var i = 0; i < this.children.length; i++) {
          var child = this.children[i];
          svg[child._renderer.type].render.call(child, domElement);
        }

        if (this._flagOpacity) {
          this._renderer.elem.setAttribute('opacity', this._opacity);
        }

        if (this._flagClassName) {
          this._renderer.elem.setAttribute('class', this.classList.join(' '));
        }

        if (this._flagAdditions) {
          this.additions.forEach(svg.group.appendChild, context);
        }

        if (this._flagSubtractions) {
          this.subtractions.forEach(svg.group.removeChild, context);
        }

        if (this._flagOrder) {
          this.children.forEach(svg.group.orderChild, context);
        }

        /**
         * Commented two-way functionality of clips / masks with groups and
         * polygons. Uncomment when this bug is fixed:
         * https://code.google.com/p/chromium/issues/detail?id=370951
         */

        // if (this._flagClip) {

        //   clip = svg.getClip(this);
        //   elem = this._renderer.elem;

        //   if (this._clip) {
        //     elem.removeAttribute('id');
        //     clip.setAttribute('id', this.id);
        //     clip.appendChild(elem);
        //   } else {
        //     clip.removeAttribute('id');
        //     elem.setAttribute('id', this.id);
        //     this.parent._renderer.elem.appendChild(elem); // TODO: should be insertBefore
        //   }

        // }

        if (this._flagMask) {
          if (this._mask) {
            this._renderer.elem.setAttribute('clip-path', 'url(#' + this._mask.id + ')');
          } else {
            this._renderer.elem.removeAttribute('clip-path');
          }
        }

        return this.flagReset();

      }

    },

    path: {

      render: function(domElement) {

        this._update();

        // Shortcut for hidden objects.
        // Doesn't reset the flags, so changes are stored and
        // applied once the object is visible again
        if (this._opacity === 0 && !this._flagOpacity) {
          return this;
        }

        // Collect any attribute that needs to be changed here
        var changed = {};

        var flagMatrix = this._matrix.manual || this._flagMatrix;

        if (flagMatrix) {
          changed.transform = 'matrix(' + this._matrix.toString() + ')';
        }

        if (this._flagVertices) {
          var vertices = svg.toString(this._renderer.vertices, this._closed);
          changed.d = vertices;
        }

        if (this._fill && this._fill._renderer) {
          this._fill._update();
          svg[this._fill._renderer.type].render.call(this._fill, domElement, true);
        }

        if (this._flagFill) {
          changed.fill = this._fill && this._fill.id
            ? 'url(#' + this._fill.id + ')' : this._fill;
        }

        if (this._stroke && this._stroke._renderer) {
          this._stroke._update();
          svg[this._stroke._renderer.type].render.call(this._stroke, domElement, true);
        }

        if (this._flagStroke) {
          changed.stroke = this._stroke && this._stroke.id
            ? 'url(#' + this._stroke.id + ')' : this._stroke;
        }

        if (this._flagLinewidth) {
          changed['stroke-width'] = this._linewidth;
        }

        if (this._flagOpacity) {
          changed['stroke-opacity'] = this._opacity;
          changed['fill-opacity'] = this._opacity;
        }

        if (this._flagClassName) {
          changed['class'] = this.classList.join(' ');
        }

        if (this._flagVisible) {
          changed.visibility = this._visible ? 'visible' : 'hidden';
        }

        if (this._flagCap) {
          changed['stroke-linecap'] = this._cap;
        }

        if (this._flagJoin) {
          changed['stroke-linejoin'] = this._join;
        }

        if (this._flagMiter) {
          changed['stroke-miterlimit'] = this._miter;
        }

        if (this.dashes && this.dashes.length > 0) {
          changed['stroke-dasharray'] = this.dashes.join(' ');
          changed['stroke-dashoffset'] = this.dashes.offset || 0;
        }

        // If there is no attached DOM element yet,
        // create it with all necessary attributes.
        if (!this._renderer.elem) {

          changed.id = this.id;
          this._renderer.elem = svg.createElement('path', changed);
          domElement.appendChild(this._renderer.elem);

        // Otherwise apply all pending attributes
        } else {
          svg.setAttributes(this._renderer.elem, changed);
        }

        if (this._flagClip) {

          var clip = svg.getClip(this);
          var elem = this._renderer.elem;

          if (this._clip) {
            elem.removeAttribute('id');
            clip.setAttribute('id', this.id);
            clip.appendChild(elem);
          } else {
            clip.removeAttribute('id');
            elem.setAttribute('id', this.id);
            this.parent._renderer.elem.appendChild(elem); // TODO: should be insertBefore
          }

        }

        /**
         * Commented two-way functionality of clips / masks with groups and
         * polygons. Uncomment when this bug is fixed:
         * https://code.google.com/p/chromium/issues/detail?id=370951
         */

        // if (this._flagMask) {
        //   if (this._mask) {
        //     elem.setAttribute('clip-path', 'url(#' + this._mask.id + ')');
        //   } else {
        //     elem.removeAttribute('clip-path');
        //   }
        // }

        return this.flagReset();

      }

    },

    text: {

      render: function(domElement) {

        this._update();

        var changed = {};

        var flagMatrix = this._matrix.manual || this._flagMatrix;

        if (flagMatrix) {
          changed.transform = 'matrix(' + this._matrix.toString() + ')';
        }

        if (this._flagFamily) {
          changed['font-family'] = this._family;
        }
        if (this._flagSize) {
          changed['font-size'] = this._size;
        }
        if (this._flagLeading) {
          changed['line-height'] = this._leading;
        }
        if (this._flagAlignment) {
          changed['text-anchor'] = svg.alignments[this._alignment] || this._alignment;
        }
        if (this._flagBaseline) {
          changed['alignment-baseline'] = changed['dominant-baseline'] = this._baseline;
        }
        if (this._flagStyle) {
          changed['font-style'] = this._style;
        }
        if (this._flagWeight) {
          changed['font-weight'] = this._weight;
        }
        if (this._flagDecoration) {
          changed['text-decoration'] = this._decoration;
        }
        if (this._fill && this._fill._renderer) {
          this._fill._update();
          svg[this._fill._renderer.type].render.call(this._fill, domElement, true);
        }
        if (this._flagFill) {
          changed.fill = this._fill && this._fill.id
            ? 'url(#' + this._fill.id + ')' : this._fill;
        }
        if (this._stroke && this._stroke._renderer) {
          this._stroke._update();
          svg[this._stroke._renderer.type].render.call(this._stroke, domElement, true);
        }
        if (this._flagStroke) {
          changed.stroke = this._stroke && this._stroke.id
            ? 'url(#' + this._stroke.id + ')' : this._stroke;
        }
        if (this._flagLinewidth) {
          changed['stroke-width'] = this._linewidth;
        }
        if (this._flagOpacity) {
          changed.opacity = this._opacity;
        }
        if (this._flagClassName) {
          changed['class'] = this.classList.join(' ');
        }
        if (this._flagVisible) {
          changed.visibility = this._visible ? 'visible' : 'hidden';
        }
        if (this.dashes && this.dashes.length > 0) {
          changed['stroke-dasharray'] = this.dashes.join(' ');
          changed['stroke-dashoffset'] = this.dashes.offset || 0;
        }

        if (!this._renderer.elem) {

          changed.id = this.id;

          this._renderer.elem = svg.createElement('text', changed);
          domElement.defs.appendChild(this._renderer.elem);

        } else {

          svg.setAttributes(this._renderer.elem, changed);

        }

        if (this._flagClip) {

          var clip = svg.getClip(this);
          var elem = this._renderer.elem;

          if (this._clip) {
            elem.removeAttribute('id');
            clip.setAttribute('id', this.id);
            clip.appendChild(elem);
          } else {
            clip.removeAttribute('id');
            elem.setAttribute('id', this.id);
            this.parent._renderer.elem.appendChild(elem); // TODO: should be insertBefore
          }

        }

        if (this._flagValue) {
          this._renderer.elem.textContent = this._value;
        }

        return this.flagReset();

      }

    },

    'linear-gradient': {

      render: function(domElement, silent) {

        if (!silent) {
          this._update();
        }

        var changed = {};

        if (this._flagEndPoints) {
          changed.x1 = this.left._x;
          changed.y1 = this.left._y;
          changed.x2 = this.right._x;
          changed.y2 = this.right._y;
        }

        if (this._flagSpread) {
          changed.spreadMethod = this._spread;
        }

        // If there is no attached DOM element yet,
        // create it with all necessary attributes.
        if (!this._renderer.elem) {

          changed.id = this.id;
          changed.gradientUnits = 'userSpaceOnUse';
          this._renderer.elem = svg.createElement('linearGradient', changed);
          domElement.defs.appendChild(this._renderer.elem);

        // Otherwise apply all pending attributes
        } else {

          svg.setAttributes(this._renderer.elem, changed);

        }

        if (this._flagStops) {

          var lengthChanged = this._renderer.elem.childNodes.length
            !== this.stops.length;

          if (lengthChanged) {
            while (this._renderer.elem.lastChild) {
              this._renderer.elem.removeChild(this._renderer.elem.lastChild);
            }
          }

          for (var i = 0; i < this.stops.length; i++) {

            var stop = this.stops[i];
            var attrs = {};

            if (stop._flagOffset) {
              attrs.offset = 100 * stop._offset + '%';
            }
            if (stop._flagColor) {
              attrs['stop-color'] = stop._color;
            }
            if (stop._flagOpacity) {
              attrs['stop-opacity'] = stop._opacity;
            }

            if (!stop._renderer.elem) {
              stop._renderer.elem = svg.createElement('stop', attrs);
            } else {
              svg.setAttributes(stop._renderer.elem, attrs);
            }

            if (lengthChanged) {
              this._renderer.elem.appendChild(stop._renderer.elem);
            }
            stop.flagReset();

          }

        }

        return this.flagReset();

      }

    },

    'radial-gradient': {

      render: function(domElement, silent) {

        if (!silent) {
          this._update();
        }

        var changed = {};

        if (this._flagCenter) {
          changed.cx = this.center._x;
          changed.cy = this.center._y;
        }
        if (this._flagFocal) {
          changed.fx = this.focal._x;
          changed.fy = this.focal._y;
        }

        if (this._flagRadius) {
          changed.r = this._radius;
        }

        if (this._flagSpread) {
          changed.spreadMethod = this._spread;
        }

        // If there is no attached DOM element yet,
        // create it with all necessary attributes.
        if (!this._renderer.elem) {

          changed.id = this.id;
          changed.gradientUnits = 'userSpaceOnUse';
          this._renderer.elem = svg.createElement('radialGradient', changed);
          domElement.defs.appendChild(this._renderer.elem);

        // Otherwise apply all pending attributes
        } else {

          svg.setAttributes(this._renderer.elem, changed);

        }

        if (this._flagStops) {

          var lengthChanged = this._renderer.elem.childNodes.length
            !== this.stops.length;

          if (lengthChanged) {
            while (this._renderer.elem.lastChild) {
              this._renderer.elem.removeChild(this._renderer.elem.lastChild);
            }
          }

          for (var i = 0; i < this.stops.length; i++) {

            var stop = this.stops[i];
            var attrs = {};

            if (stop._flagOffset) {
              attrs.offset = 100 * stop._offset + '%';
            }
            if (stop._flagColor) {
              attrs['stop-color'] = stop._color;
            }
            if (stop._flagOpacity) {
              attrs['stop-opacity'] = stop._opacity;
            }

            if (!stop._renderer.elem) {
              stop._renderer.elem = svg.createElement('stop', attrs);
            } else {
              svg.setAttributes(stop._renderer.elem, attrs);
            }

            if (lengthChanged) {
              this._renderer.elem.appendChild(stop._renderer.elem);
            }
            stop.flagReset();

          }

        }

        return this.flagReset();

      }

    },

    texture: {

      render: function(domElement, silent) {

        if (!silent) {
          this._update();
        }

        var changed = {};
        var styles = { x: 0, y: 0 };
        var image = this.image;

        if (this._flagLoaded && this.loaded) {

          switch (image.nodeName.toLowerCase()) {

            case 'canvas':
              styles.href = styles['xlink:href'] = image.toDataURL('image/png');
              break;
            case 'img':
            case 'image':
              styles.href = styles['xlink:href'] = this.src;
              break;

          }

        }

        if (this._flagOffset || this._flagLoaded || this._flagScale) {

          changed.x = this._offset.x;
          changed.y = this._offset.y;

          if (image) {

            changed.x -= image.width / 2;
            changed.y -= image.height / 2;

            if (this._scale instanceof Two.Vector) {
              changed.x *= this._scale.x;
              changed.y *= this._scale.y;
            } else {
              changed.x *= this._scale;
              changed.y *= this._scale;
            }
          }

          if (changed.x > 0) {
            changed.x *= - 1;
          }
          if (changed.y > 0) {
            changed.y *= - 1;
          }

        }

        if (this._flagScale || this._flagLoaded || this._flagRepeat) {

          changed.width = 0;
          changed.height = 0;

          if (image) {

            styles.width = changed.width = image.width;
            styles.height = changed.height = image.height;

            // TODO: Hack / Band-aid
            switch (this._repeat) {
              case 'no-repeat':
                changed.width += 1;
                changed.height += 1;
                break;
            }

            if (this._scale instanceof Two.Vector) {
              changed.width *= this._scale.x;
              changed.height *= this._scale.y;
            } else {
              changed.width *= this._scale;
              changed.height *= this._scale;
            }
          }

        }

        if (this._flagScale || this._flagLoaded) {
          if (!this._renderer.image) {
            this._renderer.image = svg.createElement('image', styles);
          } else if (!_.isEmpty(styles)) {
            svg.setAttributes(this._renderer.image, styles);
          }
        }

        if (!this._renderer.elem) {

          changed.id = this.id;
          changed.patternUnits = 'userSpaceOnUse';
          this._renderer.elem = svg.createElement('pattern', changed);
          domElement.defs.appendChild(this._renderer.elem);

        } else if (!_.isEmpty(changed)) {

          svg.setAttributes(this._renderer.elem, changed);

        }

        if (this._renderer.elem && this._renderer.image && !this._renderer.appended) {
          this._renderer.elem.appendChild(this._renderer.image);
          this._renderer.appended = true;
        }

        return this.flagReset();

      }

    }

  };

  /**
   * @name Two.SVGRenderer
   * @class
   * @extends Two.Utils.Events
   * @param {Object} [parameters] - This object is inherited when constructing a new instance of {@link Two}.
   * @param {Element} [parameters.domElement] - The `<svg />` to draw to. If none given a new one will be constructed.
   * @description This class is used by {@link Two} when constructing with `type` of `Two.Types.svg` (the default type). It takes Two.js' scenegraph and renders it to a `<svg />`.
   */
  var Renderer = Two[Two.Types.svg] = function(params) {

    /**
     * @name Two.SVGRenderer#domElement
     * @property {Element} - The `<svg />` associated with the Two.js scene.
     */
    this.domElement = params.domElement || svg.createElement('svg');

    /**
     * @name Two.SVGRenderer#scene
     * @property {Two.Group} - The root group of the scenegraph.
     */
    this.scene = new Two.Group();
    this.scene.parent = this;

    /**
     * @name Two.SVGRenderer#defs
     * @property {SvgDefintionsElement} - The `<defs />` to apply gradients, patterns, and bitmap imagery.
     */
    this.defs = svg.createElement('defs');
    this.domElement.appendChild(this.defs);
    this.domElement.defs = this.defs;
    this.domElement.style.overflow = 'hidden';

  };

  _.extend(Renderer, {

    /**
     * @name Two.SVGRenderer.Utils
     * @property {Object} - A massive object filled with utility functions and properties to render Two.js objects to a `<svg />`.
     */
    Utils: svg

  });

  _.extend(Renderer.prototype, Two.Utils.Events, {

    constructor: Renderer,

    /**
     * @name Two.SVGRenderer#setSize
     * @function
     * @param {Number} width - The new width of the renderer.
     * @param {Number} height - The new height of the renderer.
     * @description Change the size of the renderer.
     * @nota-bene Triggers a `Two.Events.resize`.
     */
    setSize: function(width, height) {

      this.width = width;
      this.height = height;

      svg.setAttributes(this.domElement, {
        width: width,
        height: height
      });

      return this.trigger(Two.Events.resize, width, height);

    },

    /**
     * @name Two.SVGRenderer#render
     * @function
     * @description Render the current scene to the `<svg />`.
     */
    render: function() {

      svg.group.render.call(this.scene, this.domElement);

      return this;

    }

  });

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  /**
   * Constants
   */
  var mod = Two.Utils.mod;
  var getRatio = Two.Utils.getRatio;
  var _ = Two.Utils;
  var emptyArray = [];
  var TWO_PI = Math.PI * 2,
    max = Math.max,
    min = Math.min,
    abs = Math.abs,
    sin = Math.sin,
    cos = Math.cos,
    acos = Math.acos,
    sqrt = Math.sqrt;

  // Returns true if this is a non-transforming matrix
  var isDefaultMatrix = function (m) {
    return (m[0] == 1 && m[3] == 0 && m[1] == 0 && m[4] == 1 && m[2] == 0 && m[5] == 0);
  };

  var canvas = {

    isHidden: /(undefined|none|transparent)/i,

    alignments: {
      left: 'start',
      middle: 'center',
      right: 'end'
    },

    shim: function(elem, name) {
      elem.tagName = elem.nodeName = name || 'canvas';
      elem.nodeType = 1;
      elem.getAttribute = function(prop) {
        return this[prop];
      };
      elem.setAttribute = function(prop, val) {
        this[prop] = val;
        return this;
      };
      return elem;
    },

    group: {

      renderChild: function(child) {
        canvas[child._renderer.type].render.call(child, this.ctx, true, this.clip);
      },

      render: function(ctx) {

        // TODO: Add a check here to only invoke _update if need be.
        this._update();

        var matrix = this._matrix.elements;
        var parent = this.parent;
        this._renderer.opacity = this._opacity
          * (parent && parent._renderer ? parent._renderer.opacity : 1);

        var mask = this._mask;
        // var clip = this._clip;

        var defaultMatrix = isDefaultMatrix(matrix);
        var shouldIsolate = !defaultMatrix || !!mask;

        if (!this._renderer.context) {
          this._renderer.context = {};
        }

        this._renderer.context.ctx = ctx;
        // this._renderer.context.clip = clip;

        if (shouldIsolate) {
          ctx.save();
          if (!defaultMatrix) {
            ctx.transform(  matrix[0], matrix[3], matrix[1],
              matrix[4], matrix[2], matrix[5]);
          }
        }

        if (mask) {
          canvas[mask._renderer.type].render.call(mask, ctx, true);
        }

        if (this.opacity > 0 && this.scale !== 0) {
          for (var i = 0; i < this.children.length; i++) {
            var child = this.children[i];
            canvas[child._renderer.type].render.call(child, ctx);
          }
        }

        if (shouldIsolate) {
          ctx.restore();
        }

       /**
         * Commented two-way functionality of clips / masks with groups and
         * polygons. Uncomment when this bug is fixed:
         * https://code.google.com/p/chromium/issues/detail?id=370951
         */

        // if (clip) {
        //   ctx.clip();
        // }

        return this.flagReset();

      }

    },

    path: {

      render: function(ctx, forced, parentClipped) {

        var matrix, stroke, linewidth, fill, opacity, visible, cap, join, miter,
            closed, commands, length, last, next, prev, a, b, c, d, ux, uy, vx, vy,
            ar, bl, br, cl, x, y, mask, clip, defaultMatrix, isOffset, dashes;

        // TODO: Add a check here to only invoke _update if need be.
        this._update();

        matrix = this._matrix.elements;
        stroke = this._stroke;
        linewidth = this._linewidth;
        fill = this._fill;
        opacity = this._opacity * this.parent._renderer.opacity;
        visible = this._visible;
        cap = this._cap;
        join = this._join;
        miter = this._miter;
        closed = this._closed;
        commands = this._renderer.vertices; // Commands
        length = commands.length;
        last = length - 1;
        defaultMatrix = isDefaultMatrix(matrix);
        dashes = this.dashes;

        // mask = this._mask;
        clip = this._clip;

        if (!forced && (!visible || clip)) {
          return this;
        }

        // Transform
        if (!defaultMatrix) {
          ctx.save();
          ctx.transform(matrix[0], matrix[3], matrix[1], matrix[4], matrix[2], matrix[5]);
        }

       /**
         * Commented two-way functionality of clips / masks with groups and
         * polygons. Uncomment when this bug is fixed:
         * https://code.google.com/p/chromium/issues/detail?id=370951
         */

        // if (mask) {
        //   canvas[mask._renderer.type].render.call(mask, ctx, true);
        // }

        // Styles
        if (fill) {
          if (_.isString(fill)) {
            ctx.fillStyle = fill;
          } else {
            canvas[fill._renderer.type].render.call(fill, ctx);
            ctx.fillStyle = fill._renderer.effect;
          }
        }
        if (stroke) {
          if (_.isString(stroke)) {
            ctx.strokeStyle = stroke;
          } else {
            canvas[stroke._renderer.type].render.call(stroke, ctx);
            ctx.strokeStyle = stroke._renderer.effect;
          }
          if (linewidth) {
            ctx.lineWidth = linewidth;
          }
          if (miter) {
            ctx.miterLimit = miter;
          }
          if (join) {
            ctx.lineJoin = join;
          }
          if (!closed && cap) {
            ctx.lineCap = cap;
          }
        }
        if (_.isNumber(opacity)) {
          ctx.globalAlpha = opacity;
        }

        if (dashes && dashes.length > 0) {
          ctx.lineDashOffset = dashes.offset || 0;
          ctx.setLineDash(dashes);
        }

        ctx.beginPath();

        for (var i = 0; i < commands.length; i++) {

          b = commands[i];

          x = b.x;
          y = b.y;

          switch (b.command) {

            case Two.Commands.close:
              ctx.closePath();
              break;

            case Two.Commands.arc:

              var rx = b.rx;
              var ry = b.ry;
              var xAxisRotation = b.xAxisRotation;
              var largeArcFlag = b.largeArcFlag;
              var sweepFlag = b.sweepFlag;

              prev = closed ? mod(i - 1, length) : max(i - 1, 0);
              a = commands[prev];

              var ax = a.x;
              var ay = a.y;

              canvas.renderSvgArcCommand(ctx, ax, ay, rx, ry, largeArcFlag, sweepFlag, xAxisRotation, x, y);
              break;

            case Two.Commands.curve:

              prev = closed ? mod(i - 1, length) : Math.max(i - 1, 0);
              next = closed ? mod(i + 1, length) : Math.min(i + 1, last);

              a = commands[prev];
              c = commands[next];
              ar = (a.controls && a.controls.right) || Two.Vector.zero;
              bl = (b.controls && b.controls.left) || Two.Vector.zero;

              if (a._relative) {
                vx = (ar.x + a.x);
                vy = (ar.y + a.y);
              } else {
                vx = ar.x;
                vy = ar.y;
              }

              if (b._relative) {
                ux = (bl.x + b.x);
                uy = (bl.y + b.y);
              } else {
                ux = bl.x;
                uy = bl.y;
              }

              ctx.bezierCurveTo(vx, vy, ux, uy, x, y);

              if (i >= last && closed) {

                c = d;

                br = (b.controls && b.controls.right) || Two.Vector.zero;
                cl = (c.controls && c.controls.left) || Two.Vector.zero;

                if (b._relative) {
                  vx = (br.x + b.x);
                  vy = (br.y + b.y);
                } else {
                  vx = br.x;
                  vy = br.y;
                }

                if (c._relative) {
                  ux = (cl.x + c.x);
                  uy = (cl.y + c.y);
                } else {
                  ux = cl.x;
                  uy = cl.y;
                }

                x = c.x;
                y = c.y;

                ctx.bezierCurveTo(vx, vy, ux, uy, x, y);

              }

              break;

            case Two.Commands.line:
              ctx.lineTo(x, y);
              break;

            case Two.Commands.move:
              d = b;
              ctx.moveTo(x, y);
              break;

          }
        }

        // Loose ends

        if (closed) {
          ctx.closePath();
        }

        if (!clip && !parentClipped) {
          if (!canvas.isHidden.test(fill)) {
            isOffset = fill._renderer && fill._renderer.offset;
            if (isOffset) {
              ctx.save();
              ctx.translate(
                - fill._renderer.offset.x, - fill._renderer.offset.y);
              ctx.scale(fill._renderer.scale.x, fill._renderer.scale.y);
            }
            ctx.fill();
            if (isOffset) {
              ctx.restore();
            }
          }
          if (!canvas.isHidden.test(stroke)) {
            isOffset = stroke._renderer && stroke._renderer.offset;
            if (isOffset) {
              ctx.save();
              ctx.translate(
                - stroke._renderer.offset.x, - stroke._renderer.offset.y);
              ctx.scale(stroke._renderer.scale.x, stroke._renderer.scale.y);
              ctx.lineWidth = linewidth / stroke._renderer.scale.x;
            }
            ctx.stroke();
            if (isOffset) {
              ctx.restore();
            }
          }
        }

        if (!defaultMatrix) {
          ctx.restore();
        }

        if (clip && !parentClipped) {
          ctx.clip();
        }

        if (dashes && dashes.length > 0) {
          ctx.setLineDash(emptyArray);
        }

        return this.flagReset();

      }

    },

    text: {

      render: function(ctx, forced, parentClipped) {

        // TODO: Add a check here to only invoke _update if need be.
        this._update();

        var matrix = this._matrix.elements;
        var stroke = this._stroke;
        var linewidth = this._linewidth;
        var fill = this._fill;
        var opacity = this._opacity * this.parent._renderer.opacity;
        var visible = this._visible;
        var defaultMatrix = isDefaultMatrix(matrix);
        var isOffset = fill._renderer && fill._renderer.offset
          && stroke._renderer && stroke._renderer.offset;
        var dashes = this.dashes;

        var a, b, c, d, e, sx, sy;

        // mask = this._mask;
        var clip = this._clip;

        if (!forced && (!visible || clip)) {
          return this;
        }

        // Transform
        if (!defaultMatrix) {
          ctx.save();
          ctx.transform(matrix[0], matrix[3], matrix[1], matrix[4], matrix[2], matrix[5]);
        }

       /**
         * Commented two-way functionality of clips / masks with groups and
         * polygons. Uncomment when this bug is fixed:
         * https://code.google.com/p/chromium/issues/detail?id=370951
         */

        // if (mask) {
        //   canvas[mask._renderer.type].render.call(mask, ctx, true);
        // }

        if (!isOffset) {
          ctx.font = [this._style, this._weight, this._size + 'px/' +
            this._leading + 'px', this._family].join(' ');
        }

        ctx.textAlign = canvas.alignments[this._alignment] || this._alignment;
        ctx.textBaseline = this._baseline;

        // Styles
        if (fill) {
          if (_.isString(fill)) {
            ctx.fillStyle = fill;
          } else {
            canvas[fill._renderer.type].render.call(fill, ctx);
            ctx.fillStyle = fill._renderer.effect;
          }
        }
        if (stroke) {
          if (_.isString(stroke)) {
            ctx.strokeStyle = stroke;
          } else {
            canvas[stroke._renderer.type].render.call(stroke, ctx);
            ctx.strokeStyle = stroke._renderer.effect;
          }
          if (linewidth) {
            ctx.lineWidth = linewidth;
          }
        }
        if (_.isNumber(opacity)) {
          ctx.globalAlpha = opacity;
        }
        if (dashes && dashes.length > 0) {
          ctx.lineDashOffset = dashes.offset || 0;
          ctx.setLineDash(dashes);
        }

        if (!clip && !parentClipped) {

          if (!canvas.isHidden.test(fill)) {

            if (fill._renderer && fill._renderer.offset) {

              sx = fill._renderer.scale.x;
              sy = fill._renderer.scale.y;

              ctx.save();
              ctx.translate( - fill._renderer.offset.x,
                - fill._renderer.offset.y);
              ctx.scale(sx, sy);

              a = this._size / fill._renderer.scale.y;
              b = this._leading / fill._renderer.scale.y;
              ctx.font = [this._style, this._weight, a + 'px/',
                b + 'px', this._family].join(' ');

              c = fill._renderer.offset.x / fill._renderer.scale.x;
              d = fill._renderer.offset.y / fill._renderer.scale.y;

              ctx.fillText(this.value, c, d);
              ctx.restore();

            } else {
              ctx.fillText(this.value, 0, 0);
            }

          }

          if (!canvas.isHidden.test(stroke)) {

            if (stroke._renderer && stroke._renderer.offset) {

              sx = stroke._renderer.scale.x;
              sy = stroke._renderer.scale.y;

              ctx.save();
              ctx.translate(- stroke._renderer.offset.x,
                - stroke._renderer.offset.y);
              ctx.scale(sx, sy);

              a = this._size / stroke._renderer.scale.y;
              b = this._leading / stroke._renderer.scale.y;
              ctx.font = [this._style, this._weight, a + 'px/',
                b + 'px', this._family].join(' ');

              c = stroke._renderer.offset.x / stroke._renderer.scale.x;
              d = stroke._renderer.offset.y / stroke._renderer.scale.y;
              e = linewidth / stroke._renderer.scale.x;

              ctx.lineWidth = e;
              ctx.strokeText(this.value, c, d);
              ctx.restore();

            } else {
              ctx.strokeText(this.value, 0, 0);
            }
          }
        }

        if (!defaultMatrix) {
          ctx.restore();
        }

        // TODO: Test for text
        if (clip && !parentClipped) {
          ctx.clip();
        }

        if (dashes && dashes.length > 0) {
          ctx.setLineDash(emptyArray);
        }

        return this.flagReset();

      }

    },

    'linear-gradient': {

      render: function(ctx) {

        this._update();

        if (!this._renderer.effect || this._flagEndPoints || this._flagStops) {

          this._renderer.effect = ctx.createLinearGradient(
            this.left._x, this.left._y,
            this.right._x, this.right._y
          );

          for (var i = 0; i < this.stops.length; i++) {
            var stop = this.stops[i];
            this._renderer.effect.addColorStop(stop._offset, stop._color);
          }

        }

        return this.flagReset();

      }

    },

    'radial-gradient': {

      render: function(ctx) {

        this._update();

        if (!this._renderer.effect || this._flagCenter || this._flagFocal
            || this._flagRadius || this._flagStops) {

          this._renderer.effect = ctx.createRadialGradient(
            this.center._x, this.center._y, 0,
            this.focal._x, this.focal._y, this._radius
          );

          for (var i = 0; i < this.stops.length; i++) {
            var stop = this.stops[i];
            this._renderer.effect.addColorStop(stop._offset, stop._color);
          }

        }

        return this.flagReset();

      }

    },

    texture: {

      render: function(ctx) {

        this._update();

        var image = this.image;
        var repeat;

        if (!this._renderer.effect || ((this._flagLoaded || this._flagImage || this._flagVideo || this._flagRepeat) && this.loaded)) {
          this._renderer.effect = ctx.createPattern(this.image, this._repeat);
        }

        if (this._flagOffset || this._flagLoaded || this._flagScale) {

          if (!(this._renderer.offset instanceof Two.Vector)) {
            this._renderer.offset = new Two.Vector();
          }

          this._renderer.offset.x = - this._offset.x;
          this._renderer.offset.y = - this._offset.y;

          if (image) {

            this._renderer.offset.x += image.width / 2;
            this._renderer.offset.y += image.height / 2;

            if (this._scale instanceof Two.Vector) {
              this._renderer.offset.x *= this._scale.x;
              this._renderer.offset.y *= this._scale.y;
            } else {
              this._renderer.offset.x *= this._scale;
              this._renderer.offset.y *= this._scale;
            }
          }

        }

        if (this._flagScale || this._flagLoaded) {

          if (!(this._renderer.scale instanceof Two.Vector)) {
            this._renderer.scale = new Two.Vector();
          }

          if (this._scale instanceof Two.Vector) {
            this._renderer.scale.copy(this._scale);
          } else {
            this._renderer.scale.set(this._scale, this._scale);
          }

        }

        return this.flagReset();

      }

    },

    renderSvgArcCommand: function(ctx, ax, ay, rx, ry, largeArcFlag, sweepFlag, xAxisRotation, x, y) {

      xAxisRotation = xAxisRotation * Math.PI / 180;

      // Ensure radii are positive
      rx = abs(rx);
      ry = abs(ry);

      // Compute (x1′, y1′)
      var dx2 = (ax - x) / 2.0;
      var dy2 = (ay - y) / 2.0;
      var x1p = cos(xAxisRotation) * dx2 + sin(xAxisRotation) * dy2;
      var y1p = - sin(xAxisRotation) * dx2 + cos(xAxisRotation) * dy2;

      // Compute (cx′, cy′)
      var rxs = rx * rx;
      var rys = ry * ry;
      var x1ps = x1p * x1p;
      var y1ps = y1p * y1p;

      // Ensure radii are large enough
      var cr = x1ps / rxs + y1ps / rys;

      if (cr > 1) {

        // scale up rx,ry equally so cr == 1
        var s = sqrt(cr);
        rx = s * rx;
        ry = s * ry;
        rxs = rx * rx;
        rys = ry * ry;

      }

      var dq = (rxs * y1ps + rys * x1ps);
      var pq = (rxs * rys - dq) / dq;
      var q = sqrt(max(0, pq));
      if (largeArcFlag === sweepFlag) q = - q;
      var cxp = q * rx * y1p / ry;
      var cyp = - q * ry * x1p / rx;

      // Step 3: Compute (cx, cy) from (cx′, cy′)
      var cx = cos(xAxisRotation) * cxp
        - sin(xAxisRotation) * cyp + (ax + x) / 2;
      var cy = sin(xAxisRotation) * cxp
        + cos(xAxisRotation) * cyp + (ay + y) / 2;

      // Step 4: Compute θ1 and Δθ
      var startAngle = svgAngle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
      var delta = svgAngle((x1p - cxp) / rx, (y1p - cyp) / ry,
        (- x1p - cxp) / rx, (- y1p - cyp) / ry) % TWO_PI;

      var endAngle = startAngle + delta;

      var clockwise = sweepFlag === 0;

      renderArcEstimate(ctx, cx, cy, rx, ry, startAngle, endAngle,
        clockwise, xAxisRotation);

    }

  };

  /**
   * @name Two.CanvasRenderer
   * @class
   * @extends Two.Utils.Events
   * @param {Object} [parameters] - This object is inherited when constructing a new instance of {@link Two}.
   * @param {Element} [parameters.domElement] - The `<canvas />` to draw to. If none given a new one will be constructed.
   * @param {Boolean} [parameters.overdraw] - Determines whether the canvas should clear the background or not. Defaults to `true`.
   * @param {Boolean} [parameters.smoothing=true] - Determines whether the canvas should antialias drawing. Set it to `false` when working with pixel art. `false` can lead to better performance, since it would use a cheaper interpolation algorithm.
   * @description This class is used by {@link Two} when constructing with `type` of `Two.Types.canvas`. It takes Two.js' scenegraph and renders it to a `<canvas />`.
   */
  var Renderer = Two[Two.Types.canvas] = function(params) {

    // It might not make a big difference on GPU backed canvases.
    var smoothing = (params.smoothing !== false);

    /**
     * @name Two.CanvasRenderer#domElement
     * @property {Element} - The `<canvas />` associated with the Two.js scene.
     */
    this.domElement = params.domElement || document.createElement('canvas');

    /**
     * @name Two.CanvasRenderer#ctx
     * @property {Canvas2DContext} - Associated two dimensional context to render on the `<canvas />`.
     */
    this.ctx = this.domElement.getContext('2d');

    /**
     * @name Two.CanvasRenderer#overdraw
     * @property {Boolean} - Determines whether the canvas clears the background each draw call.
     * @default true
     */
    this.overdraw = params.overdraw || false;

    if (!_.isUndefined(this.ctx.imageSmoothingEnabled)) {
      this.ctx.imageSmoothingEnabled = smoothing;
    }

    /**
     * @name Two.CanvasRenderer#scene
     * @property {Two.Group} - The root group of the scenegraph.
     */
    this.scene = new Two.Group();
    this.scene.parent = this;
  };

  _.extend(Renderer, {

    /**
     * @name Two.CanvasRenderer.Utils
     * @property {Object} - A massive object filled with utility functions and properties to render Two.js objects to a `<canvas />`.
     */
    Utils: canvas

  });

  _.extend(Renderer.prototype, Two.Utils.Events, {

    constructor: Renderer,

    /**
     * @name Two.CanvasRenderer#setSize
     * @function
     * @param {Number} width - The new width of the renderer.
     * @param {Number} height - The new height of the renderer.
     * @param {Number} [ratio] - The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen.
     * @description Change the size of the renderer.
     * @nota-bene Triggers a `Two.Events.resize`.
     */
    setSize: function(width, height, ratio) {

      this.width = width;
      this.height = height;

      this.ratio = _.isUndefined(ratio) ? getRatio(this.ctx) : ratio;

      this.domElement.width = width * this.ratio;
      this.domElement.height = height * this.ratio;

      if (this.domElement.style) {
        _.extend(this.domElement.style, {
          width: width + 'px',
          height: height + 'px'
        });
      }

      return this.trigger(Two.Events.resize, width, height, ratio);

    },

    /**
     * @name Two.CanvasRenderer#render
     * @function
     * @description Render the current scene to the `<canvas />`.
     */
    render: function() {

      var isOne = this.ratio === 1;

      if (!isOne) {
        this.ctx.save();
        this.ctx.scale(this.ratio, this.ratio);
      }

      if (!this.overdraw) {
        this.ctx.clearRect(0, 0, this.width, this.height);
      }

      canvas.group.render.call(this.scene, this.ctx);

      if (!isOne) {
        this.ctx.restore();
      }

      return this;

    }

  });

  function renderArcEstimate(ctx, ox, oy, rx, ry, startAngle, endAngle, clockwise, xAxisRotation) {

    var epsilon = Two.Utils.Curve.Tolerance.epsilon;
    var deltaAngle = endAngle - startAngle;
    var samePoints = Math.abs(deltaAngle) < epsilon;

    // ensures that deltaAngle is 0 .. 2 PI
    deltaAngle = mod(deltaAngle, TWO_PI);

    if (deltaAngle < epsilon) {

      if (samePoints) {

        deltaAngle = 0;

      } else {

        deltaAngle = TWO_PI;

      }

    }

    if (clockwise === true && ! samePoints) {

      if (deltaAngle === TWO_PI) {

        deltaAngle = - TWO_PI;

      } else {

        deltaAngle = deltaAngle - TWO_PI;

      }

    }

    for (var i = 0; i < Two.Resolution; i++) {

      var t = i / (Two.Resolution - 1);

      var angle = startAngle + t * deltaAngle;
      var x = ox + rx * Math.cos(angle);
      var y = oy + ry * Math.sin(angle);

      if (xAxisRotation !== 0) {

        var cos = Math.cos(xAxisRotation);
        var sin = Math.sin(xAxisRotation);

        var tx = x - ox;
        var ty = y - oy;

        // Rotate the point about the center of the ellipse.
        x = tx * cos - ty * sin + ox;
        y = tx * sin + ty * cos + oy;

      }

      ctx.lineTo(x, y);

    }

  }

  function svgAngle(ux, uy, vx, vy) {

    var dot = ux * vx + uy * vy;
    var len = sqrt(ux * ux + uy * uy) *  sqrt(vx * vx + vy * vy);
    // floating point precision, slightly over values appear
    var ang = acos(max(-1, min(1, dot / len)));
    if ((ux * vy - uy * vx) < 0) {
      ang = - ang;
    }

    return ang;

  }

  function resetTransform(ctx) {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
  }

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  /**
   * Constants
   */

  var root = Two.root,
    multiplyMatrix = Two.Matrix.Multiply,
    mod = Two.Utils.mod,
    identity = [1, 0, 0, 0, 1, 0, 0, 0, 1],
    transformation = new Two.Array(9),
    getRatio = Two.Utils.getRatio,
    getComputedMatrix = Two.Utils.getComputedMatrix,
    CanvasUtils = Two[Two.Types.canvas].Utils,
    _ = Two.Utils;

  var webgl = {

    isHidden: /(undefined|none|transparent)/i,

    canvas: (root.document ? root.document.createElement('canvas') : { getContext: _.identity }),

    alignments: {
      left: 'start',
      middle: 'center',
      right: 'end'
    },

    matrix: new Two.Matrix(),

    group: {

      removeChild: function(child, gl) {
        if (child.children) {
          for (var i = 0; i < child.children.length; i++) {
            webgl.group.removeChild(child.children[i], gl);
          }
          return;
        }
        // Deallocate texture to free up gl memory.
        gl.deleteTexture(child._renderer.texture);
        delete child._renderer.texture;
      },

      render: function(gl, program) {

        this._update();

        var parent = this.parent;
        var flagParentMatrix = (parent._matrix && parent._matrix.manual) || parent._flagMatrix;
        var flagMatrix = this._matrix.manual || this._flagMatrix;

        if (flagParentMatrix || flagMatrix) {

          if (!this._renderer.matrix) {
            this._renderer.matrix = new Two.Array(9);
          }

          // Reduce amount of object / array creation / deletion
          this._matrix.toTransformArray(true, transformation);

          multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);

          if (!(this._renderer.scale instanceof Two.Vector)) {
            this._renderer.scale = new Two.Vector();
          }

          if (this._scale instanceof Two.Vector) {
            this._renderer.scale.x = this._scale.x;
            this._renderer.scale.y = this._scale.y;
          } else {
            this._renderer.scale.x = this._scale;
            this._renderer.scale.y = this._scale;
          }

          if (!(/renderer/i.test(parent._renderer.type))) {
            this._renderer.scale.x *= parent._renderer.scale.x;
            this._renderer.scale.y *= parent._renderer.scale.y;
          }

          if (flagParentMatrix) {
            this._flagMatrix = true;
          }

        }

        if (this._mask) {

          // Stencil away everything that isn't rendered by the mask

          gl.clear(gl.STENCIL_BUFFER_BIT);
          gl.enable(gl.STENCIL_TEST);

          gl.stencilFunc(gl.ALWAYS, 1, 0);
          gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);

          webgl[this._mask._renderer.type].render.call(this._mask, gl, program, this);

          gl.stencilFunc(gl.EQUAL, 1, 0xff);
          gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);

        }

        this._flagOpacity = parent._flagOpacity || this._flagOpacity;

        this._renderer.opacity = this._opacity
          * (parent && parent._renderer ? parent._renderer.opacity : 1);

        var i;
        if (this._flagSubtractions) {
          for (i = 0; i < this.subtractions.length; i++) {
            webgl.group.removeChild(this.subtractions[i], gl);
          }
        }

        for (i = 0; i < this.children.length; i++) {
          var child = this.children[i];
          webgl[child._renderer.type].render.call(child, gl, program);
        }

        if (this._mask) {
          gl.disable(gl.STENCIL_TEST);
        }

        return this.flagReset();

      }

    },

    path: {

      updateCanvas: function(elem) {

        var next, prev, a, c, ux, uy, vx, vy, ar, bl, br, cl, x, y;
        var isOffset;

        var commands = elem._renderer.vertices;
        var canvas = this.canvas;
        var ctx = this.ctx;

        // Styles
        var scale = elem._renderer.scale;
        var stroke = elem._stroke;
        var linewidth = elem._linewidth;
        var fill = elem._fill;
        var opacity = elem._renderer.opacity || elem._opacity;
        var cap = elem._cap;
        var join = elem._join;
        var miter = elem._miter;
        var closed = elem._closed;
        var dashes = elem.dashes;
        var length = commands.length;
        var last = length - 1;

        canvas.width = Math.max(Math.ceil(elem._renderer.rect.width * scale.x), 1);
        canvas.height = Math.max(Math.ceil(elem._renderer.rect.height * scale.y), 1);

        var centroid = elem._renderer.rect.centroid;
        var cx = centroid.x;
        var cy = centroid.y;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        if (fill) {
          if (_.isString(fill)) {
            ctx.fillStyle = fill;
          } else {
            webgl[fill._renderer.type].render.call(fill, ctx, elem);
            ctx.fillStyle = fill._renderer.effect;
          }
        }
        if (stroke) {
          if (_.isString(stroke)) {
            ctx.strokeStyle = stroke;
          } else {
            webgl[stroke._renderer.type].render.call(stroke, ctx, elem);
            ctx.strokeStyle = stroke._renderer.effect;
          }
          if (linewidth) {
            ctx.lineWidth = linewidth;
          }
          if (miter) {
            ctx.miterLimit = miter;
          }
          if (join) {
            ctx.lineJoin = join;
          }
          if (!closed && cap) {
            ctx.lineCap = cap;
          }
        }
        if (_.isNumber(opacity)) {
          ctx.globalAlpha = opacity;
        }

        if (dashes && dashes.length > 0) {
          ctx.lineDashOffset = dashes.offset || 0;
          ctx.setLineDash(dashes);
        }

        var d;
        ctx.save();
        ctx.scale(scale.x, scale.y);

        ctx.translate(cx, cy);

        ctx.beginPath();
        for (var i = 0; i < commands.length; i++) {

          var b = commands[i];

          x = b.x;
          y = b.y;

          switch (b.command) {

            case Two.Commands.close:
              ctx.closePath();
              break;

            case Two.Commands.arc:

              var rx = b.rx;
              var ry = b.ry;
              var xAxisRotation = b.xAxisRotation;
              var largeArcFlag = b.largeArcFlag;
              var sweepFlag = b.sweepFlag;

              prev = closed ? mod(i - 1, length) : Math.max(i - 1, 0);
              a = commands[prev];

              var ax = a.x;
              var ay = a.y;

              CanvasUtils.renderSvgArcCommand(ctx, ax, ay, rx, ry, largeArcFlag, sweepFlag, xAxisRotation, x, y);
              break;

            case Two.Commands.curve:

              prev = closed ? mod(i - 1, length) : Math.max(i - 1, 0);
              next = closed ? mod(i + 1, length) : Math.min(i + 1, last);

              a = commands[prev];
              c = commands[next];
              ar = (a.controls && a.controls.right) || Two.Vector.zero;
              bl = (b.controls && b.controls.left) || Two.Vector.zero;

              if (a._relative) {
                vx = ar.x + a.x;
                vy = ar.y + a.y;
              } else {
                vx = ar.x;
                vy = ar.y;
              }

              if (b._relative) {
                ux = bl.x + b.x;
                uy = bl.y + b.y;
              } else {
                ux = bl.x;
                uy = bl.y;
              }

              ctx.bezierCurveTo(vx, vy, ux, uy, x, y);

              if (i >= last && closed) {

                c = d;

                br = (b.controls && b.controls.right) || Two.Vector.zero;
                cl = (c.controls && c.controls.left) || Two.Vector.zero;

                if (b._relative) {
                  vx = br.x + b.x;
                  vy = br.y + b.y;
                } else {
                  vx = br.x;
                  vy = br.y;
                }

                if (c._relative) {
                  ux = cl.x + c.x;
                  uy = cl.y + c.y;
                } else {
                  ux = cl.x;
                  uy = cl.y;
                }

                x = c.x;
                y = c.y;

                ctx.bezierCurveTo(vx, vy, ux, uy, x, y);

              }

              break;

            case Two.Commands.line:
              ctx.lineTo(x, y);
              break;

            case Two.Commands.move:
              d = b;
              ctx.moveTo(x, y);
              break;

          }

        }

        // Loose ends

        if (closed) {
          ctx.closePath();
        }

        if (!webgl.isHidden.test(fill)) {
          isOffset = fill._renderer && fill._renderer.offset;
          if (isOffset) {
            ctx.save();
            ctx.translate(
              - fill._renderer.offset.x, - fill._renderer.offset.y);
            ctx.scale(fill._renderer.scale.x, fill._renderer.scale.y);
          }
          ctx.fill();
          if (isOffset) {
            ctx.restore();
          }
        }

        if (!webgl.isHidden.test(stroke)) {
          isOffset = stroke._renderer && stroke._renderer.offset;
          if (isOffset) {
            ctx.save();
            ctx.translate(
              - stroke._renderer.offset.x, - stroke._renderer.offset.y);
            ctx.scale(stroke._renderer.scale.x, stroke._renderer.scale.y);
            ctx.lineWidth = linewidth / stroke._renderer.scale.x;
          }
          ctx.stroke();
          if (isOffset) {
            ctx.restore();
          }
        }

        ctx.restore();

      },

      /**
       * Returns the rect of a set of verts. Typically takes vertices that are
       * "centered" around 0 and returns them to be anchored upper-left.
       */
      getBoundingClientRect: function(vertices, border, rect) {

        var left = Infinity, right = -Infinity,
            top = Infinity, bottom = -Infinity,
            width, height;

        vertices.forEach(function(v) {

          var x = v.x, y = v.y, controls = v.controls;
          var a, b, c, d, cl, cr;

          top = Math.min(y, top);
          left = Math.min(x, left);
          right = Math.max(x, right);
          bottom = Math.max(y, bottom);

          if (!v.controls) {
            return;
          }

          cl = controls.left;
          cr = controls.right;

          if (!cl || !cr) {
            return;
          }

          a = v._relative ? cl.x + x : cl.x;
          b = v._relative ? cl.y + y : cl.y;
          c = v._relative ? cr.x + x : cr.x;
          d = v._relative ? cr.y + y : cr.y;

          if (!a || !b || !c || !d) {
            return;
          }

          top = Math.min(b, d, top);
          left = Math.min(a, c, left);
          right = Math.max(a, c, right);
          bottom = Math.max(b, d, bottom);

        });

        // Expand borders

        if (_.isNumber(border)) {
          top -= border;
          left -= border;
          right += border;
          bottom += border;
        }

        width = right - left;
        height = bottom - top;

        rect.top = top;
        rect.left = left;
        rect.right = right;
        rect.bottom = bottom;
        rect.width = width;
        rect.height = height;

        if (!rect.centroid) {
          rect.centroid = {};
        }

        rect.centroid.x = - left;
        rect.centroid.y = - top;

      },

      render: function(gl, program, forcedParent) {

        if (!this._visible || !this._opacity) {
          return this;
        }

        this._update();

        // Calculate what changed

        var parent = this.parent;
        var flagParentMatrix = parent._matrix.manual || parent._flagMatrix;
        var flagMatrix = this._matrix.manual || this._flagMatrix;
        var flagTexture = this._flagVertices || this._flagFill
          || (this._fill instanceof Two.LinearGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagEndPoints))
          || (this._fill instanceof Two.RadialGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagRadius || this._fill._flagCenter || this._fill._flagFocal))
          || (this._fill instanceof Two.Texture && (this._fill._flagLoaded && this._fill.loaded || this._fill._flagImage || this._fill._flagVideo || this._fill._flagRepeat || this._fill._flagOffset || this._fill._flagScale))
          || (this._stroke instanceof Two.LinearGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagEndPoints))
          || (this._stroke instanceof Two.RadialGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagRadius || this._stroke._flagCenter || this._stroke._flagFocal))
          || (this._stroke instanceof Two.Texture && (this._stroke._flagLoaded && this._stroke.loaded || this._stroke._flagImage || this._stroke._flagVideo || this._stroke._flagRepeat || this._stroke._flagOffset || this._fill._flagScale))
          || this._flagStroke || this._flagLinewidth || this._flagOpacity
          || parent._flagOpacity || this._flagVisible || this._flagCap
          || this._flagJoin || this._flagMiter || this._flagScale
          || (this.dashes && this.dashes.length > 0)
          || !this._renderer.texture;

        if (flagParentMatrix || flagMatrix) {

          if (!this._renderer.matrix) {
            this._renderer.matrix = new Two.Array(9);
          }

          // Reduce amount of object / array creation / deletion

          this._matrix.toTransformArray(true, transformation);

          multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);

          if (!(this._renderer.scale instanceof Two.Vector)) {
            this._renderer.scale = new Two.Vector();
          }
          if (this._scale instanceof Two.Vector) {
            this._renderer.scale.x = this._scale.x * parent._renderer.scale.x;
            this._renderer.scale.y = this._scale.y * parent._renderer.scale.y;
          } else {
            this._renderer.scale.x = this._scale * parent._renderer.scale.x;
            this._renderer.scale.y = this._scale * parent._renderer.scale.y;
          }

        }

        if (flagTexture) {

          if (!this._renderer.rect) {
            this._renderer.rect = {};
          }

          this._renderer.opacity = this._opacity * parent._renderer.opacity;

          webgl.path.getBoundingClientRect(this._renderer.vertices, this._linewidth, this._renderer.rect);

          webgl.updateTexture.call(webgl, gl, this);

        } else {

          // We still need to update child Two elements on the fill and
          // stroke properties.
          if (this._fill && this._fill._update) {
            this._fill._update();
          }
          if (this._stroke && this._stroke._update) {
            this._stroke._update();
          }

        }

        // if (this._mask) {
        //   webgl[this._mask._renderer.type].render.call(mask, gl, program, this);
        // }

        if (this._clip && !forcedParent) {
          return;
        }

        // Draw Texture
        gl.bindTexture(gl.TEXTURE_2D, this._renderer.texture);

        // Draw Rect
        var rect = this._renderer.rect;
        gl.uniformMatrix3fv(program.matrix, false, this._renderer.matrix);
        gl.uniform4f(program.rect, rect.left, rect.top, rect.right, rect.bottom);
        gl.drawArrays(gl.TRIANGLES, 0, 6);

        return this.flagReset();

      }

    },

    text: {

      updateCanvas: function(elem) {

        var canvas = this.canvas;
        var ctx = this.ctx;

        // Styles
        var scale = elem._renderer.scale;
        var stroke = elem._stroke;
        var linewidth = elem._linewidth * scale;
        var fill = elem._fill;
        var opacity = elem._renderer.opacity || elem._opacity;
        var dashes = elem.dashes;

        canvas.width = Math.max(Math.ceil(elem._renderer.rect.width * scale.x), 1);
        canvas.height = Math.max(Math.ceil(elem._renderer.rect.height * scale.y), 1);

        var centroid = elem._renderer.rect.centroid;
        var cx = centroid.x;
        var cy = centroid.y;

        var a, b, c, d, e, sx, sy;
        var isOffset = fill._renderer && fill._renderer.offset
          && stroke._renderer && stroke._renderer.offset;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        if (!isOffset) {
          ctx.font = [elem._style, elem._weight, elem._size + 'px/' +
            elem._leading + 'px', elem._family].join(' ');
        }

        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Styles
        if (fill) {
          if (_.isString(fill)) {
            ctx.fillStyle = fill;
          } else {
            webgl[fill._renderer.type].render.call(fill, ctx, elem);
            ctx.fillStyle = fill._renderer.effect;
          }
        }
        if (stroke) {
          if (_.isString(stroke)) {
            ctx.strokeStyle = stroke;
          } else {
            webgl[stroke._renderer.type].render.call(stroke, ctx, elem);
            ctx.strokeStyle = stroke._renderer.effect;
          }
          if (linewidth) {
            ctx.lineWidth = linewidth;
          }
        }
        if (_.isNumber(opacity)) {
          ctx.globalAlpha = opacity;
        }
        if (dashes && dashes.length > 0) {
          ctx.lineDashOffset = dashes.offset || 0;
          ctx.setLineDash(dashes);
        }

        ctx.save();
        ctx.scale(scale.x, scale.y);
        ctx.translate(cx, cy);

        if (!webgl.isHidden.test(fill)) {

          if (fill._renderer && fill._renderer.offset) {

            sx = fill._renderer.scale.x;
            sy = fill._renderer.scale.y;

            ctx.save();
            ctx.translate( - fill._renderer.offset.x,
              - fill._renderer.offset.y);
            ctx.scale(sx, sy);

            a = elem._size / fill._renderer.scale.y;
            b = elem._leading / fill._renderer.scale.y;
            ctx.font = [elem._style, elem._weight, a + 'px/',
              b + 'px', elem._family].join(' ');

            c = fill._renderer.offset.x / fill._renderer.scale.x;
            d = fill._renderer.offset.y / fill._renderer.scale.y;

            ctx.fillText(elem.value, c, d);
            ctx.restore();

          } else {
            ctx.fillText(elem.value, 0, 0);
          }

        }

        if (!webgl.isHidden.test(stroke)) {

          if (stroke._renderer && stroke._renderer.offset) {

            sx = stroke._renderer.scale.x;
            sy = stroke._renderer.scale.y;

            ctx.save();
            ctx.translate(- stroke._renderer.offset.x,
              - stroke._renderer.offset.y);
            ctx.scale(sx, sy);

            a = elem._size / stroke._renderer.scale.y;
            b = elem._leading / stroke._renderer.scale.y;
            ctx.font = [elem._style, elem._weight, a + 'px/',
              b + 'px', elem._family].join(' ');

            c = stroke._renderer.offset.x / stroke._renderer.scale.x;
            d = stroke._renderer.offset.y / stroke._renderer.scale.y;
            e = linewidth / stroke._renderer.scale.x;

            ctx.lineWidth = e;
            ctx.strokeText(elem.value, c, d);
            ctx.restore();

          } else {
            ctx.strokeText(elem.value, 0, 0);
          }

        }

        ctx.restore();

      },

      getBoundingClientRect: function(elem, rect) {

        var ctx = webgl.ctx;

        ctx.font = [elem._style, elem._weight, elem._size + 'px/' +
          elem._leading + 'px', elem._family].join(' ');

        ctx.textAlign = 'center';
        ctx.textBaseline = elem._baseline;

        // TODO: Estimate this better
        var width = ctx.measureText(elem._value).width * 1.25;
        var height = Math.max(elem._size, elem._leading) * 1.25;

        if (this._linewidth && !webgl.isHidden.test(this._stroke)) {
          width += this._linewidth * 2;
          height += this._linewidth * 2;
        }

        var w = width / 2;
        var h = height / 2;

        switch (webgl.alignments[elem._alignment] || elem._alignment) {

          case webgl.alignments.left:
            rect.left = 0;
            rect.right = width;
            break;
          case webgl.alignments.right:
            rect.left = - width;
            rect.right = 0;
            break;
          default:
            rect.left = - w;
            rect.right = w;
        }

        // TODO: Gradients aren't inherited...
        switch (elem._baseline) {
          case 'bottom':
            rect.top = - height;
            rect.bottom = 0;
            break;
          case 'top':
            rect.top = 0;
            rect.bottom = height;
            break;
          default:
            rect.top = - h;
            rect.bottom = h;
        }

        rect.width = width;
        rect.height = height;

        if (!rect.centroid) {
          rect.centroid = {};
        }

        // TODO:
        rect.centroid.x = w;
        rect.centroid.y = h;

      },

      render: function(gl, program, forcedParent) {

        if (!this._visible || !this._opacity) {
          return this;
        }

        this._update();

        // Calculate what changed

        var parent = this.parent;
        var flagParentMatrix = parent._matrix.manual || parent._flagMatrix;
        var flagMatrix = this._matrix.manual || this._flagMatrix;
        var flagTexture = this._flagVertices || this._flagFill
          || (this._fill instanceof Two.LinearGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagEndPoints))
          || (this._fill instanceof Two.RadialGradient && (this._fill._flagSpread || this._fill._flagStops || this._fill._flagRadius || this._fill._flagCenter || this._fill._flagFocal))
          || (this._fill instanceof Two.Texture && (this._fill._flagLoaded && this._fill.loaded || this._fill._flagImage || this._fill._flagVideo || this._fill._flagRepeat || this._fill._flagOffset || this._fill._flagScale))
          || (this._stroke instanceof Two.LinearGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagEndPoints))
          || (this._stroke instanceof Two.RadialGradient && (this._stroke._flagSpread || this._stroke._flagStops || this._stroke._flagRadius || this._stroke._flagCenter || this._stroke._flagFocal))
          || (this._stroke instanceof Two.Texture && (this._stroke._flagLoaded && this._stroke.loaded || this._stroke._flagImage || this._stroke._flagVideo || this._stroke._flagRepeat || this._stroke._flagOffset || this._fill._flagScale))
          || this._flagStroke || this._flagLinewidth || this._flagOpacity
          || parent._flagOpacity || this._flagVisible || this._flagScale
          || this._flagValue || this._flagFamily || this._flagSize
          || this._flagLeading || this._flagAlignment || this._flagBaseline
          || this._flagStyle || this._flagWeight || this._flagDecoration
          || (this.dashes && this.dashes.length > 0)
          || !this._renderer.texture;

        if (flagParentMatrix || flagMatrix) {

          if (!this._renderer.matrix) {
            this._renderer.matrix = new Two.Array(9);
          }

          // Reduce amount of object / array creation / deletion

          this._matrix.toTransformArray(true, transformation);

          multiplyMatrix(transformation, parent._renderer.matrix, this._renderer.matrix);

          if (!(this._renderer.scale instanceof Two.Vector)) {
            this._renderer.scale = new Two.Vector();
          }
          if (this._scale instanceof Two.Vector) {
            this._renderer.scale.x = this._scale.x * parent._renderer.scale.x;
            this._renderer.scale.y = this._scale.y * parent._renderer.scale.y;
          } else {
            this._renderer.scale.x = this._scale * parent._renderer.scale.x;
            this._renderer.scale.y = this._scale * parent._renderer.scale.y;
          }

        }

        if (flagTexture) {

          if (!this._renderer.rect) {
            this._renderer.rect = {};
          }

          this._renderer.opacity = this._opacity * parent._renderer.opacity;

          webgl.text.getBoundingClientRect(this, this._renderer.rect);

          webgl.updateTexture.call(webgl, gl, this);

        } else {

          // We still need to update child Two elements on the fill and
          // stroke properties.
          if (this._fill && this._fill._update) {
            this._fill._update();
          }
          if (this._stroke && this._stroke._update) {
            this._stroke._update();
          }

        }

        // if (this._mask) {
        //   webgl[this._mask._renderer.type].render.call(mask, gl, program, this);
        // }

        if (this._clip && !forcedParent) {
          return;
        }

        // Draw Texture
        gl.bindTexture(gl.TEXTURE_2D, this._renderer.texture);

        // Draw Rect
        var rect = this._renderer.rect;
        gl.uniformMatrix3fv(program.matrix, false, this._renderer.matrix);
        gl.uniform4f(program.rect, rect.left, rect.top, rect.right, rect.bottom);
        gl.drawArrays(gl.TRIANGLES, 0, 6);

        return this.flagReset();

      }

    },

    'linear-gradient': {

      render: function(ctx, elem) {

        if (!ctx.canvas.getContext('2d')) {
          return;
        }

        this._update();

        if (!this._renderer.effect || this._flagEndPoints || this._flagStops) {

          this._renderer.effect = ctx.createLinearGradient(
            this.left._x, this.left._y,
            this.right._x, this.right._y
          );

          for (var i = 0; i < this.stops.length; i++) {
            var stop = this.stops[i];
            this._renderer.effect.addColorStop(stop._offset, stop._color);
          }

        }

        return this.flagReset();

      }

    },

    'radial-gradient': {

      render: function(ctx, elem) {

        if (!ctx.canvas.getContext('2d')) {
          return;
        }

        this._update();

        if (!this._renderer.effect || this._flagCenter || this._flagFocal
            || this._flagRadius || this._flagStops) {

          this._renderer.effect = ctx.createRadialGradient(
            this.center._x, this.center._y, 0,
            this.focal._x, this.focal._y, this._radius
          );

          for (var i = 0; i < this.stops.length; i++) {
            var stop = this.stops[i];
            this._renderer.effect.addColorStop(stop._offset, stop._color);
          }

        }

        return this.flagReset();

      }

    },

    texture: {

      render: function(ctx, elem) {

        if (!ctx.canvas.getContext('2d')) {
          return;
        }

        this._update();

        var image = this.image;
        var repeat;

        if (((this._flagLoaded || this._flagImage || this._flagVideo || this._flagRepeat) && this.loaded)) {
          this._renderer.effect = ctx.createPattern(image, this._repeat);
        } else if (!this._renderer.effect) {
          return this.flagReset();
        }

        if (this._flagOffset || this._flagLoaded || this._flagScale) {

          if (!(this._renderer.offset instanceof Two.Vector)) {
            this._renderer.offset = new Two.Vector();
          }

          this._renderer.offset.x = - this._offset.x;
          this._renderer.offset.y = - this._offset.y;

          if (image) {

            this._renderer.offset.x += image.width / 2;
            this._renderer.offset.y += image.height / 2;

            if (this._scale instanceof Two.Vector) {
              this._renderer.offset.x *= this._scale.x;
              this._renderer.offset.y *= this._scale.y;
            } else {
              this._renderer.offset.x *= this._scale;
              this._renderer.offset.y *= this._scale;
            }
          }

        }

        if (this._flagScale || this._flagLoaded) {

          if (!(this._renderer.scale instanceof Two.Vector)) {
            this._renderer.scale = new Two.Vector();
          }

          if (this._scale instanceof Two.Vector) {
            this._renderer.scale.copy(this._scale);
          } else {
            this._renderer.scale.set(this._scale, this._scale);
          }

        }

        return this.flagReset();

      }

    },

    updateTexture: function(gl, elem) {

      this[elem._renderer.type].updateCanvas.call(webgl, elem);

      if (!elem._renderer.texture) {
        elem._renderer.texture = gl.createTexture();
      }

      gl.bindTexture(gl.TEXTURE_2D, elem._renderer.texture);

      // Set the parameters so we can render any size image.
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

      if (this.canvas.width <= 0 || this.canvas.height <= 0) {
        return;
      }

      // Upload the image into the texture.
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.canvas);

    },

    program: {

      create: function(gl, shaders) {
        var program, linked, error;
        program = gl.createProgram();
        _.each(shaders, function(s) {
          gl.attachShader(program, s);
        });

        gl.linkProgram(program);
        linked = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (!linked) {
          error = gl.getProgramInfoLog(program);
          gl.deleteProgram(program);
          throw new Two.Utils.Error('unable to link program: ' + error);
        }

        return program;

      }

    },

    shaders: {

      create: function(gl, source, type) {
        var shader, compiled, error;
        shader = gl.createShader(gl[type]);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);

        compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (!compiled) {
          error = gl.getShaderInfoLog(shader);
          gl.deleteShader(shader);
          throw new Two.Utils.Error('unable to compile shader ' + shader + ': ' + error);
        }

        return shader;

      },

      types: {
        vertex: 'VERTEX_SHADER',
        fragment: 'FRAGMENT_SHADER'
      },

      vertex: [
        'precision mediump float;',
        'attribute vec2 a_position;',
        '',
        'uniform mat3 u_matrix;',
        'uniform vec2 u_resolution;',
        'uniform vec4 u_rect;',
        '',
        'varying vec2 v_textureCoords;',
        '',
        'void main() {',
        '   vec2 rectCoords = (a_position * (u_rect.zw - u_rect.xy)) + u_rect.xy;',
        '   vec2 projected = (u_matrix * vec3(rectCoords, 1.0)).xy;',
        '   vec2 normal = projected / u_resolution;',
        '   vec2 clipspace = (normal * 2.0) - 1.0;',
        '',
        '   gl_Position = vec4(clipspace * vec2(1.0, -1.0), 0.0, 1.0);',
        '   v_textureCoords = a_position;',
        '}'
      ].join('\n'),

      fragment: [
        'precision mediump float;',
        '',
        'uniform sampler2D u_image;',
        'varying vec2 v_textureCoords;',
        '',
        'void main() {',
        '  vec4 texel = texture2D(u_image, v_textureCoords);',
        '  if (texel.a == 0.0) {',
        '    discard;',
        '  }',
        '  gl_FragColor = texel;',
        '}'
      ].join('\n')

    },

    TextureRegistry: new Two.Registry()

  };

  webgl.ctx = webgl.canvas.getContext('2d');

  /**
   * @name Two.WebGLRenderer
   * @class
   * @extends Two.Utils.Events
   * @param {Object} [parameters] - This object is inherited when constructing a new instance of {@link Two}.
   * @param {Element} [parameters.domElement] - The `<canvas />` to draw to. If none given a new one will be constructed.
   * @param {CanvasElement} [parameters.offscreenElement] - The offscreen two dimensional `<canvas />` to render each element on WebGL texture updates.
   * @param {Boolean} [parameters.antialias] - Determines whether the canvas should clear render with antialias on.
   * @description This class is used by {@link Two} when constructing with `type` of `Two.Types.webgl`. It takes Two.js' scenegraph and renders it to a `<canvas />` through the WebGL api.
   * @see {@link https://www.khronos.org/registry/webgl/specs/latest/1.0/}
   */
  var Renderer = Two[Two.Types.webgl] = function(params) {

    var gl, vs, fs;

    /**
     * @name Two.WebGLRenderer#domElement
     * @property {Element} - The `<canvas />` associated with the Two.js scene.
     */
    this.domElement = params.domElement || document.createElement('canvas');

    if (!_.isUndefined(params.offscreenElement)) {
      webgl.canvas = params.offscreenElement;
      webgl.ctx = webgl.canvas.getContext('2d');
    }

    /**
     * @name Two.WebGLRenderer#scene
     * @property {Two.Group} - The root group of the scenegraph.
     */
    this.scene = new Two.Group();
    this.scene.parent = this;

    this._renderer = {
      type: 'renderer',
      matrix: new Two.Array(identity),
      scale: 1,
      opacity: 1
    };
    this._flagMatrix = true;

    // http://games.greggman.com/game/webgl-and-alpha/
    // http://www.khronos.org/registry/webgl/specs/latest/#5.2
    params = _.defaults(params || {}, {
      antialias: false,
      alpha: true,
      premultipliedAlpha: true,
      stencil: true,
      preserveDrawingBuffer: true,
      overdraw: false
    });

    /**
     * @name Two.WebGLRenderer#overdraw
     * @property {Boolean} - Determines whether the canvas clears the background each draw call.
     * @default true
     */
    this.overdraw = params.overdraw;

    /**
     * @name Two.WebGLRenderer#ctx
     * @property {WebGLContext} - Associated two dimensional context to render on the `<canvas />`.
     */
    gl = this.ctx = this.domElement.getContext('webgl', params) ||
      this.domElement.getContext('experimental-webgl', params);

    if (!this.ctx) {
      throw new Two.Utils.Error(
        'unable to create a webgl context. Try using another renderer.');
    }

    // Compile Base Shaders to draw in pixel space.
    vs = webgl.shaders.create(
      gl, webgl.shaders.vertex, webgl.shaders.types.vertex);
    fs = webgl.shaders.create(
      gl, webgl.shaders.fragment, webgl.shaders.types.fragment);

    /**
     * @name Two.WebGLRenderer#program
     * @property {WebGLProgram} - Associated WebGL program to render all elements from the scenegraph.
     */
    this.program = webgl.program.create(gl, [vs, fs]);
    gl.useProgram(this.program);

    // Create and bind the drawing buffer

    // look up where the vertex data needs to go.
    this.program.position = gl.getAttribLocation(this.program, 'a_position');
    this.program.matrix = gl.getUniformLocation(this.program, 'u_matrix');
    this.program.rect = gl.getUniformLocation(this.program, 'u_rect');

    // Bind the vertex buffer
    var positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.vertexAttribPointer(this.program.position, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(this.program.position);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Two.Array([
        0, 0,
        1, 0,
        0, 1,
        0, 1,
        1, 0,
        1, 1
      ]),
      gl.STATIC_DRAW);

    // Setup some initial statements of the gl context
    gl.enable(gl.BLEND);

    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);

    gl.blendEquation(gl.FUNC_ADD);
    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
  };

  _.extend(Renderer, {

    /**
     * @name Two.WebGLRenderer.Utils
     * @property {Object} - A massive object filled with utility functions and properties to render Two.js objects to a `<canvas />` through the WebGL API.
     */
    Utils: webgl

  });

  _.extend(Renderer.prototype, Two.Utils.Events, {

    constructor: Renderer,

    /**
     * @name Two.WebGLRenderer#setSize
     * @function
     * @param {Number} width - The new width of the renderer.
     * @param {Number} height - The new height of the renderer.
     * @param {Number} [ratio] - The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen.
     * @description Change the size of the renderer.
     * @nota-bene Triggers a `Two.Events.resize`.
     */
    setSize: function(width, height, ratio) {

      this.width = width;
      this.height = height;

      this.ratio = _.isUndefined(ratio) ? getRatio(this.ctx) : ratio;

      this.domElement.width = width * this.ratio;
      this.domElement.height = height * this.ratio;

      if (_.isObject(this.domElement.style)) {
        _.extend(this.domElement.style, {
          width: width + 'px',
          height: height + 'px'
        });
      }

      // Set for this.stage parent scaling to account for HDPI
      this._renderer.matrix[0] = this._renderer.matrix[4] = this._renderer.scale = this.ratio;

      this._flagMatrix = true;

      this.ctx.viewport(0, 0, width * this.ratio, height * this.ratio);

      var resolutionLocation = this.ctx.getUniformLocation(
        this.program, 'u_resolution');
      this.ctx.uniform2f(resolutionLocation, width * this.ratio, height * this.ratio);

      return this.trigger(Two.Events.resize, width, height, ratio);

    },

    /**
     * @name Two.WebGLRenderer#render
     * @function
     * @description Render the current scene to the `<canvas />`.
     */
    render: function() {

      var gl = this.ctx;

      if (!this.overdraw) {
        gl.clear(gl.COLOR_BUFFER_BIT);
      }

      webgl.group.render.call(this.scene, gl, this.program);
      this._flagMatrix = false;

      return this;

    }

  });

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var _ = Two.Utils;

  /**
   * @name Two.Shape
   * @class
   * @extends Two.Utils.Events
   * @description The foundational transformation object for the Two.js scenegraph.
   */
  var Shape = Two.Shape = function() {

    /**
     * @name Two.Shape#_renderer
     * @property {Object}
     * @private
     * @description A private object to store relevant renderer specific variables.
     * @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `shape._renderer.elem`.
     */
    this._renderer = {};
    this._renderer.flagMatrix = _.bind(Shape.FlagMatrix, this);
    this.isShape = true;

    /**
     * @name Two.Shape#id
     * @property {String} - Session specific unique identifier.
     * @nota-bene In the {@link Two.SvgRenderer} change this to change the underlying SVG element's id too.
     */
    this.id = Two.Identifier + Two.uniqueId();

    /**
     * @name Two.Shape#classList
     * @property {String[]}
     * @description A list of class strings stored if imported / interpreted  from an SVG element.
     */
    this.classList = [];

    /**
     * @name Two.Shape#matrix
     * @property {Two.Matrix}
     * @description The transformation matrix of the shape.
     * @nota-bene {@link Two.Shape#translation}, {@link Two.Shape#rotation}, and {@link Two.Shape#scale} apply their values to the matrix when changed. The matrix is what is sent to the renderer to be drawn.
     */
    this.matrix = new Two.Matrix();

    /**
     * @name Two.Shape#translation
     * @property {Two.Vector} - The x and y value for where the shape is placed relative to its parent.
     */
    this.translation = new Two.Vector();

    /**
     * @name Two.Shape#rotation
     * @property {Radians} - The value in radians for how much the shape is rotated relative to its parent.
     */
    this.rotation = 0;

    /**
     * @name Two.Shape#scale
     * @property {Number} - The value for how much the shape is scaled relative to its parent.
     * @nota-bene This value can be replaced with a {@link Two.Vector} to do non-uniform scaling. e.g: `shape.scale = new Two.Vector(2, 1);`
     */
    this.scale = 1;

  };

  _.extend(Shape, {

    /**
     * @name Two.Shape.FlagMatrix
     * @function
     * @description Utility function used in conjunction with event handlers to update the flagMatrix of a shape.
     */
    FlagMatrix: function() {
      this._flagMatrix = true;
    },

    /**
     * @name Two.Shape.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Shape} to any object. Handy if you'd like to extend the {@link Two.Shape} class on a custom class.
     */
    MakeObservable: function(object) {

      var translation = {
        enumerable: false,
        get: function() {
          return this._translation;
        },
        set: function(v) {
          if (this._translation) {
            this._translation.unbind(Two.Events.change, this._renderer.flagMatrix);
          }
          this._translation = v;
          this._translation.bind(Two.Events.change, this._renderer.flagMatrix);
          Shape.FlagMatrix.call(this);
        }
      };

      Object.defineProperty(object, 'translation', translation);
      Object.defineProperty(object, 'position', translation);

      Object.defineProperty(object, 'rotation', {
        enumerable: true,
        get: function() {
          return this._rotation;
        },
        set: function(v) {
          this._rotation = v;
          this._flagMatrix = true;
        }
      });

      Object.defineProperty(object, 'scale', {
        enumerable: true,
        get: function() {
          return this._scale;
        },
        set: function(v) {

          if (this._scale instanceof Two.Vector) {
            this._scale.unbind(Two.Events.change, this._renderer.flagMatrix);
          }

          this._scale = v;

          if (this._scale instanceof Two.Vector) {
            this._scale.bind(Two.Events.change, this._renderer.flagMatrix);
          }

          this._flagMatrix = true;
          this._flagScale = true;

        }
      });

      Object.defineProperty(object, 'matrix', {
        enumerable: true,
        get: function() {
          return this._matrix;
        },
        set: function(v) {
          this._matrix = v;
          this._flagMatrix = true;
        }
      });

      Object.defineProperty(object, 'className', {

        enumerable: true,

        get: function() {
          return this._className;
        },

        set: function(v) {

          this._flagClassName  = this._className !== v;

          if (this._flagClassName) {

            var prev = this._className.split(/\s+?/);
            var dest = v.split(/\s+?/);

            for (var i = 0; i < prev.length; i++) {
              var className = prev[i];
              var index = _.indexOf(this.classList, className);
              if (index >= 0) {
                this.classList.splice(index, 1);
              }
            }

            this.classList = this.classList.concat(dest);

          }

          this._className = v;

        }

      });

    }

  });

  _.extend(Shape.prototype, Two.Utils.Events, {

    // Flags

    /**
     * @name Two.Shape#_flagMatrix
     * @private
     * @property {Boolean} - Determines whether the matrix needs updating.
     */
    _flagMatrix: true,

    /**
     * @name Two.Shape#_flagScale
     * @private
     * @property {Boolean} - Determines whether the scale needs updating.
     */
    _flagScale: false,

    // _flagMask: false,
    // _flagClip: false,

    /**
     * @name Two.Shape#_flagClassName
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#className} need updating.
     */
    _flagClassName: false,

    // Underlying Properties

    /**
     * @name Two.Shape#_translation
     * @private
     * @property {Two.Vector} - The translation values as a {@link Two.Vector}.
     */
    _translation: null,

    /**
     * @name Two.Shape#_rotation
     * @private
     * @property {Radians} - The rotation value in radians.
     */
    _rotation: 0,

    /**
     * @name Two.Shape#_translation
     * @private
     * @property {Two.Vector} - The translation values as a {@link Two.Vector}.
     */
    _scale: 1,

    // _mask: null,
    // _clip: false,

    /**
     * @name Two.Group#className
     * @property {String} - A class to be applied to the element to be compatible with CSS styling.
     * @nota-bene Only available for the SVG renderer.
     */
    _className: '',

    constructor: Shape,

    /**
     * @name Two.Shape#addTo
     * @function
     * @param {Two.Group} group - The parent the shape adds itself to.
     * @description Convenience method to add itself to the scenegraph.
     */
    addTo: function(group) {
      group.add(this);
      return this;
    },

    /**
     * @name Two.Shape#clone
     * @function
     * @param {Two.Group} [parent] - Optional argument to automatically add the shape to a scenegraph.
     * @returns {Two.Shape}
     * @description Create a new {@link Two.Shape} with the same values as the current shape.
     */
    clone: function(parent) {

      var clone = new Shape();

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      if (parent) {
        parent.add(clone);
      }

      return clone._update();

    },

    /**
     * @name Two.Shape#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function(bubbles) {

      if (!this._matrix.manual && this._flagMatrix) {

        this._matrix
          .identity()
          .translate(this.translation.x, this.translation.y);

          if (this._scale instanceof Two.Vector) {
            this._matrix.scale(this._scale.x, this._scale.y);
          } else {
            this._matrix.scale(this._scale);
          }

          this._matrix.rotate(this.rotation);

      }

      if (bubbles) {
        if (this.parent && this.parent._update) {
          this.parent._update();
        }
      }

      return this;

    },

    /**
     * @name Two.Shape#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagMatrix = this._flagScale = this._flagClassName = false;

      return this;

    }

  });

  Shape.MakeObservable(Shape.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  // Constants

  var min = Math.min, max = Math.max, round = Math.round,
    ceil = Math.ceil, floor = Math.floor,
    getComputedMatrix = Two.Utils.getComputedMatrix;

  var commands = {};
  var _ = Two.Utils;

  _.each(Two.Commands, function(v, k) {
    commands[k] = new RegExp(v);
  });

  /**
   * @name Two.Path
   * @class
   * @extends Two.Shape
   * @param {Two.Anchor[]} [vertices] - A list of {@link Two.Anchor}s that represent the order and coordinates to construct the rendered shape.
   * @param {Boolean} [closed=false] - Describes whether the shape is closed or open.
   * @param {Boolean} [curved=false] - Describes whether the shape automatically calculates bezier handles for each vertex.
   * @param {Boolean} [manual=false] - Describes whether the developer controls how vertices are plotted or if Two.js automatically plots coordinates based on closed and curved booleans.
   * @description This is the primary primitive class for creating all drawable shapes in Two.js. Unless specified methods return their instance of `Two.Path` for the purpose of chaining.
   */
  var Path = Two.Path = function(vertices, closed, curved, manual) {

    Two.Shape.call(this);

    this._renderer.type = 'path';
    this._renderer.flagVertices = _.bind(Path.FlagVertices, this);
    this._renderer.bindVertices = _.bind(Path.BindVertices, this);
    this._renderer.unbindVertices = _.bind(Path.UnbindVertices, this);

    this._renderer.flagFill = _.bind(Path.FlagFill, this);
    this._renderer.flagStroke = _.bind(Path.FlagStroke, this);
    this._renderer.vertices = [];
    this._renderer.collection = [];

    /**
     * @name Two.Path#closed
     * @property {Boolean} - Determines whether a final line is drawn between the final point in the `vertices` array and the first point.
     */
    this._closed = !!closed;

    /**
     * @name Two.Path#curved
     * @property {Boolean} - When the path is `automatic = true` this boolean determines whether the lines between the points are curved or not.
     */
    this._curved = !!curved;

    /**
     * @name Two.Path#beginning
     * @property {Number} - Number between zero and one to state the beginning of where the path is rendered.
     * @description {@link Two.Path#beginning} is a percentage value that represents at what percentage into the path should the renderer start drawing.
     * @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Path#ending}.
     */
    this.beginning = 0;

    /**
     * @name Two.Path#ending
     * @property {Number} - Number between zero and one to state the ending of where the path is rendered.
     * @description {@link Two.Path#ending} is a percentage value that represents at what percentage into the path should the renderer start drawing.
     * @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Path#beginning}.
     */
    this.ending = 1;

    // Style properties

    /**
     * @name Two.Path#fill
     * @property {(CssColor|Two.Gradient|Two.Texture)} - The value of what the path should be filled in with.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS Colors.
     */
    this.fill = '#fff';

    /**
     * @name Two.Path#stroke
     * @property {(CssColor|Two.Gradient|Two.Texture)} - The value of what the path should be outlined in with.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS Colors.
     */
    this.stroke = '#000';

    /**
     * @name Two.Path#linewidth
     * @property {Number} - The thickness in pixels of the stroke.
     */
    this.linewidth = 1.0;

    /**
     * @name Two.Path#opacity
     * @property {Number} - The opaqueness of the path.
     * @nota-bene Can be used in conjunction with CSS Colors that have an alpha value.
     */
    this.opacity = 1.0;

    /**
     * @name Two.Path#className
     * @property {String} - A class to be applied to the element to be compatible with CSS styling.
     * @nota-bene Only available for the SVG renderer.
     */
    this.className = '';

    /**
     * @name Two.Path#visible
     * @property {Boolean} - Display the path or not.
     * @nota-bene For {@link Two.CanvasRenderer} and {@link Two.WebGLRenderer} when set to false all updating is disabled improving performance dramatically with many objects in the scene.
     */
    this.visible = true;

    /**
     * @name Two.Path#cap
     * @property {String}
     * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty}
     */
    this.cap = 'butt';      // Default of Adobe Illustrator

    /**
     * @name Two.Path#join
     * @property {String}
     * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty}
     */
    this.join = 'miter';    // Default of Adobe Illustrator

    /**
     * @name Two.Path#miter
     * @property {String}
     * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty}
     */
    this.miter = 4;         // Default of Adobe Illustrator

    /**
     * @name Two.Path#vertices
     * @property {Two.Anchor[]} - An ordered list of anchor points for rendering the path.
     * @description A list of {@link Two.Anchor} objects that consist of what form the path takes.
     * @nota-bene The array when manipulating is actually a {@link Two.Utils.Collection}.
     */
    this.vertices = vertices;

    /**
     * @name Two.Path#automatic
     * @property {Boolean} - Determines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.
     */
    this.automatic = !manual;

    /**
     * @name Two.Path#dashes
     * @property {Number[]} - Array of numbers. Odd indices represent dash length. Even indices represent dash space.
     * @description A list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray} for more information on the SVG stroke-dasharray attribute.
     */
    this.dashes = [];

    /**
     * @name Two.Path#dashes#offset
     * @property {Number} - A number in pixels to offset {@link Two.Path#dashes} display.
     */
    this.dashes.offset = 0;

  };

  _.extend(Path, {

    /**
     * @name Two.Path.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Path}.
     */
    Properties: [
      'fill',
      'stroke',
      'linewidth',
      'opacity',
      'visible',
      'cap',
      'join',
      'miter',

      'closed',
      'curved',
      'automatic',
      'beginning',
      'ending'
    ],

    Utils: {
      getCurveLength: getCurveLength
    },

    /**
     * @name Two.Path.FlagVertices
     * @function
     * @description Cached method to let renderers know vertices have been updated on a {@link Two.Path}.
     */
    FlagVertices: function() {
      this._flagVertices = true;
      this._flagLength = true;
      if (this.parent) {
        this.parent._flagLength = true;
      }
    },

    /**
     * @name Two.Path.BindVertices
     * @function
     * @description Cached method to let {@link Two.Path} know vertices have been added to the instance.
     */
    BindVertices: function(items) {

      // This function is called a lot
      // when importing a large SVG
      var i = items.length;
      while (i--) {
        items[i].bind(Two.Events.change, this._renderer.flagVertices);
      }

      this._renderer.flagVertices();

    },

    /**
     * @name Two.Path.UnbindVertices
     * @function
     * @description Cached method to let {@link Two.Path} know vertices have been removed from the instance.
     */
    UnbindVertices: function(items) {

      var i = items.length;
      while (i--) {
        items[i].unbind(Two.Events.change, this._renderer.flagVertices);
      }

      this._renderer.flagVertices();

    },

    /**
     * @name Two.Path.FlagFill
     * @function
     * @description Cached method to let {@link Two.Path} know the fill has changed.
     */
    FlagFill: function() {
      this._flagFill = true;
    },

    /**
     * @name Two.Path.FlagFill
     * @function
     * @description Cached method to let {@link Two.Path} know the stroke has changed.
     */
    FlagStroke: function() {
      this._flagStroke = true;
    },

    /**
     * @name Two.Path.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Path} to any object. Handy if you'd like to extend the {@link Two.Path} class on a custom class.
     */
    MakeObservable: function(object) {

      Two.Shape.MakeObservable(object);

      // Only the 7 defined properties are flagged like this. The subsequent
      // properties behave differently and need to be hand written.
      _.each(Path.Properties.slice(2, 8), Two.Utils.defineProperty, object);

      Object.defineProperty(object, 'fill', {
        enumerable: true,
        get: function() {
          return this._fill;
        },
        set: function(f) {

          if (this._fill instanceof Two.Gradient
            || this._fill instanceof Two.LinearGradient
            || this._fill instanceof Two.RadialGradient
            || this._fill instanceof Two.Texture) {
            this._fill.unbind(Two.Events.change, this._renderer.flagFill);
          }

          this._fill = f;
          this._flagFill = true;

          if (this._fill instanceof Two.Gradient
            || this._fill instanceof Two.LinearGradient
            || this._fill instanceof Two.RadialGradient
            || this._fill instanceof Two.Texture) {
            this._fill.bind(Two.Events.change, this._renderer.flagFill);
          }

        }
      });

      Object.defineProperty(object, 'stroke', {
        enumerable: true,
        get: function() {
          return this._stroke;
        },
        set: function(f) {

          if (this._stroke instanceof Two.Gradient
            || this._stroke instanceof Two.LinearGradient
            || this._stroke instanceof Two.RadialGradient
            || this._stroke instanceof Two.Texture) {
            this._stroke.unbind(Two.Events.change, this._renderer.flagStroke);
          }

          this._stroke = f;
          this._flagStroke = true;

          if (this._stroke instanceof Two.Gradient
            || this._stroke instanceof Two.LinearGradient
            || this._stroke instanceof Two.RadialGradient
            || this._stroke instanceof Two.Texture) {
            this._stroke.bind(Two.Events.change, this._renderer.flagStroke);
          }

        }
      });

      /**
       * @name Two.Path#length
       * @property {Number} - The sum of distances between all {@link Two.Path#vertices}.
       */
      Object.defineProperty(object, 'length', {
        get: function() {
          if (this._flagLength) {
            this._updateLength();
          }
          return this._length;
        }
      });

      Object.defineProperty(object, 'closed', {
        enumerable: true,
        get: function() {
          return this._closed;
        },
        set: function(v) {
          this._closed = !!v;
          this._flagVertices = true;
        }
      });

      Object.defineProperty(object, 'curved', {
        enumerable: true,
        get: function() {
          return this._curved;
        },
        set: function(v) {
          this._curved = !!v;
          this._flagVertices = true;
        }
      });

      Object.defineProperty(object, 'automatic', {
        enumerable: true,
        get: function() {
          return this._automatic;
        },
        set: function(v) {
          if (v === this._automatic) {
            return;
          }
          this._automatic = !!v;
          var method = this._automatic ? 'ignore' : 'listen';
          _.each(this.vertices, function(v) {
            v[method]();
          });
        }
      });

      Object.defineProperty(object, 'beginning', {
        enumerable: true,
        get: function() {
          return this._beginning;
        },
        set: function(v) {
          this._beginning = v;
          this._flagVertices = true;
        }
      });

      Object.defineProperty(object, 'ending', {
        enumerable: true,
        get: function() {
          return this._ending;
        },
        set: function(v) {
          this._ending = v;
          this._flagVertices = true;
        }
      });

      Object.defineProperty(object, 'vertices', {

        enumerable: true,

        get: function() {
          return this._collection;
        },

        set: function(vertices) {

          var updateVertices = this._renderer.flagVertices;
          var bindVertices = this._renderer.bindVertices;
          var unbindVertices = this._renderer.unbindVertices;

          // Remove previous listeners
          if (this._collection) {
            this._collection
              .unbind(Two.Events.insert, bindVertices)
              .unbind(Two.Events.remove, unbindVertices);
          }

          // Create new Collection with copy of vertices
          if (vertices instanceof Two.Utils.Collection) {
            this._collection = vertices;
          } else {
            this._collection = new Two.Utils.Collection(vertices || []);
          }

          // Listen for Collection changes and bind / unbind
          this._collection
            .bind(Two.Events.insert, bindVertices)
            .bind(Two.Events.remove, unbindVertices);

          // Bind Initial Vertices
          bindVertices(this._collection);

        }

      });

      /**
       * @name Two.Path#clip
       * @property {Two.Shape} - Object to define clipping area.
       * @nota-bene This property is currently not working becuase of SVG spec issues found here {@link https://code.google.com/p/chromium/issues/detail?id=370951}.
       */
      Object.defineProperty(object, 'clip', {
        enumerable: true,
        get: function() {
          return this._clip;
        },
        set: function(v) {
          this._clip = v;
          this._flagClip = true;
        }
      });

      Object.defineProperty(object, 'dashes', {
        enumerable: true,
        get: function() {
          return this._dashes;
        },
        set: function(v) {
          if (!_.isNumber(v.offset)) {
            v.offset = this._dashes.offset || 0;
          }
          this._dashes = v;
        }
      });

    }

  });

  _.extend(Path.prototype, Two.Shape.prototype, {

    // Flags
    // http://en.wikipedia.org/wiki/Flag

    /**
     * @name Two.Path#_flagVertices
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#vertices} need updating.
     */
    _flagVertices: true,

    /**
     * @name Two.Path#_flagLength
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#length} needs updating.
     */
    _flagLength: true,

    /**
     * @name Two.Path#_flagFill
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#fill} needs updating.
     */
    _flagFill: true,

    /**
     * @name Two.Path#_flagStroke
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#stroke} needs updating.
     */
    _flagStroke: true,

    /**
     * @name Two.Path#_flagLinewidth
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#linewidth} needs updating.
     */
    _flagLinewidth: true,

    /**
     * @name Two.Path#_flagOpacity
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#opacity} needs updating.
     */
    _flagOpacity: true,

    /**
     * @name Two.Path#_flagVisible
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#visible} needs updating.
     */
    _flagVisible: true,

    /**
     * @name Two.Path#_flagCap
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#cap} needs updating.
     */
    _flagCap: true,

    /**
     * @name Two.Path#_flagJoin
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#join} needs updating.
     */
    _flagJoin: true,

    /**
     * @name Two.Path#_flagMiter
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#miter} needs updating.
     */
    _flagMiter: true,

    /**
     * @name Two.Path#_flagClip
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Path#clip} needs updating.
     */
    _flagClip: false,

    // Underlying Properties

    /**
     * @name Two.Path#_length
     * @private
     * @see {@link Two.Path#length}
     */
    _length: 0,

    /**
     * @name Two.Path#_fill
     * @private
     * @see {@link Two.Path#fill}
     */
    _fill: '#fff',

    /**
     * @name Two.Path#_stroke
     * @private
     * @see {@link Two.Path#stroke}
     */
    _stroke: '#000',

    /**
     * @name Two.Path#_linewidth
     * @private
     * @see {@link Two.Path#linewidth}
     */
    _linewidth: 1.0,

    /**
     * @name Two.Path#_opacity
     * @private
     * @see {@link Two.Path#opacity}
     */
    _opacity: 1.0,

    /**
     * @name Two.Path#_visible
     * @private
     * @see {@link Two.Path#visible}
     */
    _visible: true,

    /**
     * @name Two.Path#_cap
     * @private
     * @see {@link Two.Path#cap}
     */
    _cap: 'round',

    /**
     * @name Two.Path#_join
     * @private
     * @see {@link Two.Path#join}
     */
    _join: 'round',

    /**
     * @name Two.Path#_miter
     * @private
     * @see {@link Two.Path#miter}
     */
    _miter: 4,

    /**
     * @name Two.Path#_closed
     * @private
     * @see {@link Two.Path#closed}
     */
    _closed: true,

    /**
     * @name Two.Path#_curved
     * @private
     * @see {@link Two.Path#curved}
     */
    _curved: false,

    /**
     * @name Two.Path#_automatic
     * @private
     * @see {@link Two.Path#automatic}
     */
    _automatic: true,

    /**
     * @name Two.Path#_beginning
     * @private
     * @see {@link Two.Path#beginning}
     */
    _beginning: 0,

    /**
     * @name Two.Path#_ending
     * @private
     * @see {@link Two.Path#ending}
     */
    _ending: 1.0,

    /**
     * @name Two.Path#_clip
     * @private
     * @see {@link Two.Path#clip}
     */
    _clip: false,

    /**
     * @name Two.Path#_dashes
     * @private
     * @see {@link Two.Path#dashes}
     */
    _dashes: [],

    constructor: Path,

    /**
     * @name Two.Path#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Path}
     * @description Create a new instance of {@link Two.Path} with the same properties of the current path.
     */
    clone: function(parent) {

      var clone = new Path();

      for (var j = 0; j < this.vertices.length; j++) {
        clone.vertices.push(this.vertices[j].clone());
      }

      for (var i = 0; i < Path.Properties.length; i++) {
        var k = Path.Properties[i];
        clone[k] = this[k];
      }

      clone.className = this.className;

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      if (parent) {
        parent.add(clone);
      }

      return clone._update();

    },

    /**
     * @name Two.Path#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var result = {
        vertices: _.map(this.vertices, function(v) {
          return v.toObject();
        })
      };

      _.each(Two.Shape.Properties, function(k) {
        result[k] = this[k];
      }, this);

      result.className = this.className;

      result.translation = this.translation.toObject();
      result.rotation = this.rotation;
      result.scale = this.scale instanceof Two.Vector ? this.scale.toObject() : this.scale;

      if (this.matrix.manual) {
        result.matrix = this.matrix.toObject();
      }

      return result;

    },

    /**
     * @name Two.Path#noFill
     * @function
     * @description Short hand method to set fill to `transparent`.
     */
    noFill: function() {
      this.fill = 'transparent';
      return this;
    },

    /**
     * @name Two.Path#noStroke
     * @function
     * @description Short hand method to set stroke to `transparent`.
     */
    noStroke: function() {
      this.stroke = undefined;
      return this;
    },

    /**
     * @name Two.Path#corner
     * @function
     * @description Orient the vertices of the shape to the upper left-hand corner of the path.
     */
    corner: function() {

      var rect = this.getBoundingClientRect(true);

      rect.centroid = {
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2
      };

      _.each(this.vertices, function(v) {
        v.subSelf(rect.centroid);
        v.x += rect.width / 2;
        v.y += rect.height / 2;
      });

      return this;

    },

    /**
     * @name Two.Path#center
     * @function
     * @description Orient the vertices of the shape to the center of the path.
     */
    center: function() {

      var rect = this.getBoundingClientRect(true);

      rect.centroid = {
        x: rect.left + rect.width / 2 - this.translation.x,
        y: rect.top + rect.height / 2 - this.translation.y
      };

      _.each(this.vertices, function(v) {
        v.subSelf(rect.centroid);
      });

      return this;

    },

    /**
     * @name Two.Path#remove
     * @function
     * @description Remove self from the scene / parent.
     */
    remove: function() {

      if (!this.parent) {
        return this;
      }

      this.parent.remove(this);

      return this;

    },

    /**
     * @name Two.Path#getBoundingClientRect
     * @function
     * @param {Boolean} [shallow=false] - Describes whether to calculate off local matrix or world matrix.
     * @returns {Object} - Returns object with top, left, right, bottom, width, height attributes.
     * @description Return an object with top, left, right, bottom, width, and height parameters of the path.
     */
    getBoundingClientRect: function(shallow) {
      var matrix, border, l, x, y, i, v0, c0, c1, v1;

      var left = Infinity, right = -Infinity,
          top = Infinity, bottom = -Infinity;

      // TODO: Update this to not __always__ update. Just when it needs to.
      this._update(true);

      matrix = shallow ? this._matrix : getComputedMatrix(this);

      border = this.linewidth / 2;
      l = this._renderer.vertices.length;

      if (l <= 0) {
        return {
          width: 0,
          height: 0
        };
      }

      for (i = 0; i < l; i++) {

        v1 = this._renderer.vertices[i];
        // If i = 0, then this "wraps around" to the last vertex. Otherwise, it's the previous vertex.
        // This is important for handling cyclic paths.
        v0 = this._renderer.vertices[(i + l - 1) % l];

        if (v0.controls && v1.controls) {

          if (v0.relative) {
            c0 = matrix.multiply(
              v0.controls.right.x + v0.x, v0.controls.right.y + v0.y, 1);
          } else {
            c0 = matrix.multiply(
              v0.controls.right.x, v0.controls.right.y, 1);
          }
          v0 = matrix.multiply(v0.x, v0.y, 1);

          if (v1.relative) {
            c1 = matrix.multiply(
              v1.controls.left.x + v1.x, v1.controls.left.y + v1.y, 1);
          } else {
            c1 = matrix.multiply(
              v1.controls.left.x, v1.controls.left.y, 1);
          }
          v1 = matrix.multiply(v1.x, v1.y, 1);

          var bb = Two.Utils.getCurveBoundingBox(
            v0.x, v0.y, c0.x, c0.y, c1.x, c1.y, v1.x, v1.y);

          top = min(bb.min.y - border, top);
          left = min(bb.min.x - border, left);
          right = max(bb.max.x + border, right);
          bottom = max(bb.max.y + border, bottom);

        } else {

          if (i <= 1) {

            v0 = matrix.multiply(v0.x, v0.y, 1);

            top = min(v0.y - border, top);
            left = min(v0.x - border, left);
            right = max(v0.x + border, right);
            bottom = max(v0.y + border, bottom);

          }

          v1 = matrix.multiply(v1.x, v1.y, 1);

          top = min(v1.y - border, top);
          left = min(v1.x - border, left);
          right = max(v1.x + border, right);
          bottom = max(v1.y + border, bottom);

        }

      }

      return {
        top: top,
        left: left,
        right: right,
        bottom: bottom,
        width: right - left,
        height: bottom - top
      };

    },

    /**
     * @name Two.Path#getPointAt
     * @function
     * @param {Boolean} t - Percentage value describing where on the Two.Path to estimate and assign coordinate values.
     * @param {Two.Vector} [obj=undefined] - Object to apply calculated x, y to. If none available returns new Object.
     * @returns {Object}
     * @description Given a float `t` from 0 to 1, return a point or assign a passed `obj`'s coordinates to that percentage on this Two.Path's curve.
     */
    getPointAt: function(t, obj) {

      var ia, ib, result;
      var x, x1, x2, x3, x4, y, y1, y2, y3, y4, left, right;
      var target = this.length * Math.min(Math.max(t, 0), 1);
      var length = this.vertices.length;
      var last = length - 1;

      var a = null;
      var b = null;

      for (var i = 0, l = this._lengths.length, sum = 0; i < l; i++) {

        if (sum + this._lengths[i] >= target) {

          if (this._closed) {
            ia = Two.Utils.mod(i, length);
            ib = Two.Utils.mod(i - 1, length);
            if (i === 0) {
              ia = ib;
              ib = i;
            }
          } else {
            ia = i;
            ib = Math.min(Math.max(i - 1, 0), last);
          }

          a = this.vertices[ia];
          b = this.vertices[ib];
          target -= sum;
          if (this._lengths[i] !== 0) {
            t = target / this._lengths[i];
          } else {
            t = 0;
          }

          break;

        }

        sum += this._lengths[i];

      }

      if (_.isNull(a) || _.isNull(b)) {
        return null;
      }

      if (!a) {
        return b;
      } else if (!b) {
        return a;
      }

      right = b.controls && b.controls.right;
      left = a.controls && a.controls.left;

      x1 = b.x;
      y1 = b.y;
      x2 = (right || b).x;
      y2 = (right || b).y;
      x3 = (left || a).x;
      y3 = (left || a).y;
      x4 = a.x;
      y4 = a.y;

      if (right && b.relative) {
        x2 += b.x;
        y2 += b.y;
      }

      if (left && a.relative) {
        x3 += a.x;
        y3 += a.y;
      }

      x = Two.Utils.getComponentOnCubicBezier(t, x1, x2, x3, x4);
      y = Two.Utils.getComponentOnCubicBezier(t, y1, y2, y3, y4);

      // Higher order points for control calculation.
      var t1x = Two.Utils.lerp(x1, x2, t);
      var t1y = Two.Utils.lerp(y1, y2, t);
      var t2x = Two.Utils.lerp(x2, x3, t);
      var t2y = Two.Utils.lerp(y2, y3, t);
      var t3x = Two.Utils.lerp(x3, x4, t);
      var t3y = Two.Utils.lerp(y3, y4, t);

      // Calculate the returned points control points.
      var brx = Two.Utils.lerp(t1x, t2x, t);
      var bry = Two.Utils.lerp(t1y, t2y, t);
      var alx = Two.Utils.lerp(t2x, t3x, t);
      var aly = Two.Utils.lerp(t2y, t3y, t);

      if (_.isObject(obj)) {

        obj.x = x;
        obj.y = y;

        if (!_.isObject(obj.controls)) {
          Two.Anchor.AppendCurveProperties(obj);
        }

        obj.controls.left.x = brx;
        obj.controls.left.y = bry;
        obj.controls.right.x = alx;
        obj.controls.right.y = aly;

        if (!_.isBoolean(obj.relative) || obj.relative) {
          obj.controls.left.x -= x;
          obj.controls.left.y -= y;
          obj.controls.right.x -= x;
          obj.controls.right.y -= y;
        }

        obj.t = t;

        return obj;

      }

      result = new Two.Anchor(
        x, y, brx - x, bry - y, alx - x, aly - y,
        this._curved ? Two.Commands.curve : Two.Commands.line
      );

      result.t = t;

      return result;

    },

    /**
     * @name Two.Path#plot
     * @function
     * @description Based on closed / curved and sorting of vertices plot where all points should be and where the respective handles should be too.
     * @nota-bene While this method is public it is internally called by {@link Two.Path#_update} when `automatic = true`.
     */
    plot: function() {

      if (this.curved) {
        Two.Utils.getCurveFromPoints(this._collection, this.closed);
        return this;
      }

      for (var i = 0; i < this._collection.length; i++) {
        this._collection[i].command = i === 0 ? Two.Commands.move : Two.Commands.line;
      }

      return this;

    },

    /**
     * @name Two.Path#subdivide
     * @function
     * @param {Integer} limit - How many times to recurse subdivisions.
     * @description Insert a {@link Two.Anchor} at the midpoint between every item in {@link Two.Path#vertices}.
     */
    subdivide: function(limit) {
      //TODO: DRYness (function below)
      this._update();

      var last = this.vertices.length - 1;
      var b = this.vertices[last];
      var closed = this._closed || this.vertices[last]._command === Two.Commands.close;
      var points = [];
      _.each(this.vertices, function(a, i) {

        if (i <= 0 && !closed) {
          b = a;
          return;
        }

        if (a.command === Two.Commands.move) {
          points.push(new Two.Anchor(b.x, b.y));
          if (i > 0) {
            points[points.length - 1].command = Two.Commands.line;
          }
          b = a;
          return;
        }

        var verts = getSubdivisions(a, b, limit);
        points = points.concat(verts);

        // Assign commands to all the verts
        _.each(verts, function(v, i) {
          if (i <= 0 && b.command === Two.Commands.move) {
            v.command = Two.Commands.move;
          } else {
            v.command = Two.Commands.line;
          }
        });

        if (i >= last) {

          // TODO: Add check if the two vectors in question are the same values.
          if (this._closed && this._automatic) {

            b = a;

            verts = getSubdivisions(a, b, limit);
            points = points.concat(verts);

            // Assign commands to all the verts
            _.each(verts, function(v, i) {
              if (i <= 0 && b.command === Two.Commands.move) {
                v.command = Two.Commands.move;
              } else {
                v.command = Two.Commands.line;
              }
            });

          } else if (closed) {
            points.push(new Two.Anchor(a.x, a.y));
          }

          points[points.length - 1].command = closed
            ? Two.Commands.close : Two.Commands.line;

        }

        b = a;

      }, this);

      this._automatic = false;
      this._curved = false;
      this.vertices = points;

      return this;

    },

    /**
     * @name Two.Path#_updateLength
     * @function
     * @private
     * @param {Integer} [limit=] -
     * @param {Boolean} [silent=false] - If set to `true` then the path isn't updated before calculation. Useful for internal use.
     * @description Recalculate the {@link Two.Path#length} value.
     */
    _updateLength: function(limit, silent) {
      //TODO: DRYness (function above)
      if (!silent) {
        this._update();
      }

      var length = this.vertices.length;
      var last = length - 1;
      var b = this.vertices[last];
      var closed = false;//this._closed || this.vertices[last]._command === Two.Commands.close;
      var sum = 0;

      if (_.isUndefined(this._lengths)) {
        this._lengths = [];
      }

      _.each(this.vertices, function(a, i) {

        if ((i <= 0 && !closed) || a.command === Two.Commands.move) {
          b = a;
          this._lengths[i] = 0;
          return;
        }

        this._lengths[i] = getCurveLength(a, b, limit);
        sum += this._lengths[i];

        if (i >= last && closed) {

          b = this.vertices[(i + 1) % length];

          this._lengths[i + 1] = getCurveLength(a, b, limit);
          sum += this._lengths[i + 1];

        }

        b = a;

      }, this);

      this._length = sum;
      this._flagLength = false;

      return this;

    },

    /**
     * @name Two.Path#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagVertices) {

        if (this._automatic) {
          this.plot();
        }

        if (this._flagLength) {
          this._updateLength(undefined, true);
        }

        var l = this._collection.length;
        var last = l - 1;
        var closed = this._closed;

        var beginning = Math.min(this._beginning, this._ending);
        var ending = Math.max(this._beginning, this._ending);

        var bid = getIdByLength(this, beginning * this._length);
        var eid = getIdByLength(this, ending * this._length);

        var low = ceil(bid);
        var high = floor(eid);

        var left, right, prev, next, v;

        this._renderer.vertices.length = 0;

        for (var i = 0; i < l; i++) {

          if (this._renderer.collection.length <= i) {
            // Expected to be `relative` anchor points.
            this._renderer.collection.push(new Two.Anchor());
          }

          if (i > high && !right) {

            v = this._renderer.collection[i];
            v.copy(this._collection[i]);
            this.getPointAt(ending, v);
            v.command = this._renderer.collection[i].command;
            this._renderer.vertices.push(v);

            right = v;
            prev = this._collection[i - 1];

            // Project control over the percentage `t`
            // of the in-between point
            if (prev && prev.controls) {

              v.controls.right.clear();

              this._renderer.collection[i - 1].controls.right
                .clear()
                .lerp(prev.controls.right, v.t);

            }

          } else if (i >= low && i <= high) {

            v = this._renderer.collection[i]
              .copy(this._collection[i]);
            this._renderer.vertices.push(v);

            if (i === high && contains(this, ending)) {
              right = v;
              if (!closed && right.controls) {
                right.controls.right.clear();
              }
            } else if (i === low && contains(this, beginning)) {
              left = v;
              left.command = Two.Commands.move;
              if (!closed && left.controls) {
                left.controls.left.clear();
              }
            }

          }

        }

        // Prepend the trimmed point if necessary.
        if (low > 0 && !left) {

          i = low - 1;

          v = this._renderer.collection[i];
          v.copy(this._collection[i]);
          this.getPointAt(beginning, v);
          v.command = Two.Commands.move;
          this._renderer.vertices.unshift(v);

          left = v;
          next = this._collection[i + 1];

          // Project control over the percentage `t`
          // of the in-between point
          if (next && next.controls) {

            v.controls.left.clear();

            this._renderer.collection[i + 1].controls.left
              .copy(next.controls.left)
              .lerp(Two.Vector.zero, v.t);

          }

        }

      }

      Two.Shape.prototype._update.apply(this, arguments);

      return this;

    },

    /**
     * @name Two.Path#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagVertices =  this._flagFill =  this._flagStroke =
         this._flagLinewidth = this._flagOpacity = this._flagVisible =
         this._flagCap = this._flagJoin = this._flagMiter =
         this._flagClip = false;

      Two.Shape.prototype.flagReset.call(this);

      return this;

    }

  });

  Path.MakeObservable(Path.prototype);

   // Utility functions

  function contains(path, t) {

    if (t === 0 || t === 1) {
      return true;
    }

    var length = path._length;
    var target = length * t;
    var elapsed = 0;

    for (var i = 0; i < path._lengths.length; i++) {
      var dist = path._lengths[i];
      if (elapsed >= target) {
        return target - elapsed >= 0;
      }
      elapsed += dist;
    }

    return false;

  }

  /**
   * @protected
   * @param {Two.Path} path - The path to analyze against.
   * @param {Number} target - The target length at which to find an anchor.
   * @returns {Integer}
   * @description Return the id of an anchor based on a target length.
   */
  function getIdByLength(path, target) {

    var total = path._length;

    if (target <= 0) {
      return 0;
    } else if (target >= total) {
      return path._lengths.length - 1;
    }

    for (var i = 0, sum = 0; i < path._lengths.length; i++) {

      if (sum + path._lengths[i] >= target) {
        target -= sum;
        return Math.max(i - 1, 0) + target / path._lengths[i];
      }

      sum += path._lengths[i];

    }

    return - 1;

  }

  function getCurveLength(a, b, limit) {
    // TODO: DRYness
    var x1, x2, x3, x4, y1, y2, y3, y4;

    var right = b.controls && b.controls.right;
    var left = a.controls && a.controls.left;

    x1 = b.x;
    y1 = b.y;
    x2 = (right || b).x;
    y2 = (right || b).y;
    x3 = (left || a).x;
    y3 = (left || a).y;
    x4 = a.x;
    y4 = a.y;

    if (right && b._relative) {
      x2 += b.x;
      y2 += b.y;
    }

    if (left && a._relative) {
      x3 += a.x;
      y3 += a.y;
    }

    return Two.Utils.getCurveLength(x1, y1, x2, y2, x3, y3, x4, y4, limit);

  }

  function getSubdivisions(a, b, limit) {
    // TODO: DRYness
    var x1, x2, x3, x4, y1, y2, y3, y4;

    var right = b.controls && b.controls.right;
    var left = a.controls && a.controls.left;

    x1 = b.x;
    y1 = b.y;
    x2 = (right || b).x;
    y2 = (right || b).y;
    x3 = (left || a).x;
    y3 = (left || a).y;
    x4 = a.x;
    y4 = a.y;

    if (right && b._relative) {
      x2 += b.x;
      y2 += b.y;
    }

    if (left && a._relative) {
      x3 += a.x;
      y3 += a.y;
    }

    return Two.Utils.subdivide(x1, y1, x2, y2, x3, y3, x4, y4, limit);

  }

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var Path = Two.Path;
  var _ = Two.Utils;

  /**
   * @name Two.Line
   * @class
   * @extends Two.Path
   * @param {Number} [x1=0] - The x position of the first vertex on the line.
   * @param {Number} [y1=0] - The y position of the first vertex on the line.
   * @param {Number} [x2=0] - The x position of the second vertex on the line.
   * @param {Number} [y2=0] - The y position of the second vertex on the line.
   */
  var Line = Two.Line = function(x1, y1, x2, y2) {

    var width = x2 - x1;
    var height = y2 - y1;

    var w2 = width / 2;
    var h2 = height / 2;

    Path.call(this, [
        new Two.Anchor(x1, y1),
        new Two.Anchor(x2, y2)
    ]);

    this.vertices[0].command = Two.Commands.move;
    this.vertices[1].command = Two.Commands.line;

    this.automatic = false;

  };

  _.extend(Line.prototype, Path.prototype);
  Line.prototype.constructor = Line;

  Path.MakeObservable(Line.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var Path = Two.Path;
  var _ = Two.Utils;

  /**
   * @name Two.Rectangle
   * @class
   * @extends Two.Path
   * @param {Number} [x=0] - The x position of the rectangle.
   * @param {Number} [y=0] - The y position of the rectangle.
   * @param {Number} width - The width value of the rectangle.
   * @param {Number} height - The width value of the rectangle.
   */
  var Rectangle = Two.Rectangle = function(x, y, width, height) {

    Path.call(this, [
      new Two.Anchor(),
      new Two.Anchor(),
      new Two.Anchor(),
      new Two.Anchor()
      // new Two.Anchor() // TODO: Figure out how to handle this for `beginning` / `ending` animations
    ], true, false, true);

    /**
     * @name Two.Rectangle#width
     * @property {Number} - The size of the width of the rectangle.
     */
    this.width = width;
    /**
     * @name Two.Rectangle#height
     * @property {Number} - The size of the height of the rectangle.
     */
    this.height = height;

    /**
     * @name Two.Rectangle#origin
     * @property {Number} - A two-component vector describing the origin offset to draw the rectangle. Default is `0, 0`.
     */
    this.origin = new Two.Vector();
    this.translation.set(x, y);

    this._update();

  };

  _.extend(Rectangle, {

    /**
     * @name Two.Rectangle.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Rectangle}.
     */
    Properties: ['width', 'height'],

    /**
     * @name Two.Rectangle.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Rectangle} to any object. Handy if you'd like to extend the {@link Two.Rectangle} class on a custom class.
     */
    MakeObservable: function(object) {

      Path.MakeObservable(object);
      _.each(Rectangle.Properties, Two.Utils.defineProperty, object);

      Object.defineProperty(object, 'origin', {
        enumerable: true,
        get: function() {
          return this._origin;
        },
        set: function(v) {
          if (this._origin) {
            this._origin.unbind(Two.Events.change, this._renderer.flagVertices);
          }
          this._origin = v;
          this._origin.bind(Two.Events.change, this._renderer.flagVertices);
          this._renderer.flagVertices();
        }
      });

    }

  });

  _.extend(Rectangle.prototype, Path.prototype, {

    /**
     * @name Two.Rectangle#_flagWidth
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Rectangle#width} needs updating.
     */
    _flagWidth: 0,
    /**
     * @name Two.Rectangle#_flagHeight
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Rectangle#height} needs updating.
     */
    _flagHeight: 0,

    /**
     * @name Two.Rectangle#_width
     * @private
     * @see {@link Two.Rectangle#width}
     */
    _width: 0,
    /**
     * @name Two.Rectangle#_height
     * @private
     * @see {@link Two.Rectangle#height}
     */
    _height: 0,

    _origin: null,

    constructor: Rectangle,

    /**
     * @name Two.Rectangle#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagWidth || this._flagHeight) {

        var xr = this._width / 2;
        var yr = this._height / 2;

        this.vertices[0].set(-xr, -yr).add(this._origin).command = Two.Commands.move;
        this.vertices[1].set(xr, -yr).add(this._origin).command = Two.Commands.line;
        this.vertices[2].set(xr, yr).add(this._origin).command = Two.Commands.line;
        this.vertices[3].set(-xr, yr).add(this._origin).command = Two.Commands.line;
        // FYI: Two.Sprite and Two.ImageSequence have 4 verts
        if (this.vertices[4]) {
          this.vertices[4].set(-xr, -yr).add(this._origin).command = Two.Commands.line;
        }

      }

      Path.prototype._update.call(this);

      return this;

    },

    /**
     * @name Two.Rectangle#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagWidth = this._flagHeight = false;
      Path.prototype.flagReset.call(this);

      return this;

    },

    /**
     * @name Two.Rectangle#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Rectangle}
     * @description Create a new instance of {@link Two.Rectangle} with the same properties of the current path.
     */
    clone: function(parent) {

      var clone = new Rectangle(0, 0, this.width, this.height);

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      _.each(Two.Path.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.Rectangle#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var object = Path.prototype.toObject.call(this);
      object.width = this.width;
      object.height = this.height;
      object.origin = this.origin.toObject();
      return object;

    }

  });

  Rectangle.MakeObservable(Rectangle.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var Path = Two.Path, TWO_PI = Math.PI * 2, HALF_PI = Math.PI / 2;
  var cos = Math.cos, sin = Math.sin;
  var _ = Two.Utils;

  /**
   * @name Two.Ellipse
   * @class
   * @extends Two.Path
   * @param {Number} [x=0] - The x position of the ellipse.
   * @param {Number} [y=0] - The y position of the ellipse.
   * @param {Number} rx - The radius value of the ellipse in the x direction.
   * @param {Number} ry - The radius value of the ellipse in the y direction.
   * @param {Number} [resolution=4] - The number of vertices used to construct the ellipse.
   */
  var Ellipse = Two.Ellipse = function(ox, oy, rx, ry, resolution) {

    if (!_.isNumber(ry)) {
      ry = rx;
    }

    // At least 2 vertices are required for proper circlage
    var amount = resolution ? Math.max(resolution, 2) : 4;

    var points = _.map(_.range(amount), function(i) {
      return new Two.Anchor();
    }, this);

    Path.call(this, points, true, true, true);

    /**
     * @name Two.Ellipse#width
     * @property {Number} - The width of the ellipse.
     */
    this.width = rx * 2;
    /**
     * @name Two.Ellipse#height
     * @property {Number} - The height of the ellipse.
     */
    this.height = ry * 2;

    this._update();
    this.translation.set(ox, oy);

  };

  _.extend(Ellipse, {

    /**
     * @name Two.Ellipse.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Ellipse}.
     */
    Properties: ['width', 'height'],

    /**
     * @name Two.Ellipse.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Ellipse} to any object. Handy if you'd like to extend the {@link Two.Ellipse} class on a custom class.
     */
    MakeObservable: function(obj) {

      Path.MakeObservable(obj);
      _.each(Ellipse.Properties, Two.Utils.defineProperty, obj);

    }

  });

  _.extend(Ellipse.prototype, Path.prototype, {

    /**
     * @name Two.Ellipse#_flagWidth
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Ellipse#width} needs updating.
     */
    _flagWidth: false,
    /**
     * @name Two.Ellipse#_flagHeight
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Ellipse#height} needs updating.
     */
    _flagHeight: false,

    /**
     * @name Two.Polygon#_width
     * @private
     * @see {@link Two.Ellipse#width}
     */
    _width: 0,
    /**
     * @name Two.Polygon#_height
     * @private
     * @see {@link Two.Ellipse#height}
     */
    _height: 0,

    constructor: Ellipse,

    /**
     * @name Two.Ellipse#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagWidth || this._flagHeight) {
        // Coefficient for approximating circular arcs with Bezier curves
        var c = (4 / 3) * Math.tan(Math.PI / (this.vertices.length * 2));
        var radiusX = this._width / 2;
        var radiusY = this._height / 2;

        for (var i = 0, numVertices = this.vertices.length; i < numVertices; i++) {
          var pct = i / numVertices;
          var theta = pct * TWO_PI;

          var x = radiusX * cos(theta);
          var y = radiusY * sin(theta);

          var lx = radiusX * c * cos(theta - HALF_PI);
          var ly = radiusY * c * sin(theta - HALF_PI);

          var rx = radiusX * c * cos(theta + HALF_PI);
          var ry = radiusY * c * sin(theta + HALF_PI);

          var v = this.vertices[i];

          v.command = Two.Commands.curve;
          v.set(x, y);
          v.controls.left.set(lx, ly);
          v.controls.right.set(rx, ry);
        }
      }

      Path.prototype._update.call(this);
      return this;

    },

    /**
     * @name Two.Ellipse#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagWidth = this._flagHeight = false;

      Path.prototype.flagReset.call(this);
      return this;

    },

    /**
     * @name Two.Ellipse#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Polygon}
     * @description Create a new instance of {@link Two.Polygon} with the same properties of the current path.
     */
    clone: function(parent) {

      var rx = this.width / 2;
      var ry = this.height / 2;
      var resolution = this.vertices.length;
      var clone = new Ellipse(0, 0, rx, ry, resolution);

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      _.each(Two.Path.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.Ellipse#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var object = Path.prototype.toObject.call(this);

      _.each(Ellipse.Properties, function(property) {
        object[property] = this[property];
      }, this);

      return object;

    }

  });

  Ellipse.MakeObservable(Ellipse.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var Path = Two.Path, TWO_PI = Math.PI * 2, HALF_PI = Math.PI / 2;
  var cos = Math.cos, sin = Math.sin;
  var _ = Two.Utils;

  /**
   * @name Two.Circle
   * @class
   * @extends Two.Path
   * @param {Number} [x=0] - The x position of the circle.
   * @param {Number} [y=0] - The y position of the circle.
   * @param {Number} radius - The radius value of the circle.
   * @param {Number} [resolution=4] - The number of vertices used to construct the circle.
   */
  var Circle = Two.Circle = function(ox, oy, r, resolution) {

    // At least 2 vertices are required for proper circlage
    var amount = resolution ? Math.max(resolution, 2) : 4;

    var points = _.map(_.range(amount), function(i) {
      return new Two.Anchor();
    }, this);

    Path.call(this, points, true, true, true);

    /**
     * @name Two.Circle#radius
     * @property {Number} - The size of the radius of the circle.
     */
    this.radius = r;

    this._update();

    if (_.isNumber(ox)) {
      this.translation.x = ox;
    }
    if (_.isNumber(oy)) {
      this.translation.y = oy;
    }

  };

  _.extend(Circle, {

    /**
     * @name Two.Circle.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Circle}.
     */
    Properties: ['radius'],

    /**
     * @name Two.Circle.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Circle} to any object. Handy if you'd like to extend the {@link Two.Circle} class on a custom class.
     */
    MakeObservable: function(obj) {

      Path.MakeObservable(obj);
      _.each(Circle.Properties, Two.Utils.defineProperty, obj);

    }

  });

  _.extend(Circle.prototype, Path.prototype, {

    /**
     * @name Two.Circle#_flagRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Circle#radius} needs updating.
     */
    _flagRadius: false,

    /**
     * @name Two.Circle#_radius
     * @private
     * @see {@link Two.Circle#radius}
     */
    _radius: 0,

    constructor: Circle,

    /**
     * @name Two.Circle#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagRadius) {
        // Coefficient for approximating circular arcs with Bezier curves
        var c = (4 / 3) * Math.tan(Math.PI / (this.vertices.length * 2));

        var radius = this._radius;
        var rc = radius * c;

        for (var i = 0, numVertices = this.vertices.length; i < numVertices; i++) {
          var pct = i / numVertices;
          var theta = pct * TWO_PI;

          var x = radius * cos(theta);
          var y = radius * sin(theta);

          var lx = rc * cos(theta - HALF_PI);
          var ly = rc * sin(theta - HALF_PI);

          var rx = rc * cos(theta + HALF_PI);
          var ry = rc * sin(theta + HALF_PI);

          var v = this.vertices[i];

          v.command = Two.Commands.curve;
          v.set(x, y);
          v.controls.left.set(lx, ly);
          v.controls.right.set(rx, ry);
        }
      }

      Path.prototype._update.call(this);
      return this;

    },

    /**
     * @name Two.Circle#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagRadius = false;

      Path.prototype.flagReset.call(this);
      return this;

    },

    /**
     * @name Two.Circle#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Circle}
     * @description Create a new instance of {@link Two.Circle} with the same properties of the current path.
     */
    clone: function(parent) {

      var clone = new Circle(0, 0, this.radius, this.vertices.length);

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      _.each(Two.Path.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.Circle#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var object = Path.prototype.toObject.call(this);

      _.each(Circle.Properties, function(property) {
        object[property] = this[property];
      }, this);

      return object;

    }

  });

  Circle.MakeObservable(Circle.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var Path = Two.Path, TWO_PI = Math.PI * 2, cos = Math.cos, sin = Math.sin;
  var _ = Two.Utils;

  /**
   * @name Two.Polygon
   * @class
   * @extends Two.Path
   * @param {Number} [x=0] - The x position of the polygon.
   * @param {Number} [y=0] - The y position of the polygon.
   * @param {Number} radius - The radius value of the polygon.
   * @param {Number} [sides=12] - The number of vertices used to construct the polygon.
   */
  var Polygon = Two.Polygon = function(ox, oy, r, sides) {

    sides = Math.max(sides || 0, 3);

    Path.call(this);

    this.closed = true;
    this.automatic = false;

    /**
     * @name Two.Polygon#width
     * @property {Number} - The size of the width of the polygon.
     */
    this.width = r * 2;
    /**
     * @name Two.Polygon#height
     * @property {Number} - The size of the height of the polygon.
     */
    this.height = r * 2;
    /**
     * @name Two.Polygon#sides
     * @property {Number} - The amount of sides the polyogn has.
     */
    this.sides = sides;

    this._update();
    this.translation.set(ox, oy);

  };

  _.extend(Polygon, {

    /**
     * @name Two.Polygon.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Polygon}.
     */
    Properties: ['width', 'height', 'sides'],

    /**
     * @name Two.Polygon.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Polygon} to any object. Handy if you'd like to extend the {@link Two.Polygon} class on a custom class.
     */
    MakeObservable: function(obj) {

      Path.MakeObservable(obj);
      _.each(Polygon.Properties, Two.Utils.defineProperty, obj);

    }

  });

  _.extend(Polygon.prototype, Path.prototype, {

    /**
     * @name Two.Polygon#_flagWidth
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Polygon#width} needs updating.
     */
    _flagWidth: false,
    /**
     * @name Two.Polygon#_flagHeight
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Polygon#height} needs updating.
     */
    _flagHeight: false,
    /**
     * @name Two.Polygon#_flagSides
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Polygon#sides} needs updating.
     */
    _flagSides: false,

    /**
     * @name Two.Polygon#_width
     * @private
     * @see {@link Two.Polygon#width}
     */
    _width: 0,
    /**
     * @name Two.Polygon#_height
     * @private
     * @see {@link Two.Polygon#height}
     */
    _height: 0,
    /**
     * @name Two.Polygon#_sides
     * @private
     * @see {@link Two.Polygon#sides}
     */
    _sides: 0,

    constructor: Polygon,

    /**
     * @name Two.Polygon#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagWidth || this._flagHeight || this._flagSides) {

        var sides = this._sides;
        var amount = sides + 1;
        var length = this.vertices.length;

        if (length > sides) {
          this.vertices.splice(sides - 1, length - sides);
          length = sides;
        }

        for (var i = 0; i < amount; i++) {

          var pct = (i + 0.5) / sides;
          var theta = TWO_PI * pct + Math.PI / 2;
          var x = this._width * cos(theta) / 2;
          var y = this._height * sin(theta) / 2;

          if (i >= length) {
            this.vertices.push(new Two.Anchor(x, y));
          } else {
            this.vertices[i].set(x, y);
          }

          this.vertices[i].command = i === 0
            ? Two.Commands.move : Two.Commands.line;

        }

      }

      Path.prototype._update.call(this);
      return this;

    },

    /**
     * @name Two.Polygon#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagWidth = this._flagHeight = this._flagSides = false;
      Path.prototype.flagReset.call(this);

      return this;

    },

    /**
     * @name Two.Polygon#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Polygon}
     * @description Create a new instance of {@link Two.Polygon} with the same properties of the current path.
     */
    clone: function(parent) {

      var clone = new Polygon(0, 0, this.radius, this.sides);

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      _.each(Two.Path.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.Polygon#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var object = Path.prototype.toObject.call(this);

      _.each(Polygon.Properties, function(property) {
        object[property] = this[property];
      }, this);

      return object;

    }

  });

  Polygon.MakeObservable(Polygon.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var Path = Two.Path, PI = Math.PI, TWO_PI = Math.PI * 2, HALF_PI = Math.PI / 2,
    cos = Math.cos, sin = Math.sin, abs = Math.abs, _ = Two.Utils,
    mod = Two.Utils.mod;

  /**
   * @name Two.ArcSegment
   * @class
   * @extends Two.Path
   * @param {Number} [x=0] - The x position of the arc segment.
   * @param {Number} [y=0] - The y position of the arc segment.
   * @param {Number} innerRadius - The inner radius value of the arc segment.
   * @param {Number} outerRadius - The outer radius value of the arc segment.
   * @param {Radians} startAngle - The start angle of the arc segment in radians.
   * @param {Radians} endAngle - The end angle of the arc segment in radians.
   * @param {Number} [resolution=24] - The number of vertices used to construct the arc segment.
   */
  var ArcSegment = Two.ArcSegment = function(ox, oy, ir, or, sa, ea, res) {

    var amount = res || (Two.Resolution * 3);
    var points = _.map(_.range(amount), function() {
      return new Two.Anchor();
    });

    Path.call(this, points, true, false, true);

    /**
     * @name Two.ArcSegment#innerRadius
     * @property {Number} - The size of the inner radius of the arc segment.
     */
    this.innerRadius = ir;
    /**
     * @name Two.ArcSegment#outerRadius
     * @property {Number} - The size of the outer radius of the arc segment.
     */
    this.outerRadius = or;

    /**
     * @name Two.ArcSegment#startRadius
     * @property {Radians} - The angle of one side for the arc segment.
     */
    this.startAngle = sa;
    /**
     * @name Two.ArcSegment#endAngle
     * @property {Radians} - The angle of the other side for the arc segment.
     */
    this.endAngle = ea;

    this._update();

    if (_.isNumber(ox)) {
      this.translation.x = ox;
    }
    if (_.isNumber(oy)) {
      this.translation.y = oy;
    }

  };

  _.extend(ArcSegment, {

    /**
     * @name Two.ArcSegment.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.ArcSegment}.
     */
    Properties: ['startAngle', 'endAngle', 'innerRadius', 'outerRadius'],

    /**
     * @name Two.ArcSegment.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.ArcSegment} to any object. Handy if you'd like to extend the {@link Two.ArcSegment} class on a custom class.
     */
    MakeObservable: function(obj) {

      Path.MakeObservable(obj);
      _.each(ArcSegment.Properties, Two.Utils.defineProperty, obj);

    }

  });

  _.extend(ArcSegment.prototype, Path.prototype, {

    /**
     * @name Two.ArcSegment#_flagStartAngle
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ArcSegment#startAngle} needs updating.
     */
    _flagStartAngle: false,
    /**
     * @name Two.ArcSegment#_flagEndAngle
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ArcSegment#endAngle} needs updating.
     */
    _flagEndAngle: false,
    /**
     * @name Two.ArcSegment#_flagInnerRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ArcSegment#innerRadius} needs updating.
     */
    _flagInnerRadius: false,
    /**
     * @name Two.ArcSegment#_flagOuterRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ArcSegment#outerRadius} needs updating.
     */
    _flagOuterRadius: false,

    /**
     * @name Two.ArcSegment#_startAngle
     * @private
     * @see {@link Two.ArcSegment#startAngle}
     */
    _startAngle: 0,
    /**
     * @name Two.ArcSegment#_endAngle
     * @private
     * @see {@link Two.ArcSegment#endAngle}
     */
    _endAngle: TWO_PI,
    /**
     * @name Two.ArcSegment#_innerRadius
     * @private
     * @see {@link Two.ArcSegment#innerRadius}
     */
    _innerRadius: 0,
    /**
     * @name Two.ArcSegment#_outerRadius
     * @private
     * @see {@link Two.ArcSegment#outerRadius}
     */
    _outerRadius: 0,

    constructor: ArcSegment,

    /**
     * @name Two.ArcSegment#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagStartAngle || this._flagEndAngle || this._flagInnerRadius
        || this._flagOuterRadius) {

        var sa = this._startAngle;
        var ea = this._endAngle;

        var ir = this._innerRadius;
        var or = this._outerRadius;

        var connected = mod(sa, TWO_PI) === mod(ea, TWO_PI);
        var punctured = ir > 0;

        var vertices = this.vertices;
        var length = (punctured ? vertices.length / 2 : vertices.length);
        var command, id = 0;

        if (connected) {
          length--;
        } else if (!punctured) {
          length -= 2;
        }

        /**
         * Outer Circle
         */
        for (var i = 0, last = length - 1; i < length; i++) {

          var pct = i / last;
          var v = vertices[id];
          var theta = pct * (ea - sa) + sa;
          var step = (ea - sa) / length;

          var x = or * Math.cos(theta);
          var y = or * Math.sin(theta);

          switch (i) {
            case 0:
              command = Two.Commands.move;
              break;
            default:
              command = Two.Commands.curve;
          }

          v.command = command;
          v.x = x;
          v.y = y;
          v.controls.left.clear();
          v.controls.right.clear();

          if (v.command === Two.Commands.curve) {
            var amp = or * step / Math.PI;
            v.controls.left.x = amp * Math.cos(theta - HALF_PI);
            v.controls.left.y = amp * Math.sin(theta - HALF_PI);
            v.controls.right.x = amp * Math.cos(theta + HALF_PI);
            v.controls.right.y = amp * Math.sin(theta + HALF_PI);
            if (i === 1) {
              v.controls.left.multiplyScalar(2);
            }
            if (i === last) {
              v.controls.right.multiplyScalar(2);
            }
          }

          id++;

        }

        if (punctured) {

          if (connected) {
            vertices[id].command = Two.Commands.close;
            id++;
          } else {
            length--;
            last = length - 1;
          }

          /**
           * Inner Circle
           */
          for (i = 0; i < length; i++) {

            pct = i / last;
            v = vertices[id];
            theta = (1 - pct) * (ea - sa) + sa;
            step = (ea - sa) / length;

            x = ir * Math.cos(theta);
            y = ir * Math.sin(theta);
            command = Two.Commands.curve;
            if (i <= 0) {
              command = connected ? Two.Commands.move : Two.Commands.line;
            }

            v.command = command;
            v.x = x;
            v.y = y;
            v.controls.left.clear();
            v.controls.right.clear();

            if (v.command === Two.Commands.curve) {
              amp = ir * step / Math.PI;
              v.controls.left.x = amp * Math.cos(theta + HALF_PI);
              v.controls.left.y = amp * Math.sin(theta + HALF_PI);
              v.controls.right.x = amp * Math.cos(theta - HALF_PI);
              v.controls.right.y = amp * Math.sin(theta - HALF_PI);
              if (i === 1) {
                v.controls.left.multiplyScalar(2);
              }
              if (i === last) {
                v.controls.right.multiplyScalar(2);
              }
            }

            id++;

          }

          // Final Point
          vertices[id].copy(vertices[0]);
          vertices[id].command = Two.Commands.line;

        } else if (!connected) {

          vertices[id].command = Two.Commands.line;
          vertices[id].x = 0;
          vertices[id].y = 0;
          id++;

          // Final Point
          vertices[id].copy(vertices[0]);
          vertices[id].command = Two.Commands.line;

        }

      }

      Path.prototype._update.call(this);

      return this;

    },

    /**
     * @name Two.ArcSegment#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      Path.prototype.flagReset.call(this);

      this._flagStartAngle = this._flagEndAngle
        = this._flagInnerRadius = this._flagOuterRadius = false;

      return this;

    },

    /**
     * @name Two.ArcSegment#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.ArcSegment}
     * @description Create a new instance of {@link Two.ArcSegment} with the same properties of the current path.
     */
    clone: function(parent) {

      var ir = this.innerRadius;
      var or = this.outerradius;
      var sa = this.startAngle;
      var ea = this.endAngle;
      var resolution = this.vertices.length;

      var clone = new ArcSegment(0, 0, ir, or, sa, ea, resolution);

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      _.each(Two.Path.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.ArcSegment#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var object = Path.prototype.toObject.call(this);

      _.each(ArcSegment.Properties, function(property) {
        object[property] = this[property];
      }, this);

      return object;

    }

  });

  ArcSegment.MakeObservable(ArcSegment.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var Path = Two.Path, TWO_PI = Math.PI * 2, cos = Math.cos, sin = Math.sin;
  var _ = Two.Utils;

  /**
   * @name Two.Star
   * @class
   * @extends Two.Path
   * @param {Number} [x=0] - The x position of the star.
   * @param {Number} [y=0] - The y position of the star.
   * @param {Number} innerRadius - The inner radius value of the star.
   * @param {Number} outerRadius - The outer radius value of the star.
   * @param {Number} [sides=5] - The number of sides used to construct the star.
   */
  var Star = Two.Star = function(ox, oy, ir, or, sides) {

    if (arguments.length <= 3) {
      or = ir;
      ir = or / 2;
    }

    if (!_.isNumber(sides) || sides <= 0) {
      sides = 5;
    }

    var length = sides * 2;

    Path.call(this);
    this.closed = true;
    this.automatic = false;

    /**
     * @name Two.Star#innerRadius
     * @property {Number} - The size of the inner radius of the star.
     */
    this.innerRadius = ir;
    /**
     * @name Two.Star#outerRadius
     * @property {Number} - The size of the outer radius of the star.
     */
    this.outerRadius = or;
    /**
     * @name Two.Star#sides
     * @property {Number} - The amount of sides the star has.
     */
    this.sides = sides;

    this._update();
    this.translation.set(ox, oy);

  };

  _.extend(Star, {

    /**
     * @name Two.Star.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Star}.
     */
    Properties: ['innerRadius', 'outerRadius', 'sides'],

    /**
     * @name Two.Star.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Star} to any object. Handy if you'd like to extend the {@link Two.Star} class on a custom class.
     */
    MakeObservable: function(obj) {

      Path.MakeObservable(obj);
      _.each(Star.Properties, Two.Utils.defineProperty, obj);

    }

  });

  _.extend(Star.prototype, Path.prototype, {

    /**
     * @name Two.Star#_flagInnerRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Star#innerRadius} needs updating.
     */
    _flagInnerRadius: false,
    /**
     * @name Two.Star#_flagOuterRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Star#outerRadius} needs updating.
     */
    _flagOuterRadius: false,
    /**
     * @name Two.Star#_flagSides
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Star#sides} needs updating.
     */
    _flagSides: false,

    /**
     * @name Two.Star#_innerRadius
     * @private
     * @see {@link Two.Star#innerRadius}
     */
    _innerRadius: 0,
    /**
     * @name Two.Star#_outerRadius
     * @private
     * @see {@link Two.Star#outerRadius}
     */
    _outerRadius: 0,
    /**
     * @name Two.Star#_sides
     * @private
     * @see {@link Two.Star#sides}
     */
    _sides: 0,

    constructor: Star,

    /**
     * @name Two.Star#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagInnerRadius || this._flagOuterRadius || this._flagSides) {

        var sides = this._sides * 2;
        var amount = sides + 1;
        var length = this.vertices.length;

        if (length > sides) {
          this.vertices.splice(sides - 1, length - sides);
          length = sides;
        }

        for (var i = 0; i < amount; i++) {

          var pct = (i + 0.5) / sides;
          var theta = TWO_PI * pct;
          var r = (!(i % 2) ? this._innerRadius : this._outerRadius) / 2;
          var x = r * cos(theta);
          var y = r * sin(theta);

          if (i >= length) {
            this.vertices.push(new Two.Anchor(x, y));
          } else {
            this.vertices[i].set(x, y);
          }

          this.vertices[i].command = i === 0
            ? Two.Commands.move : Two.Commands.line;

        }

      }

      Path.prototype._update.call(this);

      return this;

    },

    /**
     * @name Two.Star#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagInnerRadius = this._flagOuterRadius = this._flagSides = false;
      Path.prototype.flagReset.call(this);

      return this;

    },

    /**
     * @name Two.Star#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Star}
     * @description Create a new instance of {@link Two.Star} with the same properties of the current path.
     */
    clone: function(parent) {

      var ir = this.innerRadius;
      var or = this.outerRadius;
      var sides = this.sides;

      var clone = new Star(0, 0, ir, or, sides);

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      _.each(Two.Path.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.Star#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var object = Path.prototype.toObject.call(this);

      _.each(Star.Properties, function(property) {
        object[property] = this[property];
      }, this);

      return object;

    }

  });

  Star.MakeObservable(Star.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var Path = Two.Path;
  var _ = Two.Utils;

  /**
   * @name Two.RoundedRectangle
   * @class
   * @extends Two.Path
   * @param {Number} [x=0] - The x position of the rounded rectangle.
   * @param {Number} [y=0] - The y position of the rounded rectangle.
   * @param {Number} width - The width value of the rounded rectangle.
   * @param {Number} height - The width value of the rounded rectangle.
   * @param {Number} radius - The radius value of the rounded rectangle.
   * @param {Number} [resolution=12] - The number of vertices used to construct the rounded rectangle.
   */
  var RoundedRectangle = Two.RoundedRectangle = function(ox, oy, width, height, radius) {

    if (_.isUndefined(radius)) {
      radius = Math.floor(Math.min(width, height) / 12);
    }

    var amount = 10;

    var points = _.map(_.range(amount), function(i) {
      return new Two.Anchor(0, 0, 0, 0, 0, 0,
        i === 0 ? Two.Commands.move : Two.Commands.curve);
    });

    // points[points.length - 1].command = Two.Commands.close;

    Path.call(this, points);

    this.closed = true;
    this.automatic = false;

    this._renderer.flagRadius = _.bind(RoundedRectangle.FlagRadius, this);

    /**
     * @name Two.RoundedRectangle#width
     * @property {Number} - The width of the rounded rectangle.
     */
    this.width = width;
    /**
     * @name Two.RoundedRectangle#height
     * @property {Number} - The height of the rounded rectangle.
     */
    this.height = height;
    /**
     * @name Two.RoundedRectangle#radius
     * @property {Number} - The size of the radius of the rounded rectangle.
     */
    this.radius = radius;

    this._update();
    this.translation.set(ox, oy);

  };

  _.extend(RoundedRectangle, {

    /**
     * @name Two.RoundedRectangle.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.RoundedRectangle}.
     */
    Properties: ['width', 'height'],

    /**
     * @name Two.RoundedRectangle.FlagRadius
     * @property {Function} - A convenience function to trigger the flag for radius changing.
     */
    FlagRadius: function() {
      this._flagRadius = true;
    },

    /**
     * @name Two.RoundedRectangle.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.RoundedRectangle} to any object. Handy if you'd like to extend the {@link Two.RoundedRectangle} class on a custom class.
     */
    MakeObservable: function(object) {

      Path.MakeObservable(object);
      _.each(RoundedRectangle.Properties, Two.Utils.defineProperty, object);

      Object.defineProperty(object, 'radius', {
        enumerable: true,
        get: function() {
          return this._radius;
        },
        set: function(v) {

          if (this._radius instanceof Two.Vector) {
            this._radius.unbind(Two.Events.change, this._renderer.flagRadius);
          }

          this._radius = v;

          if (this._radius instanceof Two.Vector) {
            this._radius.bind(Two.Events.change, this._renderer.flagRadius);
          }

          this._flagRadius = true;

        }
      });

    }

  });

  _.extend(RoundedRectangle.prototype, Path.prototype, {

    /**
     * @name Two.RoundedRectangle#_flagWidth
     * @private
     * @property {Boolean} - Determines whether the {@link Two.RoundedRectangle#width} needs updating.
     */
    _flagWidth: false,
    /**
     * @name Two.RoundedRectangle#_flagHeight
     * @private
     * @property {Boolean} - Determines whether the {@link Two.RoundedRectangle#height} needs updating.
     */
    _flagHeight: false,
    /**
     * @name Two.RoundedRectangle#_flagRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.RoundedRectangle#radius} needs updating.
     */
    _flagRadius: false,

    /**
     * @name Two.RoundedRectangle#_width
     * @private
     * @see {@link Two.RoundedRectangle#width}
     */
    _width: 0,
    /**
     * @name Two.RoundedRectangle#_height
     * @private
     * @see {@link Two.RoundedRectangle#height}
     */
    _height: 0,
    /**
     * @name Two.RoundedRectangle#_radius
     * @private
     * @see {@link Two.RoundedRectangle#radius}
     */
    _radius: 0,

    constructor: RoundedRectangle,

    /**
     * @name Two.RoundedRectangle#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagWidth || this._flagHeight || this._flagRadius) {

        var width = this._width;
        var height = this._height;

        var rx, ry;

        if (this._radius instanceof Two.Vector) {
          rx = this._radius.x;
          ry = this._radius.y;
        } else {
          rx = this._radius;
          ry = this._radius;
        }

        var v;
        var w = width / 2;
        var h = height / 2;

        v = this.vertices[0];
        v.x = - (w - rx);
        v.y = - h;

        // Upper Right Corner

        v = this.vertices[1];
        v.x = (w - rx);
        v.y = - h;
        v.controls.left.clear();
        v.controls.right.x = rx;
        v.controls.right.y = 0;

        v = this.vertices[2];
        v.x = w;
        v.y = - (h - ry);
        v.controls.right.clear();
        v.controls.left.clear();

        // Bottom Right Corner

        v = this.vertices[3];
        v.x = w;
        v.y = (h - ry);
        v.controls.left.clear();
        v.controls.right.x = 0;
        v.controls.right.y = ry;

        v = this.vertices[4];
        v.x = (w - rx);
        v.y = h;
        v.controls.right.clear();
        v.controls.left.clear();

        // Bottom Left Corner

        v = this.vertices[5];
        v.x = - (w - rx);
        v.y = h;
        v.controls.left.clear();
        v.controls.right.x = - rx;
        v.controls.right.y = 0;

        v = this.vertices[6];
        v.x = - w;
        v.y = (h - ry);
        v.controls.left.clear();
        v.controls.right.clear();

        // Upper Left Corner

        v = this.vertices[7];
        v.x = - w;
        v.y = - (h - ry);
        v.controls.left.clear();
        v.controls.right.x = 0;
        v.controls.right.y = - ry;

        v = this.vertices[8];
        v.x = - (w - rx);
        v.y = - h;
        v.controls.left.clear();
        v.controls.right.clear();

        v = this.vertices[9];
        v.copy(this.vertices[8]);

      }

      Path.prototype._update.call(this);

      return this;

    },

    /**
     * @name Two.RoundedRectangle#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagWidth = this._flagHeight = this._flagRadius = false;
      Path.prototype.flagReset.call(this);

      return this;

    },

    /**
     * @name Two.RoundedRectangle#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.RoundedRectangle}
     * @description Create a new instance of {@link Two.RoundedRectangle} with the same properties of the current path.
     */
    clone: function(parent) {

      var width = this.width;
      var height = this.height;
      var radius = this.radius;

      var clone = new RoundedRectangle(0, 0, width, height, radius);

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      _.each(Two.Path.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.RoundedRectangle#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var object = Path.prototype.toObject.call(this);

      _.each(RoundedRectangle.Properties, function(property) {
        object[property] = this[property];
      }, this);

      object.radius = _.isNumber(this.radius)
        ? this.radius : this.radius.toObject();

      return object;

    }

  });

  RoundedRectangle.MakeObservable(RoundedRectangle.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var root = Two.root;
  var getComputedMatrix = Two.Utils.getComputedMatrix;
  var _ = Two.Utils;

  // Used with getBoundingClientRect was calculated through the ctx.getTextWidth
  // var canvas = getCanvas();
  // var ctx = canvas.getContext('2d');

  /**
   * @name Two.Text
   * @class
   * @extends Two.Shape
   * @param {String} message - The String to be rendered to the scene.
   * @param {Number} [x=0] - The position in the x direction for the object.
   * @param {Number} [y=0] - The position in the y direction for the object.
   * @param {Object} [styles] - An object where styles are applied. Attribute must exist in Two.Text.Properties.
   * @description This is a primitive class for creating drawable text that can be added to the scenegraph.
   */
  var Text = Two.Text = function(message, x, y, styles) {

    Two.Shape.call(this);

    this._renderer.type = 'text';
    this._renderer.flagFill = _.bind(Two.Text.FlagFill, this);
    this._renderer.flagStroke = _.bind(Two.Text.FlagStroke, this);

    this.value = message;

    if (_.isNumber(x)) {
        this.translation.x = x;
    }
    if (_.isNumber(y)) {
        this.translation.y = y;
    }

    /**
     * @name Two.Text#dashes
     * @property {Number[]} - Array of numbers. Odd indices represent dash length. Even indices represent dash space.
     * @description A list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray} for more information on the SVG stroke-dasharray attribute.
     */
    this.dashes = [];

    /**
     * @name Two.Text#dashes#offset
     * @property {Number} - A number in pixels to offset {@link Two.Text#dashes} display.
     */
    this.dashes.offset = 0;

    if (!_.isObject(styles)) {
      return this;
    }

    _.each(Two.Text.Properties, function(property) {

      if (property in styles) {
        this[property] = styles[property];
      }

    }, this);

  };

  _.extend(Two.Text, {

    /**
     * @name Two.Text.Ratio
     * @property {Number} - Approximate aspect ratio of a typeface's character width to height.
     */
    Ratio: 0.6,

    /**
     * @name Two.Text.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Text}.
     */
    Properties: [
      'value', 'family', 'size', 'leading', 'alignment', 'linewidth', 'style',
      'className', 'weight', 'decoration', 'baseline', 'opacity', 'visible',
      'fill', 'stroke',
    ],

    /**
     * @name Two.Text.FlagFill
     * @function
     * @description Cached method to let renderers know the fill property have been updated on a {@link Two.Text}.
     */
    FlagFill: function() {
      this._flagFill = true;
    },

    /**
     * @name Two.Text.FlagStroke
     * @function
     * @description Cached method to let renderers know the stroke property have been updated on a {@link Two.Text}.
     */
    FlagStroke: function() {
      this._flagStroke = true;
    },

    MakeObservable: function(object) {

      Two.Shape.MakeObservable(object);

      _.each(Two.Text.Properties.slice(0, 13), Two.Utils.defineProperty, object);

      Object.defineProperty(object, 'fill', {
        enumerable: true,
        get: function() {
          return this._fill;
        },
        set: function(f) {

          if (this._fill instanceof Two.Gradient
            || this._fill instanceof Two.LinearGradient
            || this._fill instanceof Two.RadialGradient
            || this._fill instanceof Two.Texture) {
            this._fill.unbind(Two.Events.change, this._renderer.flagFill);
          }

          this._fill = f;
          this._flagFill = true;

          if (this._fill instanceof Two.Gradient
            || this._fill instanceof Two.LinearGradient
            || this._fill instanceof Two.RadialGradient
            || this._fill instanceof Two.Texture) {
            this._fill.bind(Two.Events.change, this._renderer.flagFill);
          }

        }
      });

      Object.defineProperty(object, 'stroke', {
        enumerable: true,
        get: function() {
          return this._stroke;
        },
        set: function(f) {

          if (this._stroke instanceof Two.Gradient
            || this._stroke instanceof Two.LinearGradient
            || this._stroke instanceof Two.RadialGradient
            || this._stroke instanceof Two.Texture) {
            this._stroke.unbind(Two.Events.change, this._renderer.flagStroke);
          }

          this._stroke = f;
          this._flagStroke = true;

          if (this._stroke instanceof Two.Gradient
            || this._stroke instanceof Two.LinearGradient
            || this._stroke instanceof Two.RadialGradient
            || this._stroke instanceof Two.Texture) {
            this._stroke.bind(Two.Events.change, this._renderer.flagStroke);
          }

        }
      });

      Object.defineProperty(object, 'clip', {
        enumerable: true,
        get: function() {
          return this._clip;
        },
        set: function(v) {
          this._clip = v;
          this._flagClip = true;
        }
      });

      Object.defineProperty(object, 'dashes', {
        enumerable: true,
        get: function() {
          return this._dashes;
        },
        set: function(v) {
          if (!_.isNumber(v.offset)) {
            v.offset = this._dashes.offset || 0;
          }
          this._dashes = v;
        }
      });

    }

  });

  _.extend(Two.Text.prototype, Two.Shape.prototype, {

    // Flags
    // http://en.wikipedia.org/wiki/Flag

    /**
     * @name Two.Text#_flagValue
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#value} need updating.
     */
    _flagValue: true,

    /**
     * @name Two.Text#_flagFamily
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#family} need updating.
     */
    _flagFamily: true,

    /**
     * @name Two.Text#_flagSize
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#size} need updating.
     */
    _flagSize: true,

    /**
     * @name Two.Text#_flagLeading
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#leading} need updating.
     */
    _flagLeading: true,

    /**
     * @name Two.Text#_flagAlignment
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#alignment} need updating.
     */
    _flagAlignment: true,

    /**
     * @name Two.Text#_flagBaseline
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#baseline} need updating.
     */
    _flagBaseline: true,

    /**
     * @name Two.Text#_flagStyle
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#style} need updating.
     */
    _flagStyle: true,

    /**
     * @name Two.Text#_flagWeight
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#weight} need updating.
     */
    _flagWeight: true,

    /**
     * @name Two.Text#_flagDecoration
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#decoration} need updating.
     */
    _flagDecoration: true,

    /**
     * @name Two.Text#_flagFill
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#fill} need updating.
     */
    _flagFill: true,

    /**
     * @name Two.Text#_flagStroke
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#stroke} need updating.
     */
    _flagStroke: true,

    /**
     * @name Two.Text#_flagLinewidth
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#linewidth} need updating.
     */
    _flagLinewidth: true,

    /**
     * @name Two.Text#_flagOpacity
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#opacity} need updating.
     */
    _flagOpacity: true,

    /**
     * @name Two.Text#_flagClassName
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#className} need updating.
     */
    _flagClassName: true,

    /**
     * @name Two.Text#_flagVisible
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#visible} need updating.
     */
    _flagVisible: true,

    /**
     * @name Two.Text#_flagClip
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Text#clip} need updating.
     */
    _flagClip: false,

    // Underlying Properties

    /**
     * @name Two.Text#value
     * @property {String} - The characters to be rendered to the the screen. Referred to in the documentation sometimes as the `message`.
     */
    _value: '',

    /**
     * @name Two.Text#family
     * @property {String} - The font family Two.js should attempt to regsiter for rendering. The default value is `'sans-serif'`. Comma separated font names can be supplied as a "stack", similar to the CSS implementation of `font-family`.
     */
    _family: 'sans-serif',

    /**
     * @name Two.Text#size
     * @property {Number} - The font size in Two.js point space. Defaults to `13`.
     */
    _size: 13,

    /**
     * @name Two.Text#leading
     * @property {Number} - The height between lines measured from base to base in Two.js point space. Defaults to `17`.
     */
    _leading: 17,

    /**
     * @name Two.Text#alignment
     * @property {String} - Alignment of text in relation to {@link Two.Text#translation}'s coordinates. Possible values include `'left'`, `'center'`, `'right'`. Defaults to `'center'`.
     */
    _alignment: 'center',

    /**
     * @name Two.Text#baseline
     * @property {String} - The vertical aligment of the text in relation to {@link Two.Text#translation}'s coordinates. Possible values include `'top'`, `'middle'`, `'bottom'`, and `'baseline'`. Defaults to `'baseline'`.
     */
    _baseline: 'middle',

    /**
     * @name Two.Text#style
     * @property {String} - The font's style. Possible values include '`normal`', `'italic'`. Defaults to `'normal'`.
     */
    _style: 'normal',

    /**
     * @name Two.Text#weight
     * @property {Number} - A number at intervals of 100 to describe the font's weight. This compatibility varies with the typeface's variant weights. Larger values are bolder. Smaller values are thinner. Defaults to `'500'`.
     */
    _weight: 500,

    /**
     * @name Two.Text#decoration
     * @property {String} - String to delineate whether text should be decorated with for instance an `'underline'`. Defaults to `'none'`.
     */
    _decoration: 'none',

    /**
     * @name Two.Text#fill
     * @property {(CssColor|Two.Gradient|Two.Texture)} - The value of what the text object should be filled in with.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS Colors.
     */
    _fill: '#000',

    /**
     * @name Two.Text#stroke
     * @property {(CssColor|Two.Gradient|Two.Texture)} - The value of what the text object should be filled in with.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS Colors.
     */
    _stroke: 'transparent',

    /**
     * @name Two.Text#linewidth
     * @property {Number} - The thickness in pixels of the stroke.
     */
    _linewidth: 1,

    /**
     * @name Two.Text#opacity
     * @property {Number} - The opaqueness of the text object.
     * @nota-bene Can be used in conjunction with CSS Colors that have an alpha value.
     */
    _opacity: 1,

    /**
     * @name Two.Text#className
     * @property {String} - A class to be applied to the element to be compatible with CSS styling. Only available for the {@link Two.SvgRenderer}.
     */
    _className: '',

    /**
     * @name Two.Text#visible
     * @property {Boolean} - Display the text object or not.
     * @nota-bene For {@link Two.CanvasRenderer} and {@link Two.WebGLRenderer} when set to false all updating is disabled improving performance dramatically with many objects in the scene.
     */
    _visible: true,

    /**
     * @name Two.Text#clip
     * @property {Two.Shape} - Object to define clipping area.
     * @nota-bene This property is currently not working becuase of SVG spec issues found here {@link https://code.google.com/p/chromium/issues/detail?id=370951}.
     */
    _clip: false,

    /**
     * @name Two.Text#_dashes
     * @private
     * @see {@link Two.Text#dashes}
     */
    _dashes: [],

    constructor: Two.Text,

    /**
     * @name Two.Text#remove
     * @function
     * @description Remove self from the scene / parent.
     */
    remove: function() {

      if (!this.parent) {
        return this;
      }

      this.parent.remove(this);

      return this;

    },

    /**
     * @name Two.Text#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Text}
     * @description Create a new instance of {@link Two.Text} with the same properties of the current text object.
     */
    clone: function(parent) {

      var clone = new Two.Text(this.value);
      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;

      _.each(Two.Text.Properties, function(property) {
        clone[property] = this[property];
      }, this);

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      if (parent) {
        parent.add(clone);
      }

      return clone._update();

    },

    /**
     * @name Two.Text#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the text object.
     */
    toObject: function() {

      var result = {
        translation: this.translation.toObject(),
        rotation: this.rotation,
        scale: this.scale
      };

      if (this.matrix.manual) {
        result.matrix = this.matrix.toObject();
      }

      _.each(Two.Text.Properties, function(property) {
        result[property] = this[property];
      }, this);

      return result;

    },

    /**
     * @name Two.Text#noFill
     * @function
     * @description Short hand method to set fill to `transparent`.
     */
    noFill: function() {
      this.fill = 'transparent';
      return this;
    },

    /**
     * @name Two.Text#noStroke
     * @function
     * @description Short hand method to set stroke to `transparent`.
     */
    noStroke: function() {
      this.stroke = undefined;
      this.linewidth = undefined;
      return this;
    },

    // A shim to not break `getBoundingClientRect` calls.
    // TODO: Implement a way to calculate proper bounding
    // boxes of `Two.Text`.

    /**
     * @name Two.Text#getBoundingClientRect
     * @function
     * @param {Boolean} [shallow=false] - Describes whether to calculate off local matrix or world matrix.
     * @returns {Object} - Returns object with top, left, right, bottom, width, height attributes.
     * @description Return an object with top, left, right, bottom, width, and height parameters of the text object.
     */
    getBoundingClientRect: function(shallow) {

      var matrix, border, l, x, y, i, v;
      var left, right, top, bottom;

      // TODO: Update this to not __always__ update. Just when it needs to.
      this._update(true);

      matrix = shallow ? this._matrix : getComputedMatrix(this);

      var height = this.leading;
      var width = this.value.length * this.size * Text.Ratio;

      switch (this.alignment) {
        case 'left':
          left = 0;
          right = width;
          break;
        case 'right':
          left = - width;
          right = 0;
          break;
        default:
          left = - width / 2;
          right = width / 2;
      }

      switch (this.baseline) {
        case 'top':
          top = 0;
          bottom = height;
          break;
        case 'bottom':
          top = - height;
          bottom = 0;
          break;
        default:
          top = - height / 2;
          bottom = height / 2;
      }

      v = matrix.multiply(left, top, 1);

      top = v.y;
      left = v.x;

      v = matrix.multiply(right, bottom, 1);

      right = v.x;
      bottom = v.y;

      return {
        top: top,
        left: left,
        right: right,
        bottom: bottom,
        width: right - left,
        height: bottom - top
      };

    },

    /**
     * @name Two.Text#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagValue = this._flagFamily = this._flagSize =
        this._flagLeading = this._flagAlignment = this._flagFill =
        this._flagStroke = this._flagLinewidth = this._flagOpacity =
        this._flagVisible = this._flagClip = this._flagDecoration =
        this._flagClassName = this._flagBaseline = false;

      Two.Shape.prototype.flagReset.call(this);

      return this;

    }

  });

  Two.Text.MakeObservable(Two.Text.prototype);

  function getCanvas() {
    if (root.document) {
      return root.document.createElement('canvas');
    } else {
      console.warn('Two.js: Unable to create canvas for Two.Text measurements.');
      return {
        getContext: _.identity
      };
    }
  }

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var _ = Two.Utils;

  /**
   * @name Two.Stop
   * @class
   * @param {Number} [offset] - The offset percentage of the stop represented as a zero-to-one value. Default value flip flops from zero-to-one as new stops are created.
   * @param {CssColor} [color] - The color of the stop. Default value flip flops from white to black as new stops are created.
   * @param {Number} [opacity] - The opacity value. Default value is 1, cannot be lower than 0.
   * @nota-bene Used specifically in conjunction with {@link Two.Gradient}s to control color graduation.
   */
  var Stop = Two.Stop = function(offset, color, opacity) {

    /**
     * @name Two.Stop#_renderer
     * @property {Object}
     * @private
     * @description A private object to store relevant renderer specific variables.
     * @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `stop._renderer.elem`.
     */
    this._renderer = {};
    this._renderer.type = 'stop';

    /**
     * @name Two.Stop#offset
     * @property {Number} - The offset percentage of the stop represented as a zero-to-one value.
     */
    this.offset = _.isNumber(offset) ? offset
      : Stop.Index <= 0 ? 0 : 1;

    /**
     * @name Two.Stop#opacity
     * @property {Number} - The alpha percentage of the stop represented as a zero-to-one value.
     */
    this.opacity = _.isNumber(opacity) ? opacity : 1;

    /**
     * @name Two.Stop#color
     * @property {CssColor} - The color of the stop.
     */
    this.color = _.isString(color) ? color
      : Stop.Index <= 0 ? '#fff' : '#000';

    Stop.Index = (Stop.Index + 1) % 2;

  };

  _.extend(Stop, {

    /**
     * @name Two.Stop.Index
     * @property {Number} - The current index being referenced for calculating a stop's default offset value.
     */
    Index: 0,

    /**
     * @name Two.Stop.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Stop}.
     */
    Properties: [
      'offset',
      'opacity',
      'color'
    ],

    /**
     * @name Two.Stop.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Stop} to any object. Handy if you'd like to extend the {@link Two.Stop} class on a custom class.
     */
    MakeObservable: function(object) {

      _.each(Stop.Properties, function(property) {

        var object = this;
        var secret = '_' + property;
        var flag = '_flag' + property.charAt(0).toUpperCase() + property.slice(1);

        Object.defineProperty(object, property, {
          enumerable: true,
          get: function() {
            return this[secret];
          },
          set: function(v) {
            this[secret] = v;
            this[flag] = true;
            if (this.parent) {
              this.parent._flagStops = true;
            }
          }
        });

      }, object);

    }

  });

  _.extend(Stop.prototype, Two.Utils.Events, {

    constructor: Stop,

    /**
     * @name Two.Stop#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Stop}
     * @description Create a new instance of {@link Two.Stop} with the same properties of the current path.
     */
    clone: function() {

      var clone = new Stop();

      _.each(Stop.Properties, function(property) {
        clone[property] = this[property];
      }, this);

      return clone;

    },

    /**
     * @name Two.Stop#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var result = {};

      _.each(Stop.Properties, function(k) {
        result[k] = this[k];
      }, this);

      return result;

    },

    /**
     * @name Two.Stop#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagOffset = this._flagColor = this._flagOpacity = false;

      return this;

    }

  });

  Stop.MakeObservable(Stop.prototype);
  Stop.prototype.constructor = Stop;

  /**
   * @name Two.Gradient
   * @class
   * @param {Two.Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient.
   * @description This is the base class for constructing different types of gradients with Two.js. The two common gradients are {@link Two.LinearGradient} and {@link Two.RadialGradient}.
   */
  var Gradient = Two.Gradient = function(stops) {

    /**
     * @name Two.Gradient#_renderer
     * @property {Object}
     * @private
     * @description A private object to store relevant renderer specific variables.
     * @nota-bene With the {@link Two.SvgRenderer} you can access the underlying SVG element created via `gradient._renderer.elem`.
     */
    this._renderer = {};
    this._renderer.type = 'gradient';

    /**
     * @name Two.Gradient#id
     * @property {String} - Session specific unique identifier.
     * @nota-bene In the {@link Two.SvgRenderer} change this to change the underlying SVG element's id too.
     */
    this.id = Two.Identifier + Two.uniqueId();
    this.classList = [];

    this._renderer.flagStops = _.bind(Gradient.FlagStops, this);
    this._renderer.bindStops = _.bind(Gradient.BindStops, this);
    this._renderer.unbindStops = _.bind(Gradient.UnbindStops, this);

    /**
     * @name Two.Gradient#spread
     * @property {String} - Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. Possible values are `'pad'`, `'reflect'`, and `'repeat'`.
     * @see {@link https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute} for more information
     */
    this.spread = 'pad';

    /**
     * @name Two.Gradient#stops
     * @property {Two.Stop[]} - An ordered list of {@link Two.Stop}s for rendering the gradient.
     */
    this.stops = stops;

  };

  _.extend(Gradient, {

    /**
     * @name Two.Gradient#Stop
     * @see {@link Two.Stop}
     */
    Stop: Stop,

    /**
     * @name Two.Gradient.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Gradient}.
     */
    Properties: [
      'spread'
    ],

    /**
     * @name Two.Gradient.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Gradient} to any object. Handy if you'd like to extend the {@link Two.Gradient} class on a custom class.
     */
    MakeObservable: function(object) {

      _.each(Gradient.Properties, Two.Utils.defineProperty, object);

      Object.defineProperty(object, 'stops', {

        enumerable: true,

        get: function() {
          return this._stops;
        },

        set: function(stops) {

          var updateStops = this._renderer.flagStops;
          var bindStops = this._renderer.bindStops;
          var unbindStops = this._renderer.unbindStops;

          // Remove previous listeners
          if (this._stops) {
            this._stops
              .unbind(Two.Events.insert, bindStops)
              .unbind(Two.Events.remove, unbindStops);
          }

          // Create new Collection with copy of Stops
          this._stops = new Two.Utils.Collection((stops || []).slice(0));

          // Listen for Collection changes and bind / unbind
          this._stops
            .bind(Two.Events.insert, bindStops)
            .bind(Two.Events.remove, unbindStops);

          // Bind Initial Stops
          bindStops(this._stops);

        }

      });

    },

    /**
     * @name Two.Gradient.FlagStops
     * @function
     * @description Cached method to let renderers know stops have been updated on a {@link Two.Gradient}.
     */
    FlagStops: function() {
      this._flagStops = true;
    },

    /**
     * @name Two.Gradient.BindVertices
     * @function
     * @description Cached method to let {@link Two.Gradient} know vertices have been added to the instance.
     */
    BindStops: function(items) {

      // This function is called a lot
      // when importing a large SVG
      var i = items.length;
      while(i--) {
        items[i].bind(Two.Events.change, this._renderer.flagStops);
        items[i].parent = this;
      }

      this._renderer.flagStops();

    },

    /**
     * @name Two.Gradient.UnbindStops
     * @function
     * @description Cached method to let {@link Two.Gradient} know vertices have been removed from the instance.
     */
    UnbindStops: function(items) {

      var i = items.length;
      while(i--) {
        items[i].unbind(Two.Events.change, this._renderer.flagStops);
        delete items[i].parent;
      }

      this._renderer.flagStops();

    }

  });

  _.extend(Gradient.prototype, Two.Utils.Events, {

    /**
     * @name Two.Gradient#_flagStops
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Gradient#stops} need updating.
     */
    _flagStops: false,
    /**
     * @name Two.Gradient#_flagSpread
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Gradient#spread} need updating.
     */
    _flagSpread: false,

    /**
     * @name Two.Gradient#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Gradient}
     * @description Create a new instance of {@link Two.Gradient} with the same properties of the current path.
     */
    clone: function(parent) {

      var stops = _.map(this.stops, function(s) {
        return s.clone();
      });

      var clone = new Gradient(stops);

      _.each(Two.Gradient.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.Gradient#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var result = {
        stops: _.map(this.stops, function(s) {
          return s.toObject();
        })
      };

      _.each(Gradient.Properties, function(k) {
        result[k] = this[k];
      }, this);

      return result;

    },

    /**
     * @name Two.Gradient#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagSpread || this._flagStops) {
        this.trigger(Two.Events.change);
      }

      return this;

    },

    /**
     * @name Two.Gradient#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagSpread = this._flagStops = false;

      return this;

    }

  });

  Gradient.MakeObservable(Gradient.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var _ = Two.Utils;

  /**
   * @name Two.LinearGradient
   * @class
   * @extends Two.Gradient
   * @param {Number} [x1=0] - The x position of the first end point of the linear gradient.
   * @param {Number} [y1=0] - The y position of the first end point of the linear gradient.
   * @param {Number} [x2=0] - The x position of the second end point of the linear gradient.
   * @param {Number} [y2=0] - The y position of the second end point of the linear gradient.
   * @param {Two.Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient.
   * @nota-bene The linear gradient lives within the space of the parent object's matrix space.
   */
  var LinearGradient = Two.LinearGradient = function(x1, y1, x2, y2, stops) {

    Two.Gradient.call(this, stops);

    this._renderer.type = 'linear-gradient';

    var flagEndPoints = _.bind(LinearGradient.FlagEndPoints, this);

    /**
     * @name Two.LinearGradient#left
     * @property {Two.Vector} - The x and y value for where the first end point is placed on the canvas.
     */
    this.left = new Two.Vector().bind(Two.Events.change, flagEndPoints);
    /**
     * @name Two.LinearGradient#right
     * @property {Two.Vector} - The x and y value for where the second end point is placed on the canvas.
     */
    this.right = new Two.Vector().bind(Two.Events.change, flagEndPoints);

    if (_.isNumber(x1)) {
      this.left.x = x1;
    }
    if (_.isNumber(y1)) {
      this.left.y = y1;
    }
    if (_.isNumber(x2)) {
      this.right.x = x2;
    }
    if (_.isNumber(y2)) {
      this.right.y = y2;
    }

  };

  _.extend(LinearGradient, {

    /**
     * @name Two.LinearGradient#Stop
     * @see {@link Two.Stop}
     */
    Stop: Two.Gradient.Stop,

    /**
     * @name Two.LinearGradient.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.LinearGradient} to any object. Handy if you'd like to extend the {@link Two.LinearGradient} class on a custom class.
     */
    MakeObservable: function(object) {
      Two.Gradient.MakeObservable(object);
    },

    /**
     * @name Two.LinearGradient.FlagEndPoints
     * @function
     * @description Cached method to let renderers know end points have been updated on a {@link Two.LinearGradient}.
     */
    FlagEndPoints: function() {
      this._flagEndPoints = true;
    }

  });

  _.extend(LinearGradient.prototype, Two.Gradient.prototype, {

    /**
     * @name Two.LinearGradient#_flagEndPoints
     * @private
     * @property {Boolean} - Determines whether the {@link Two.LinearGradient#left} or {@link Two.LinearGradient#right} changed and needs to update.
     */
    _flagEndPoints: false,

    constructor: LinearGradient,

    /**
     * @name Two.LinearGradient#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Gradient}
     * @description Create a new instance of {@link Two.LinearGradient} with the same properties of the current path.
     */
    clone: function(parent) {

      var stops = _.map(this.stops, function(stop) {
        return stop.clone();
      });

      var clone = new LinearGradient(this.left._x, this.left._y,
        this.right._x, this.right._y, stops);

      _.each(Two.Gradient.Properties, function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.LinearGradient#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var result = Two.Gradient.prototype.toObject.call(this);

      result.left = this.left.toObject();
      result.right = this.right.toObject();

      return result;

    },

    /**
     * @name Two.LinearGradient#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagEndPoints || this._flagSpread || this._flagStops) {
        this.trigger(Two.Events.change);
      }

      return this;

    },

    /**
     * @name Two.LinearGradient#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagEndPoints = false;

      Two.Gradient.prototype.flagReset.call(this);

      return this;

    }

  });

  LinearGradient.MakeObservable(LinearGradient.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var _ = Two.Utils;

  /**
   * @name Two.RadialGradient
   * @class
   * @extends Two.Gradient
   * @param {Number} [x=0] - The x position of the origin of the radial gradient.
   * @param {Number} [y=0] - The y position of the origin of the radial gradient.
   * @param {Number} [radius=0] - The radius of the radial gradient.
   * @param {Two.Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient.
   * @param {Number} [focalX=0] - The x position of the focal point on the radial gradient.
   * @param {Number} [focalY=0] - The y position of the focal point on the radial gradient.
   * @nota-bene The radial gradient lives within the space of the parent object's matrix space.
   */
  var RadialGradient = Two.RadialGradient = function(cx, cy, r, stops, fx, fy) {

    Two.Gradient.call(this, stops);

    this._renderer.type = 'radial-gradient';

    /**
     * @name Two.RadialGradient#center
     * @property {Two.Vector} - The x and y value for where the origin of the radial gradient is.
     */
    this.center = new Two.Vector()
      .bind(Two.Events.change, _.bind(function() {
        this._flagCenter = true;
      }, this));

    this.radius = _.isNumber(r) ? r : 20;

    /**
     * @name Two.RadialGradient#focal
     * @property {Two.Vector} - The x and y value for where the focal point of the radial gradient is.
     * @nota-bene This effects the spray or spread of the radial gradient.
     */
    this.focal = new Two.Vector()
      .bind(Two.Events.change, _.bind(function() {
        this._flagFocal = true;
      }, this));

    if (_.isNumber(cx)) {
      this.center.x = cx;
    }
    if (_.isNumber(cy)) {
      this.center.y = cy;
    }

    this.focal.copy(this.center);

    if (_.isNumber(fx)) {
      this.focal.x = fx;
    }
    if (_.isNumber(fy)) {
      this.focal.y = fy;
    }

  };

  _.extend(RadialGradient, {

    /**
     * @name Two.RadialGradient#Stop
     * @see {@link Two.Stop}
     */
    Stop: Two.Gradient.Stop,

    /**
     * @name Two.RadialGradient.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.RadialGradient}.
     */
    Properties: [
      'radius'
    ],

    /**
     * @name Two.RadialGradient.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.RadialGradient} to any object. Handy if you'd like to extend the {@link Two.RadialGradient} class on a custom class.
     */
    MakeObservable: function(object) {

      Two.Gradient.MakeObservable(object);

      _.each(RadialGradient.Properties, Two.Utils.defineProperty, object);

    }

  });

  _.extend(RadialGradient.prototype, Two.Gradient.prototype, {

    /**
     * @name Two.RadialGradient#_flagRadius
     * @private
     * @property {Boolean} - Determines whether the {@link Two.RadialGradient#radius} changed and needs to update.
     */
    _flagRadius: false,
    /**
     * @name Two.RadialGradient#_flagCenter
     * @private
     * @property {Boolean} - Determines whether the {@link Two.RadialGradient#center} changed and needs to update.
     */
    _flagCenter: false,
    /**
     * @name Two.RadialGradient#_flagFocal
     * @private
     * @property {Boolean} - Determines whether the {@link Two.RadialGradient#focal} changed and needs to update.
     */
    _flagFocal: false,

    constructor: RadialGradient,

    /**
     * @name Two.RadialGradient#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Gradient}
     * @description Create a new instance of {@link Two.RadialGradient} with the same properties of the current path.
     */
    clone: function(parent) {

      var stops = _.map(this.stops, function(stop) {
        return stop.clone();
      });

      var clone = new RadialGradient(this.center._x, this.center._y,
          this._radius, stops, this.focal._x, this.focal._y);

      _.each(Two.Gradient.Properties.concat(RadialGradient.Properties), function(k) {
        clone[k] = this[k];
      }, this);

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.RadialGradient#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {

      var result = Two.Gradient.prototype.toObject.call(this);

      _.each(RadialGradient.Properties, function(k) {
        result[k] = this[k];
      }, this);

      result.center = this.center.toObject();
      result.focal = this.focal.toObject();

      return result;

    },

    /**
     * @name Two.RadialGradient#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagRadius || this._flatCenter || this._flagFocal
        || this._flagSpread || this._flagStops) {
        this.trigger(Two.Events.change);
      }

      return this;

    },

    /**
     * @name Two.RadialGradient#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagRadius = this._flagCenter = this._flagFocal = false;

      Two.Gradient.prototype.flagReset.call(this);

      return this;

    }

  });

  RadialGradient.MakeObservable(RadialGradient.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var root = Two.root;
  var _ = Two.Utils;
  var anchor;
  var regex = {
    video: /\.(mp4|webm|ogg)$/i,
    image: /\.(jpe?g|png|gif|tiff|webp)$/i,
    effect: /texture|gradient/i
  };

  if (root.document) {
    anchor = document.createElement('a');
  }

  /**
   * @name Two.Texture
   * @class
   * @extends Two.Shape
   * @param {String|ImageElement} [src] - The URL path to an image file or an `<img />` element.
   * @param {Function} [callback] - An optional callback function once the image has been loaded.
   * @description Fundamental to work with bitmap data, a.k.a. pregenerated imagery, in Two.js. Supported formats include jpg, png, gif, and tiff. See {@link Two.Texture.RegularExpressions} for a full list of supported formats.
   */
  var Texture = Two.Texture = function(src, callback) {

    this._renderer = {};
    this._renderer.type = 'texture';
    this._renderer.flagOffset = _.bind(Texture.FlagOffset, this);
    this._renderer.flagScale = _.bind(Texture.FlagScale, this);

    this.id = Two.Identifier + Two.uniqueId();
    this.classList = [];

    /**
     * @name Two.Texture#loaded
     * @property {Boolean} - Shorthand value to determine if image has been loaded into the texture.
     */
    this.loaded = false;

    /**
     * @name Two.Texture#repeat
     * @property {String} - CSS style declaration to tile {@link Two.Path}. Valid values include: `'no-repeat'`, `'repeat'`, `'repeat-x'`, `'repeat-y'`.
     * @see {@link https://www.w3.org/TR/2dcontext/#dom-context-2d-createpattern}
     */
    this.repeat = 'no-repeat';

    /**
     * @name Two.Texture#offset
     * @property {Two.Vector} - A two-component vector describing any pixel offset of the texture when applied to a {@link Two.Path}.
     */
    this.offset = new Two.Vector();

    if (_.isFunction(callback)) {
      var loaded = _.bind(function() {
        this.unbind(Two.Events.load, loaded);
        if (_.isFunction(callback)) {
          callback();
        }
      }, this);
      this.bind(Two.Events.load, loaded);
    }

    /**
     * @name Two.Texture#src
     * @property {String} - The URL path to the image data.
     * @nota-bene This property is ultimately serialized in a {@link Two.Registry} to cache retrieval.
     */
    if (_.isString(src)) {
      this.src = src;
    } else if (_.isElement(src)) {
      /**
       * @name Two.Texture#image
       * @property {Element} - The corresponding DOM Element of the texture. Can be a `<img />`, `<canvas />`, or `<video />` element. See {@link Two.Texture.RegularExpressions} for a full list of supported elements.
       * @nota-bene In headless environments this is a `Canvas.Image` object. See {@link https://github.com/Automattic/node-canvas} for more information on headless image objects.
       */
      this.image = src;
    }

    this._update();

  };

  _.extend(Texture, {

    /**
     * @name Two.Texture.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Texture}.
     */
    Properties: [
      'src',
      'loaded',
      'repeat'
    ],

    /**
     * @name Two.Texture.RegularExpressions
     * @property {Object} - A map of compatible DOM Elements categorized by media format.
     */
    RegularExpressions: regex,

    /**
     * @name Two.Texture.ImageRegistry
     * @property {Two.Registry} - A canonical listing of image data used in a single session of Two.js.
     * @nota-bene This object is used to cache image data between different textures.
     */
    ImageRegistry: new Two.Registry(),

    /**
     * @name Two.Texture.getAbsoluteURL
     * @property {Function} - Serializes a URL as an absolute path for canonical attribution in {@link Two.ImageRegistry}.
     * @param {String} path
     * @returns {String} - The serialized absolute path.
     */
    getAbsoluteURL: function(path) {
      if (!anchor) {
        // TODO: Fix for headless environments
        return path;
      }
      anchor.href = path;
      return anchor.href;
    },

    /**
     * @name Two.Texture.loadHeadlessBuffer
     * @property {Function} - Loads an image as a buffer in headless environments.
     * @param {Two.Texture} texture - The {@link Two.Texture} to be loaded.
     * @param {Function} loaded - The callback function to be triggered once the image is loaded.
     * @nota-bene - This function uses node's `fs.readFileSync` to spoof the `<img />` loading process in the browser.
     */
    loadHeadlessBuffer: new Function('texture', 'loaded', [
      'var fs = require("fs");',
      'var buffer = fs.readFileSync(texture.src);',

      'texture.image.src = buffer;',
      'loaded();'
    ].join('\n')),

    /**
     * @name Two.Texture.getImage
     * @property {Function} - Convenience function to set {@link Two.Texture#image} properties with canonincal versions set in {@link Two.Texture.ImageRegistry}.
     * @param {String} src - The URL path of the image.
     * @returns {ImageElement} - Returns either a cached version of the image or a new one that is registered in {@link Two.Texture.ImageRegistry}.
     */
    getImage: function(src) {

      var absoluteSrc = Texture.getAbsoluteURL(src);

      if (Texture.ImageRegistry.contains(absoluteSrc)) {
        return Texture.ImageRegistry.get(absoluteSrc);
      }

      var image;

      if (Two.Utils.Image) {

        // TODO: Fix for headless environments
        image = new Two.Utils.Image();
        Two.CanvasRenderer.Utils.shim(image, 'img');

      } else if (root.document) {

        if (regex.video.test(absoluteSrc)) {
          image = document.createElement('video');
        } else {
          image = document.createElement('img');
        }

      } else {

        console.warn('Two.js: no prototypical image defined for Two.Texture');

      }

      image.crossOrigin = 'anonymous';

      return image;

    },

    /**
     * @name Two.Register
     * @interface
     * @description A collection of functions to register different types of textures. Used internally by a {@link Two.Texture}.
     */
    Register: {
      canvas: function(texture, callback) {
        texture._src = '#' + texture.id;
        Texture.ImageRegistry.add(texture.src, texture.image);
        if (_.isFunction(callback)) {
          callback();
        }
      },
      img: function(texture, callback) {

        var loaded = function(e) {
          if (_.isFunction(texture.image.removeEventListener)) {
            texture.image.removeEventListener('load', loaded, false);
            texture.image.removeEventListener('error', error, false);
          }
          if (_.isFunction(callback)) {
            callback();
          }
        };
        var error = function(e) {
          if (_.isFunction(texture.image.removeEventListener)) {
            texture.image.removeEventListener('load', loaded, false);
            texture.image.removeEventListener('error', error, false);
          }
          throw new Two.Utils.Error('unable to load ' + texture.src);
        };

        if (_.isNumber(texture.image.width) && texture.image.width > 0
          && _.isNumber(texture.image.height) && texture.image.height > 0) {
            loaded();
        } else if (_.isFunction(texture.image.addEventListener)) {
          texture.image.addEventListener('load', loaded, false);
          texture.image.addEventListener('error', error, false);
        }

        texture._src = Texture.getAbsoluteURL(texture._src);

        if (texture.image && texture.image.getAttribute('two-src')) {
          return;
        }

        texture.image.setAttribute('two-src', texture.src);
        Texture.ImageRegistry.add(texture.src, texture.image);

        if (Two.Utils.isHeadless) {

          Texture.loadHeadlessBuffer(texture, loaded);

        } else {

          texture.image.src = texture.src;

        }

      },
      video: function(texture, callback) {

        var loaded = function(e) {
          texture.image.removeEventListener('canplaythrough', loaded, false);
          texture.image.removeEventListener('error', error, false);
          texture.image.width = texture.image.videoWidth;
          texture.image.height = texture.image.videoHeight;
          texture.image.play();
          if (_.isFunction(callback)) {
            callback();
          }
        };
        var error = function(e) {
          texture.image.removeEventListener('canplaythrough', loaded, false);
          texture.image.removeEventListener('error', error, false);
          throw new Two.Utils.Error('unable to load ' + texture.src);
        };

        texture._src = Texture.getAbsoluteURL(texture._src);
        texture.image.addEventListener('canplaythrough', loaded, false);
        texture.image.addEventListener('error', error, false);

        if (texture.image && texture.image.getAttribute('two-src')) {
          return;
        }

        if (Two.Utils.isHeadless) {
          throw new Two.Utils.Error('video textures are not implemented in headless environments.');
        }

        texture.image.setAttribute('two-src', texture.src);
        Texture.ImageRegistry.add(texture.src, texture.image);
        texture.image.src = texture.src;
        texture.image.loop = true;
        texture.image.load();

      }
    },

    /**
     * @name Two.Texture.load
     * @function
     * @param {Two.Texture} texture - The texture to load.
     * @param {Function} callback - The function to be called once the texture is loaded.
     */
    load: function(texture, callback) {

      var src = texture.src;
      var image = texture.image;
      var tag = image && image.nodeName.toLowerCase();

      if (texture._flagImage) {
        if (/canvas/i.test(tag)) {
          Texture.Register.canvas(texture, callback);
        } else {
          texture._src = image.getAttribute('two-src') || image.src;
          Texture.Register[tag](texture, callback);
        }
      }

      if (texture._flagSrc) {
        if (!image) {
          texture.image = Texture.getImage(texture.src);
        }
        tag = texture.image.nodeName.toLowerCase();
        Texture.Register[tag](texture, callback);
      }

    },

    /**
     * @name Two.Texture.FlagOffset
     * @function
     * @description Cached method to let renderers know `offset` has been updated on a {@link Two.Texture}.
     */
    FlagOffset: function() {
      this._flagOffset = true;
    },

    /**
     * @name Two.Texture.FlagScale
     * @function
     * @description Cached method to let renderers know `scale` has been updated on a {@link Two.Texture}.
     */
    FlagScale: function() {
      this._flagScale = true;
    },

    /**
     * @name Two.Texture.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Texture} to any object. Handy if you'd like to extend or inherit the {@link Two.Texture} class on a custom class.
     */
    MakeObservable: function(object) {

      _.each(Texture.Properties, Two.Utils.defineProperty, object);

      Object.defineProperty(object, 'image', {
        enumerable: true,
        get: function() {
          return this._image;
        },
        set: function(image) {

          var tag = image && image.nodeName.toLowerCase();
          var index;

          switch (tag) {
            case 'canvas':
              index = '#' + image.id;
              break;
            default:
              index = image.src;
          }

          if (Texture.ImageRegistry.contains(index)) {
            this._image = Texture.ImageRegistry.get(image.src);
          } else {
            this._image = image;
          }

          this._flagImage = true;

        }

      });

      Object.defineProperty(object, 'offset', {
        enumerable: true,
        get: function() {
          return this._offset;
        },
        set: function(v) {
          if (this._offset) {
            this._offset.unbind(Two.Events.change, this._renderer.flagOffset);
          }
          this._offset = v;
          this._offset.bind(Two.Events.change, this._renderer.flagOffset);
          this._flagOffset = true;
        }
      });

      Object.defineProperty(object, 'scale', {
        enumerable: true,
        get: function() {
          return this._scale;
        },
        set: function(v) {

          if (this._scale instanceof Two.Vector) {
            this._scale.unbind(Two.Events.change, this._renderer.flagScale);
          }

          this._scale = v;

          if (this._scale instanceof Two.Vector) {
            this._scale.bind(Two.Events.change, this._renderer.flagScale);
          }

          this._flagScale = true;

        }
      });

    }

  });

  _.extend(Texture.prototype, Two.Utils.Events, Two.Shape.prototype, {

    /**
     * @name Two.Texture#_flagSrc
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Texture#src} needs updating.
     */
    _flagSrc: false,

    /**
     * @name Two.Texture#_flagImage
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Texture#image} needs updating.
     */
    _flagImage: false,

    /**
     * @name Two.Texture#_flagVideo
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Texture#video} needs updating.
     */
    _flagVideo: false,

    /**
     * @name Two.Texture#_flagLoaded
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Texture#loaded} needs updating.
     */
    _flagLoaded: false,

    /**
     * @name Two.Texture#_flagRepeat
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Texture#repeat} needs updating.
     */
    _flagRepeat: false,

    /**
     * @name Two.Texture#_flagOffset
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Texture#offset} needs updating.
     */
    _flagOffset: false,

    /**
     * @name Two.Texture#_flagScale
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Texture#scale} needs updating.
     */
    _flagScale: false,

    /**
     * @name Two.Texture#_src
     * @private
     * @see {@link Two.Texture#src}
     */
    _src: '',

    /**
     * @name Two.Texture#_image
     * @private
     * @see {@link Two.Texture#image}
     */
    _image: null,

    /**
     * @name Two.Texture#_loaded
     * @private
     * @see {@link Two.Texture#loaded}
     */
    _loaded: false,

    /**
     * @name Two.Texture#_repeat
     * @private
     * @see {@link Two.Texture#repeat}
     */
    _repeat: 'no-repeat',

    /**
     * @name Two.Texture#_scale
     * @private
     * @see {@link Two.Texture#scale}
     */
    _scale: 1,

    /**
     * @name Two.Texture#_offset
     * @private
     * @see {@link Two.Texture#offset}
     */
    _offset: null,

    constructor: Texture,

    /**
     * @name Two.Texture#clone
     * @function
     * @returns {Two.Texture}
     * @description Create a new instance of {@link Two.Texture} with the same properties of the current texture.
     */
    clone: function() {
      var clone = new Texture(this.src);
      clone.repeat = this.repeat;
      clone.offset.copy(this.origin);
      clone.scale = this.scale;
      return clone;
    },

    /**
     * @name Two.Texture#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the texture.
     */
    toObject: function() {
      return {
        src: this.src,
        // image: this.image,
        repeat: this.repeat,
        origin: this.origin.toObject(),
        scale: _.isNumber(this.scale) ? this.scale : this.scale.toObject()
      };
    },

    /**
     * @name Two.Texture#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagSrc || this._flagImage) {

        this.trigger(Two.Events.change);

        if (this._flagSrc || this._flagImage) {
          this.loaded = false;
          Texture.load(this, _.bind(function() {
            this.loaded = true;
            this
              .trigger(Two.Events.change)
              .trigger(Two.Events.load);
          }, this));
        }

      }

      if (this._image && this._image.readyState >= 4) {
        this._flagVideo = true;
      }

      return this;

    },

    /**
     * @name Two.Texture#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagSrc = this._flagImage = this._flagLoaded
        = this._flagVideo = this._flagScale = this._flagOffset = false;

      return this;

    }

  });

  Texture.MakeObservable(Texture.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var _ = Two.Utils;
  var Path = Two.Path;
  var Rectangle = Two.Rectangle;

  /**
   * @name Two.Sprite
   * @class
   * @extends Two.Rectangle
   * @param {String|Two.Texture} [path] - The URL path or {@link Two.Texture} to be used as the bitmap data displayed on the sprite.
   * @param {Number} [ox=0] - The initial `x` position of the Two.Sprite.
   * @param {Number} [oy=0] - The initial `y` position of the Two.Sprite.
   * @param {Integer} [cols=1] - The number of columns the sprite contains.
   * @param {Integer} [rows=1] - The number of rows the sprite contains.
   * @param {Integer} [frameRate=0] - The frame rate at which the partitions of the image should playback at.
   * @description A convenient package to display still or animated images through a tiled image source. For more information on the principals of animated imagery through tiling see [Texture Atlas]{@link https://en.wikipedia.org/wiki/Texture_atlas} on Wikipedia..
   */
  var Sprite = Two.Sprite = function(path, ox, oy, cols, rows, frameRate) {

    // Not using default constructor of Rectangle due to odd `beginning` / `ending` behavior.
    // See: https://github.com/jonobr1/two.js/issues/383
    Path.call(this, [
      new Two.Anchor(),
      new Two.Anchor(),
      new Two.Anchor(),
      new Two.Anchor()
    ], true);

    this.noStroke();
    this.noFill();

    /**
     * @name Two.Sprite#texture
     * @property {Two.Texture} - The texture to be used as bitmap data to display image in the scene.
     */
    if (path instanceof Two.Texture) {
      this.texture = path;
    } else if (_.isString(path)) {
      this.texture = new Two.Texture(path);
    }

    this.origin = new Two.Vector();

    this._update();
    this.translation.set(ox || 0, oy || 0);

    /**
     * @name Two.Sprite#columns
     * @property {Integer} - The number of columns to split the texture into. Defaults to `1`.
     */
    if (_.isNumber(cols)) {
      this.columns = cols;
    }

    /**
     * @name Two.Sprite#rows
     * @property {Integer} - The number of rows to split the texture into. Defaults to `1`.
     */
    if (_.isNumber(rows)) {
      this.rows = rows;
    }

    /**
     * @name Two.Sprite#frameRate
     * @property {Integer} - The number of frames to animate against per second. Defaults to `0` for non-animated sprites.
     */
    if (_.isNumber(frameRate)) {
      this.frameRate = frameRate;
    }

    /**
     * @name Two.Sprite#index
     * @property {Integer} - The index of the current tile of the sprite to display. Defaults to `0`.
     */
    this.index = 0;

  };

  _.extend(Sprite, {

    /**
     * @name Two.Sprite.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Sprite}.
     */
    Properties: [
      'texture', 'columns', 'rows', 'frameRate', 'index'
    ],

    /**
     * @name Two.Sprite.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Sprite} to any object. Handy if you'd like to extend or inherit the {@link Two.Sprite} class on a custom class.
     */
    MakeObservable: function(obj) {

      Rectangle.MakeObservable(obj);
      _.each(Sprite.Properties, Two.Utils.defineProperty, obj);

    }

  });

  _.extend(Sprite.prototype, Rectangle.prototype, {

    /**
     * @name Two.Sprite#_flagTexture
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Sprite#texture} needs updating.
     */
    _flagTexture: false,

    /**
     * @name Two.Sprite#_flagColumns
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Sprite#columns} need updating.
     */
    _flagColumns: false,

    /**
     * @name Two.Sprite#_flagRows
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Sprite#rows} need updating.
     */
    _flagRows: false,

    /**
     * @name Two.Sprite#_flagFrameRate
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Sprite#flagFrameRate} needs updating.
     */
    _flagFrameRate: false,

    /**
     * @name Two.Sprite#_flagIndex
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Sprite#index} needs updating.
     */
    flagIndex: false,

    // Private variables

    /**
     * @name Two.Sprite#_amount
     * @private
     * @property {Integer} - Number of frames for a given {@link Two.Sprite}.
     */
    _amount: 1,

    /**
     * @name Two.Sprite#_duration
     * @private
     * @property {Number} - Number of milliseconds a {@link Two.Sprite}.
     */
    _duration: 0,

    /**
     * @name Two.Sprite#_startTime
     * @private
     * @property {Milliseconds} - Epoch time in milliseconds of when the {@link Two.Sprite} started.
     */
    _startTime: 0,

    /**
     * @name Two.Sprite#_playing
     * @private
     * @property {Boolean} - Dictates whether the {@link Two.Sprite} is animating or not.
     */
    _playing: false,

    /**
     * @name Two.Sprite#_firstFrame
     * @private
     * @property {Integer} - The frame the {@link Two.Sprite} should start with.
     */
    _firstFrame: 0,

    /**
     * @name Two.Sprite#_lastFrame
     * @private
     * @property {Integer} - The frame the {@link Two.Sprite} should end with.
     */
    _lastFrame: 0,

    /**
     * @name Two.Sprite#_playing
     * @private
     * @property {Boolean} - Dictates whether the {@link Two.Sprite} should loop or not.
     */
    _loop: true,

    // Exposed through getter-setter

    /**
     * @name Two.Sprite#_texture
     * @private
     * @see {@link Two.Sprite#texture}
     */
    _texture: null,

    /**
     * @name Two.Sprite#_columns
     * @private
     * @see {@link Two.Sprite#columns}
     */
    _columns: 1,

    /**
     * @name Two.Sprite#_rows
     * @private
     * @see {@link Two.Sprite#rows}
     */
    _rows: 1,

    /**
     * @name Two.Sprite#_frameRate
     * @private
     * @see {@link Two.Sprite#frameRate}
     */
    _frameRate: 0,

    /**
     * @name Two.Sprite#_index
     * @private
     * @property {Integer} - The current frame the {@link Two.Sprite} is currently displaying.
     */
    _index: 0,

    /**
     * @name Two.Sprite#_origin
     * @private
     * @see {@link Two.Sprite#origin}
     */
    _origin: null,

    constructor: Sprite,

    /**
     * @name Two.Sprite#play
     * @function
     * @param {Integer} [firstFrame=0] - The index of the frame to start the animation with.
     * @param {Integer} [lastFrame] - The index of the frame to end the animation with. Defaults to the last item in the {@link Two.Sprite#textures}.
     * @param {Function} [onLastFrame] - Optional callback function to be triggered after playing the last frame. This fires multiple times when the sprite is looped.
     * @description Initiate animation playback of a {@link Two.Sprite}.
     */
    play: function(firstFrame, lastFrame, onLastFrame) {

      this._playing = true;
      this._firstFrame = 0;
      this._lastFrame = this.amount - 1;
      this._startTime = _.performance.now();

      if (_.isNumber(firstFrame)) {
        this._firstFrame = firstFrame;
      }
      if (_.isNumber(lastFrame)) {
        this._lastFrame = lastFrame;
      }
      if (_.isFunction(onLastFrame)) {
        this._onLastFrame = onLastFrame;
      } else {
        delete this._onLastFrame;
      }

      if (this._index !== this._firstFrame) {
        this._startTime -= 1000 * Math.abs(this._index - this._firstFrame)
          / this._frameRate;
      }

      return this;

    },

    /**
     * @name Two.Sprite#pause
     * @function
     * @description Halt animation playback of a {@link Two.Sprite}.
     */
    pause: function() {

      this._playing = false;
      return this;

    },

    /**
     * @name Two.Sprite#stop
     * @function
     * @description Halt animation playback of a {@link Two.Sprite} and set the current frame back to the first frame.
     */
    stop: function() {

      this._playing = false;
      this._index = 0;

      return this;

    },

    /**
     * @name Two.Sprite#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Sprite}
     * @description Create a new instance of {@link Two.Sprite} with the same properties of the current sprite.
     */
    clone: function(parent) {

      var clone = new Sprite(
        this.texture, this.translation.x, this.translation.y,
        this.columns, this.rows, this.frameRate
      );

      if (this.playing) {
        clone.play(this._firstFrame, this._lastFrame);
        clone._loop = this._loop;
      }

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.Sprite#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {
      var object = Rectangle.prototype.toObject.call(this);
      object.texture = this.texture.toObject();
      object.columns = this.columns;
      object.rows = this.rows;
      object.frameRate = this.frameRate;
      object.index = this.index;
      object._firstFrame = this._firstFrame;
      object._lastFrame = this._lastFrame;
      object._loop = this._loop;
      return object;
    },

    /**
     * @name Two.Sprite#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      var effect = this._texture;
      var cols = this._columns;
      var rows = this._rows;

      var width, height, elapsed, amount, duration;
      var index, iw, ih, isRange, frames;

      if (this._flagColumns || this._flagRows) {
        this._amount = this._columns * this._rows;
      }

      if (this._flagFrameRate) {
        this._duration = 1000 * this._amount / this._frameRate;
      }

      if (this._flagTexture) {
        this.fill = this._texture;
      }

      if (this._texture.loaded) {

        iw = effect.image.width;
        ih = effect.image.height;

        width = iw / cols;
        height = ih / rows;
        amount = this._amount;

        if (this.width !== width) {
          this.width = width;
        }
        if (this.height !== height) {
          this.height = height;
        }

        if (this._playing && this._frameRate > 0) {

          if (_.isNaN(this._lastFrame)) {
            this._lastFrame = amount - 1;
          }

          // TODO: Offload perf logic to instance of `Two`.
          elapsed = _.performance.now() - this._startTime;
          frames = this._lastFrame + 1;
          duration = 1000 * (frames - this._firstFrame) / this._frameRate;

          if (this._loop) {
            elapsed = elapsed % duration;
          } else {
            elapsed = Math.min(elapsed, duration);
          }

          index = _.lerp(this._firstFrame, frames, elapsed / duration);
          index = Math.floor(index);

          if (index !== this._index) {
            this._index = index;
            if (index >= this._lastFrame - 1 && this._onLastFrame) {
              this._onLastFrame();  // Shortcut for chainable sprite animations
            }
          }

        }

        var col = this._index % cols;
        var row = Math.floor(this._index / cols);

        var ox = - width * col + (iw - width) / 2;
        var oy = - height * row + (ih - height) / 2;

        // TODO: Improve performance
        if (ox !== effect.offset.x) {
          effect.offset.x = ox;
        }
        if (oy !== effect.offset.y) {
          effect.offset.y = oy;
        }

      }

      Rectangle.prototype._update.call(this);

      return this;

    },

    /**
     * @name Two.Sprite#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagTexture = this._flagColumns = this._flagRows
        = this._flagFrameRate = false;

      Rectangle.prototype.flagReset.call(this);

      return this;
    }

  });

  Sprite.MakeObservable(Sprite.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  var _ = Two.Utils;
  var Path = Two.Path;
  var Rectangle = Two.Rectangle;

  /**
   * @name Two.ImageSequence
   * @class
   * @extends Two.Rectangle
   * @param {String|String[]|Two.Texture|Two.Texture[]} paths - A list of URLs or {@link Two.Texture}s.
   * @param {Number} [ox=0] - The initial `x` position of the Two.ImageSequence.
   * @param {Number} [oy=0] - The initial `y` position of the Two.ImageSequence.
   * @param {Integer} [frameRate=30] - The frame rate at which the images should playback at.
   * @description A convenient package to display still or animated images organized as a series of still images.
   */
  var ImageSequence = Two.ImageSequence = function(paths, ox, oy, frameRate) {

    // Not using default constructor of Rectangle due to odd `beginning` / `ending` behavior.
    // See: https://github.com/jonobr1/two.js/issues/383
    Path.call(this, [
      new Two.Anchor(),
      new Two.Anchor(),
      new Two.Anchor(),
      new Two.Anchor()
    ], true);

    this._renderer.flagTextures = _.bind(ImageSequence.FlagTextures, this);
    this._renderer.bindTextures = _.bind(ImageSequence.BindTextures, this);
    this._renderer.unbindTextures = _.bind(ImageSequence.UnbindTextures, this);

    this.noStroke();
    this.noFill();

    /**
     * @name Two.ImageSequence#textures
     * @property {Two.Texture[]} - A list of textures to be used as frames for animating the {@link Two.ImageSequence}.
     */
    if (_.isObject(paths)) {
      this.textures = _.map(paths, ImageSequence.GenerateTexture, this);
    } else {
      // If just a single path convert into a single Two.Texture
      this.textures = [ImageSequence.GenerateTexture(paths)];
    }

    this.origin = new Two.Vector();

    this._update();
    this.translation.set(ox || 0, oy || 0);

    /**
     * @name Two.ImageSequence#frameRate
     * @property {Integer} - The number of frames to animate against per second.
     */
    if (_.isNumber(frameRate)) {
      this.frameRate = frameRate;
    } else {
      this.frameRate = ImageSequence.DefaultFrameRate;
    }

    /**
     * @name Two.ImageSequence#index
     * @property {Integer} - The index of the current tile of the sprite to display. Defaults to `0`.
     */
    this.index = 0;

  };

  _.extend(ImageSequence, {

    /**
     * @name Two.ImageSequence.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.ImageSequence}.
     */
    Properties: [
      'frameRate',
      'index'
    ],

    /**
     * @name Two.ImageSequence.DefaultFrameRate
     * @property The default frame rate that {@link Two.ImageSequence#frameRate} is set to when instantiated.
     */
    DefaultFrameRate: 30,

    /**
     * @name Two.ImageSequence.FlagTextures
     * @function
     * @description Cached method to let renderers know textures have been updated on a {@link Two.ImageSequence}.
     */
    FlagTextures: function() {
      this._flagTextures = true;
    },

    /**
     * @name Two.ImageSequence.BindTextures
     * @function
     * @description Cached method to let {@link Two.ImageSequence} know textures have been added to the instance.
     */
    BindTextures: function(items) {

      var i = items.length;
      while (i--) {
        items[i].bind(Two.Events.change, this._renderer.flagTextures);
      }

      this._renderer.flagTextures();

    },

    /**
     * @name Two.ImageSequence.UnbindVertices
     * @function
     * @description Cached method to let {@link Two.ImageSequence} know textures have been removed from the instance.
     */
    UnbindTextures: function(items) {

      var i = items.length;
      while (i--) {
        items[i].unbind(Two.Events.change, this._renderer.flagTextures);
      }

      this._renderer.flagTextures();

    },

    /**
     * @name Two.ImageSequence.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.ImageSequence} to any object. Handy if you'd like to extend or inherit the {@link Two.ImageSequence} class on a custom class.
     */
    MakeObservable: function(obj) {

      Rectangle.MakeObservable(obj);
      _.each(ImageSequence.Properties, Two.Utils.defineProperty, obj);

      Object.defineProperty(obj, 'textures', {

        enumerable: true,

        get: function() {
          return this._textures;
        },

        set: function(textures) {

          var updateTextures = this._renderer.flagTextures;
          var bindTextures = this._renderer.bindTextures;
          var unbindTextures = this._renderer.unbindTextures;

          // Remove previous listeners
          if (this._textures) {
            this._textures
              .unbind(Two.Events.insert, bindTextures)
              .unbind(Two.Events.remove, unbindTextures);
          }

          // Create new Collection with copy of vertices
          this._textures = new Two.Utils.Collection((textures || []).slice(0));

          // Listen for Collection changes and bind / unbind
          this._textures
            .bind(Two.Events.insert, bindTextures)
            .bind(Two.Events.remove, unbindTextures);

          // Bind Initial Textures
          bindTextures(this._textures);

        }

      });

    },

    /**
     * @name Two.ImageSequence.GenerateTexture
     * @property {Function} - Shorthand function to prepare source image material into readable format by {@link Two.ImageSequence}.
     * @param {String|Two.Texture} textureOrString - The texture or string to create a {@link Two.Texture} from.
     * @description Function used internally by {@link Two.ImageSequence} to parse arguments and return {@link Two.Texture}s.
     * @returns {Two.Texture}
     */
    GenerateTexture: function(obj) {
      if (obj instanceof Two.Texture) {
        return obj;
      } else if (_.isString(obj)) {
        return new Two.Texture(obj);
      }
    }

  });

  _.extend(ImageSequence.prototype, Rectangle.prototype, {

    /**
     * @name Two.ImageSequence#_flagTextures
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ImageSequence#textures} need updating.
     */
    _flagTextures: false,

    /**
     * @name Two.ImageSequence#_flagFrameRate
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ImageSequence#frameRate} needs updating.
     */
    _flagFrameRate: false,

    /**
     * @name Two.ImageSequence#_flagIndex
     * @private
     * @property {Boolean} - Determines whether the {@link Two.ImageSequence#index} needs updating.
     */
    _flagIndex: false,

    // Private variables

    /**
     * @name Two.ImageSequence#_amount
     * @private
     * @property {Integer} - Number of frames for a given {@link Two.ImageSequence}.
     */
    _amount: 1,

    /**
     * @name Two.ImageSequence#_duration
     * @private
     * @property {Number} - Number of milliseconds a {@link Two.ImageSequence}.
     */
    _duration: 0,

    /**
     * @name Two.ImageSequence#_index
     * @private
     * @property {Integer} - The current frame the {@link Two.ImageSequence} is currently displaying.
     */
    _index: 0,

    /**
     * @name Two.ImageSequence#_startTime
     * @private
     * @property {Milliseconds} - Epoch time in milliseconds of when the {@link Two.ImageSequence} started.
     */
    _startTime: 0,

    /**
     * @name Two.ImageSequence#_playing
     * @private
     * @property {Boolean} - Dictates whether the {@link Two.ImageSequence} is animating or not.
     */
    _playing: false,

    /**
     * @name Two.ImageSequence#_firstFrame
     * @private
     * @property {Integer} - The frame the {@link Two.ImageSequence} should start with.
     */
    _firstFrame: 0,

    /**
     * @name Two.ImageSequence#_lastFrame
     * @private
     * @property {Integer} - The frame the {@link Two.ImageSequence} should end with.
     */
    _lastFrame: 0,

    /**
     * @name Two.ImageSequence#_playing
     * @private
     * @property {Boolean} - Dictates whether the {@link Two.ImageSequence} should loop or not.
     */
    _loop: true,

    // Exposed through getter-setter

    /**
     * @name Two.ImageSequence#_textures
     * @private
     * @see {@link Two.ImageSequence#textures}
     */
    _textures: null,

    /**
     * @name Two.ImageSequence#_frameRate
     * @private
     * @see {@link Two.ImageSequence#frameRate}
     */
    _frameRate: 0,

    /**
     * @name Two.ImageSequence#_origin
     * @private
     * @see {@link Two.ImageSequence#origin}
     */
    _origin: null,

    constructor: ImageSequence,

    /**
     * @name Two.ImageSequence#play
     * @function
     * @param {Integer} [firstFrame=0] - The index of the frame to start the animation with.
     * @param {Integer} [lastFrame] - The index of the frame to end the animation with. Defaults to the last item in the {@link Two.ImageSequence#textures}.
     * @param {Function} [onLastFrame] - Optional callback function to be triggered after playing the last frame. This fires multiple times when the image sequence is looped.
     * @description Initiate animation playback of a {@link Two.ImageSequence}.
     */
    play: function(firstFrame, lastFrame, onLastFrame) {

      this._playing = true;
      this._firstFrame = 0;
      this._lastFrame = this.amount - 1;
      this._startTime = _.performance.now();

      if (_.isNumber(firstFrame)) {
        this._firstFrame = firstFrame;
      }
      if (_.isNumber(lastFrame)) {
        this._lastFrame = lastFrame;
      }
      if (_.isFunction(onLastFrame)) {
        this._onLastFrame = onLastFrame;
      } else {
        delete this._onLastFrame;
      }

      if (this._index !== this._firstFrame) {
        this._startTime -= 1000 * Math.abs(this._index - this._firstFrame)
          / this._frameRate;
      }

      return this;

    },

    /**
     * @name Two.ImageSequence#pause
     * @function
     * @description Halt animation playback of a {@link Two.ImageSequence}.
     */
    pause: function() {

      this._playing = false;
      return this;

    },

    /**
     * @name Two.ImageSequence#stop
     * @function
     * @description Halt animation playback of a {@link Two.ImageSequence} and set the current frame back to the first frame.
     */
    stop: function() {

      this._playing = false;
      this._index = this._firstFrame;

      return this;

    },

    /**
     * @name Two.ImageSequence#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.ImageSequence}
     * @description Create a new instance of {@link Two.ImageSequence} with the same properties of the current image sequence.
     */
    clone: function(parent) {

      var clone = new ImageSequence(this.textures, this.translation.x,
        this.translation.y, this.frameRate);

      clone._loop = this._loop;

      if (this._playing) {
        clone.play();
      }

      if (parent) {
        parent.add(clone);
      }

      return clone;

    },

    /**
     * @name Two.ImageSequence#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the path.
     */
    toObject: function() {
      var object = Rectangle.prototype.toObject.call(this);
      object.textures = _.map(this.textures, function(texture) {
        return texture.toObject();
      });
      object.frameRate = this.frameRate;
      object.index = this.index;
      object._firstFrame = this._firstFrame;
      object._lastFrame = this._lastFrame;
      object._loop = this._loop;
      return object;
    },

    /**
     * @name Two.ImageSequence#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      var effects = this._textures;
      var width, height, elapsed, amount, duration, texture;
      var index, frames;

      if (this._flagTextures) {
        this._amount = effects.length;
      }

      if (this._flagFrameRate) {
        this._duration = 1000 * this._amount / this._frameRate;
      }

      if (this._playing && this._frameRate > 0) {

        amount = this._amount;

        if (_.isNaN(this._lastFrame)) {
          this._lastFrame = amount - 1;
        }

        // TODO: Offload perf logic to instance of `Two`.
        elapsed = _.performance.now() - this._startTime;
        frames = this._lastFrame + 1;
        duration = 1000 * (frames - this._firstFrame) / this._frameRate;

        if (this._loop) {
          elapsed = elapsed % duration;
        } else {
          elapsed = Math.min(elapsed, duration);
        }

        index = _.lerp(this._firstFrame, frames, elapsed / duration);
        index = Math.floor(index);

        if (index !== this._index) {

          this._index = index;
          texture = effects[this._index];

          if (texture.loaded) {

            width = texture.image.width;
            height = texture.image.height;

            if (this.width !== width) {
              this.width = width;
            }
            if (this.height !== height) {
              this.height = height;
            }

            this.fill = texture;

            if (index >= this._lastFrame - 1 && this._onLastFrame) {
              this._onLastFrame();  // Shortcut for chainable sprite animations
            }

          }

        }

      } else if (this._flagIndex || !(this.fill instanceof Two.Texture)) {

        texture = effects[this._index];

        if (texture.loaded) {

          width = texture.image.width;
          height = texture.image.height;

          if (this.width !== width) {
            this.width = width;
          }
          if (this.height !== height) {
            this.height = height;
          }

        }

        this.fill = texture;

      }

      Rectangle.prototype._update.call(this);

      return this;

    },

    /**
     * @name Two.ImageSequence#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      this._flagTextures = this._flagFrameRate = false;
      Rectangle.prototype.flagReset.call(this);

      return this;

    }

  });

  ImageSequence.MakeObservable(ImageSequence.prototype);

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);

(function(Two) {

  // Constants

  var min = Math.min, max = Math.max;
  var _ = Two.Utils;

  /**
   * @class
   * @name Two.Group.Children
   * @extends Two.Utils.Collection
   * @description A children collection which is accesible both by index and by object `id`.
   */
  var Children = function() {

    Two.Utils.Collection.apply(this, arguments);

    Object.defineProperty(this, '_events', {
      value : {},
      enumerable: false
    });

    /**
     * @name Two.Group.Children#ids
     * @property {Object} - Map of all elements in the list keyed by `id`s.
     */
    this.ids = {};

    this.on(Two.Events.insert, this.attach);
    this.on(Two.Events.remove, this.detach);
    Children.prototype.attach.apply(this, arguments);

  };

  Children.prototype = new Two.Utils.Collection();

  _.extend(Children.prototype, {

    constructor: Children,

    /**
     * @function
     * @name Two.Group.Children#attach
     * @param {Two.Shape[]}
     * @description Adds elements to the `ids` map.
     */
    attach: function(children) {
      for (var i = 0; i < children.length; i++) {
        this.ids[children[i].id] = children[i];
      }
      return this;
    },

    /**
     * @function
     * @name Two.Group.Children#detach
     * @param {Two.Shape[]}
     * @description Removes elements to the `ids` map.
     */
    detach: function(children) {
      for (var i = 0; i < children.length; i++) {
        delete this.ids[children[i].id];
      }
      return this;
    }

  });

  /**
   * @class
   * @name Two.Group
   */
  var Group = Two.Group = function(children) {

    Two.Shape.call(this, true);

    this._renderer.type = 'group';

    /**
     * @name Two.Group#additions
     * @property {Two.Shape[]}
     * @description An automatically updated list of children that need to be appended to the renderer's scenegraph.
     */
    this.additions = [];

    /**
     * @name Two.Group#subtractions
     * @property {Two.Shape[]}
     * @description An automatically updated list of children that need to be removed from the renderer's scenegraph.
     */
    this.subtractions = [];

    /**
     * @name Two.Group#additions
     * @property {Two.Group.Children[]}
     * @description A list of all the children in the scenegraph.
     * @nota-bene Ther order of this list indicates the order each element is rendered to the screen.
     */
    this.children = _.isArray(children) ? children : arguments;

  };

  _.extend(Group, {

    Children: Children,

    /**
     * @name Two.Group.InsertChildren
     * @function
     * @description Cached method to let renderers know children have been added to a {@link Two.Group}.
     */
    InsertChildren: function(children) {
      for (var i = 0; i < children.length; i++) {
        replaceParent.call(this, children[i], this);
      }
    },

    /**
     * @name Two.Group.RemoveChildren
     * @function
     * @description Cached method to let renderers know children have been removed from a {@link Two.Group}.
     */
    RemoveChildren: function(children) {
      for (var i = 0; i < children.length; i++) {
        replaceParent.call(this, children[i]);
      }
    },

    /**
     * @name Two.Group.OrderChildren
     * @function
     * @description Cached method to let renderers know order has been updated on a {@link Two.Group}.
     */
    OrderChildren: function(children) {
      this._flagOrder = true;
    },

    /**
     * @name Two.Group.Properties
     * @property {String[]} - A list of properties that are on every {@link Two.Group}.
     */
    Properties: [
      'fill',
      'stroke',
      'linewidth',
      'visible',
      'cap',
      'join',
      'miter',

      'closed',
      'curved',
      'automatic'
    ],

    /**
     * @name Two.Group.MakeObservable
     * @function
     * @param {Object} object - The object to make observable.
     * @description Convenience function to apply observable qualities of a {@link Two.Group} to any object. Handy if you'd like to extend the {@link Two.Group} class on a custom class.
     */
    MakeObservable: function(object) {

      var properties = Two.Group.Properties;

      Object.defineProperty(object, 'opacity', {

        enumerable: true,

        get: function() {
          return this._opacity;
        },

        set: function(v) {
          this._flagOpacity = this._opacity !== v;
          this._opacity = v;
        }

      });

      Object.defineProperty(object, 'beginning', {

        enumerable: true,

        get: function() {
          return this._beginning;
        },

        set: function(v) {
          this._flagBeginning = this._beginning !== v;
          this._beginning = v;
        }

      });

      Object.defineProperty(object, 'ending', {

        enumerable: true,

        get: function() {
          return this._ending;
        },

        set: function(v) {
          this._flagEnding = this._ending !== v;
          this._ending = v;
        }

      });

      Object.defineProperty(object, 'length', {

        enumerable: true,

        get: function() {
          if (this._flagLength || this._length <= 0) {
            this._length = 0;
            if (!this.children) {
              return this._length;
            }
            for (var i = 0; i < this.children.length; i++) {
              var child = this.children[i];
              this._length += child.length;
            }
          }
          return this._length;
        }

      });

      Two.Shape.MakeObservable(object);
      Group.MakeGetterSetters(object, properties);

      Object.defineProperty(object, 'children', {

        enumerable: true,

        get: function() {
          return this._children;
        },

        set: function(children) {

          var insertChildren = _.bind(Group.InsertChildren, this);
          var removeChildren = _.bind(Group.RemoveChildren, this);
          var orderChildren = _.bind(Group.OrderChildren, this);

          if (this._children) {
            this._children.unbind();
          }

          this._children = new Children(children);
          this._children.bind(Two.Events.insert, insertChildren);
          this._children.bind(Two.Events.remove, removeChildren);
          this._children.bind(Two.Events.order, orderChildren);

        }

      });

      Object.defineProperty(object, 'mask', {

        enumerable: true,

        get: function() {
          return this._mask;
        },

        set: function(v) {
          this._mask = v;
          this._flagMask = true;
          if (!v.clip) {
            v.clip = true;
          }
        }

      });

    },

    /**
     * @name Two.Group.MakeGetterSetters
     * @function
     * @param {Two.Group} group - The group to apply getters and setters.
     * @param {Object} properties - A key / value object containing properties to inherit.
     */
    MakeGetterSetters: function(group, properties) {

      if (!_.isArray(properties)) {
        properties = [properties];
      }

      _.each(properties, function(k) {
        Group.MakeGetterSetter(group, k);
      });

    },

    /**
     * @name Two.Group.MakeGetterSetter
     * @function
     * @param {Two.Group} group - The group to apply getters and setters.
     * @param {String} key - The key which will become a property on the group.
     */
    MakeGetterSetter: function(group, key) {

      var secret = '_' + key;

      Object.defineProperty(group, key, {

        enumerable: true,

        get: function() {
          return this[secret];
        },

        set: function(v) {
          this[secret] = v;
          // Trickle down styles
          for (var i = 0; i < this.children.length; i++) {
            var child = this.children[i];
            child[key] = v;
          }
        }

      });

    }

  });

  _.extend(Group.prototype, Two.Shape.prototype, {

    // Flags
    // http://en.wikipedia.org/wiki/Flag

    /**
     * @name Two.Group#_flagAdditions
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#additions} need updating.
     */
    _flagAdditions: false,

    /**
     * @name Two.Group#_flagSubtractions
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#subtractions} need updating.
     */
    _flagSubtractions: false,

    /**
     * @name Two.Group#_flagOrder
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#order} need updating.
     */
    _flagOrder: false,

    /**
     * @name Two.Group#_flagOpacity
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#opacity} need updating.
     */
    _flagOpacity: true,

    /**
     * @name Two.Group#_flagBeginning
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#beginning} need updating.
     */
    _flagBeginning: false,

    /**
     * @name Two.Group#_flagEnding
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#ending} need updating.
     */
    _flagEnding: false,

    /**
     * @name Two.Group#_flagLength
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#length} need updating.
     */
    _flagLength: false,

    /**
     * @name Two.Group#_flagMask
     * @private
     * @property {Boolean} - Determines whether the {@link Two.Group#mask} need updating.
     */
    _flagMask: false,

    // Underlying Properties

    /**
     * @name Two.Group#fill
     * @property {(CssColor|Two.Gradient|Two.Texture)} - The value of what all child shapes should be filled in with.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS Colors.
     */
    _fill: '#fff',

    /**
     * @name Two.Group#stroke
     * @property {(CssColor|Two.Gradient|Two.Texture)} - The value of what all child shapes should be outlined in with.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value} for more information on CSS Colors.
     */
    _stroke: '#000',

    /**
     * @name Two.Group#linewidth
     * @property {Number} - The thickness in pixels of the stroke for all child shapes.
     */
    _linewidth: 1.0,

    /**
     * @name Two.Group#opacity
     * @property {Number} - The opaqueness of all child shapes.
     * @nota-bene Becomes multiplied by the individual child's opacity property.
     */
    _opacity: 1.0,

    /**
     * @name Two.Group#visible
     * @property {Boolean} - Display the path or not.
     * @nota-bene For {@link Two.CanvasRenderer} and {@link Two.WebGLRenderer} when set to false all updating is disabled improving performance dramatically with many objects in the scene.
     */
    _visible: true,

    /**
     * @name Two.Group#cap
     * @property {String}
     * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty}
     */
    _cap: 'round',

    /**
     * @name Two.Group#join
     * @property {String}
     * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty}
     */
    _join: 'round',

    /**
     * @name Two.Group#miter
     * @property {String}
     * @see {@link https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty}
     */
    _miter: 4,

    /**
     * @name Two.Group#closed
     * @property {Boolean} - Determines whether a final line is drawn between the final point in the `vertices` array and the first point of all child shapes.
     */
    _closed: true,

    /**
     * @name Two.Group#curved
     * @property {Boolean} - When the child's path is `automatic = true` this boolean determines whether the lines between the points are curved or not.
     */
    _curved: false,

    /**
     * @name Two.Group#automatic
     * @property {Boolean} - Determines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.
     */
    _automatic: true,

    /**
     * @name Two.Group#beginning
     * @property {Number} - Number between zero and one to state the beginning of where the path is rendered.
     * @description {@link Two.Group#beginning} is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.
     * @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Group#ending}.
     */
    _beginning: 0,

    /**
     * @name Two.Group#ending
     * @property {Number} - Number between zero and one to state the ending of where the path is rendered.
     * @description {@link Two.Group#ending} is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.
     * @nota-bene This is great for animating in and out stroked paths in conjunction with {@link Two.Group#beginning}.
     */
    _ending: 1.0,

    /**
     * @name Two.Group#length
     * @property {Number} - The sum of distances between all child lengths.
     */
    _length: 0,

    /**
     * @name Two.Group#mask
     * @property {Two.Shape} - The Two.js object to clip from a group's rendering.
     */
    _mask: null,

    constructor: Group,

    /**
     * @name Two.Group#clone
     * @function
     * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
     * @returns {Two.Group}
     * @description Create a new instance of {@link Two.Group} with the same properties of the current group.
     */
    clone: function(parent) {

      // /**
      //  * TODO: Group has a gotcha in that it's at the moment required to be bound to
      //  * an instance of two in order to add elements correctly. This needs to
      //  * be rethought and fixed.
      //  */

      var clone = new Group();
      var children = _.map(this.children, function(child) {
        return child.clone();
      });

      clone.add(children);

      clone.opacity = this.opacity;

      if (this.mask) {
        clone.mask = this.mask;
      }

      clone.translation.copy(this.translation);
      clone.rotation = this.rotation;
      clone.scale = this.scale;
      clone.className = this.className;

      if (this.matrix.manual) {
        clone.matrix.copy(this.matrix);
      }

      if (parent) {
        parent.add(clone);
      }

      return clone._update();

    },

    /**
     * @name Two.Group#toObject
     * @function
     * @returns {Object}
     * @description Return a JSON compatible plain object that represents the group.
     */
    toObject: function() {

      var result = {
        children: [],
        translation: this.translation.toObject(),
        rotation: this.rotation,
        scale: this.scale instanceof Two.Vector ? this.scale.toObject() : this.scale,
        opacity: this.opacity,
        className: this.className,
        mask: (this.mask ? this.mask.toObject() : null)
      };

      if (this.matrix.manual) {
        result.matrix = this.matrix.toObject();
      }

      _.each(this.children, function(child, i) {
        result.children[i] = child.toObject();
      }, this);

      return result;

    },

    /**
     * @name Two.Group#corner
     * @function
     * @description Orient the children of the group to the upper left-hand corner of that group.
     */
    corner: function() {

      var rect = this.getBoundingClientRect(true);
      var corner = { x: rect.left, y: rect.top };

      this.children.forEach(function(child) {
        child.translation.sub(corner);
      });

      return this;

    },

    /**
     * @name Two.Group#center
     * @function
     * @description Orient the children of the group to the center of that group.
     */
    center: function() {

      var rect = this.getBoundingClientRect(true);

      rect.centroid = {
        x: rect.left + rect.width / 2 - this.translation.x,
        y: rect.top + rect.height / 2 - this.translation.y
      };

      this.children.forEach(function(child) {
        if (child.isShape) {
          child.translation.sub(rect.centroid);
        }
      });

      return this;

    },

    /**
     * @name Two.Group#getById
     * @function
     * @description Recursively search for id. Returns the first element found.
     * @returns {Two.Shape} - Or `null` if nothing is found.
     */
    getById: function (id) {
      var found = null;
      function search(node) {
        if (node.id === id) {
          return node;
        } else if (node.children) {
          for (var i = 0; i < node.children.length; i++) {
            found = search(node.children[i], id);
            if (found) {
              return found;
            }
          }
        }
        return null;
      }
      return search(this);
    },

    /**
     * @name Two.Group#getByClassName
     * @function
     * @description Recursively search for classes. Returns an array of matching elements.
     * @returns {Two.Shape[]} - Or empty array if nothing is found.
     */
    getByClassName: function(className) {
      var found = [];
      function search(node) {
        if (_.indexOf(node.classList, className) >= 0) {
          found.push(node);
        }
        if (node.children) {
          for (var i = 0; i < node.children.length; i++) {
            var child = node.children[i];
            search(child, className);
          }
        }
        return found;
      }
      return search(this);
    },

    /**
     * @name Two.Group#getByType
     * @function
     * @description Recursively search for children of a specific type, e.g. {@link Two.Path}. Pass a reference to this type as the param. Returns an array of matching elements.
     * @returns {Two.Shape[]} - Empty array if nothing is found.
     */
    getByType: function(type) {
      var found = [];
      function search(node) {
        if (node instanceof type) {
          found.push(node);
        }
        if (node.children) {
          for (var i = 0; i < node.children.length; i++) {
            var child = node.children[i];
            search(child);
          }
        }
        return found;
      }
      return search(this, type);
    },

    /**
     * @name Two.Group#add
     * @function
     * @param {Two.Shape[]} objects - An array of objects to be added. Can be also added as individual arguments.
     * @description Add objects to the group.
     */
    add: function(objects) {

      // Allow to pass multiple objects either as array or as multiple arguments
      // If it's an array also create copy of it in case we're getting passed
      // a childrens array directly.
      if (!(objects instanceof Array)) {
        objects = _.toArray(arguments);
      } else {
        objects = objects.slice();
      }

      // Add the objects
      for (var i = 0; i < objects.length; i++) {
        var child = objects[i];
        if (!(child && child.id)) {
          continue;
        }
        var index = _.indexOf(this.children, child);
        if (index >= 0) {
          this.children.splice(index, 1);
        }
        this.children.push(child);
      }

      return this;

    },

    /**
     * @name Two.Group#add
     * @function
     * @param {Two.Shape[]} objects - An array of objects to be removed. Can be also removed as individual arguments.
     * @description Remove objects from the group.
     */
    remove: function(objects) {

      var l = arguments.length,
        grandparent = this.parent;

      // Allow to call remove without arguments
      // This will detach the object from its own parent.
      if (l <= 0 && grandparent) {
        grandparent.remove(this);
        return this;
      }

      // Allow to pass multiple objects either as array or as multiple arguments
      // If it's an array also create copy of it in case we're getting passed
      // a childrens array directly.
      if (!(objects instanceof Array)) {
        objects = _.toArray(arguments);
      } else {
        objects = objects.slice();
      }

      // Remove the objects
      for (var i = 0; i < objects.length; i++) {
        if (!objects[i] || !(this.children.ids[objects[i].id])) continue;
        this.children.splice(_.indexOf(this.children, objects[i]), 1);
      }

      return this;

    },

    /**
     * @name Two.Group#getBoundingClientRect
     * @function
     * @param {Boolean} [shallow=false] - Describes whether to calculate off local matrix or world matrix.
     * @returns {Object} - Returns object with top, left, right, bottom, width, height attributes.
     * @description Return an object with top, left, right, bottom, width, and height parameters of the group.
     */
    getBoundingClientRect: function(shallow) {
      var rect;

      // TODO: Update this to not __always__ update. Just when it needs to.
      this._update(true);

      // Variables need to be defined here, because of nested nature of groups.
      var left = Infinity, right = -Infinity,
          top = Infinity, bottom = -Infinity;

      var regex = Two.Texture.RegularExpressions.effect;

      for (var i = 0; i < this.children.length; i++) {

        var child = this.children[i];

        if (!child.visible || regex.test(child._renderer.type)) {
          continue;
        }

        rect = child.getBoundingClientRect(shallow);

        if (!_.isNumber(rect.top)   || !_.isNumber(rect.left)   ||
            !_.isNumber(rect.right) || !_.isNumber(rect.bottom)) {
          continue;
        }

        top = min(rect.top, top);
        left = min(rect.left, left);
        right = max(rect.right, right);
        bottom = max(rect.bottom, bottom);

      }

      return {
        top: top,
        left: left,
        right: right,
        bottom: bottom,
        width: right - left,
        height: bottom - top
      };

    },

    /**
     * @name Two.Group#noFill
     * @function
     * @description Apply `noFill` method to all child shapes.
     */
    noFill: function() {
      this.children.forEach(function(child) {
        child.noFill();
      });
      return this;
    },

    /**
     * @name Two.Group#noStroke
     * @function
     * @description Apply `noStroke` method to all child shapes.
     */
    noStroke: function() {
      this.children.forEach(function(child) {
        child.noStroke();
      });
      return this;
    },

    /**
     * @name Two.Group#subdivide
     * @function
     * @description Apply `subdivide` method to all child shapes.
     */
    subdivide: function() {
      var args = arguments;
      this.children.forEach(function(child) {
        child.subdivide.apply(child, args);
      });
      return this;
    },

    /**
     * @name Two.Group#_update
     * @function
     * @private
     * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
     * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
     * @nota-bene Try not to call this method more than once a frame.
     */
    _update: function() {

      if (this._flagBeginning || this._flagEnding) {

        var beginning = Math.min(this._beginning, this._ending);
        var ending = Math.max(this._beginning, this._ending);
        var length = this.length;
        var sum = 0;

        var bd = beginning * length;
        var ed = ending * length;
        var distance = (ed - bd);

        for (var i = 0; i < this.children.length; i++) {

          var child = this.children[i];
          var l = child.length;

          if (bd > sum + l) {
            child.beginning = 1;
            child.ending = 1;
          } else if (ed < sum) {
            child.beginning = 0;
            child.ending = 0;
          } else if (bd > sum && bd < sum + l) {
            child.beginning = (bd - sum) / l;
            child.ending = 1;
          } else if (ed > sum && ed < sum + l) {
            child.beginning = 0;
            child.ending = (ed - sum) / l;
          } else {
            child.beginning = 0;
            child.ending = 1;
          }

          sum += l;

        }

      }

      return Two.Shape.prototype._update.apply(this, arguments);

    },

    /**
     * @name Two.Group#flagReset
     * @function
     * @private
     * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
     */
    flagReset: function() {

      if (this._flagAdditions) {
        this.additions.length = 0;
        this._flagAdditions = false;
      }

      if (this._flagSubtractions) {
        this.subtractions.length = 0;
        this._flagSubtractions = false;
      }

      this._flagOrder = this._flagMask = this._flagOpacity =
        this._flagBeginning = this._flagEnding = false;

      Two.Shape.prototype.flagReset.call(this);

      return this;

    }

  });

  Group.MakeObservable(Group.prototype);

  // /**
  //  * Helper function used to sync parent-child relationship within the
  //  * `Two.Group.children` object.
  //  *
  //  * Set the parent of the passed object to another object
  //  * and updates parent-child relationships
  //  * Calling with one arguments will simply remove the parenting
  //  */
  function replaceParent(child, newParent) {

    var parent = child.parent;
    var index;

    if (parent === newParent) {
      add();
      return;
    }

    if (parent && parent.children.ids[child.id]) {

      index = _.indexOf(parent.children, child);
      parent.children.splice(index, 1);

      splice();

    }

    if (newParent) {
      add();
      return;
    }

    splice();

    if (parent._flagAdditions && parent.additions.length === 0) {
      parent._flagAdditions = false;
    }
    if (parent._flagSubtractions && parent.subtractions.length === 0) {
      parent._flagSubtractions = false;
    }

    delete child.parent;

    function add() {

      if (newParent.subtractions.length > 0) {
        index = _.indexOf(newParent.subtractions, child);

        if (index >= 0) {
          newParent.subtractions.splice(index, 1);
        }
      }

      if (newParent.additions.length > 0) {
        index = _.indexOf(newParent.additions, child);

        if (index >= 0) {
          newParent.additions.splice(index, 1);
        }
      }

      child.parent = newParent;
      newParent.additions.push(child);
      newParent._flagAdditions = true;

    }

    function splice() {

      index = _.indexOf(parent.additions, child);

      if (index >= 0) {
        parent.additions.splice(index, 1);
      }

      index = _.indexOf(parent.subtractions, child);

      if (index < 0) {
        parent.subtractions.push(child);
        parent._flagSubtractions = true;
      }

    }

  }

})((typeof global !== 'undefined' ? global : (this || self || window)).Two);