JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var size = 500;
var c = document.getElementById("canvas");
c.width = size;
c.height = size;
var ctx = c.getContext("2d");
ctx.globalCompositeOperation = 'lighter';
ctx.filter = "blur(4px)";
var center = {x: size / 2, y: 20};
var minSegmentHeight = 2;
var groundHeight = size + 290;
var color = "rgb(0,0,0)";
var roughness = 2.21;
var maxDifference = size / 5;
var brightness = .8
ctx.globalCompositeOperation = "lighter";
ctx.strokeStyle = color;
ctx.shadowColor = color;
ctx.fillStyle = color;
ctx.fillRect(0, 0, size, size);
ctx.fillStyle = "hsla(0, 0%, 0%, 1.0)";
function mapRange(value, inMin, inMax, outMin, outMax) {
return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}
let i = 0
function render(lightning){
/* ctx.shadowBlur = 0;
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(0, 0, size, size); */
/* ctx.globalCompositeOperation = "lighter"; */
/* ctx.shadowBlur = 15; */
var counter = setInterval(function () {
console.log({i})
var distanceToCenter = Math.abs(lightning[i].x - center.x);
const gradient = lightning[i].y / c.height;
const grayValue = Math.round(255 * ( gradient)) ;
const fillColor = `rgb(${grayValue * brightness}, ${grayValue * brightness}, ${grayValue * brightness})`;
ctx.beginPath();
ctx.fillStyle = fillColor;
/* ctx.arc(lightning[i].x - 2, lightning[i].y - 2, Math.min(Math.max(i, 30.0), 40.0 ) / 5.0, 0, 2 * Math.PI, false);*/
ctx.rect(lightning[i].x , lightning[i].y, i / 10.0 ,i / 10.0);
ctx.closePath();
ctx.stroke()
ctx.fill()
console.log({i, length:lightning.length / 2.0})
if (i > lightning.length / 2.0) {
clearInterval(counter);
}
i+=1
}, 50);
/* requestAnimationFrame(render) */;
}
function createLightning() {
var segmentHeight = groundHeight - center.y;
var lightning =...