Дом и деревья из одних линий, stroke без заливки. Клик, и снизу вверх поднимается краска: край идёт волной, как на мокрой бумаге.
pathLength="1" вместо getTotalLength: длина сжата до единицы, всем линиям подходит один stroke-dasharray, а очередь задаёт animation-delay.
Край рвут два фильтра: feTurbulence рисует шум, feDisplacementMap тянет по нему край, красный канал по X, зелёный по Y. Шум стоит, заливка едет сквозь него. Наивно не выйдет: контуры нужны линиями, SVG — через fetch и innerHTML.
pathLength="1" вместо getTotalLength: длина сжата до единицы, всем линиям подходит один stroke-dasharray, а очередь задаёт animation-delay.
Край рвут два фильтра: feTurbulence рисует шум, feDisplacementMap тянет по нему край, красный канал по X, зелёный по Y. Шум стоит, заливка едет сквозь него. Наивно не выйдет: контуры нужны линиями, SVG — через fetch и innerHTML.
Просмотры: 5