F

FRONT | Фронтенд | JavaScript | CSS | TanStack Start 1.0 | Vite 8 | Next.js 16.4 | TypeScript в Rust | React 19.3 | Bun 1.4.4 | Playwright 1.64 | SvelteKit 3.0 | Astro | WebMCP | Deno | Preact 11

IT и технологии · 24 октября 2026 г.

Открыть канал в MAX

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

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