<h1>Select your favorite Donut!</h1>
<div class="container">
<input class="donut" type="radio" name="donut">
<input class="donut" type="radio" name="donut" style="--c: #f18ac0;background-color: #fec597">
<input class="donut alt" type="radio" name="donut" style="--c: #aa794b;background-color: #fbd7a7">
</div>

.donut {
  --s: 180px;
  --c: #c3e7d4;
  
  display: grid;
  border-radius: 50%;
  background: 
    radial-gradient(at 45% 45%,#0000 67%,#0004 75%),
    #93815f;
  mask: radial-gradient(#0000 25%,#000 26%);
  appearance: none;
  cursor: pointer;
}
.donut:checked {
  mask: 
    radial-gradient(#0000 25%,#000 26%) exclude,    
    radial-gradient(circle at 10% 10%,#000 22%,#0000 23%),    
    radial-gradient(circle at 0% 34%,#000 13%,#0000 14%),    
    radial-gradient(circle at 34% 0%,#000 13%,#0000 14%);
  clip-path: circle(49.2%);
}

.donut:before,
.donut:after {
  content:"";
  grid-area: 1/1;
}
.donut:before {
  content:"";
  --a: 35deg;
  --r: calc(var(--s)/(2 + 2/sin(90deg/12)));
  width: var(--s);
  margin: calc(var(--s)/-50);
  background: 
    var(--alt, )
    var(--c);
  aspect-ratio: 1;
  box-sizing: border-box;
  --R: calc(var(--r)*cos(90deg/12)*(1/cos(90deg/12 - var(--a)) + 1/cos(90deg/12 + var(--a))));
  --g:/var(--R) var(--R) radial-gradient(50% 50%,#000 95%,#0000) no-repeat;
  mask: calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.0833333333)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.0833333333)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.1666666667)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.1666666667)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.25)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.25)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.3333333333)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.3333333333)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.4166666667)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.4166666667)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.5)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.5)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.5833333333)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.5833333333)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.6666666667)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.6666666667)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.75)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.75)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.8333333333)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.8333333333)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*0.9166666667)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*0.9166666667)) var(--g), calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*cos(360deg*1)) calc(50% + (50% - var(--r)*sin(var(--a))/cos(var(--a) - 90deg/12))*sin(360deg*1)) var(--g), radial-gradient(100% 100%, #000 calc(var(--r)/tan(90deg/12)), #0000 calc(var(--r)/tan(90deg/12) + 1px)) intersect, radial-gradient(#000 0 0) exclude, calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*1 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*1 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*2 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*2 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*3 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*3 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*4 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*4 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*5 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*5 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*6 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*6 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*7 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*7 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*8 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*8 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*9 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*9 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*10 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*10 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*11 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*11 + 180deg)/12)) var(--g), calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*cos((360deg*12 + 180deg)/12)) calc(50% + (50% + var(--r)*sin(var(--a))/cos(var(--a) + 90deg/12))*sin((360deg*12 + 180deg)/12)) var(--g);
}

.donut:not(.alt):after {
  transform: rotate(30deg);
  --g1:/2% 6% radial-gradient(#da4a57 68%,#0000 72%) no-repeat;
  --g2:/6% 2% radial-gradient(#f4fef8 68%,#0000 72%) no-repeat;
  --g3:/3% 3% radial-gradient(#7fb083 68%,#0000 72%) no-repeat;
  background: 
    radial-gradient(#0003 25%,#0000 35%),38% 20% var(--g3),73% 38% var(--g3),27% 70% var(--g3),81% 70% var(--g3),57% 71% var(--g3),29% 34% var(--g2),20% 74% var(--g2),73% 54% var(--g2),52% 14% var(--g2),88% 28% var(--g2),56% 82% var(--g2),20% 50% var(--g1),38% 82% var(--g1),74% 83% var(--g1),85% 62% var(--g1),64% 25% var(--g1),24% 17% var(--g1);
}

:nth-child(1 of .donut) + *:after {
  transform: rotate(-30deg);
}

.alt {
  --alt: 
     radial-gradient(#0003 25%,#0000 35%),
     repeating-linear-gradient(77deg,#0000 0,#fac045 1px 5px,#0000 6px 35px),
     repeating-linear-gradient(90deg,#0000 0,#fac045 1px 5px,#0000 6px 35px),;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #f2f2f2;
  font-family: system-ui, sans-serif;
  text-align: center;
  color: #222;
}
.container {
  display: grid;
  grid-auto-flow: column;
  gap: 15px;
}