evgen_dev
@evgen_dev
Веб-разработчик

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

Добрый день!

Есть вот такая SVG картинка:
5fdc9ac2b4722622942488.jpeg

https://codepen.io/evgen-dev/pen/oNzwZWV

Подскажите как или чем, можно ее анимировать картинку выше, что бы появился эффект плавного рисования этой окружности против часовой стрелки (ну или по часовой) , интересует эффект рисования карандашом), с SVG знаком только поверхностно.

Спасибо.
  • Вопрос задан
  • 500 просмотров
Решения вопроса 1
uvelichitel
@uvelichitel
habrahabr.ru/users/uvelichitel
В svg картинка должна быть отрисована элементом path обязательно со свойством stroke
<svg viewBox="0 0 340 333">
  <path class="path" fill="white" stroke="black" stroke-width="4" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

На чистом css(без JS) фокус делается манипуляцией свойствами stroke-dasharray, stroke-dashoffset
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Работаюший пример https://codepen.io/chriscoyier/pen/bGyoz
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@lagudal
Если нужно анимировать именно path, а не stroke, т.е. когда речь идет не о четкой линии с постоянной толщиной, а о фигуре с размытыми, рваными краями, не имеющей четкой толщины, то к вышеизложенному clip-path.
Как варианты, пример1 , пример2 , пример3.
Ну или что угодно еще в этом же духе на тему Masking SVG Animations
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы