JSFiddle - React, Tailwind, and code Playground

HTML

<section id="box1">
    <canvas width="350" height="475">
        Your browser sucks.
    </canvas>
</section>

CSS

#box1 {
    float:left;
    padding:15px; margin:30px 25px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#f0f0f0));
    background-color:#e8e8e8;
    border-radius: 15px;
    -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.2);
    box-shadow: 0px 1px 5px rgba(0,0,0,.2);
}

canvas {
    -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.2);
    box-shadow: 0px 1px 7px rgba(0,0,0,.7);}

JavaScript

var context = document.getElementsByTagName('canvas')[0].getContext('2d');
    
    var lastX = context.canvas.width * Math.random();
    var lastY = context.canvas.height * Math.random();
    var hue = 0;
    function line() {
        context.save();
        context.translate(context.canvas.width/2, context.canvas.height/2);
        context.scale(0.7, 0.9);
        context.translate(-context.canvas.width/2, -context.canvas.height/2);
        context.beginPath();
        context.lineWidth = 30 * Math.random() / 3;
        
        context.moveTo (lastX,lastY);
        lastX = context.canvas.width * Math.random();
        lastY = context.canvas.height * Math.random();
        context.lineTo(lastX,lastY);
        
        hue = hue + 10 * Math.random();
        context.strokeStyle = 'white';
        context.shadowColor = 'hsl(' + hue + ', 40%, 60%)';
        context.shadowBlur = '9';
        context.stroke();
        context.restore();
    }
    setInterval(line, 50);
    
    
    function blank() {
     context.fillStyle = 'rgba(0,0,0,0.4)';
     context.fillRect(0,0, context.canvas.width, context.canvas.height);
    }
    setInterval(blank, 80);