SiLK III

forked from SleepyHarry's block: SiLK I

forked from SleepyHarry's block: SiLK II

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SiLK</title>

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