.main
.line
- (1..18).each do
  .flare
View Compiled
body {
  height: 100vh;
  background: linear-gradient(
    to bottom,
    hsl(200, 70%, 10%),
    hsl(210, 60%, 5%)
   );
  --pos: 10;
  --h: 200;
  --s: 50%;
  --l: 90%;
  --a: 0.5;
  --size: 30px;
  overflow: hidden;
}

.main, .flare, .line {
  position: absolute;
  left: calc(var(--pos) * 1vw);
  top: calc(var(--pos) * 1vh);
  height: var(--size);
  width: var(--size);
  border-radius: 50%;
  background-blend-mode: screen;
  transform: translateX(-50%) translateY(-50%);
}

.main, .line {
  --size: 20vmin;
  --pos: 15;
  --s: 80%;
  --l: 70%;
  background: radial-gradient(
    hsla(
      var(--h),
      var(--s),
      var(--l),
      0.9
    ),
    hsla(
      var(--h),
      var(--s),
      0%,
      0
    ) 70%
  );
}
.line {
  width: 100vw;
  height: 2vh;
  opacity: 0.5;
  background: radial-gradient(
    hsla(
      var(--h),
      var(--s),
      var(--l),
      0.3
    ),
    hsla(
      var(--h),
      var(--s),
      var(--l),
      0
    ) 70%
  );
}

.flare {
  background-color: hsla(
    var(--h),
    var(--s),
    var(--l),
    var(--a)
  );
}
function setFlares() {
  var flares = document.querySelectorAll('.flare');
  Array.prototype.map.call(flares, (f) => {
    f.style.setProperty('--pos', random(10, 90));
    f.style.setProperty('--h', random(170, 230));
    f.style.setProperty('--s', random(50, 90) + '%');
    f.style.setProperty('--l', random(60, 100) + '%');
    f.style.setProperty('--a', Math.random() / 2);
    f.style.setProperty('--size', random(5, 200) + 'px');
    if (Math.random() > 0.95) {
      f.style.setProperty('--size', random(500, 700) + 'px')
      f.style.setProperty('--a', Math.random() / 5);
    }
  });
}

function random(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

setFlares();
document.addEventListener('click', setFlares);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.