.line {
  position: absolute;
  border-bottom: 2px solid black;
  opacity: 1;
  left: 0;
  top: 0;
  width: 100%;
}

.line-wrapper {
  position: absolute;
}

// utils
function dist(x1, y1, x2, y2) {
  var dx = x1 - x2,
      dy = y1 - y2;
  return Math.sqrt(dx * dx + dy * dy);
}

function ang(x1, y1, x2, y2) {
  var dx = x1 - x2,
      dy = y1 - y2;
  return Math.atan2(dy, dx) / Math.PI * 180;
}

// main
var animationFns = {},
    animationIdx = 0;

setInterval(function() {
 for (var i in animationFns) {
   if (animationFns[i] != null) {
     animationFns[i]();
   }
 }
}, 16);

// line creator
function doLine(x1, y1, x2, y2, delay) {
  var widthDest = dist(x1, y1, x2, y2), 
      idx = animationIdx++,
      width = 0, 
      line, lineWrapper;
      
  deley = delay || 0;
  line = document.createElement('div');
  line.classList.add('line');

  lineWrapper = document.createElement('div');
  lineWrapper.classList.add('line-wrapper');
  lineWrapper.style.left = x1 + 'px';
  lineWrapper.style.top = y1 + 'px';
  
  rot = 45;
  rot = ang(x2, y2, x1, y1);
  // for vendor prefixes
  $(lineWrapper).css({
    transformOrigin: '0 0',
    transform: 'rotate(' + rot + 'deg)'
  });
  
  lineWrapper.appendChild(line);
  document.body.appendChild(lineWrapper);

  setTimeout(function() {
    var animationFn =  animationFns[idx] = function() {
       width += (widthDest - width) / 8;
       
       if (Math.abs(width - widthDest) < 1) {
         lineWrapper.style.width = widthDest + 'px';
         delete animationFns[idx];
       } else {
         lineWrapper.style.width = width + 'px';
       }
    };
  }, delay);
}

doLine(100, 100, 200, 200);
doLine(100, 100, 150, 250, 1000);

var r = 400;
for (var i = 0; i < 10; i++) {
 var hw = window.innerWidth / 2, 
     t = (i * 10) * Math.PI / 180,
     xr = hw + r * Math.cos(t), 
     yr = 20 + r * Math.sin(t);
  doLine(hw, 20, xr, yr, (1 + i * 200));
}

doLine(0, 0, 50, 50);
doLine(50, 50, 150, 0, 500);
doLine(150, 0, 200, 50, 1000);
doLine(200, 50, 250, 0, 1500);