var round = Math.round, 
    min = Math.min, 
    
    PI = Math.PI, 
    cos = Math.cos, sin = Math.sin, 
    
    rand = function(max, min) {
  var b = (max === 0 || max) ? max : 1, 
      a = min || 0;

  return a + (b - a)*Math.random();
};

var N_POINTS = round(rand(13, 3)), 
    DURATION = rand(8, .5), 
    TIMING_FUNCTION = 'linear', 
    K = rand(.8, .2);

var c = document.querySelector('.c'), 
    poly = c.querySelector('.poly'), 
    vb = c.getAttribute('viewBox').split(' '), 
    angle_base = PI/N_POINTS, 
    radius_outer = .4*min(vb[2], vb[3]), 
    d = radius_outer*cos(angle_base), 
    radius_inner = K*d, 
    a_initial = [], a_final = [], a_current = [], 
    req_ID  = null, 
    steps = round(DURATION/(1/60)), 
    t = 0, dir = 1;

var init = function() {
  var radius_curr, angle_curr, x, y, attr_val = '';
  
  for(var i = 0; i < 2*N_POINTS; i++) {
    angle_curr = i*angle_base;
    radius_curr = ((i%2 === 0) ? radius_outer : radius_inner);
    
    x = round(radius_curr*cos(angle_curr));
    y = round(radius_curr*sin(angle_curr));
    
    a_initial.push({'x': x, 'y': y});
    
    attr_val += x + ' ' + y + 
      ((i !== (2*N_POINTS - 1)) ? ', ' : '');
    
    if(radius_curr === radius_inner) {
      radius_curr = d;
      x = round(radius_curr*cos(angle_curr));
      y = round(radius_curr*sin(angle_curr));
    }
    
    a_final.push({'x': x, 'y': y});
  }
  
  poly.setAttribute('points', attr_val);
  poly.setAttribute('transform', 'rotate(' + round(rand(360)) + ')');
  
  breathe();
};

var breathe = function() {
  var x, y, attr_val = '';
  
  for(var i = 0; i < 2*N_POINTS; i++) {
    x = round(a_initial[i].x + t*(a_final[i].x - a_initial[i].x)/steps);
    y = round(a_initial[i].y + t*(a_final[i].y - a_initial[i].y)/steps);
    
    attr_val += x + ' ' + y + 
      ((i !== (2*N_POINTS - 1)) ? ', ' : '');
  }
  
  poly.setAttribute('points', attr_val);
  
  t += dir;
  
  if(t === steps || t === 0) { dir *= -1; }
  
  console.log
  
  req_ID = requestAnimationFrame(breathe);
};

init();