JSFiddle - React, Tailwind, and code Playground

HTML

<!--from: http://codepen.io/mmmeff/pen/NqqvrR-->

<canvas id="can"></canvas>
<h1 id="title"></h1>

CSS

html,body {
  background: #FFFFFF;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#can {
  height: 100%;
  min-height: 2000px;
  position: absolute;
  width: 100%;
}
#title {
  color: #FFFFFF;
  font-family: 'Nunito', sans-serif;
  font-size: 10rem;
  font-weight: 100;
  height: 180px;
  line-height: 180px;
  margin: auto;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-shadow: none;
  -webkit-transition: text-shadow 10s 3s;
          transition: text-shadow 10s 3s;
  top: 0;
  bottom: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
  z-index: 2;
}
#title.anim {
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

JavaScript

//#151B54
//#FFFFFF
var c = document.getElementById('can');
var t = document.getElementById('title');

setTimeout(function () {
	t.classList.add('anim');
}, 500);

var w = c.width = window.innerWidth,
    h = c.height = Math.max(2000, window.innerHeight),
    ctx = c.getContext('2d'),

    spawnProb = 1,
    linesPerIteration = 5,
    numberOfMoves = [8, 24], //[min, max]
    distance = [50, 200],
    attenuator = 900,
    timeBetweenMoves = [3, 10],
    size = [.2, 3],

    lines = [],
    frame = (Math.random()*360)|0;

function rand(ar){
  return Math.random() * (ar[1] - ar[0]) + ar[0];
}

function Line(){
  this.x = Math.random() * w;
  this.y = Math.random() * h;
  this.vx = this.vy = 0;
  this.last = {};
  this.target = {};
  this.totalMoves = rand(numberOfMoves);
  this.move = 0;
  this.timeBetweenMoves = rand(timeBetweenMoves);
  this.timeSpentThisMove = this.timeBetweenMoves;
  this.distance = rand(distance);
//  this.size = rand(size);

//multi line colors
//  orig
//  this.color = 'hsl(hue, 80%, 100%)'.replace('hue', frame%360);
//  new
//  this.color = 'hsl(hue, 60%, 60%)'.replace('hue', frame%360);



  if(Math.random() >= 0.20){
    this.size = rand(size)*15;
    this.color = 'hsl(hue, 80%, 100%)'.replace('hue', frame%360);
  }
  else{
    this.size = rand(size)*1;
    this.color = 'hsl(hue, 60%, 60%)'.replace('hue', frame%360);
  }




}


Line.prototype.use = function(){
  ++this.timeSpentThisMove;
  if(this.timeSpentThisMove >= this.timeBetweenMoves){
    ++this.move;
    this.timeSpentThisMove = 0;

    var rad = Math.random() * 2 * Math.PI;
    this.target.x = this.x + Math.cos(rad) * this.distance;
    this.target.y = this.y + Math.sin(rad) * this.distance;
  }

  this.last.x = this.x;
  this.last.y = this.y;

  this.vx += (this.x - this.target.x)/attenuator;
  this.vy += (this.y - this.target.y)/attenuator;

  this.x += this.vx;
  this.y += this.vy;

  ctx.lineWidth = this.size;
  ctx.strokeStyle = ctx.shadowColor = this.color;
 ...