@Denioo

Как анимировать эту SVG картинку?

Здравствуйте, с анимацией svg я пока что на вы, и не могу понять как анимировать это:
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.0014 7.46413C19.3852 7.78672 19.8728 7.96407 20.373 7.96407C21.0077 7.96407 21.6051 7.68568 22.0131 7.20029C22.7709 6.29731 22.6525 4.94601 21.7496 4.18772C21.3652 3.86513 20.8776 3.6875 20.3769 3.6875C19.7424 3.6875 19.145 3.96589 18.7376 4.45128C17.9796 5.35453 18.0982 6.70556 19.0014 7.46413Z" fill="#6D73B2"/>
<path d="M24.0495 9.91211C23.9169 9.91211 23.7829 9.92391 23.652 9.94698C22.4207 10.1641 21.5948 11.3433 21.812 12.5752C22.0031 13.661 22.9407 14.449 24.041 14.449C24.1733 14.449 24.3079 14.4371 24.4394 14.4144C25.6707 14.1969 26.4962 13.018 26.2791 11.7867C26.0874 10.7006 25.1496 9.91211 24.0495 9.91211Z" fill="#6D73B2"/>
<path d="M23.9694 17.3276C23.6048 17.1168 23.1914 17.0059 22.7741 17.0059C21.9181 17.0059 21.1208 17.4657 20.6933 18.2059C20.3735 18.7602 20.2878 19.4059 20.4539 20.0247C20.62 20.6436 21.0173 21.1611 21.571 21.4809C21.9359 21.692 22.3494 21.8032 22.7672 21.8032C23.6227 21.8032 24.42 21.3437 24.8471 20.6038C25.5077 19.4584 25.114 17.9887 23.9694 17.3276Z" fill="#6D73B2"/>
<path d="M17.1497 21.5918C16.8559 21.5918 16.5649 21.6434 16.2849 21.745C15.6507 21.9759 15.1447 22.4401 14.8592 23.0521C14.574 23.6641 14.544 24.3504 14.7746 24.9849C15.137 25.9804 16.0919 26.6494 17.1505 26.6494C17.4443 26.6494 17.7353 26.5978 18.0145 26.496C18.6482 26.2651 19.1539 25.8011 19.4397 25.188C19.7252 24.5758 19.7554 23.8895 19.5253 23.2561C19.1635 22.2609 18.2083 21.5918 17.1497 21.5918Z" fill="#6D73B2"/>
<path d="M10.7226 21.6224C10.4277 21.5153 10.1219 21.4609 9.81382 21.4609C8.70083 21.4609 7.69711 22.1643 7.31632 23.2112C7.07308 23.8786 7.10465 24.6003 7.40472 25.2436C7.70452 25.8871 8.23686 26.375 8.90427 26.618C9.19857 26.7253 9.50469 26.7791 9.81355 26.7791C10.9271 26.7791 11.9305 26.0757 12.311 25.0297C12.5537 24.3637 12.5219 23.6419 12.2215 22.9981C11.9209 22.3535 11.3889 21.8651 10.7226 21.6224Z" fill="#6D73B2"/>
<path d="M6.60798 18.0113C6.11106 17.1512 5.18503 16.6172 4.19065 16.6172C3.70443 16.6172 3.22371 16.7468 2.79955 16.9908C2.15437 17.3634 1.69315 17.9652 1.50069 18.6837C1.30769 19.403 1.40652 20.1544 1.77908 20.7993C2.276 21.6597 3.2023 22.194 4.19669 22.194C4.68262 22.194 5.16335 22.0644 5.58724 21.8201C6.91821 21.0516 7.37615 19.3429 6.60798 18.0113Z" fill="#6D73B2"/>
<path d="M2.92297 15.0968C4.33906 15.0968 5.54622 14.0824 5.79275 12.6847C5.92783 11.9168 5.75624 11.1426 5.30901 10.5048C4.86233 9.86623 4.19355 9.44014 3.42538 9.30452C3.25517 9.27487 3.08303 9.25977 2.91474 9.25977C1.49865 9.25977 0.291497 10.2739 0.0449587 11.6716C-0.0901156 12.439 0.0814727 13.2132 0.5287 13.8518C0.975653 14.4901 1.64471 14.9165 2.41233 15.0518C2.58172 15.0817 2.75358 15.0968 2.92297 15.0968Z" fill="#6D73B2"/>
<path d="M6.5896 8.8736C7.30313 8.8736 7.99827 8.62019 8.54708 8.16033C9.16974 7.63787 9.55162 6.90292 9.62273 6.09082C9.69384 5.27872 9.4451 4.48858 8.92237 3.86591C8.34199 3.17406 7.49009 2.77734 6.58575 2.77734C5.87112 2.77734 5.17598 3.03047 4.628 3.49033C4.00451 4.01362 3.6218 4.74857 3.55097 5.55957C3.47987 6.37003 3.72887 7.16044 4.25243 7.78448C4.83363 8.47661 5.68526 8.8736 6.5896 8.8736Z" fill="#6D73B2"/>
<path d="M13.4814 6.63079C15.3124 6.63079 16.7967 5.14644 16.7967 3.31539C16.7967 1.48435 15.3124 0 13.4814 0C11.6504 0 10.166 1.48435 10.166 3.31539C10.166 5.14644 11.6504 6.63079 13.4814 6.63079Z" fill="#6D73B2"/>
</svg>


Вот в это:
  • Вопрос задан
  • 139 просмотров
Решения вопроса 2
smilingcheater
@smilingcheater
@keyframes rotation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    svg {
        animation: rotation 1s steps(9) infinite;
    }
Ответ написан
Комментировать
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
https://developer.mozilla.org/en-US/docs/Web/SVG/S...
Можно заюзать SMIL, задав каждому элементы запуск scale со смещением во времени.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы