БЛОГ НА HUSL


Не могу сделать svg анимацию

Автор вопроса: Артем

вот есть такая анимация на лотти https://lottiefiles.com/share/b4qqel1o7 мне надо сделать примерно такую же на css, может кто знает, как это сделать вот свг

<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Источник

Ответы (4 шт):

Автор решения: Greg--

Простая анимация на css работает на смещении stroke-dashoffset. Чтоб понять как она работает, прочитайте СТАТЬЮ и СТАТЬЮ2

js тут только для того чтобы получить длину path (503....)

Это не совсем такая же анимация

let root = document.documentElement;
var path = document.querySelector('.path');
var length = path.getTotalLength();
root.style.setProperty('--path-length', length);
.path{
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: 0;
  animation: dash 2s ease-in-out infinite;
}

@keyframes dash{
  0%{
   stroke-dasharray: var(--path-length);
   stroke-dashoffset: var(--path-length);
   stroke-width:1;
  }
 70%{
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: #{calc(var(--path-length) * 2)};
    stroke-width:6
  }
  100%{
   stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
    stroke-width:1;
  }
}
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="path" class="svg-elem-1" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Сложнее анимацию нeжно посчитать (чтоб начальная точка тоже двигалась) Использовать два параметра в stroke-dasharray и менять совместно stroke-dasharray и stroke-dashoffset

Сложнее анимация реализована у GSAP DrawSVGPlugin посмотрите демку, они меняют три параметра

→ Ссылка
Автор решения: Alexandr_TT

Как верно ответил @Greg-- нужно точно знать максимальную длину Path и дальше можно манипулировать изменениями stroke-dasharray и stroke-dashoffset для получения разнообразных эффектов анимации, которые можно сделать чисто на CSS или SVG.

Ниже ваш код с вычислением максимальной длины path

<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="path" class="svg-elem-1" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10"/>
</svg>
<script>
let length = Math.round(path.getTotalLength());
console.log(length)
</script>

  • Анимация рисования контура с помощью изменения stroke-dashoffset от максимума 504px до нуля values="0;504;0"

<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="504" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10">
 <animate attributename="stroke-dashoffset" dur="4s" values="0;504;0" fill="freeze" repeatCount="indefinite" />
</path>
</svg>

Но в образце анимации начало отрисовки начинается из другой точки. В примере выше со stroke-dasharray точка начала анимации была начальной точкой векторного пути.

  • Чтобы решить эту проблему, будем анимировать рисования контура с помоoью stroke-dasharray values="0, 504;504,0;0, 504" а начальную точку сдвинем с помощью stroke-dashoffset="252"

У stroke-dasharray может быть несколько пар по два атрибута: черта, пробел Из формулы
values="0, 504;504,0;0, 504" следует, что первая пара атрибутов устанавливает максимальный пробел -0, 504 (линия не видна), вторая пара, устанавливает максимальную черту 504,0 (линия полностью видна)

<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="252" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10">
 <animate attributename="stroke-dasharray" dur="4s" values="0, 504;504,0;0, 504" repeatCount="indefinite" fill="freeze" />
</path>
</svg>

  • Добавляем анимацию изменения толщины линии
<animate attributename="stroke-width" dur="4s" values="1;6;0"
   fill="freeze" repeatCount="indefinite" />  


<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="252" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10">
 <animate attributename="stroke-dasharray" dur="2s" values="0, 504;504,0;0, 504" fill="freeze" repeatCount="indefinite" /> 
   <animate attributename="stroke-width" dur="2s" values="1;6;0" fill="freeze" repeatCount="indefinite" />   
</path>
</svg>

Чтобы приблизиться к оригинальной анимации добавим третью анимацию

<animate attributename="stroke-dashoffset" dur="2s" values="252;0"
   fill="freeze" repeatCount="indefinite" />  


<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="252" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10">
 <animate attributename="stroke-dasharray" dur="2s" values="0, 504;504,0" fill="freeze"    repeatCount="indefinite" /> 
     <animate attributename="stroke-width" dur="2s" values="1;6;0" fill="freeze" repeatCount="indefinite" />   
       <animate attributename="stroke-dashoffset" dur="2s" values="252;0" fill="freeze" repeatCount="indefinite" />   
</path>
</svg>

Я выдам главный секрет разработчиков лоадеров подобного типа

