var width = innerWidth, 
    height = innerHeight,
    r = Math.min(width, height)/3

var svg = d3.select('body').html('')
  .append('svg').at({width, height})
  .append('g').translate([width/2, height/2])

var circle = svg.append('circle').at({r: r, fillOpacity: .2})
svg.append('circle').at({r: r, fillOpacity: .2})

var path = svg.append('path')
  .at({stroke: '#000', fill: 'none', strokeWidth: 3})

function pathStr(t){
  return [
    'M', 0, -r, 
    'h', (1 - t)*r,
    'A', t*r, t*r, 0, 0, 1, r, -(1 - t)*r,
    'v', (1 - t)*r 
  ].join(' ')
}

if (window.timer) window.timer.stop()
window.timer = d3.timer(function(s){
  var t = Math.sin(s/600)*.5 + .5

  path.at({d: pathStr(t)})

  circle.at({r: t*r}).translate([(1 - t)*r, -(1 - t)*r])
})