var c1, p1;

​

window.onload = onLoad();

​

function tweenCircle() {

  var newRadius = parseInt(c1.attr('r'), 10) === 20 ? 50 : 20;

  c1

    .transition()

    .duration(2000)

    .attr('r', newRadius)

    .each('end', tweenCircle);

};

​

function tweenPath() {

  p1

    .transition()

    .duration(2000)

    .attrTween('d', () => {

      return t => {

        var arr = ['M', 100, 300, 'l', 100 * Math.sin(t * Math.PI), 100 *Math.cos(t * Math.PI), 'Z'];

        return arr.join(' ');

      }

    })

    .each('end', tweenPath);

};

​

function onLoad() {

  var svg = d3.select('#svg-container');

​

  c1 = svg.select('#c1');

  p1 = svg.select('#p1');

  tweenCircle();

  tweenPath();

}

​

​