Саморисующиеся фигуры на CSS Сегодня хочу поделиться с вами лайфхаком, который позволяет буквально в несколько строчек CSS-кода сделать красивую анимацию отрисовки SVG изображения. Всё, что вам требуется, добавить в код SVG к строку pathLength="1", а затем прописать следующие стили в CSS: path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dash 5s linear forwards; } @keyframes dash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } Этого достаточно для того, чтобы оживить ваше изображение. Конечно, лучше всего это работает с простыми картинками, как в примере из видео. Но вы можете поэкспериментировать и с более сложными вариантами. Подробнее о способе можно почитать здесь. #css #лайфхак