Создается сетка из точек на холсте. Их количество задается в rowLength и colLenght. Создается массив точек размерностью rowLength * colLenght. Далее каждой точке задается коэффициент масштабирования, радиус и позиция (x;y) на холсте,
которая определяется исходя из ее положения в массиве, размерности строки и столбца, а также высоты холста.

Анимация создается в функции animateDots, в которой, проходя по каждой точке массива точек меняется коэффициент масштабирования, исходя
из заданного время анимации, ее индекса и текущего времени, вычисляемого performance.now() (более точный инструмент для рассчетов времени, чем Date.now()).

Управлять режимом наложения точек можно через свойство Canvas.globalCompositeOperation. В данном примере выбрано значение 'xor', что означает, что точки делаются прозрачными там, где они перекрывают друг друга.

Функция render задает цвет в том месте, где точки не перекрываются, а также рисует точки из массива точек как круги и каждая четвертая точка заполняется цветом.