<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="200" viewBox="0 0 100 100" fill="none">
  <circle cx="-150" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
  <circle cx="-35" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
  <circle cx="80" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
  <circle cx="200" cy="50" r="45" stroke="red" stroke-width="10" fill="none" />
</svg>

circle:nth-of-type(1) {
  stroke-dasharray: 282;
  stroke-dashoffset: 0
}
circle:nth-of-type(2) {
  stroke-dasharray: 282;
  stroke-dashoffset: 50
}
circle:nth-of-type(3) {
  stroke-dasharray: 282;
  stroke-dashoffset: 260
}
circle:nth-of-type(4) {
  stroke-dasharray: 282;
  stroke-dashoffset: 540
}