JSFiddle - React, Tailwind, and code Playground

by Patrick van Kleef

HTML

<canvas id="myCanvas" class="header-canvas">
    </canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var t = 1;				
        var vertices = [];
        vertices.push({
            x: 0,
            y: 100
        });
        vertices.push({
            x: 200,
            y: 150
        });
        vertices.push({
            x: 400,
            y: 125
        });
        vertices.push({
            x: 600,
            y: 200
        });
        vertices.push({
            x: 800,
            y: 110
        });
        
        var points = calcWaypoints(vertices);
        
        function calcWaypoints(vertices) {
            var waypoints = [];
            for (var i = 1; i < vertices.length; i++) {
                var pt0 = vertices[i - 1];
                var pt1 = vertices[i];
                var dx = pt1.x - pt0.x;
                var dy = pt1.y - pt0.y;
                for (var j = 0; j < 100; j++) {
                    var x = pt0.x + dx * j / 100;
                    var y = pt0.y + dy * j / 100;
                    waypoints.push({
                        x: x,
                        y: y
                    });
                }
            }
            return (waypoints);
        }

        $(window).resize(respondCanvas);
        $(window).scroll(respondCanvas);

        function respondCanvas() {
            initShapes();
        }
        function initShapes() {
            canvas.width = window.innerWidth;
            canvas.height = "600";            
            animate();
        }        
        initShapes();
        
        function animate() {
            requestAnimationFrame(animate);
            
            // draw a line segment from the last waypoint
            // to the current waypoint
            context.beginPath();
            context.moveTo(points[t - 1].x, points[t - 1].y);
            context.lineTo(points[t].x, points[t].y);
           ...