Skip to content

Instantly share code, notes, and snippets.

@bmershon

bmershon/README.md

Last active November 26, 2016 22:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bmershon/d93a6cc48c5263f5e0f9 to your computer and use it in GitHub Desktop.
Save bmershon/d93a6cc48c5263f5e0f9 to your computer and use it in GitHub Desktop.
Download ZIP
squares
Raw
README.md

I wanted to make a looping animation after checking out the sweet work of Florian de Looij (@FloriandeLooij).

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
stroke: black;
stroke-width: 2px;
}
</style>
<body>
</body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
size = 30;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g0_loc = g1_loc = [width/2, height/2],
g2_loc = [-2*size, -2*size],
g3_loc = [-size, -size];
var g0 = svg.append("g")
.attr("transform", "translate(" + g0_loc[0] + "," + g0_loc[1] + ")");
var rect0 = g0.append("rect")
.attr("width", 8*size)
.attr("height", 8*size)
.attr("fill", "none")
.attr("transform", "translate(" + (-4*size) + "," + (-4*size) + ")");
var g1 = svg.append("g")
.attr("transform", "translate(" + g1_loc[0] + "," + g1_loc[1] + ")");
var rect1 = g1.append("rect")
.attr("width", 4*size)
.attr("height", 4*size)
.attr("fill", "none")
.attr("transform", "translate(" + (-4*size) + "," + (-4*size) + ")");
var g2 = g1.append("g")
.attr("transform", "translate(" + g2_loc[0] + "," + g2_loc[1] + ")");
var rect2 = g2.append("rect")
.attr("width", 2*size)
.attr("height", 2*size)
.attr("fill", "none")
.attr("transform", "translate(" + (-2*size) + "," + (-2*size) + ")");
var g3 = g2.append("g")
.attr("transform", "translate(" +g3_loc[0] + "," + g3_loc[1] + ")");
var rect3 = g3.append("rect")
.attr("width", 1*size)
.attr("height", 1*size)
.attr("fill", "#000")
.attr("transform", "translate(" + (-size) + "," + (-size) + ")");
var anim_length = 750;
start();
function start() {
g0.call(spin, 4*anim_length, 0, g1_loc, 3, -1, "quad");
g1.call(spin, 4*anim_length, 0, g1_loc, 3, 1);
g2.call(spin, 2*anim_length, 0, g2_loc, 3, -1);
g3.call(spin, anim_length, 0, g3_loc, 3, 1);
}
function spin(d, duration, delay, loc, clock, dir, type) {
clock = (clock + 1) % 4;
d.transition("spin")
.duration(duration)
.attr("transform", "translate(" + loc[0] + "," + loc[1] + ")" + "rotate(" + clock * dir* 90 +")")
.ease(type || "cubic")
.transition()
.duration(delay)
.each("end", function() {d.call(spin, duration, delay, loc, clock, dir, type); });
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment