​Животные на SVG

Приходило ли вам в голову, что анимация может быть такой? Или, например, такой? Все они сделаны без единого JS-символа! Давайте разбираться, как же так.

Во-первых, чтобы создать подобное, надо знать SVG. Как добавлять SVG в HTML сказано здесь.

Во-вторых, надо владеть такими элементами SVG, как filter, feTurbulence и feDisplacementMap.

В-третьих, уметь рисовать в Adobe Illustrator. Дело тонкое, в этой статье не обсуждается)

В-четвертых, понимать, как работает Sass. Знать, @include и миксины, уметь задавать переменные цветов и осознавать работу с функциями.

В-пятых, требуются базовые знания CSS-анимации и правил верстки.

Слышали обо всем вышеперечисленном? Нажимаете Правую кнопку мыши -> Проверить элемент и разбираетесь в коде самостоятельно.

А если сложно, то здесь инструкция на английском, а тут - на русском языке. А для совсем начинающих рисовать на CSS, информация тут.

Изучайте SVG анимацию, развивайтесь и создавайте шедевры подобные этим.