JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lazylinepainter.info/js/jquery.lazylinepainter-1.5.1.js"></script>
<div id="drawing-box"></div>

CSS

#drawing-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  pointer-events: none; }

#drawing-box svg {
  width: 100vw !important;
  height: 100vw !important; }

#drawing-box svg path {
  stroke-width: 20px;
  -webkit-transition-property: stroke-dashoffset;
          transition-property: stroke-dashoffset;
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transition-duration: 1.4s;
          transition-duration: 1.4s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  width: 100vw !important;
  height: 100vw !important;
  -webkit-transform: translate(-2%, -36%) scaleY(0.9);
      -ms-transform: translate(-2%, -36%) scaleY(0.9);
          transform: translate(-2%, -36%) scaleY(0.9); }

.ideal-image-slider {
  background: transparent; }

#logo-top, #logo-bottom {
  background: #fff;
  width: 149px;
  height: 40px; }

#logo-bottom {
  bottom: 5px; }

JavaScript

// SCROLL PAST THESE PATH OBJECTS -->


var duration = Math.floor(Math.random()* 3000) + 1000;
console.log(duration);

var w = 1280,
    h = 800;

var pathOne = { // One loop from right
    "drawing-box": {
        "strokepath": [
            {
                "path": "M 163,45c0,0,576.5,37.9,576.5,364.5S269.6,629.6,269.6,629.6s-166.5-49.5-111-172.5s165-141,165-141 s397.5-79.5,580.5,61.5S1225,706,1225,706",
                "duration": duration
            }
        ],
        "dimensions": {
            "width": w,
            "height": h
        }
    }

},

    // Tall Zig-Zag
    pathTwo = {
        "drawing-box": {
            "strokepath": [
                {
                    "path": "M 163,45 839.2,170.3 284.3,313.2 1030.2,466.4 497.3,644.4 L 1135,736",
                    "duration": duration
                }
            ],
            "dimensions": {
                "width": w,
                "height": h
            }
        }
    },

    // Straight
    pathThree = {
        "drawing-box": {
            "strokepath": [
                {
                    "path": "M 163,45 L 1135,736",
                    "duration": duration
                }
            ],
            "dimensions": {
                "width": w,
                "height": h
            }
        }
    },

    // Straight — Zig-Zag — Straight
    pathFour = {
        "drawing-box": {
            "strokepath": [
                {
                    "path": "M 1135,736 780.3,493.3 804.4,396.3 632.1,531.1 741.6,238.6 451.1,503.1 546.6,251.6 475.8,296.3 L 163,45 ",
                    "duration": duration
                }
            ],
            "dimensions": {
                "width":  w,
                "height": h
            }
        }
    },

    // 3 Point Zag
    pathFive = {
        "drawing-box": {
            "strokepath": [
                {
                    "path": "M 113,50 446.1,614.1 781.1,157.1 L 1215,676",
                    "duration": duration
             ...