svg {
  --dash: 430;
  --stroke-width: 12px;
  --gap: 6;

  width: var(--size);
}

circle:first-of-type,
circle:nth-of-type(2),
circle:last-of-type {
  aspect-ratio: 1 / 1;
  cx: 50%;
  cy: 50%;
  stroke-width: var(--stroke-width);
  stroke-dasharray: var(--dash);
}

circle:first-of-type {
  stroke: var(--stroke);
  stroke-dashoffset: calc(100% - var(--percent));
}

circle:nth-of-type(2) {
  stroke: #fff;
  stroke-dashoffset: calc(var(--dash) - (var(--dash) * var(--percent) / 100));
}

circle:last-of-type {
  stroke: var(--fill);
  stroke-dashoffset: calc(
    var(--dash) - (var(--dash) * var(--percent) / 100) + var(--gap)
  );

  transform: rotate(calc(3.25deg * var(--gap) / 8));
  transform-origin: 50% 50%;
}
