<canvas></canvas>

canvas
  width: 100%
  height: 100%
  background: #34495e

var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"),
  width = 0,
  height = 0,
  particles = [],
  mouseX = 0,
  mouseY = 0,
  columns = [],
  radius = 50;

var resize = (function(event) {
  width  = canvas.width  = window.innerWidth;
  height = canvas.height = window.innerHeight;
})();

var mousemove = (function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

canvas.addEventListener("mousemove", mousemove, false);

var clear = function(ctx) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

var Dot = function(x, y, radius) {
  this.x = x;
  this.y = y;
  this.sides = 6;
  this.maxRadius = radius;
  this.shrinking = false;
  
  this.radius = 0;
  
  this.id = ++Dot.counter;
  
  this.colliding = false;
};

Dot.prototype.reset = function(radius) {
  this.maxRadius = radius;
  this.radius = this.maxRadius / 10;
  this.shrinking = false;
  this.colliding = false;
}

Dot.prototype.shrink = function() {
  this.shrinking = true;
  this.radius -= .5;
  this.fillStyle = "#F39c12";
}

Dot.counter = 0;
Dot.prototype.render = function(ctx) {

  if(this.radius != this.maxRadius && !this.shrinking)
    this.radius += .5;
  
  ctx.beginPath();
  ctx.moveTo (this.x +  this.radius * Math.cos(0), this.y +  this.radius *  Math.sin(0));          

  for (var i = 1; i <= this.sides;i += 1) {
      ctx.lineTo (this.x + this.radius * Math.cos(i * 2 * Math.PI / this.sides), this.y + this.radius * Math.sin(i * 2 * Math.PI / this.sides));
  }
  
  ctx.strokeStyle = "#F39c12";
  
  if (this.colliding) {
    ctx.fillStyle = "hsla("+ this.id + 1 +", 100%, 50%, 1.0)";
  } else {
    ctx.fillStyle = this.fillStyle; 
  }
  
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.fill();
  
  return this;
}


var ColumnPool = function() {
  this.columns = [];
  this.columnIndex = 0;
  this.even = true;
}

ColumnPool.prototype.getColumn = function(x) {
  
  this.columnIndex++;
  this.columnHeight = 15;
  
  if (this.columns.length) {
    var c = this.columns.pop();
    this.resetColumn(c, x);
    return c;
  } else {
    return this.createNewColumn(x);
  }
  
}

ColumnPool.prototype.resetColumn = function(column, x) {
  
  var y = 0;

  if (this.even) {
    y += (radius - 5);
  }
    
  this.even = !this.even;
  
  column.forEach(function(particle, i, arr) {
    particle.x = x;
    particle.y = y;
    
    particle.reset(radius);
    
    y += (radius * 2 - 10);
  });
  
  return column;
}

ColumnPool.prototype.createNewColumn = function(x) {
  
  var column = [];
  var y = 0;
  
  if (this.even) {
    y += (radius - 5);
  }
  
  this.even = !this.even;
  
  for (var i = this.columnHeight; i >= 0; i--) {
    var p = new Dot(x, y, radius);
    column.push(p);

    y += (radius * 2 - 10);
  }
  
  return column;
  
}

ColumnPool.prototype.returnColumn = function(column) {
  this.columns.push(column);
}

var columnPool = new ColumnPool();

columns.push(columnPool.getColumn(0));

var global_offset = 0;
var old_t = null,
  new_t = null,
  delta = null,
  speed = 4,
  last_column = null;
    
var render = function(time) {
  clear(ctx);
  new_t = time;
  old_t ? delta = new_t - old_t : delta = new_t;
  
  columns.forEach(function(column, i, arr) {
    column.forEach(function(particle, i, arr) {
      particle.x += speed;
      
      var circle1 = {radius: 20, x: mouseX, y: mouseY};
      var circle2 = {radius: particle.radius, x: particle.x, y: particle.y};

      var dx = circle1.x - circle2.x;
      var dy = circle1.y - circle2.y;
      var distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < circle1.radius + circle2.radius) {
        particle.colliding = true;
      } else {
        particle.colliding = false;
      }
      
      
      
      
      
      if (particle.x > width - 400)
        particle.shrink();
      
      particle.render(ctx);
      
    });
  });
  
  global_offset += speed;
  
  if (((columnPool.columnIndex * - (radius * 1.54)) + global_offset) > radius) {
    columns.push(columnPool.getColumn((columnPool.columnIndex * - (radius * 1.54)) + global_offset));
  }
  
  last_column = columns.slice(0);
  
  if (columns[0][0].x > width) {
    columnPool.returnColumn(columns.shift());
  }
  
  old_t = new_t;
  
  window.requestAnimationFrame(render);

};

window.requestAnimationFrame(render);