.graph {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 10px 10px;
    width: 80px;
    text-align: center;
}

.pie {
    width: 80px;
    aspect-ratio:1;
    position:absolute;
}
.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)));
}
.no-round:before {
    background-size:0 0,auto;
}
.no-round:after {
    content:none;
}