<div class="stars" style="--n:3;--d:200px">
  <input type="radio" name="rating" value="0" checked/>
  <input type="radio" name="rating" value="1" />
  <input type="radio" name="rating" value="2" />
  <input type="radio" name="rating" value="3" />
  <i></i>
</div>

<div class="stars" style="--n:5;--d:300px">
  <input type="radio" name="rating2" value="0" checked/>
  <input type="radio" name="rating2" value="1" />
  <input type="radio" name="rating2" value="2" />
  <input type="radio" name="rating2" value="3" />
  <input type="radio" name="rating2" value="4" />
  <input type="radio" name="rating2" value="5" />
  <i></i>
</div>

<div class="stars" style="--n:10;--d:400px">
  <input type="radio" name="rating3" value="0" />
  <input type="radio" name="rating3" value="1" />
  <input type="radio" name="rating3" value="2" />
  <input type="radio" name="rating3" value="3" />
  <input type="radio" name="rating3" value="4" checked/>
  <input type="radio" name="rating3" value="5" />
  <input type="radio" name="rating3" value="6" />
  <input type="radio" name="rating3" value="7" />
  <input type="radio" name="rating3" value="8" />
  <input type="radio" name="rating3" value="9" />
  <input type="radio" name="rating3" value="10" />
  <i></i>
</div>

.stars {
  display:inline-grid;
  width: var(--d);
  height:var(--d); 
}
.stars input,
.stars i {
  grid-area:1/1;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.stars input {
  height:100%;
  width:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.stars i {
  display:grid;
  pointer-events:none;
  background:#ccc;
}

.stars i:before {
  content:"";
  grid-area:1/1;
  clip-path:inherit;
  background:gold;
  transform:scale(calc(var(--s,0)/var(--n)));
  transition:0.5s;
}
.stars i:after {
  content:counter(num);
  grid-area:1/1;
  z-index:3;
  margin:auto;
  counter-reset:num var(--s);
  font-family:monospace;
  font-style:normal;
  font-weight:bold;
  font-size:calc(17px + 8px*var(--s));
  transition:0.3s;
}

.stars:focus-within {
  filter:drop-shadow(0 0 3px #0005);
}

input:nth-of-type(1):checked ~ i {--s:0}
input:nth-of-type(2):checked ~ i {--s:1}
input:nth-of-type(3):checked ~ i {--s:2}
input:nth-of-type(4):checked ~ i {--s:3}
input:nth-of-type(5):checked ~ i {--s:4}
input:nth-of-type(6):checked ~ i {--s:5}
input:nth-of-type(7):checked ~ i {--s:6}
input:nth-of-type(8):checked ~ i {--s:7}
input:nth-of-type(9):checked ~ i {--s:8}
input:nth-of-type(10):checked ~ i {--s:9}
input:nth-of-type(11):checked ~ i {--s:10}

input:first-of-type {z-index:1}
input:checked + input {z-index:2}
input:last-of-type:checked +i:after {color:red}

body {
  text-align:center;
}