2

вот есть такая анимация на лотти 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>
5
  • 1
    Для точно такой же анимации вам нужно два пути - первый толщина линии одинаковая по всей длине - второй утоньшение в конце (по примеру lottiefiles) а далее прочитайте эту статью, на css это будет тяжело реализовать, на js - просто
    – Greg--
    Commented 6 июл. 2021 в 8:48
  • 1
    @Артем Это возможно сделать, отвечу я вечером или другие смогут сделать это раньше. Заглядывайте :) Commented 6 июл. 2021 в 9:17
  • @Alexandr_TT мне очень интересно как это сделать, поэтому жду), заранее спасибо)
    – Артем
    Commented 6 июл. 2021 в 9:20
  • @Greg-- можно пример на js?
    – Артем
    Commented 6 июл. 2021 в 9:21
  • 1
    @Артем сделал вариант анимации SVG, могу преобразовать его в вариант анимации CSS Commented 6 июл. 2021 в 17:22

4 ответа 4

5

Как верно ответил @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 точка начала анимации была начальной точкой векторного пути.

  • Чтобы решить эту проблему, будем анимировать рисования контура с помощью 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>

3
  • отличный ответ, как всегда. Я бы еще посоветовал Артему почитать блог по svg анимации ;)
    – Greg--
    Commented 7 июл. 2021 в 8:56
  • @Alexandr_TT как поменять направление анимации? просто reverse не дает нужного результата(надо по часовой стрелке, чтобы шла анимация)
    – Артем
    Commented 8 июл. 2021 в 15:14
  • @Артем Добавил новый ответ по твоему комментарию. Не стал добавлять его в старые ответы, так как очень легко запутаться, когда всё свалено в одной куче. Надеюсь, что прочтешь его внимательно и оценишь по достоинству. Commented 8 июл. 2021 в 20:55
3

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

как поменять направление анимации? просто 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
4
  • спасибо за помощь, очень мне помогли, но теперь анимация другая, линия исчезающая, а я хотел спросить, можно ли оставить анимацию как есть, только линия идет по часовой стрелке?
    – Артем
    Commented 9 июл. 2021 в 8:08
  • 1
    @Артем можно, но наверное тебе лучше немного помучаться самому с подбором параметров атрибутов stroke-dasharray, stroke-dashoffset, так быстрей научишься и в голове останутся знания для будущих твоих работ. Ведь во всех ответах есть подробная информация, как делать такие лоадеры. Если хочешь дам дополнительные ссылки на ответы, где подробно, на примерах всё объясняется Commented 9 июл. 2021 в 8:16
  • можно пожалуйста ссылки, но мне просто надо быстрее эту анимацию решить, а так я не занимаюсь этим)) @Alexandr_TT
    – Артем
    Commented 9 июл. 2021 в 8:18
  • После несколько попыток, это кажется невозможно сделать, вы уверены, что можно поменять анимацию по часовой стрелке? @Alexandr_TT
    – Артем
    Commented 9 июл. 2021 в 11:07
2

Простая анимация на 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 посмотрите демку, они меняют три параметра

1
  • Отличный, полезный ответ! Хорошо бы добавить, немного поясняющих комментарий Commented 6 июл. 2021 в 17:28
2

Как комментирует 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>

4
  • DrawSvgPlugin платный плагин, я прелдлагал в качествое посмотреть код svg чтоб понять какие параметры он меняет :( (А как делать Спойлеры в стаковерфлоу? я в документации не нашел )
    – Greg--
    Commented 7 июл. 2021 в 8:50
  • 1
    @Greg-- Если ты имеешь ввиду цитаты, то это кавычки в сниппете или в справке - раздел простые цитаты Commented 7 июл. 2021 в 11:12
  • Я про ссылку на Показать код
    – Greg--
    Commented 7 июл. 2021 в 11:13
  • 1
    @Greg-- В сниппете, в режиме редактирования, левая колонка - чекбокс - скрыть код Commented 7 июл. 2021 в 11:18

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.