Новогодняя ёлка в QR-коде с музыкой

В статье описан способ создания анимированной новогодней ёлки, снеговиков и падающих снежинок, умещающихся в QR-код. Используя dataUrl, html, css, js и Unicode символы, автор достиг компактности кода, позволяющего поместить в QR-код анимированное изображение и музыку.
Новогодняя ёлка в QR-коде с музыкой
Изображение носит иллюстративный характер

Для отображения ёлки, подарков, снеговиков и текста "2025" используются символы Unicode, а размер шрифта динамически подстраивается под ширину и высоту экрана, чтобы ёлка не вылезала за границы. При помощи js, подарки и снеговики генерируются в цикле и добавляются на страницу. Снежинки реализованы через setInterval, они обновляются каждые 20 мс, имитируя падение с псевдослучайной траекторией.

Для музыкального сопровождения был взят midi файл мелодии "Carol of the Bells", преобразованный в компактную строку. Звук создается с использованием Web Audio API, где на основе строки данных создается массив семплов, добавляются гармоники для более натурального звучания и проигрывается при клике пользователя на ёлку. При этом, из-за ограничений браузера, музыку можно проиграть только после взаимодействия пользователя со страницей.


Новое на сайте

19521Банковский троян VENON на Rust атакует Бразилию с помощью девяти техник обхода защиты 19520Бонобо агрессивны не меньше шимпанзе, но всё решают самки 19519Почему 600-килограммовый зонд NASA падает на землю из-за солнечной активности? 19518«Липовый календарь»: как расписание превращает работников в расходный материал 19517Вредоносные Rust-пакеты и ИИ-бот крадут секреты разработчиков через CI/CD-пайплайны 19516Как хакеры за 72 часа превратили npm-пакет в ключ от целого облака AWS 19515Как WebDAV-диск и поддельная капча помогают обойти антивирус? 19514Могут ли простые числа скрываться внутри чёрных дыр? 19513Метеорит пробил крышу дома в Германии — откуда взялся огненный шар над Европой? 19512Уязвимости LeakyLooker в Google Looker Studio открывали доступ к чужим базам данных 19511Почему тысячи серверов оказываются открытой дверью для хакеров, хотя могли бы ею не быть? 19510Как исследователи за четыре минуты заставили ИИ-браузер Perplexity Comet попасться на... 19509Может ли женщина без влагалища и шейки матки зачать ребёнка естественным путём? 19508Зачем учёные из Вены создали QR-код, который невозможно увидеть без электронного... 19507Девять уязвимостей CrackArmor позволяют получить root-доступ через модуль безопасности...
Ссылка