Плавное рисование окружности с нуля до заданного значения можно реализовать с помощью изменения атрибута 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>