JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing=0 ng-app ng-controller="Waves">
    <tr ng-repeat="row in area" ng-click="start_wave($index)">
        <td ng-repeat="cell in row" ng-style="{background: cell}"></td>
    </tr>
</table>

CSS

td {
 width: 10px;
 height: 10px;
}

JavaScript

function Waves($scope) {
        function random_color() {
            return '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);
        }

        var initial = '#ddd';
        var W = 30;
        var H = 30;
        var area = $scope.area = [];
        for (var x = 0; x < W; x++) {
            for (var y = 0; y < H; y++) {
                (area[y] || (area[y] = new Array(W)))[x] = initial;
            }
        }

        var waves = [];
        $scope.start_wave = function (Top) {
            waves.push([0, Top, random_color()])
        };

        function step() {
            for (var i = 0; i < waves.length; i++) {
                var wave = waves[i];
                if (wave[0]++ == 2 * W) {
                    waves.splice(i, 1);
                    i--;
                }
                draw(wave);
            }
        }

        function draw(wave) {
            var t = wave[0], T = wave[1], C = wave[2];
            for (var i = 0; i <= t; i++) {
                for (var y = Math.max(0, T - i); y < Math.min(H, T + i + 1); y++) {
                    var x = t - i;
                    if (x < W) {
                        area[y][x] = C;
                    }
                }
            }
        }

        setInterval(function () {
            step(); $scope.$apply();
        }, 100)
    }