<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <title>div-lines.js</title>
  <style type="text/css">
    body {
      overflow: hidden;
      /* background-image: url("bg-005.gif"); */
      background-color: black;
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id="mainContainer" class="mainContainer">
    <div id="line" class="line extra"></div>
  </div>
  <script src="https://npmcdn.com/div-lines/dist/div-lines.min.js"></script>
  <script>
    var NUM_OF_LINES = 200;
    var u = dljs.utils;
    var str = '';

    var container = dljs.init();

    // Slow!

    /*
    var animate = function(time)  {
        container.el.innerHTML="";
        for (var i = 0; i < NUM_OF_LINES; i++) { 
            dljs.rndLine(); 
        }
        window.requestAnimationFrame( animate );
    };
    window.requestAnimationFrame( animate );
    */

    // Fast!

    // dljs.getFastLineString = function (x1,y1,x2,y2,weight,color){
    var animate = function(time) {
      var str = '';
      for (var i = 0; i < NUM_OF_LINES; i++) {
        str += dljs.getFastLineString(u.rndX(), u.rndY(), u.rndX(), u.rndY(), 2, u.rndColor());
      }
      container.el.innerHTML = str;
      window.requestAnimationFrame(animate);
    };
    window.requestAnimationFrame(animate);
  </script>
</body>

</html>
// Code goes here

/* Styles go here */