Blue Spiral Circle

Inspired by an untitled GIF by PATAKK and Hypnos by Hakim El Hattab.

forked from mbostock's block: Spiral Circle

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {background-color:black;}

rect {
  fill: steelblue;
  stroke: black;
  fill-opacity: .2;
  stroke-width: 8px;

stroke-opacity: .5;

}

circle {
  fill: lightblue;
 fill-opacity: .1;
  stroke: black;
  stroke-width: 8px;
 stroke-opacity: .2;

}

ellipse {
  fill: cornflowerblue;
    fill-opacity:.2;
  stroke: black;
  stroke-width: 8px;
  stroke-opacity: .5;
}

</style>
<svg width="960" height="500">
  <defs>
    <clipPath id="clip-upper">
      <rect width="960" height="500" x="-480" y="-250"></rect>
    </clipPath>
    <clipPath id="clip-lower">
      <rect width="960" height="500" x="-480" y="0"></rect>
    </clipPath>
  </defs>
  <g clip-path="url(#clip-upper)" transform="translate(480,250)"></g>
  <g clip-path="url(#clip-lower)" transform="translate(480,250)"></g>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500,
    circleRadius = 150,
    squareCount =120,
    squareSize = 20,
    speed = .01,
    inc=2;

d3.timer(function(elapsed) {

square
      .attr("transform", function(t) {return "rotate(" + (t * (360)) + ")translate(0," + circleRadius + ")rotate(" + (t * (360*(inc+6)) + elapsed * (speed-.0025)) + ")"; });
  ellipse
      .attr("transform", function(t) {return "rotate(" + (t * (360)) + ")translate(0," + circleRadius + ")rotate(" + (t * (360*(inc+4)) + elapsed * (speed-.001)) + ")"; });
  circle
  	  .attr("transform", function(t) {return "rotate(" + (t * (360)) + ")translate(0," + circleRadius + ")rotate(" + (t * (360*(inc+6)) + elapsed * (speed+.005)) + ")"; });

}

);

</script>

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