Анимация состоит из двух объектов: капля дождя Drop и волна от капли Wave.

Класс Drop содержит в себе координаты случайно выбранных точек начала и конца падения, случайную скорости падения speed и прозрачность капли alpha=0 для анимации отражения, а так же массив точек для анимации движения и индекс текущего элемента. Для создания точек отрисовки используется функция makeDropPath(), количество точек отрисовки задает переменная pathLen.

Класс Wave содержит в себе точку центра волны, радиус r и прозрачность alpha.

Нажатие кнопки Пуск вызывает функцию play(), которая вызывает сама себя до нажатия кнопки Стоп. Кнопка Стоп сбрасывает следующий вызов функции play().

Каждый вызов функции Play() заполняет холст черным цветом с прозрачностью 0.3 'rgba(0,0,0,0.3)' для анимации следа движения, а затем вызывает функции updateDrops() и updateWave().

Функция updateDrops() создает новые капли , если их число меньше maxDropCount и запускает цикл в котором берется первая капля из массива капель, отрисовывается и обновляется значение индекса движения, а так же отрисовывается отражение капли с увеличивающейся прозрачностью. Если текущий индекс движения равен общему числу точек отрисовки, то есть капля находится в конечной точке падения, то создается объект Wave и добавляется в массив waveArr, если же текущий индекс движения меньше общего числа точек отрисовки то капля добавляется в конец массива dropsArr.

Функция updateWave() запускает цикл в котором берется первая волна из массива волн, отрисовывется, увеличивается её радиус и уменьшается прозрачность. Если прозрачность больше нуля то волна добавляется в конец массива волн.