JSFiddle - React, Tailwind, and code Playground

HTML

<svg width=100 height=100>
  <circle id="c1" />
</svg>

CSS

svg {
  border: 1px solid gray;
}

circle {
  cx: 50%;
  cy: 50%;
  r: calc(50% - 4px / 2);
  stroke: darkblue;
  stroke-width: 4px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  fill: transparent;
}