title: Snap.svg - How to always connect two objects with a line?
body: <p>How do we always connect two objects with a line in Snap.svg?</p>
  
  <p>Plunkr:  <a href="https://plnkr.co/edit/IgY0jyHbWTLuH4FfZt6o?p=preview" rel="nofollow">https://plnkr.co/edit/IgY0jyHbWTLuH4FfZt6o?p=preview</a></p>
  
  <pre><code>var circleOne = s.circle(150, 150, 100);
  var circleTwo = s.circle(450, 450, 100);
  var boxOne = circleOne.getBBox();
  var boxTwo = circleTwo.getBBox();
  var line = s.line(boxOne.cx, boxOne.cy, boxTwo.cx, boxTwo.cy);
  line.attr({
    stroke: 'red'
  });
  
  var t = new Snap.Matrix();
  t.translate(200, 0, boxTwo.cx, boxTwo.cy);
  setTimeout(function() {
    circleTwo.animate({ transform: t}, 500, mina.easein);
  }, 1000);
  </code></pre>