text: /*
   * Noel Delgado | @pixelia_me
   */
  
  var items = []
    , point = document.querySelector('svg').createSVGPoint();
  
  function getCoordinates(e, svg) {
    point.x = e.clientX;
    point.y = e.clientY;
    return point.matrixTransform(svg.getScreenCTM().inverse());
  }
  
  function changeColor(e) {
    document.body.className = e.currentTarget.className;
  }
  
  function Item(config) {
    Object.keys(config).forEach(function (item) {
      this[item] = config[item];
    }, this);
    this.el.addEventListener('mousemove', this.mouseMoveHandler.bind(this));
    this.el.addEventListener('touchmove', this.touchMoveHandler.bind(this));
  }
  
  Item.prototype = {
    update: function update(c) {
      this.clip.setAttribute('cx', c.x);
      this.clip.setAttribute('cy', c.y);
    },
    mouseMoveHandler: function mouseMoveHandler(e) {
      this.update(getCoordinates(e, this.svg));
    },
    touchMoveHandler: function touchMoveHandler(e) {
      e.preventDefault();
      var touch = e.targetTouches[0];
      if (touch) return this.update(getCoordinates(touch, this.svg));
    }
  };
  
  [].slice.call(document.querySelectorAll('.item'), 0).forEach(function (item, index) {
    items.push(new Item({
      el: item,
      svg: item.querySelector('svg'),
      clip: document.querySelector('#clip-'+index+' circle'),
    }));
  });
  
  [].slice.call(document.querySelectorAll('button'), 0).forEach(function (button) {
    button.addEventListener('click', changeColor);
  });