<div class="stars" style="--l:4"></div>
<div class="stars" style="--l:2"></div>
<div class="stars" style="--l:2.5"></div>
<div class="stars" style="--l:8.25;--n:10"></div>
<div class="stars" style="--l:3.75;--n:10;--s:30px"></div>
<div class="stars" style="--l:3.5;--n:4;--s:80px"></div>

.stars {
  --s:40px;
  width:calc(var(--n,5)*var(--s));
  height:calc(var(--s)*0.9);
  --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(gold 0 0) 0/calc(var(--l,0)*var(--s)) 100% no-repeat
    #ccc;
}