xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SiLK</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
background: #000000;
}
</style>
</head>
<body>
<canvas width=960 height=500></canvas>
<script>
var canvas = d3.select('canvas').node(),
context = canvas.getContext('2d');
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = canvas.width - margin.left - margin.right,
height = canvas.height - margin.top - margin.bottom;
context.translate(margin.left, margin.top);
context.fillStyle = d3.rgb(0, 0, 0, 0.05);
context.strokeStyle = d3.rgb(255, 255, 255);
var STRIDE = Math.floor(height / 100);
var bolt = function () {
var start = [0, height / 2],
y = start[1];
var pts = [];
for (x=start[0]; x<width; x+=STRIDE) {
y += (Math.random() - 0.5) * height / 8;
pts.push([x, y]);
}
var n = pts.length,
endDiff = pts[n-1][1] - start[1];
pts.forEach(function (d, i) {
var diff = endDiff * (i / n);
pts[i][1] -= diff;
});
// draw the bolt
context.beginPath();
context.moveTo(pts[0][0], pts[0][1]); // might be different to start
for (i=1; i<pts.length; i++) {
context.lineTo(pts[i][0], pts[i][1]);
}
context.stroke();
}
var fade = function () {
context.fillRect(-margin.left, -margin.top, canvas.width, canvas.height);
};
var step = function () {
fade();
bolt();
};
var ticker = setInterval(step, 50);
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js