Вот так прямо сказать, что они хотели получить именно такой лоадер,- сильно сомневаюсь. Разработчики понимают основные принципы анимации и дальше экспериментируют с изменением параметров атрибутов stroke-dasharray и stroke-dashoffset и вдруг в одном из вариантов получается что-то очень интересное. Этот вариант и берут за основу. Я бы посоветовал изучить принципы анимации и пытаться сделать, что-то своё, а не пытаться повторить чужой вариант, поверьте это намного сложнее и скучнее, чем радость творчества в создании собственного "шедевра" Почитать немного об анимации линии можно в статье: Анимация рисования линии

Вариант CSS

За основу взят крайний вариант решения SVG анимации.

Стили и команды анимации SVG перенесены в CSS.

Обратите внимание, что команды анимации SVG закомментированы и оставлены в коде, чтобы легче было сравнить с командами анимации CSS и увидеть, что значения параметров одни и те же и там и там.

.svg-elem-1 {
fill:none;
stroke:#E60000;
stroke-width:6;
stroke-dashoffset:252;
stroke-dasharray:504;
stroke-miterlimit:10;
animation:dash 2s ease infinite,strokeWidth 2s ease infinite,strokeOffset 2s ease infinite;
}
@keyframes dash {
0% {stroke-dasharray:0,504;}
100% {stroke-dasharray:504,0;}
}
@keyframes strokeWidth {
0% {stroke-width:1px;}
50% {stroke-width:6px;}
100% {stroke-width:0px;}
}
@keyframes strokeOffset {
0% {stroke-dashoffset:252;}
100% {stroke-dashoffset:0;}
}
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1"  d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795">  
     <!-- Оставлены команды анимации SVG для сравнения с анимациями CSS -->
 <!-- <animate attributename="stroke-dasharray" dur="2s" values="0, 504;504,0" fill="freeze"    repeatCount="indefinite" />  -->
     <!-- <animate attributename="stroke-width" dur="2s" values="1;6;0" fill="freeze" repeatCount="indefinite" />    -->
       <!-- <animate attributename="stroke-dashoffset" dur="2s" values="252;0" fill="freeze" repeatCount="indefinite" />    -->
</path>
</svg>

→ Ссылка
Автор решения: Alexandr_TT

Как комментирует Greg--

Сложнее анимация реализована у GSAP DrawSVGPlugin посмотрите демку, они меняют три параметра

И это тоже реализуется изменением параметров stroke-dasharray
Это техника называется рисованием двумя линиями из одной точки

Вся соль решения в значении параметров stroke-dasharray

<animate attributename="stroke-dasharray" dur="4s" 
  values="
     0, 252 0, 252;
     0,0,504,0;
     0,0,504,0;
     0, 252 0, 252"
     fill="freeze"
     repeatCount="indefinite"/>



<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="504" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10">
 <animate attributename="stroke-dasharray" dur="4s" values="0, 252 0, 252;0,0,504,0" fill="freeze" />
</path>
</svg>

Как можно увидеть, получилось короче и не надо никаких плагинов GSAP, которые сегодня условно бесплатные, а завтра могут стать платными и то что работало у клиента сегодня, может перестать работать завтра, показывая зелёный сапог.

  • Вперед - назад

<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="504" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10">
 <animate attributename="stroke-dasharray" dur="4s" values="0, 252 0, 252;0,0,504,0;0,0,504,0;0, 252 0, 252" fill="freeze" repeatCount="indefinite"/>
</path>
</svg>

Среднюю точку можно переместить, с помощью изменения stroke-dashoffset

Было - stroke-dashoffset="252" Стало - stroke-dashoffset="165"

Начало в верхнем остром угле фигуры:

<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="165" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10">
 <animate attributename="stroke-dasharray" dur="4s" values="0, 252 0, 252;0,0,504,0;0,0,504,0;0, 252 0, 252" fill="freeze" repeatCount="indefinite"/>
</path>
</svg>

В другом углу при stroke-dashoffset="222"

<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="222" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795" stroke="#E60000" stroke-width="6"  stroke-miterlimit="10">
 <animate attributename="stroke-dasharray" dur="4s" values="0, 252 0, 252;0,0,504,0;0,0,504,0;0, 252 0, 252" fill="freeze" repeatCount="indefinite"/>
</path>
</svg>

→ Ссылка
Автор решения: Alexandr_TT

@Артем комментирует:

