Не картинка, а карандашный скетч, который заливают акварелью

Короче, чувак собрал интерактивную открытку на днюху: изображение не вываливается сразу, а будто прорисовывается — сперва вылезают карандашные штрихи, потом по тапу поверх ложится акварель с рваным краем, прям как краска, которая впиталась в бумагу.

Готового решения не завезли: видео не канало — нужен отклик на тап и чтобы на любом экране было чётко. В итоге всё склеено на голом SVG, паре фильтров и чуть-чуть JS — без библиотек. В статье — разбор по шагам, с кодом и теми граблями, на которые автор всё-таки наступил.

Читать далее

👉 Frontender's notes