小编Nim*_*eem的帖子

svg {
  height: 200px;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 2;
}

path.grey {
  stroke: lightgrey;
}

path.purple {
  stroke: purple;
  stroke-dasharray: calc(40 3.142 1.85);
  stroke-dashoffset: 80;
  / adjust last number for variance /
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
 <path class="grey" d="M40,90
    A40,40 0 1,1 70,90"
    style="fill:none;"/>
 <path class="purple" d="M40,90
    A40,40 0 1,1 70,90"
    style="fill:none;"/>
</svg>