CSS styling shape

Question

I'm trying to create this image: https://i.stack.imgur.com/7k4Uq.png

I'm not sure what the best way to do this is. I got the CSS to work, but I don't know if there is a "better way" of doing it, or a cleaner/easier method. My CSS is below:

 :root{
--size-red: 70px;
  --size-grey: 43px;
}
.arc {
  width: 0;
  height: 0;
  position: relative;
  border-left: var(--size-red) solid transparent;
  border-right: var(--size-red) solid transparent;
  border-top: 100px solid red;
  border-radius: 51%;
}
.arc:after {
  content:'';
    width: 0;
  height: 0;
  position: relative;
  right: var(--size-grey);
  border-left: var(--size-grey) solid transparent;
  border-right: var(--size-grey) solid transparent;
  border-top: 60px solid white;
  border-radius: 51%;
}

Any suggestions for how to make my code look cleaner/more manageable would be appreciative. Thanks!