Lightning mine

by sosegon

HTML

<div id="container"></div>
<!--
<audio src="http://www.orangefreesounds.com/wp-content/uploads/2016/10/Rain-white-noise.mp3" autoplay loop>
<audio src="https://cdn.pixabay.com/audio/2025/02/28/audio_4d6a22a289.mp3" id='thunder-sound'>
-->

JavaScript

import { SvJs, Gen, Noise } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm"

const svg = new SvJs().addTo(document.getElementById("container"))
const svgSize = Math.min(window.innerHeight, window.innerWidth)
const viewBoxSize = 1000

// Root
svg.set({
  x: 0,
  y: 0,
  width: svgSize,
  height: svgSize,
  viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
  id:'svgBox'
})

// Background
svg.create("rect").set({
  x: 0,
  y: 0,
  width: viewBoxSize,
  height: viewBoxSize,
  fill: "#000",
})

// Filters
const turbulenceParams = {
	baseFrequency: 0.005,
  numOctaves: 5,
  stitchTiles: "stitch",
  type: "fractalNoise",
  result: "noise",
}
const displacementParams = {
 in: "SourceGraphic",
  in2: "noise",
  scale: 100,
  result: "ray",
}
// Filter in the inner part of the lighting
const filterIn = svg.createFilter("distortion")
filterIn.create("feTurbulence").set(turbulenceParams)
filterIn.create("feDisplacementMap").set(displacementParams)
// Filter in the outter part of the lightning
const filterOut = svg.createFilter("blur")
filterOut.create("feTurbulence").set(turbulenceParams)
filterOut.create("feDisplacementMap").set(displacementParams)
filterOut.create("feGaussianBlur").set({
  in: "ray",
  stdDeviation: 20,
})

// Lightning parameters
const width = 150 // How spread is the lighting horizontally
const numSegments = 10 // Number of segments to build the lightning
let segmentLength = viewBoxSize / numSegments
let points = [] // Coords for the segments in the lightning

// Group for lightning branches
const branches = svg.create('g')

const rootBranch = branches.create("polyline").set({
  points: points.join(" "),
  fill: "none",
  stroke: "#fff",
  stroke_width: 5,
  filter: "url(#distortion)",
  id: "rootBranch",
})

const rootBranchGlow = branches.create("polyline").set({
  points: points.join(" "),
  fill: "none",
  stroke: "#451f87",
  stroke_width: 15,
  filter: "url(#blur)",
})

// Boom at the bottom
svg.createGradient("boom", "radial", ["#451f87aa",...