Skip to content

Instantly share code, notes, and snippets.

@jondot
Created Apr 17, 2016
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
body {
background: #333;
}
* {
margin: 0;
padding: 0;
}
html {
background: #D8231E;
}
svg {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
path {
fill: none;
stroke: rgba(255,255,255,0.3);
stroke-width: 0.5px;
}
</style>
</head>
<body>
<svg></svg>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript">
var w = 500,
h = 500;
var vertices = d3.range(5000).map(function(d) {
var val1 = Math.random() * (d/5000.0)*w
var val2 = Math.random() * (d/5000.0)*h
return [val1,val2];
});
var delaunay = d3.geom.delaunay(vertices);
var svg = d3.select("body")
.append("svg")
.attr("preserveAspectRatio", "xMaxYMax slice")
.attr("viewBox", [0, 0, w, h].join(' '))
svg.append("g")
.selectAll("path")
.data(delaunay)
.enter().append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment