RU

Карандашный набросок, который заливается акварелью: разбираю эффект на SVG без библиотек

Делал интерактивную открытку на день рождения и хотел, чтобы картинка не просто появлялась, а «рисовалась»: сначала карандашные линии, пот…

svgjavascriptcreativeweb audio apismilcreative codingstroke-dashoffsetанимацияfeTurbulencesvg mask
Habr
RU

Трон для самого звёздного: я сделал игру, которая живёт внутри GitHub‑репозитория

Помните Million Dollar Homepage? В 2005 году студент продал миллион пикселей по доллару за штуку и заработал миллион. Никакой пользы…

githubgithub actionsgraphqlsvgnode.jsopen sourceиграreadmepet-проектserverless
Habr
RU

Готовый рецепт интерактивного обучающего курса в одном файле

Внутреннее обучение без бюджета, без серверов и без "запишитесь на вебинар". Один html-файл на ~118 Кб, который открывается двойным кликом, работает…

обучениеобучающий курсhtmlдата грамотностьгеймификациявнутреннее обучениеруководитель проектаjavascriptsvgcss3
Хабр — Управление
RU

Как я переписал каталог из 500 000 SVG‑иконок с Laravel на Go и уменьшил сервер с 4/6 ГБ до 2/2 ГБ

Больше года назад я запустил SVG4  — каталог векторных иконок. Сейчас в нём больше 500 000 SVG‑файлов. Первая версия была написа…

разработкасайткаталогsvgрефакторингgophplaravel
Habr
RU

Надпись «Откройте камерой» мешала прочитать QR-код

Один SVG: при 640 пикселях QR не читается, при 320 читается. Разбираю, как локатор принял часть подписи за угол кода, почему удаление букв возвращал…

qr-кодjsqrjavascriptsvgкомпьютерное зрениеотладкатестированиерастеризация
Habr
RU

Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями

Если к вам придут с задачей внедрения интерактивной карты офиса, какой рендер вы выберете? Canvas или SVG? Верхнеуровневый обзор скажет, что Canvas…

svgcanvasинтерактивные картыfrontendинтерактивная карта офиса на SVG
Habr
RU

Django-кнопка «Наверх»: подключить за минуту вместо очередного велосипеда

Кнопка «Наверх» — вещь настолько простая, что обычно её делают прямо в проекте: ссылка, немного CSS, пара строк JavaScript — готово. Для одной стран…

djangopythondjango adminкнопка Наверхscroll to topui-компонентывеб-разработкаfrontendsvgдоступность
Habr
RU

Почему animated SVG не работает во Flutter «как в браузере» — и как я попытался это исправить

Почему SVG, который работает в Chrome, часто становится статичным или ломается во Flutter? Разбираю проблему animated SVG, SMIL, CSS keyframes, path…

flutterdartsvganimated svgfull_svg_flutterflutter_svgsmilcss animationspath morphingrendering