JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TimelineMax.min.js"></script>
<canvas></canvas>

CSS

html, body {
    margin: 0;
    background:#111;
}
canvas {
    display: block;
}

JavaScript

var width, height, centerX, centerY, canvas, context;
var delayFactor = .06,
    duration = 1.2,
    ease = Elastic.easeOut,
    destIncrement = 200,
    strokeWidth = 2,
    timeline = new TimelineMax({
        paused: true,
        repeat: -1,
        yoyo: true,
        repeatDelay: duration * .5
    });
var animatedLines = [{
    name: 'Test',
    stroke: 'red',
    width: strokeWidth,
    x1: 0,
    y1: 0,
    x2: 0,
    y2: destIncrement
}, {
    name: 'Test',
    stroke: 'green',
    width: strokeWidth,
    x1: 0,
    y1: 0,
    x2: destIncrement * .5,
    y2: destIncrement * .5
}, {
    name: 'Test',
    stroke: 'blue',
    width: strokeWidth,
    x1: 0,
    y1: 0,
    x2: destIncrement,
    y2: 0
}, {
    name: 'Test',
    stroke: 'red',
    width: strokeWidth,
    x1: 0,
    y1: 0,
    x2: destIncrement * .5,
    y2: -destIncrement * .5
}, {
    name: 'Test',
    stroke: 'green',
    width: strokeWidth,
    x1: 0,
    y1: 0,
    x2: 0,
    y2: -destIncrement
}, {
    name: 'Test',
    stroke: 'blue',
    width: strokeWidth,
    x1: 0,
    y1: 0,
    x2: -destIncrement * .5,
    y2: -destIncrement * .5
}, {
    name: 'Test',
    stroke: 'red',
    width: strokeWidth,
    x1: 0,
    y1: 0,
    x2: -destIncrement,
    y2: 0
}, {
    name: 'Test',
    stroke: 'green',
    width: strokeWidth,
    x1: 0,
    y1: 0,
    x2: -destIncrement * .5,
    y2: destIncrement * .5
}];

function init() {
    initCanvas();
    initLines();
    populateTimeline();
    timeline.play();
    TweenLite.ticker.addEventListener('tick', render);
}

function populateTimeline() {
    var length = animatedLines.length,
        currentLine;
    for (var i = 0; i < length; i += 1) {
        currentLine = animatedLines[i];
        timeline.to(currentLine, duration, {
            destX: currentLine.x2,
            destY: currentLine.y2,
            ease: ease
        });
    }
}

function initLines() {
    var length = animatedLines.length,
        currentLine;
    for (var i = 0; i <...