JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="550" height="380" id="canvas"></canvas>

CSS

body{background:lightgrey;margin:0;text-align:center;width:100%}canvas{margin:30px auto}

JavaScript

var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var side = 20;
    var H = 40;
    var W = 30;
    var T = 0;
    var Td = 1;
    var Tc = 15;
    var Tf = 5;
    var t = 0;

    function drawEqTriangle(x, y, s, c) {
        var h = side * (Math.sqrt(3)/2);
        var s = s || 1;

        var R, G, B;
        if (c) {
            R=G=B=80;
            if (x%2==1) {
                R=200;
            } else {
                B=200;
                G=120;
            }
            if (y%3==0) {
                G=200;
            } else if (y%3==1) {
                G=120;
            } else {
                R=220;
            }
            // R=B=G=250;
            // B=230;R=G=100;
            // R=30;B=80;G=200;
        } else {
            R = 123;
            G = 210;
            B = 220;
        }

        var cy = y * (side/2) - (side/2);
        var cx = x * h;
        var rx = parseInt(x % 2) == 0;
        var ry = parseInt(y % 2) == 0;
        if ((rx || ry) && !(rx && ry)) {
            f = 0;
        } else {
            f = 1;
        }

        var r = parseInt(Math.random()*T);
        var g = parseInt(Math.random()*T);
        var b = parseInt(Math.random()*T);
        ctx.fillStyle = "rgb(R, G, B)".replace("R", R+r).replace("G", G+g).replace("B", B+b);

        ctx.save();

        ctx.translate(cx, cy);
        ctx.rotate(Math.PI * (0.5 + f));
        ctx.scale(s, s);

        ctx.beginPath();

            ctx.moveTo(0, -h / 2);
            ctx.lineTo( -side / 2, h / 2);
            ctx.lineTo(side / 2, h / 2);
            ctx.lineTo(0, -h / 2);

            ctx.fill();

        ctx.closePath();
        ctx.restore();
    }

    // setInterval(function() {
    //     var s = 1;
    //     t++;
    //     T+=Td;
    //     if (T>Tc) Td=-1
    //     if (T==Tf) Td=1
    //     for (var x=1; x < W; x++) {
    //         for (var y=1; y < H; y++) {
    //             drawEqTriangle(x, y);
    //            ...