Skip to content

Instantly share code, notes, and snippets.

Last active May 15, 2019
What would you like to do?
Chained Transitions
<!DOCTYPE html>
<meta charset="utf-8">
body {
max-width: 960px;
margin: 1px;
div {
width: 10px;
height: 10px;
margin: 1px 0 0 1px;
float: left;
background: #eee;
display: inline-block;
<script src=""></script>
var n = 4002;
var whiteblue = d3.interpolateRgb("#eee", "steelblue"),
blueorange = d3.interpolateRgb("steelblue", "orange"),
orangewhite = d3.interpolateRgb("orange", "#eee");"body").selectAll("div")
.delay(function(d, i) { return i + Math.random() * n / 4; })
.on("start", function repeat() {
.styleTween("background-color", function() { return whiteblue; })
.styleTween("background-color", function() { return blueorange; })
.styleTween("background-color", function() { return orangewhite; })
.on("start", repeat);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment