Procedural dynamic Lightning effect

The following code implements procedural lightning effects to enhance stormy weather appearance. If you haven’t followed my previous post about weather effects, you should check it out to see how I set the weather type variable in session storage. I retrieve this variable and depending on its value (‘stormy’ for example), I create the lightning intermittently. The frequency is randomized within a range and the lightning is drawn dynamically, with splitting off branches. CSS is used to make it even more realistic. During rainy and foggy weather there is also a small chance that the lightning will be triggered occasionally. The lightning is generated on the fly, never repeating. SVG elements are used to draw lines between generated points. There are no textures involved, it is pure code.

For illustration purposes I enabled the lightning to strike on every mouse click on this page. It will only appear if you haven’t toggled the weather off.

HTML:

JAVASCRIPT:

<script>
document.addEventListener('DOMContentLoaded', async function () { 
const sectionBG = document.querySelector('.section-background');
const lightningMainContainer = document.createElement('div');
lightningMainContainer.id = "lightningMainContainer";
lightningMainContainer.classList.add('lightningMainContainer');  
const lightningContainer = document.createElement('div');
lightningContainer.id = "lightningContainer";
lightningContainer.classList.add('lightningContainer'); 
lightningMainContainer.appendChild(lightningContainer);
sectionBG.appendChild(lightningMainContainer);
const drawSpeed = 0.4; // Speed of drawing in milliseconds
const lightningDuration = 5000;
let minInterval = 500;
let maxInterval = 20000;
function createLightningSVG(id) {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
svg.setAttribute('id', id);
svg.setAttribute('class', 'lightningBolt');
//svg.style.position = 'absolute';
svg.style.top = '0';
//svg.style.filter = 'blur(1px)';
lightningContainer.appendChild(svg);
return svg;
}
function createLightning() {
const uniqueId = `lightning-${Date.now()}`;
const svg = createLightningSVG(uniqueId);
let startX = Math.random() * svg.clientWidth; // Random start X position
let startY = 0;
let segments = 50 + Math.floor(Math.random() * 5); //max segments of main bolt
let x = startX;
let y = startY;
// Draw segments over time
let currentSegment = 0; // Track the current segment being drawn
let drawInterval = setInterval(() => {
if (currentSegment < segments) {
let polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
polyline.setAttribute('fill', 'none');
// Calculate the thickness for the new segment
let thickness = Math.max(4 - (currentSegment * (5 / segments)), 0.2);
polyline.setAttribute('stroke-width', `${thickness}px`);
svg.appendChild(polyline);
// Create points for the current segment
let points = `${x},${y}`;
x += (Math.random() - 0.5) * 30; // Random horizontal displacement
y += (svg.clientHeight / segments); // Move downward
points += ` ${x},${y}`;
polyline.setAttribute('points', points);
// Determine if a split should occur
if (y > svg.clientHeight * 0.3 && y < svg.clientHeight * 0.7 && currentSegment % 3 === 0 && Math.random() > 0.5) {
drawSplit({ x, y, direction: Math.random() < 0.5 ? 'left' : 'right' }, svg);
}
currentSegment++;
} else {
clearInterval(drawInterval);
setTimeout(() => {
lightningContainer.removeChild(svg);
}, lightningDuration);
}
}, drawSpeed);
}
//splitting
function drawSplit(split, svg) {
let points = `${split.x},${split.y}`;
let splitSegments = 13 + Math.floor(Math.random() * 3); // Fewer segments for splits
let x = split.x;
let y = split.y;
// Calculate maximum split length
let maxSplitLength = (svg.clientHeight / 30) * 4; 
let minSplitLength = (svg.clientHeight / 30) * 2; 
let splitHeight = Math.random() * (maxSplitLength - minSplitLength) + minSplitLength;
let maxHorizontalDisplacement = Math.tan(Math.PI / 7) * splitHeight; //angle adjustment
let splitPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
splitPolyline.setAttribute('fill', 'none');
svg.setAttribute('class', 'lightningBolt');
svg.appendChild(splitPolyline);
let currentSplitSegment = 0; 
let splitDrawInterval = setInterval(() => {
if (currentSplitSegment < splitSegments) {
let horizontalDisplacement = (Math.random() - 0.5) * maxHorizontalDisplacement;
// Adjust direction based on the split direction
if (split.direction === 'left') {
x -= Math.abs(horizontalDisplacement);
} else {
x += Math.abs(horizontalDisplacement);
}
y += splitHeight / splitSegments;
points += ` ${x},${y}`;
splitPolyline.setAttribute('points', points);
let thickness = Math.max(3 - (currentSplitSegment * (5 / splitSegments)), 1);
splitPolyline.setAttribute('stroke-width', `${thickness}px`);
currentSplitSegment++;
} else {
clearInterval(splitDrawInterval);
}
}, drawSpeed);
}
// Trigger the lightning animation
function triggerRandomLightning() {
createLightning();
const randomInterval = Math.random() * (maxInterval - minInterval) + minInterval;
setTimeout(triggerRandomLightning, randomInterval);
}
//where and how we want lightning
let weatherType = sessionStorage.getItem('weatherType');
const shopString = '/shop';
const secretShopString = '/sanctumshop';
const productPageString = 'shop/p/';
const artString = '/art';
const loginString = '/login';
const signupString = '/signup';
const dossierString = '/accountdossier';
const cartPageString = '/cart';
const userGalleryString = '/usergallery';
const devlogString = '/developmentlog';
const devlogListString = '/devlog';
const getURL = window.location.href;  
function triggerLightning() {
weatherType = sessionStorage.getItem('weatherType');
const gallerySection = document.querySelector('.gallery-masonry');
if (getURL.includes(loginString) || 
getURL.includes(signupString) || 
getURL.includes(dossierString) || 
getURL.includes(cartPageString) || 
getURL.includes(userGalleryString) || 
getURL.includes(productPageString) ||
(gallerySection && !getURL.includes(artString)) ||
(weatherType === 'sunny')) {
// lightningMainContainer.remove();
return;
}
if (weatherType === 'stormy') {
triggerRandomLightning();
document.addEventListener('click', function() {
const randomChance = Math.random();
if (randomChance <= 0.25) {
createLightning();
}
});
} else if (weatherType === 'cloudy' || weatherType === 'rainy' || weatherType === 'foggy') {
minInterval = 20000;
maxInterval = 120000;
triggerRandomLightning();
}
}
triggerLightning();
//exit
});
</script>

CSS:

@keyframes lightningFade {
0% {opacity: 1; stroke: #ffffff; transform: scale(1);}
10% {stroke: #ffffff;}
55% {opacity: 0.8; filter: blur(1px); stroke: var(--color2);}
60% {stroke: rgba(255,255,255,0.4);}
65% {stroke: var(--color2); filter: blur(3px);}
70% {stroke: rgba(255,255,255,0.4); filter: blur(0px);}
100% {opacity: 0; filter: blur(7px); stroke: #ffffff; transform: scale(0.995);}
}
//LIGHTNING//
#lightningMainContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#lightningContainer {
  position: absolute;
  pointer-events: none;
  max-width: 2200px;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  top: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}
.lightningBolt {
  position: absolute;
  pointer-events: none;
  filter: blur(0.9px);
  animation: lightningFade 3s forwards;
  stroke: #ffffff;
}

Proud of it, it is one of the coolest looking effects I have created since I started learning Javascript, outside of a game engine.