Skip to content

Instantly share code, notes, and snippets.

@saifuddin778

saifuddin778/README.md

Last active February 23, 2017 01:25
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 saifuddin778/11c2b55e4594b9fb54e0857207764e09 to your computer and use it in GitHub Desktop.
Save saifuddin778/11c2b55e4594b9fb54e0857207764e09 to your computer and use it in GitHub Desktop.
Download ZIP
Polygons Rotation
Raw
README.md

SVG's rotation behavior for items.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {text-align: center;}
svg {
background: rgba(24, 162, 180, 0.1);
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<script>
function gc(c1, c2, n_){
var colors_ = d3.scale.linear().interpolate(d3.interpolateHcl).domain([0, n_]).range([c1, c2]);
return colors_;
}
function get_polygon_points(points) {
var pts = "";
for (var i = 0; i<points.length; i++){
for (var k=0; k<points[i].length; k++){
if (k < points[i].length-1){
pts += points[i][k]+",";
}
else{
pts += points[i][k]+" ";
}
}
}
return pts;
}
var width = 500;
var height = 500;
var maps = [0, 0, 0, 0, 0, 0, 0, 0];
var mapper = {
0: {color: 'none', stroke: 'green'},
};
var space = d3.select('body').append('svg').attr('width', width).attr('height', height).append('g');
var k = 9;
var rootx = 0;
var rooty = 0;
var items = [];
for (var i=0; i<170; i++){
var maxx = (rootx)+(k*4)+5;
var maxy = (rooty)+(k*4)+5;
var bunch = [
[
[rootx, rooty], [(rootx)+k, (rooty)-k], [(rootx)+(k*2), (rooty)]
],
[
[(rootx)+k, (rooty)-k], [(rootx)+(k*2), (rooty)], [(rootx)+(k*3), (rooty)-(k)]
],
[
[(rootx)+(k*2), (rooty)], [(rootx)+(k*3), (rooty)-(k)], [(rootx)+(k*4), (rooty)]
],
[
[(rootx)+k, (rooty)-k], [(rootx)+(k*2), (rooty)-(k*2)], [(rootx)+(k*3), (rooty)-(k)]
],
[
[(rootx), (rooty)-(k*2)], [(rootx)+k, (rooty)-k], [(rootx)+(k*2), (rooty)-(k*2)]
],
[
[(rootx)+(k*2), (rooty)-(k*2)], [(rootx)+(k*3), (rooty)-(k)], [(rootx)+(k*4), (rooty)-(k*2)]
],
[
[(rootx)+k, (rooty)], [(rootx)+(k*2), (rooty)+(k)], [(rootx)+(k*3), (rooty)]
],
[
[(rootx)+k, (rooty)-(k*2)], [(rootx)+(k*2), (rooty)-(k*3)], [(rootx)+(k*3), (rooty)-(k*2)]
],
];
var item_space = space.append('g');
var q = 0;
for (var j=0; j<maps.length; j++){
q += 1;
var item = bunch[j];
var indicator = maps[j];
var ppoints = get_polygon_points(item);
item_space.append("polygon")
.attr("points", ppoints)
.attr('pos', q)
.style("stroke-width", 0.6)
.style("fill", mapper[indicator].color)
.style("stroke", mapper[indicator].stroke);
}
var bb = item_space.selectAll('polygon')
.node()
.getBBox();
item_space.append("animateTransform")
.attr("begin", "0s")
.attr("dur", Math.random() * 8 +"s")
.attr("type", "rotate")
.attr("from", "0 "+(bb.x+(bb.width))+" "+(bb.y+(bb.height/10))+"")
.attr("to", "360 "+(bb.x+(bb.width))+" "+(bb.y+(bb.height/10))+"")
.attr("repeatCount", "indefinite")
.attr("fill", "freeze")
.attr("attributeName", "transform");
item_space.append('circle')
.attr('cx', bb.x+(bb.width))
.attr('cy', bb.y+(bb.height/10))
.attr('r', 3)
.style('fill', 'yellow');
if (maxx > width){
rootx = 0;
rooty = maxy;
}
else{
rootx = maxx;
}
}
var colors = gc('crimson', '#beecfb', 100);
var arc = d3.svg.arc()
.innerRadius(10)
.outerRadius(700)
.startAngle(0)
.endAngle(2 * Math.PI);
var arcspace = space.append("path")
.attr("class", "arc")
.style("fill", "white")
.attr("transform", "translate("+width/2+", "+height/2+")")
.attr("d", arc);
arcspace.transition()
.duration(10*1000)
.ease('linear')
.attr("d", function(){
return d3.select(this)
.attr("d").split(',')
.map(function(e, i){ return e.replace(/10/g, width/2)})
.join();
});
var timer = setInterval(function(){
d3.selectAll('polygon').transition()
.duration(900)
.ease('linear')
.style('fill', function(){
var pos = +d3.select(this).attr('pos') * 10;
return colors(parseInt(Math.random() * 100 + pos));
});
}, 1000);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment