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

Жил-был автор, которому приспичило сделать интерактивную открытку на день рождения. И не просто «картинка появилась» — нет, ему подавай кино: сначала карандашные линии прорисовываются, а потом по тапу сверху натекает акварель, да ещё с рваным краем, как у краски, впитавшейся в бумагу. Красиво, чёрт возьми.

Готового решения под такое он, естественно, не нашёл. Видео тоже отпало: нужна реакция на тап, да и на любом экране картинка должна оставаться чёткой, а не превращаться в кашу из пикселей.

Собрал всё в итоге на чистом SVG, паре фильтров и небольшой горсти JS. В статье — пошаговый разбор с кодом и честный список грабель, которые автор старательно собрал лбом.

Читать далее

👉 Логово Верстальщика