как поменять направление анимации? просто reverse не дает нужного результата(надо по часовой стрелке, чтобы шла анимация

Всё верно, это не поможет:

В документации о параметре alternate-reverse сказано:

Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении.

так и происходит,- анимация меняет направление через раз:

.svg-elem-1 {
fill:none;
stroke:#E60000;
stroke-width:6;
stroke-dashoffset:252;
stroke-dasharray:504;
stroke-miterlimit:10;
animation:dash 2s ease infinite alternate-reverse,strokeWidth 2s ease infinite,strokeOffset 2s ease infinite alternate-reverse;
}
@keyframes dash {
0% {stroke-dasharray:0,504;}
100% {stroke-dasharray:504,0;}
}
@keyframes strokeWidth {
0% {stroke-width:1px;}
50% {stroke-width:6px;}
100% {stroke-width:0px;}
}
@keyframes strokeOffset {
0% {stroke-dashoffset:252;}
100% {stroke-dashoffset:0;}
}
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1"  d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795">  
  
</path>
</svg>

Что можно сделать, чтобы поменять направление анимации

  1. Самый простой путь - это поменять в векторном редакторе начало и конец path, то есть нарисовать новый path.
    В вашем примере path нарисован (последовательность узловых точек) - против часовой стрелки

Проверяем простой анимацией stroke-dashoffset

 <animate attributename="stroke-dashoffset" dur="2s" values="504;0"    
   calcMode="linear" repeatCount="indefinite" /> 


.svg-elem-1 {
fill:none;
stroke:#E60000;
stroke-width:6;
stroke-miterlimit:10;

}
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="504" stroke-dasharray="504" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795">  
  <animate attributename="stroke-dashoffset" dur="2s" values="504;0" calcMode="linear" repeatCount="indefinite" /> 
</path>  
</svg>

Нарисуете новый path по часовой стрелке и анимация будет по часовой стрелке

2.1 Применить магию с параметрами stroke-dasharray

Вариант SVG

<animate attributename="stroke-dasharray" dur="2s" values="504,0;0,504" 
  fill="freeze"    repeatCount="indefinite"    />

Линия от максимального значения 504px уменьшается до нуля.
При repeatCount="indefinite"появится эффект рисования линии по часовой стрелке

.svg-elem-1 {
fill:none;
stroke:#E60000;
stroke-width:6;
stroke-miterlimit:10;

}
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="252" stroke-dasharray="504;0" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795">  
  
  <animate attributename="stroke-dasharray" dur="2s" values="504,0;0,504" fill="freeze"    repeatCount="indefinite"    /> 
     <animate attributename="stroke-width" dur="2s" values="1;6;0" fill="freeze" repeatCount="indefinite" />   
        <animate attributename="stroke-dashoffset" dur="2s" values="0;252" fill="freeze" repeatCount="indefinite"  />     
</svg>

Вариант CSS

Конвертируем анимацию SVG в правила анимации CSS

.svg-elem-1 {
fill:none;
stroke:#E60000;
stroke-width:6;
stroke-dashoffset:252;
stroke-dasharray:504;
stroke-miterlimit:10;
animation:dash 2s ease infinite,strokeWidth 2s ease infinite,strokeOffset 2s ease infinite;
}
@keyframes dash {
0% {stroke-dasharray:504,0;}
100% {stroke-dasharray:0,504;}
}
@keyframes strokeWidth {
0% {stroke-width:1px;}
50% {stroke-width:6px;}
100% {stroke-width:0px;}
}
@keyframes strokeOffset {
0% {stroke-dashoffset:0;}
100% {stroke-dashoffset:252;}
} 
<svg width="135" height="177" viewBox="0 0 135 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="svg-elem-1" stroke-dashoffset="252" stroke-dasharray="504;0" d="M103 61.4294C95.9347 57.3682 87.4329 54.0756 77.3654 51.6568C77.2944 51.2979 77.2295 50.5263 77.2271 49.805C77.3654 28.0321 84.8846 11.0321 101.385 3.53211C101.904 3.42691 101.823 3.11066 101.316 3C99.8846 3 93.8846 3.53211 86.8846 5.0321C69.3318 8.79341 54.8846 15.3238 38.3846 29.5321C26.1313 40.0836 -2.61539 70.0321 5.38461 118.032L5.70892 119.629C12.8543 152.839 42.3731 173.621 69.4903 173.531C108.122 173.403 131.481 141.923 131.385 113.032C131.754 91.2367 123.39 73.2626 103.26 61.5795">  
    
</svg>

Update

Связанные топики:

  1. Необычные эффекты stroke-dasharray
  2. stroke-dasharray через style
  3. Определение длины окружности для атрибута stroke-dasharray
  4. SVG Почему не срабатывает CSS анимация stroke-dashoffset
  5. Реализовать полоски и круги с цветными сегментами, как дано в 3D макете дизайнера?
  6. Как сделать изогнутые прямоугольники (bent rectangle) в SVG
  7. Помогите с dasharray и dashoffset
→ Ссылка

licensed under cc by-sa 3.0 with attribution.