음악, 삶, 개발
선거 개표 UI 중 knob 모양 코드 본문
<div class="graph_doughnut">
<svg width="66" height="66">
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#9835ff"></stop>
<stop offset="100%" stop-color="#3247e8"></stop>
</linearGradient>
</defs>
<circle
cx="33"
cy="33"
r="26"
stroke="#e4e7ff"
stroke-width="13"
fill="transparent">
</circle>
<style>
.hKyboreDxG {
stroke-dasharray: 163.36281798666926;
stroke-dashoffset: 163.36281798666926;
animation: lfbdzKOhoa 0.5s linear forwards;
}
@keyframes lfbdzKOhoa {
to {
stroke-dashoffset: 7.694388727172109;
}
}
</style>
<circle
id="path"
class="donut_chart _donut_chart hKyboreDxG"
cx="33"
cy="33"
r="26"
data-value="95.29"
stroke-linecap="round"
stroke-width="13"
fill="transparent"
transform="rotate(-90 33,33)"
stroke="url(#linear)"
></circle>
</svg>
</div>