<p>5 star rating </p>
<div class="stars">
  <input type="radio" name="rating" value="1" />
  <input type="radio" name="rating" value="2" />
  <input type="radio" name="rating" value="3" />
  <input type="radio" name="rating" value="4" />
  <input type="radio" name="rating" value="5" />
  <i></i>
</div>
<div dir="rtl">
<p>right to left star rating</p>
<div class="stars" style="--s:100px">
  <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>
<p>only 3 stars and small size </p>
<div class="stars" style="--s:50px">
  <input type="radio" name="rating3" value="1" />
  <input type="radio" name="rating3" value="2" />
  <input type="radio" name="rating3" value="3" />
  <i></i>
</div>
<p>6 star rating with a default value</p>
<div class="stars">
  <input type="radio" name="rating4" value="1" />
  <input type="radio" name="rating4" value="2" />
  <input type="radio" name="rating4" value="3" checked />
  <input type="radio" name="rating4" value="4" />
  <input type="radio" name="rating4" value="5" />
  <input type="radio" name="rating4" value="6" />
  <i></i>
</div>

.stars {
  --s:70px;
  position:relative;
  display:inline-flex;
  filter: blur(calc(var(--s)/18)) contrast(60) hue-rotate(300deg);
  border: calc(var(--s)/20) solid #0000;
  background: #fff;
}
.stars input {
  width:var(--s);
  height:var(--s);
  margin:0;
  opacity:0;
  cursor:pointer;
}
.stars i {
  position:absolute;
  inset:0 0 calc(var(--s)*0.1);
  pointer-events:none;
  transition:1s;
  -webkit-mask: 
      linear-gradient(#000 0 0) 0/calc(var(--p,0)*var(--s)) 100% no-repeat,
      linear-gradient(#0008 0 0);
}
.stars i:before {
  content:"";
  position:absolute;
  inset:0;
  transition:inherit;
  --v1:transparent,#000 0.5deg 108deg,#0000 109deg;
  --v2:transparent,#000 0.5deg  36deg,#0000  37deg;
  -webkit-mask:
    conic-gradient(from 54deg  at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
    conic-gradient(from 90deg  at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2)),
    conic-gradient(from 126deg at calc(var(--s)*0.5)  calc(var(--s)*0.7) ,var(--v1)),
    conic-gradient(from 162deg at calc(var(--s)*0.5)  0                  ,var(--v2));
  -webkit-mask-size: var(--s) var(--s);
  -webkit-mask-composite: xor,destination-over;
  mask-composite: exclude,add;
  background: 
    linear-gradient(#ffff00 0 0) 0/calc(var(--p,0)*var(--s)) 100% no-repeat,
    radial-gradient(circle at 50% 56%,#000 36%,#0000 38%) 0/var(--s) var(--s);
}

[dir="rtl"] .stars i{
    -webkit-mask-position: right;
}
[dir="rtl"] .stars i::before {
    background-position: right;
}

input:nth-of-type(1):checked ~ i {--p:1}
input:nth-of-type(2):checked ~ i {--p:2}
input:nth-of-type(3):checked ~ i {--p:3}
input:nth-of-type(4):checked ~ i {--p:4}
input:nth-of-type(5):checked ~ i {--p:5}
input:nth-of-type(6):checked ~ i {--p:6}
input:nth-of-type(7):checked ~ i {--p:7}
input:nth-of-type(8):checked ~ i {--p:8}
input:nth-of-type(9):checked ~ i {--p:9}
input:nth-of-type(10):checked ~ i {--p:10}
/*input:nth-child(N):checked ~ i {--p:N}*/