SVG Shape Tweening

Question

I want to change one shape to another. I tried to use D3.js, there is one point which is out of map when the transition is happening. Here is the example:

function loop() {
path
    .attr("d", d0)
  .transition()
    .duration(5000)
    .attr("transform","scale(1.5)")
    .attr("d", d1)
  .transition()
    .delay(5000)
    .attr("d", d0)
    .each("end", loop);

}

Which you can see in this fiddle

You can see 2 different resulting shapes after transition, what I want is, the transition should start with one of those two shapes and it should end to another shape.

Any ideas?