Inspired by an untitled GIF by PATAKK and Hypnos by Hakim El Hattab.
forked from mbostock's block: Spiral Circle
Inspired by an untitled GIF by PATAKK and Hypnos by Hakim El Hattab.
forked from mbostock's block: Spiral Circle
license: gpl-3.0 |
<!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; | |
var square = d3.selectAll("g") | |
.append("g") | |
.attr("transform", function(d, i) { return i ? "rotate(180)" : null; }) | |
.selectAll("rect") | |
.data(d3.range(squareCount*3)) | |
.enter().append("rect") | |
.datum(function(i) { return i / (squareCount*3); }) | |
.attr({width: squareSize*4, height: squareSize*4, x: -squareSize / 2, y: -squareSize / 2}); | |
var ellipse = d3.selectAll("g") | |
.append("g") | |
.attr("transform", function(d, i) { return i ? "rotate(180)" : null; }) | |
.selectAll("ellipse") | |
.data(d3.range(squareCount*2)) | |
.enter().append("ellipse") | |
.datum(function(i) { return i / (squareCount*2); }) | |
.attr({r: squareSize, rx: squareSize*2.5, ry: squareSize / 2, cx: -squareSize / 2, cy: -squareSize / 2}); | |
var circle = d3.selectAll("g") | |
.append("g") | |
.attr("transform", function(d, i) { return i ? "rotate(180)" : null; }) | |
.selectAll("circle") | |
.data(d3.range(squareCount*2)) | |
.enter().append("circle") | |
.datum(function(i) { return i / (squareCount*2); }) | |
.attr({r: squareSize/1.5, cx: -squareSize / 2, cy: -squareSize / 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> |