Skip to content

Instantly share code, notes, and snippets.

@pvernier

pvernier/.block

Last active March 11, 2018 20:07
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 pvernier/df9a1ad9d84330c29127451cd8aec263 to your computer and use it in GitHub Desktop.
Save pvernier/df9a1ad9d84330c29127451cd8aec263 to your computer and use it in GitHub Desktop.
Download ZIP
Rotating tiles
Raw
.block
license: gpl-3.0
border: no
height: 500
Raw
index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<style type='text/css'>
svg {
width: 500px;
height: 500px;
}
</style>
<title></title>
</head>
<body>
<svg></svg>
</body>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://d3js.org/d3-timer.v1.min.js'></script>
<script>
var svg = d3.select('svg')
var d = 50
var interpolateEven = d3.interpolateRgb("#f7fcb9", "#006837");
var interpolateOdd = d3.interpolateRgb("#006837", "#f7fcb9");
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 5; j++) {
var rects = svg.append('rect')
.attr('x', (i % 2 == 0 ? j * 2 * d : j * 2 * d + d))
.attr('y', i * d)
.attr('width', d)
.attr('height', d)
.attr('class', (i % 2 == 0 ? 'even' : 'odd'))
}
}
var i = 0
var t = d3.interval(function(elapsed) {
var row
d3.selectAll('rect')
.attr('transform', function() {
var x = parseInt(this.attributes.x.value) + d/2
var y = parseInt(this.attributes.y.value) + d/2
return 'rotate(' + i + ', ' + x + ', ' + y + ')'
})
.style("fill", function() {
var clas = this.attributes.class.value
return (clas === 'even' ? interpolateEven(i%360/360) : interpolateOdd(i%360/360))
});
i = i + 1;
}, 50);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment