Анимация и постепенная загрузка SVG изображений

Question

Как реализовать анимацию рисования линии при помощи stroke-dasharray до нужного значения?

Я пробовал transition, animate jquery, но нужного эффекта не добился, плавности увеличения синего круга нет. И еще нужно сделать, чтобы окружности рисовались друг за другом. Я пробовал реализовать это за счет уменьшения времени анимации каждой последующей окружности в 2 раза, но тогда анимацию сделать уже нельзя, так как пока дойдет очередь до нужного элемента, его анимация уже отыграла. https://codepen.io/donchak1610/pen/OjLopQ?editors=1010

div.circle-wrap
 svg(class = 'circle')
  circle(transform='rotate(-90)' r='50' cx='-60' cy='60')
  circle(id='skill-html' class='circle-svg' transform='rotate(-90)' 
 style='stroke-dasharray:220px 314px;' r='50' cx='-60' cy='60')

Answer 1

Плавное рисование окружности с нуля до заданного значения можно реализовать с помощью изменения атрибута stroke-dashoffset - это отступ от начала рисования линии.

При максимальном значении отступа равного длине окружности - линия не видна.

При нулевом значении stroke-dashoffset="0" - линия будет прорисована полностью.
Длина окружности при радиусе r=50px равна 2*3.14*50 = 314px

Как я понял из вашего примера, вам нужно прорисовать линию с нуля до 3/4 окружности, поэтому stroke-dashoffset будет уменьшаться от максимума - 314px до 78.5px (одна четвертая часть окружности будет не заполнена)

Вариант анимации CSS

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="340px" height="333px" viewBox="0 0 340 333" >
<style>
.cr1 {
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  animation: dash 3s linear forwards;
}
@keyframes dash {
  from {
    stroke-dashoffset: 314;
  }
  to {
    stroke-dashoffset: 78.5;
  }
}
</style> 
 <g stroke-width="20">
   <circle class="bg1" cx="100" cy="100" r="50" fill="none" stroke="#dfdcd5" />

 <circle class="cr1" cx="100" cy="100" r="50" fill="none" stroke="dodgerblue" />
</g>
</svg>

Начальной точкой рисования линии для окружности является положительная ось "X"

Для изменения положения начальной точки вверху, необходимо повернуть окружность

на -90 градусов. transform="rotate(-90 100 100)"

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="340px" height="333px" viewBox="0 0 340 333" >
<style>
.cr1 {
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  animation: dash 3s linear forwards;
}
@keyframes dash {
  from {
    stroke-dashoffset: 314;
  }
  to {
    stroke-dashoffset: 78.5;
  }
}
</style> 
 <g stroke-width="20" transform="rotate(-90 100 100)">
   <circle class="bg1" cx="100" cy="100" r="50" fill="none" stroke="#dfdcd5" />

 <circle class="cr1" cx="100" cy="100" r="50" fill="none" stroke="dodgerblue" />
</g>
</svg>

Вариант анимации SVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="600px" height="600px" viewBox="0 0 600 600">
 <g stroke-width="20" transform="rotate(-90 100 100)">
   <circle class="bg1" cx="100" cy="100" r="50" fill="none" stroke="#dfdcd5"  />   
 <circle class="cr1" cx="100" cy="100" r="50" stroke-dasharray="314" stroke-dashoffset="314" fill="none" stroke="dodgerblue">
 <animate id="an1" attributeName="stroke-dashoffset" begin="0" values="314;78.5" dur="2s" fill="freeze" />
 </circle>  
 </g>
</svg> 

Последовательная анимация нескольких окружностей

Код не сильно отличается от примера выше с одной окружностью. Добавлены уникальные идентификаторы анимации для каждой окружности : an1, an2, an3. Начало анимации заполнения второй окружности начинается после окончания первой анимации - begin="an1.end" Начало анимации для третьей окружности - begin="an2.end"

<animate id="an2" attributeName="stroke-dashoffset" begin="an1.end" values="314;78.5" dur="2s" fill="freeze" />    

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="600px" height="600px" viewBox="0 0 600 600">
<g stroke-width="20">
   <circle class="bg1" cx="100" cy="100" r="50" fill="none" stroke="#dfdcd5"  />

 <circle class="cr1" cx="100" cy="100" r="50" stroke-dasharray="314" stroke-dashoffset="314" fill="none" stroke="dodgerblue">
 <animate id="an1" attributeName="stroke-dashoffset" begin="0" values="314;78.5" dur="2s" fill="freeze" />
 </circle>
<circle class="bg2" cx="250" cy="100" r="50" fill="none" stroke="#dfdcd5"  />

 <circle class="cr2" cx="250" cy="100" r="50" stroke-dasharray="314" stroke-dashoffset="314" fill="none" stroke=" yellowgreen">
 <animate id="an2" attributeName="stroke-dashoffset" begin="an1.end" values="314;78.5" dur="2s" fill="freeze" />
 </circle>
<circle class="bg3" cx="400" cy="100" r="50" fill="none" stroke="#dfdcd5"  />

 <circle class="cr3" cx="400" cy="100" r="50" stroke-dasharray="314" stroke-dashoffset="314" fill="none" stroke=" mediumvioletred">
 <animate id="an3" attributeName="stroke-dashoffset" begin="an2.end" values="314;78.5" dur="2s" fill="freeze" />
 </circle>
</g>
</svg>