Canvas Procedural Lightning — Free Midpoint Displacement Snippet

<div class="lt-wrap">
  <canvas id="ltCanvas" class="lt-canvas"></canvas>
  <div class="lt-panel">
    <span class="lt-tag">recursive midpoint displacement</span>
    <p>Click anywhere to strike a bolt from the top of the sky to that point.</p>
    <div class="lt-row">
      <label>Jaggedness <span id="ltJagVal">0.5</span></label>
      <input type="range" id="ltJag" min="10" max="90" value="50" step="5" />
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#050508;color:#eef1fb;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.lt-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(780px,96vw)}
.lt-canvas{width:100%;aspect-ratio:16/9;background:#050508;border-radius:18px;border:1px solid rgba(255,255,255,.08);display:block;cursor:crosshair}
.lt-panel{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 18px}
.lt-tag{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c7d2fe;background:rgba(199,210,254,.1);border:1px solid rgba(199,210,254,.3);padding:4px 10px;border-radius:99px}
.lt-panel p{font-size:12.5px;color:#9098b8;flex:1 1 220px}
.lt-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#c4cbdc}
.lt-row input{accent-color:#818cf8}

const canvas = document.getElementById('ltCanvas');
const ctx = canvas.getContext('2d');
const jagSlider = document.getElementById('ltJag');
const jagVal = document.getElementById('ltJagVal');
let width, height, dpr;
let bolts = [];

function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}

// Recursive midpoint displacement: start with a straight line from A to B.
// Find the midpoint, displace it perpendicular to the line by a random
// amount, then recurse on each half with a smaller displacement range.
// This is the same technique used to generate fractal terrain profiles and
// coastlines -- applied here to a bolt of lightning instead of a landscape.
function displace(x1, y1, x2, y2, depth, maxOffset, points) {
  if (depth <= 0) {
    points.push({ x: x2, y: y2 });
    return;
  }
  const mx = (x1 + x2) / 2;
  const my = (y1 + y2) / 2;
  const dx = x2 - x1, dy = y2 - y1;
  const len = Math.hypot(dx, dy) || 1;
  // Perpendicular unit vector
  const nx = -dy / len, ny = dx / len;
  const offset = (Math.random() * 2 - 1) * maxOffset;
  const px = mx + nx * offset;
  const py = my + ny * offset;

  displace(x1, y1, px, py, depth - 1, maxOffset * 0.55, points);
  displace(px, py, x2, y2, depth - 1, maxOffset * 0.55, points);
}

function buildBolt(x1, y1, x2, y2, jag) {
  const points = [{ x: x1, y: y1 }];
  displace(x1, y1, x2, y2, 6, jag, points);

  const segments = points.map((p, i) => {
    const prev = i === 0 ? { x: x1, y: y1 } : points[i - 1];
    return { x1: prev.x, y1: prev.y, x2: p.x, y2: p.y };
  });

  const branches = [];
  for (let i = 2; i < segments.length - 2; i++) {
    if (Math.random() < 0.22) {
      const seg = segments[i];
      const angle = Math.atan2(seg.y2 - seg.y1, seg.x2 - seg.x1) + (Math.random() - 0.5) * 1.4;
      const branchLen = 40 + Math.random() * 80;
      const bx = seg.x2 + Math.cos(angle) * branchLen;
      const by = seg.y2 + Math.sin(angle) * branchLen;
      const branchPoints = [{ x: seg.x2, y: seg.y2 }];
      displace(seg.x2, seg.y2, bx, by, 3, jag * 0.5, branchPoints);
      branches.push(branchPoints);
    }
  }

  return { segments: points, start: { x: x1, y: y1 }, branches, life: 1 };
}

function strike(x, y) {
  const jag = parseInt(jagSlider.value, 10);
  const startX = x + (Math.random() - 0.5) * width * 0.3;
  bolts.push(buildBolt(startX, -10, x, y, jag));
  if (bolts.length > 4) bolts.shift();
  flash = 1;
}

let flash = 0;

canvas.addEventListener('click', e => {
  const rect = canvas.getBoundingClientRect();
  strike(e.clientX - rect.left, e.clientY - rect.top);
});
jagSlider.addEventListener('input', () => {
  jagVal.textContent = (parseInt(jagSlider.value, 10) / 100).toFixed(2);
});

function strokePath(start, points, color, width_, blur) {
  ctx.beginPath();
  ctx.moveTo(start.x, start.y);
  for (const p of points) ctx.lineTo(p.x, p.y);
  ctx.strokeStyle = color;
  ctx.lineWidth = width_;
  ctx.shadowColor = color;
  ctx.shadowBlur = blur;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.stroke();
}

function draw() {
  ctx.fillStyle = flash > 0.02 ? 'rgba(230,235,255,' + (flash * 0.12) + ')' : 'rgba(5,5,8,0.3)';
  ctx.fillRect(0, 0, width, height);
  flash *= 0.85;

  for (let i = bolts.length - 1; i >= 0; i--) {
    const b = bolts[i];
    const alpha = b.life;
    strokePath(b.start, b.segments, 'rgba(199,210,254,' + (0.15 * alpha) + ')', 7, 22);
    strokePath(b.start, b.segments, 'rgba(255,255,255,' + alpha + ')', 2, 10);
    for (const branch of b.branches) {
      strokePath(branch[0], branch.slice(1), 'rgba(199,210,254,' + (0.7 * alpha) + ')', 1.3, 8);
    }
    ctx.shadowBlur = 0;
    b.life -= 0.045;
    if (b.life <= 0) bolts.splice(i, 1);
  }
}

function tick() {
  draw();
  requestAnimationFrame(tick);
}

resize();
window.addEventListener('resize', resize);
requestAnimationFrame(tick);
setTimeout(() => strike(width * 0.5, height * 0.7), 400);