Skip to content

Instantly share code, notes, and snippets.

@brendansudol

brendansudol/index.html

Last active October 24, 2016 00:46
Show Gist options
  • Save brendansudol/a31bcfc87735759707ffd22050a291cb to your computer and use it in GitHub Desktop.
Save brendansudol/a31bcfc87735759707ffd22050a291cb to your computer and use it in GitHub Desktop.
Download ZIP
GSA's TTS Logo, Animated
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>GSA :: Technology Transformation Service</title>
<style>
body { background-color: #1c5295; }
svg { position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; }
rect { fill: #fff; opacity: 0; }
</style>
</head>
<body>
<svg width='178' height='118'>
<title>TTS</title>
<rect x='0' y='20' width='8' height='8'></rect>
<rect x='0' y='30' width='8' height='8'></rect>
<rect x='0' y='40' width='8' height='8'></rect>
<rect x='0' y='50' width='8' height='8'></rect>
<rect x='0' y='60' width='8' height='8'></rect>
<rect x='10' y='0' width='8' height='8'></rect>
<rect x='10' y='10' width='8' height='8'></rect>
<rect x='10' y='20' width='8' height='8'></rect>
<rect x='10' y='30' width='8' height='8'></rect>
<rect x='10' y='40' width='8' height='8'></rect>
<rect x='10' y='50' width='8' height='8'></rect>
<rect x='10' y='60' width='8' height='8'></rect>
<rect x='10' y='70' width='8' height='8'></rect>
<rect x='20' y='0' width='8' height='8'></rect>
<rect x='20' y='10' width='8' height='8'></rect>
<rect x='20' y='20' width='8' height='8'></rect>
<rect x='20' y='30' width='8' height='8'></rect>
<rect x='20' y='40' width='8' height='8'></rect>
<rect x='20' y='50' width='8' height='8'></rect>
<rect x='20' y='60' width='8' height='8'></rect>
<rect x='20' y='70' width='8' height='8'></rect>
<rect x='30' y='0' width='8' height='8'></rect>
<rect x='30' y='10' width='8' height='8'></rect>
<rect x='30' y='20' width='8' height='8'></rect>
<rect x='30' y='30' width='8' height='8'></rect>
<rect x='30' y='40' width='8' height='8'></rect>
<rect x='30' y='50' width='8' height='8'></rect>
<rect x='30' y='60' width='8' height='8'></rect>
<rect x='30' y='70' width='8' height='8'></rect>
<rect x='30' y='80' width='8' height='8'></rect>
<rect x='40' y='10' width='8' height='8'></rect>
<rect x='40' y='20' width='8' height='8'></rect>
<rect x='40' y='30' width='8' height='8'></rect>
<rect x='40' y='40' width='8' height='8'></rect>
<rect x='40' y='50' width='8' height='8'></rect>
<rect x='40' y='60' width='8' height='8'></rect>
<rect x='40' y='70' width='8' height='8'></rect>
<rect x='40' y='80' width='8' height='8'></rect>
<rect x='50' y='10' width='8' height='8'></rect>
<rect x='50' y='20' width='8' height='8'></rect>
<rect x='50' y='30' width='8' height='8'></rect>
<rect x='50' y='40' width='8' height='8'></rect>
<rect x='50' y='50' width='8' height='8'></rect>
<rect x='50' y='60' width='8' height='8'></rect>
<rect x='50' y='70' width='8' height='8'></rect>
<rect x='50' y='80' width='8' height='8'></rect>
<rect x='60' y='10' width='8' height='8'></rect>
<rect x='60' y='20' width='8' height='8'></rect>
<rect x='60' y='30' width='8' height='8'></rect>
<rect x='60' y='40' width='8' height='8'></rect>
<rect x='60' y='50' width='8' height='8'></rect>
<rect x='60' y='60' width='8' height='8'></rect>
<rect x='60' y='70' width='8' height='8'></rect>
<rect x='60' y='80' width='8' height='8'></rect>
<rect x='60' y='90' width='8' height='8'></rect>
<rect x='70' y='10' width='8' height='8'></rect>
<rect x='70' y='20' width='8' height='8'></rect>
<rect x='70' y='30' width='8' height='8'></rect>
<rect x='70' y='40' width='8' height='8'></rect>
<rect x='70' y='50' width='8' height='8'></rect>
<rect x='70' y='60' width='8' height='8'></rect>
<rect x='70' y='70' width='8' height='8'></rect>
<rect x='70' y='80' width='8' height='8'></rect>
<rect x='70' y='90' width='8' height='8'></rect>
<rect x='80' y='10' width='8' height='8'></rect>
<rect x='80' y='20' width='8' height='8'></rect>
<rect x='80' y='30' width='8' height='8'></rect>
<rect x='80' y='40' width='8' height='8'></rect>
<rect x='80' y='50' width='8' height='8'></rect>
<rect x='80' y='60' width='8' height='8'></rect>
<rect x='80' y='70' width='8' height='8'></rect>
<rect x='80' y='80' width='8' height='8'></rect>
<rect x='80' y='90' width='8' height='8'></rect>
<rect x='80' y='100' width='8' height='8'></rect>
<rect x='80' y='110' width='8' height='8'></rect>
<rect x='90' y='10' width='8' height='8'></rect>
<rect x='90' y='20' width='8' height='8'></rect>
<rect x='90' y='30' width='8' height='8'></rect>
<rect x='90' y='40' width='8' height='8'></rect>
<rect x='90' y='50' width='8' height='8'></rect>
<rect x='90' y='60' width='8' height='8'></rect>
<rect x='90' y='70' width='8' height='8'></rect>
<rect x='90' y='80' width='8' height='8'></rect>
<rect x='90' y='90' width='8' height='8'></rect>
<rect x='90' y='100' width='8' height='8'></rect>
<rect x='100' y='10' width='8' height='8'></rect>
<rect x='100' y='20' width='8' height='8'></rect>
<rect x='100' y='30' width='8' height='8'></rect>
<rect x='100' y='40' width='8' height='8'></rect>
<rect x='100' y='50' width='8' height='8'></rect>
<rect x='100' y='60' width='8' height='8'></rect>
<rect x='100' y='70' width='8' height='8'></rect>
<rect x='100' y='80' width='8' height='8'></rect>
<rect x='100' y='90' width='8' height='8'></rect>
<rect x='110' y='20' width='8' height='8'></rect>
<rect x='110' y='30' width='8' height='8'></rect>
<rect x='110' y='40' width='8' height='8'></rect>
<rect x='110' y='50' width='8' height='8'></rect>
<rect x='110' y='60' width='8' height='8'></rect>
<rect x='110' y='70' width='8' height='8'></rect>
<rect x='110' y='80' width='8' height='8'></rect>
<rect x='110' y='90' width='8' height='8'></rect>
<rect x='120' y='20' width='8' height='8'></rect>
<rect x='120' y='40' width='8' height='8'></rect>
<rect x='120' y='50' width='8' height='8'></rect>
<rect x='120' y='60' width='8' height='8'></rect>
<rect x='120' y='70' width='8' height='8'></rect>
<rect x='120' y='80' width='8' height='8'></rect>
<rect x='130' y='30' width='8' height='8'></rect>
<rect x='130' y='40' width='8' height='8'></rect>
<rect x='130' y='50' width='8' height='8'></rect>
<rect x='130' y='60' width='8' height='8'></rect>
<rect x='130' y='70' width='8' height='8'></rect>
<rect x='130' y='80' width='8' height='8'></rect>
<rect x='140' y='40' width='8' height='8'></rect>
<rect x='140' y='50' width='8' height='8'></rect>
<rect x='140' y='60' width='8' height='8'></rect>
<rect x='140' y='70' width='8' height='8'></rect>
<rect x='140' y='80' width='8' height='8'></rect>
<rect x='140' y='90' width='8' height='8'></rect>
<rect x='150' y='30' width='8' height='8'></rect>
<rect x='150' y='40' width='8' height='8'></rect>
<rect x='150' y='50' width='8' height='8'></rect>
<rect x='150' y='60' width='8' height='8'></rect>
<rect x='150' y='70' width='8' height='8'></rect>
<rect x='150' y='90' width='8' height='8'></rect>
<rect x='150' y='100' width='8' height='8'></rect>
<rect x='160' y='20' width='8' height='8'></rect>
<rect x='160' y='30' width='8' height='8'></rect>
<rect x='160' y='40' width='8' height='8'></rect>
<rect x='160' y='50' width='8' height='8'></rect>
<rect x='160' y='60' width='8' height='8'></rect>
<rect x='170' y='10' width='8' height='8'></rect>
<rect x='170' y='20' width='8' height='8'></rect>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
function rand(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function contains(arr, el) { return arr.indexOf(el) > -1 }
function sample(arr) { return arr[rand(0, arr.length - 1)]; }
function complete(transition, callback) {
var n = 0;
transition
.each(function() { ++n; })
.each('end', function() { if (!--n) callback.apply(this, arguments); });
}
var svg = d3.select('svg');
var width = +svg.attr('width');
var height = +svg.attr('height');
var rects = svg.selectAll('rect');
var rects_arr = rects[0];
var data = [];
var active = [];
rects.each(function(_) {
var r = d3.select(this);
data.push({ x: +r.attr('x'), y: +r.attr('y') })
});
rects.data(data)
.attr('x', function(d) { return rand(0, width); })
.attr('y', function(d) { return rand(0, height); })
.transition()
.ease('cubic-out')
.duration(function(d, i) { return i * 2 + 200; })
.delay(function(d, i) { return i * 15; })
.attr('x', function(d) { return d.x; })
.attr('y', function(d) { return d.y; })
.style('opacity', 1)
.call(complete, function() {
rects.on('mouseover', function() { flip(this); });
setInterval(function() { flip(sample(rects_arr)); }, 2000);
});
function flip(a) {
if (contains(active, a)) return;
active.push(a);
var remain = rects_arr.filter(function(r) { return !contains(active, r) });
var b = sample(remain);
active.push(b);
d3.selectAll([a, b])
.data([b.__data__, a.__data__])
.transition()
.ease('cubic-out')
.duration(1000)
.attr('x', function(d) { return d.x; })
.attr('y', function(d) { return d.y; })
.call(complete, function() {
active = active.filter(function(r) { return r !== a && r !== b });
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment