Skip to content

Instantly share code, notes, and snippets.

@saifuddin778

saifuddin778/README.md

Last active April 9, 2017 07:08
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/cd4ea99884ca63bac1f1f68a416ebc29 to your computer and use it in GitHub Desktop.
Save saifuddin778/cd4ea99884ca63bac1f1f68a416ebc29 to your computer and use it in GitHub Desktop.
Download ZIP
Troodon
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
text-align: center;
}
polygon {
stroke-width: 1;
stroke: black;
}
.spc:hover {
opacity: 0.9;
}
.top {
}
.left {
}
.right {
}
.logoline {
fill: white;
stroke: steelblue;
stroke-width: 0.5;
}
.cross {
fill: none;
stroke: black;
}
svg {
background: aliceblue;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var origw = 1000;
var origh = 500;
var width = 120;
var height = 120;
var space = d3.select("body")
.append("svg")
.attr("width", origw)
.attr("height", origh)
.append("g")
.attr("id", "sp");
var w = width * 0.75;
var h = height * 0.75;
var items = [
[0, h],
[0, 0],
[w, 0],
[w, h],
];
var x = (origw/2.5) + 10;
var y = (origh/2) + 10;
var g = w/1.3;
var dq = w * 0.007;
var bb = 1.3;
var linelogoleftcont = space.append("g").attr("class", "linelogoleftcont");
var linelogobottomcont = space.append("g").attr("class", "linelogobottomcont");
var linelogorightcont = space.append("g").attr("class", "linelogorightcont");
var linelogotopcont = space.append("g").attr("class", "linelogotopcont")
var linelogodata = {left: [], bottom: [], right: [], top: []};
for (var i = 0; i<48; i++){
linelogodata.left.push(
{x1: x+(i*dq)* bb, y1: y+(i*dq), x2: x+(i*dq) * bb, y2: (y+(i*dq))-g}
);
linelogodata.bottom.push(
{x1: x+(i*dq)* bb, y1: (y+(i*dq)), x2: x+(i*dq)* bb + g, y2: (y+(i*dq))-g*0.3}
);
linelogodata.right.push(
{x1: x+(i*dq)* bb + g, y1: (y+(i*dq))-g*0.3, x2: x+(i*dq)* bb + g, y2: (y+(i*dq))-g*1.3}
);
linelogodata.top.push(
{x1: x+(i*dq)* bb, y1: (y+(i*dq))-g, x2: x+(i*dq)* bb + g, y2: (y+(i*dq))-g*1.3}
);
}
linelogoleftcont.selectAll()
.data(linelogodata.left)
.enter()
.append("line")
.attr("class", "logoline linelogoleft")
.attr("x1", function(d){return d.x1})
.attr("y1", function(d){return d.y1})
.attr("x2", function(d){return d.x2})
.attr("y2", function(d){return d.y2});
linelogobottomcont.selectAll()
.data(linelogodata.bottom)
.enter()
.append("line")
.attr("class", "logoline linelogobottom")
.attr("x1", function(d){return d.x1})
.attr("y1", function(d){return d.y1})
.attr("x2", function(d){return d.x2})
.attr("y2", function(d){return d.y2});
linelogorightcont.selectAll()
.data(linelogodata.right)
.enter()
.append("line")
.attr("class", "logoline linelogoright")
.attr("x1", function(d){return d.x1})
.attr("y1", function(d){return d.y1})
.attr("x2", function(d){return d.x2})
.attr("y2", function(d){return d.y2});
linelogotopcont.selectAll()
.data(linelogodata.top)
.enter()
.append("line")
.attr("class", "logoline linelogotop")
.attr("x1", function(d){return d.x1})
.attr("y1", function(d){return d.y1})
.attr("x2", function(d){return d.x2})
.attr("y2", function(d){return d.y2});
setInterval(function(){
d3.selectAll("line").transition().delay(function(d, i){return i * 2 }).style("stroke", d3.rgb(50 * Math.random(), 255 * Math.random(), 255*Math.random()).toString()); }, 50
);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment