⭕ SVG Progress Ring Generator

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- Background circle -->
  <circle
    cx="100"
    cy="100"
    r="90"
    fill="none"
    stroke="#e5e7eb"
    stroke-width="20"
  />
  <!-- Progress circle -->
  <circle
    cx="100"
    cy="100"
    r="90"
    fill="none"
    stroke="#3b82f6"
    stroke-width="20"
    stroke-dasharray="565.4866776461628"
    stroke-dashoffset="141.37166941154067"
    stroke-linecap="round"
    transform="rotate(-90 100 100)"
    style="transition: stroke-dashoffset 0.5s ease"
  />
  <!-- Percentage text -->
  <text
    x="100"
    y="100"
    text-anchor="middle"
    dominant-baseline="middle"
    font-size="40"
    font-weight="bold"
    fill="#3b82f6"
  >
    75%
  </text>
</svg>