JSFiddle - React, Tailwind, and code Playground

by teleject

HTML

<html>
    <head>
        <title>Linear Gradient Test</title>
        <script type="text/javascript">
            
            var width, height, drawing;

            var clock, showClock = false;

            var canvas;

            var ctx, grad;

            var timer = null;

            var step1 = 255,
                step2 = 255,
                step3 = 255,
                step4 = 255,
                step5 = 255,
                step6 = 255,
                dir1 = -1,
                dir2 = 1,
                dir3 = -1,
                dir4 = 1,
                dir5 = -1,
                dir6 = 1,
                dirA = 1,
                inc1 = 0.25 + Math.random() * 0.75,
                inc2 = 0.25 + Math.random() * 0.75,
                inc3 = 0.25 + Math.random() * 0.75,
                inc4 = 0.25 + Math.random() * 0.75,
                inc5 = 0.25 + Math.random() * 0.75,
                inc6 = 0.25 + Math.random() * 0.75,
                angle = 0,
                sineStep = 0,
                startAngle = 0,
                length,
                rotate = false;

            var takeStep = function() {
                incrSize = 0.35;
                step1 += dir1 * inc1;
                step2 += dir2 * inc2;
                step3 += dir3 * inc3;
                step4 += dir4 * inc4;
                step5 += dir5 * inc5;
                step6 += dir6 * inc6;
                if (step1 > 255 || step1 < 0) {
                    step1 > 255 ? dir1 = -1 : dir1 = 1;
                    inc1 = incrSize + Math.random() * 0.75;
                    step1 += dir1 * inc1;
                }
                if (step2 < 0 || step2 > 255) {
                    step2 > 255 ? dir2 = -1 : dir2 = 1;
                    inc2 = incrSize + Math.random() * 0.75;
                    step2 += dir2 * inc2;
                }
                if (step3 < 0 || step3 > 255) {
                    step3 > 255 ? dir3 = -1 : dir3 = 1;
                    inc3 = incrSize +...