Узнайте, как создать плавную анимацию для вашего сайта, используя только небольшую разметку SVG и несколько стилей CSS. Масштабируемая векторная графика (SVG) - это больше, чем просто файлы изображений. Как XML-приложение, SVG содержат разметку, которая выглядит и работает так же, как HTML. Вы также можете использовать их в сочетании с кодом CSS и JavaScript. Это позволяет анимировать файлы SVG, создавая сложные изображения, которые хорошо подходят для веб-дизайна и других динамических сред. Но...

Как сделать простую анимированную SVG-фигуру и использовать её как маску? Для начала в иллюстраторе или в любом другом векторном редакторе рисуем фигуру. Я рисовал с помощью инструмента «Кривизна». Боковые точки сделал опорными (двойным кликом), чтобы между ними не образовывалась дуга, которая выходит за пределы монтажной области. Это у нас будет первый кадр. Рисуем ещё. Можно просто сдвинуть какие-то точки, можно нарисовать заново. Главное — чтобы количество точек было одинаковым на всех кадрах...