index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Mountains</title>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
html, body {
height: 100%;
background: #222;
margin: 0;
}
body, #prev, #next {
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-justify-content: center;
}
#prev, #next {
position: absolute;
top: 0;
color: #d1d1d1;
font-size: 70px;
text-decoration: none;
padding: 20px;
}
#prev {
left: 0;
}
#next {
right: 0;
}
svg {
margin: auto;
}
</style>
<script>
var width = 500,
height = 500,
rows = 8;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("background", "#d1d1d1");
var filter = svg.append("filter")
.attr("id", "blur")
.attr("x", -100)
.attr("y", -100)
.attr("width", width + 200)
.attr("height", 300)
.attr("filterUnits", "userSpaceOnUse")
.append("feGaussianBlur")
.attr("stdDeviation", 20);
var data = d3.range(rows).map(function() {
var x = Math.random() * width;
return [[0, 0], [x - 50, 0], [x, -100], [x + 50, 0], [width, 0]];
});
var area = d3.svg.area()
.y0(height)
.interpolate("basis");
var scale = d3.scale.linear()
.domain([0, rows])
.range(["#CFF4FF","#006EB1"]);
var groups = svg.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) {
return "translate(" + [0, i * height / rows] + ")"
});
groups.append("path")
.attr("fill", function(d, i) { return scale(i); })
.attr("d", area);
</script>
</body>
</html>