Дом и деревья из одних линий, stroke без заливки. Клик, и снизу вверх поднимается краска: край идёт волной, как на мокрой бумаге.

pathLength="1" вместо getTotalLength: длина сжата до единицы, всем линиям подходит один stroke-dasharray, а очередь задаёт animation-delay.

Край рвут два фильтра: feTurbulence рисует шум, feDisplacementMap тянет по нему край, красный канал по X, зелёный по Y. Шум стоит, заливка едет сквозь него. Наивно не выйдет: контуры нужны линиями, SVG — через fetch и innerHTML.
Просмотры: 5
Открыть в MAX Сообщить о неточности

Сообщить о неточности

Опишите, что нужно исправить. Если есть источник, добавьте ссылку.

Вы покидаете datool.ru

Ссылка ведёт на внешний сайт. datool.ru не отвечает за его содержимое — проверьте адрес, прежде чем вводить пароли или платёжные данные.

Переход через 10 с

Перейти