Barbican logo

The Barbican has a nice animated logo, which I've tried to recreate using JavaScript and D3.

<!DOCTYPE html>
<html>
<head>
  <title>Barbican logo</title>
  <style type="text/css">
    body {
      margin: 0;
    }

svg.barbican-logo {
      display: block;
      width: 100vmin;
      height: 100vmin;
      margin: 0 auto;
      animation-timing-function: ease-out;
      animation: barbican-logo 2s infinite alternate;
    }

@keyframes barbican-logo {
      0% {
        transform: scale(5) rotate(0.5turn);
      }

60% {
        transform: scale(5) rotate(0.5turn);
      }

95% {
        transform: scale(1) rotate(0);
      }
    }
  </style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
  var width = 900,
      height = 500,
      radius = Math.min(width, height) * 0.48;

var svg = d3.select('body').append('svg')
    .attr('class', 'barbican-logo')
    .attr('viewBox', [0, 0, width, height])

svg = svg.append('g')
    .attr('transform', 'translate(' + [width/2, height/2] + ')')

var s = Math.PI / 6

var path = d3.path()
  path.arc(0, 0, radius, -s, Math.PI+s)
  path.closePath()

svg.append('path')
    .attr('d', path)

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js