Animation with JavaScript and Sass : Neon light banner

Question

After reading a bit about CSS3-text-shadows and seeing a few advanced examples I had the idea for a "neon light"-banner. Next idea was to animate it.

Finally it has become a mixture between a Sass-mixins and a bit of JavaScript.

One more thing I should mention: It's a fun-thing. I'm not intending to use it somewhere productive. So I didn't bother about namespace, globals etc.

Here's the code ...

let neon = document.querySelector('.neon-light');
var currentRandomNumber;

const RANDOM_MAX = 6000;
const RANDOM_MIN = 1000;
const MILLISECONDS_UNTIL_INIT = 500;

function getRandomNumber () { 
  return Math.floor(Math.random() *
    (RANDOM_MAX - RANDOM_MIN)) + RANDOM_MIN;
}

currentRandomNumber = getRandomNumber();

setTimeout(function() {
  neon.classList.toggle('full');
  
  setInterval(function() {
    currentRandomNumber = getRandomNumber();
    neon.classList.toggle('full');
  }, currentRandomNumber)
}, MILLISECONDS_UNTIL_INIT);

/* The compiled SASS-code */

html, body {
  width: 100%;
  height: 100%;
  background-color: white;
}

.wrap {
  width: 600px;
  margin: 140px auto;
  text-align: center;
}

.neon-light {
  font-family: orbitron, verdana, sans-serif;
  font-size: 4em;
  color: white;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: text-shadow 5000ms;
  text-shadow: 1px -1px 0 cyan, -1px -1px 0 cyan, -1px 1px 0 cyan, 1px 1px 0 cyan;
}

.half {
  text-shadow: 0 0 10px #05ffff, 0 0 20px #0affff, 0 0 30px #0fffff, 0 0 40px #14ffff, 0 0 50px #a600ed, 0 0 60px #a900f2, 0 0 70px #ad00f7, 0 0 80px darkviolet;
}

.full {
  text-shadow: 0 0 10px #05ffff, 0 0 20px #0affff, 0 0 30px #0fffff, 0 0 40px #14ffff, 0 0 50px #a600ed, 0 0 60px #a900f2, 0 0 70px #ad00f7, 0 0 80px #b100fc, 0 0 90px #b302ff, 0 0 100px #b507ff, 0 0 110px #b60cff, 0 0 120px #b811ff, 0 0 130px #ba16ff, 0 0 140px #bb1bff, 0 0 150px #bd21ff, 0 0 160px darkviolet;
}

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<div class="wrap">
  <div class="neon-light half">Neon light</div>
</div>

The URL of my Codepen (with Babel-support configured) : http://codepen.io/mizech/pen/QEpZzg

Just in case the ES6 syntax shouldn't work in some browser ...

My uncompiled Sass-code:

$firstLimit: 4;
$firstColor: cyan;
$secondLimit: 8;
$secondColor: darkviolet;
$multiplier: 2.0;
// Very small => The halo collapses completely.
// Very high => Glowing halo on the outside.
$milliSecondsTransition: 5000ms;

/**
 * Provides a text-shadow property with multiple values.
 * @param { color } $firstColor - The inner color
 * @param { number } $firstLimit - Where to stop the inner color.
 * @param { color } $secondColor - The outer color
 * @param { number } $secondLimit - Where to stop the outer color.
 */
@mixin getTextShadows($firstColor: black, $firstLimit: 3, $secondColor: lime, $secondLimit: 5) {
  $ret:  '';
  $i: 1;

  @while $i <= $firstLimit {
    $ret: $ret + '0 0 ' + (10px * $i) + ' ' + lighten($firstColor, $i) + ', ';
    $i: $i + 1;
  }

  @while $i < $secondLimit {
    $ret: $ret + '0 0 ' + (10px * $i) + ' ' + lighten($secondColor, $i) + ', ';
    $i: $i + 1;
  }
  // No comma has to added to the LAST line.
  $ret: $ret + '0 0 ' + (10px * $i) + ' ' +  $secondColor;

  text-shadow: unquote($ret);
}

html, body {
  width: 100%;
  height: 100%;
  background-color: white;
}

.wrap {
  width: 600px;
  margin: 140px auto;
  text-align: center;
}

.neon-light {
  font-family: orbitron, verdana, sans-serif;
  font-size: 4em;
  color: white;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: text-shadow $milliSecondsTransition;
  // Adding an outline to the text.
  text-shadow:  1px -1px 0  $firstColor,
               -1px -1px 0  $firstColor,
               -1px  1px 0  $firstColor,
                1px  1px 0  $firstColor;
}

.half {
  @include getTextShadows($firstColor, $firstLimit, $secondColor, $secondLimit);
}

.full {
  @include getTextShadows($firstColor, $firstLimit, $secondColor, $secondLimit * $multiplier);
}

I would be very interested in hints and tipps concerning the animation-design and the Sass-code. Because I'm a beginner there.

Nevertheless: Any other feedback welcomed too. ;)