[JS html5 Canvas] Эффект волнистые кольца + sources

В видео создадим эффект перемещения волн по окружности,
данная анимация набирает популярность и всё чаще встречается на просторах интернета в разных вариациях.
При создании кода не будут использованы дополнительные библиотеки, только чистый JS.

В ролике что-то было не понятно? Пишите в комментарии или отправьте сообщение в группу вконтакте : https://vk.com/im?media=&sel=-97964493

Редактор кода: Visual Studio Code + дополнение Live Server для просмотра изменений на странице браузера в реальном времени.

sources:
https://vk.com/threepixdroid?w=wall-9...
https://codepen.io/ThreePixDroid/pen/...
v2: https://codepen.io/ThreePixDroid/pen/...
v3: https://codepen.io/ThreePixDroid/pen/...

Забыл упомянуть в видео, что переменные centerX и centerY нужно перенести с 28 - 29 строчки наверх и разместить над функцией init() и установить их значения внутри функции - для адаптивности, теперь анимация при изменении размеров области просмотра всегда будет в центре.
Вот так должно быть начиная с 5 строчки:

let centerX = 0;
let centerY = 0;
function init() {
cnv.width = innerWidth;
cnv.height = innerHeight;
centerX = cnv.width / 2;
centerY = cnv.height / 2;
}
init();

fixed:
https://codepen.io/ThreePixDroid/pen/...