Как сделать диаграмму на css для рейтинга в 10 баллов?

Question

[Алексей Королёв]

На сайте есть рейтинг от 1 до 10, где есть не целые числа вроде 6.5 и тд. Делаю для этого всего диаграмму, но она сделана для рейтинга в 100 баллов. Помогите адаптировать её к 10 бальной шкале.

<div class="pie" style="--p:10;--c:#0d6efd;--b:9px"> 10</div>

.pie {
  --p:20;
  --b:22px;
  --c:darkred;
  --w:150px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}

Answer 1

[Anonymous Penguin]

27-я строка SCSS, меняем 1% на 10%

conic-gradient(var(--c) calc(var(--p)*10%),#0000 0); /* (уже изменил) */

Comments

[Алексей Королёв]

Спасибо большое, то что нужно