Генератор SVG-анимации
Выберите фигуру, цвета и эффект — анимированный SVG играет в превью, а ниже вы получаете разметку inline SVG и CSS @keyframes, которые можно сразу вставить на страницу.
<svg viewBox="0 0 100 100" width="160" height="160" aria-hidden="true">
<polygon
class="shape"
points="50,20.2 58.5,41.4 81.4,43 63.8,57.6 69.4,79.8 50,67.7 30.6,79.8 36.2,57.6 18.6,43 41.5,41.4"
fill="#fbbf24"
stroke="#b45309"
stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round"
/>
</svg>
.shape {
transform-box: fill-box;
transform-origin: 50% 55%;
animation: spin 2s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.shape {
animation: none;
}
}Как пользоваться
- Выберите фигуру — круг, квадрат, звезду, сердце или галочку — и задайте цвет заливки, цвет и толщину контура.
- Выберите эффект: вращение (
rotate), пульсацию (scale), прыжок, затухание, рисование контура черезstroke-dasharrayили смену цвета (заливка и контур меняются местами). - Настройте длительность, задержку, число повторов, функцию времени и направление. Кнопки «Пауза» и «Заново» в превью помогают рассмотреть анимацию.
- Нажмите «Копировать» и вставьте SVG в HTML, а CSS — в таблицу стилей. Блок
prefers-reduced-motionуже включён.
Как это работает
Зачем анимировать SVG через CSS
Элементы inline SVG входят в DOM, поэтому их можно стилизовать и анимировать обычными свойствами animation и @keyframes — без JavaScript и библиотек. Это работает для <circle>, <rect>, <path> и других фигур, но не для SVG, подключённого через <img> или background-image: CSS страницы до такого файла не дотянется, анимацию нужно писать внутри самого SVG.
transform-box и transform-origin
В SVG точка трансформации по умолчанию — левый верхний угол всего рисунка (0 0), поэтому вращение раскачивает фигуру вокруг неверной точки. transform-box: fill-box привязывает начало координат к рамке самой фигуры, а transform-origin: center ставит его в середину. Пятиконечная звезда «тяжелее» снизу: её визуальный центр находится примерно на 55% высоты рамки, поэтому для неё генератор использует 50% 55%.
.shape {
transform-box: fill-box;
transform-origin: center;
}Рисование контура: dasharray и dashoffset
stroke-dasharray задаёт длину штрихов и промежутков, stroke-dashoffset сдвигает этот узор. Если штрих равен длине всего контура, а смещение равно ей же, линия невидима; анимация смещения до 0 её «дорисовывает». Длина измеряется в пользовательских единицах: генератор берёт значение чуть больше длины контура, чтобы в конце не оставалась точка. Для своей фигуры длину можно получить через getTotalLength(). У залитых фигур генератор ещё плавно проявляет заливку через fill-opacity.
@keyframes draw {
from { stroke-dashoffset: 177; }
to { stroke-dashoffset: 0; }
}Уважайте prefers-reduced-motion
Постоянное движение может вызывать дискомфорт у людей с вестибулярными нарушениями, поэтому в системах есть настройка «уменьшить движение». Генератор добавляет блок @media (prefers-reduced-motion: reduce), который отключает анимацию; базовые стили остаются полностью видимыми, так что ничего не пропадает. Декоративному SVG стоит добавить aria-hidden="true".
@media (prefers-reduced-motion: reduce) {
.shape { animation: none; }
}Частые вопросы
Можно ли анимировать SVG, подключённый через img?
Стилями страницы — нет: CSS страницы не видит содержимое <img>. Поместите <style> с @keyframes в сам SVG-файл или вставьте SVG прямо в HTML.
Почему SVG вращается вокруг неверной точки?
Потому что по умолчанию точка трансформации — левый верхний угол рисунка. Добавьте transform-box: fill-box и transform-origin: center.
Что лучше: CSS-анимация или SMIL (тег animate)?
CSS проще сочетать с остальными стилями, он реагирует на медиазапросы, в том числе на prefers-reduced-motion. SMIL живёт внутри SVG и тоже работает во всех современных браузерах, но используется реже.
Тяжела ли SVG-анимация для браузера?
Анимация transform и opacity обходится дёшево. Анимация атрибута d, фильтров или сотен элементов одновременно нагружает сильнее — проверяйте на слабых телефонах.
