@property --start {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
figure {
aspect-ratio: 1;
border: calc(2vh + 3rem) solid transparent;
border-radius: 50%;
background-image:
conic-gradient(from var(--start),
lightseagreen 0 var(--percent),
light-dark(ghostwhite, #3c3c3c) var(--percent) 100%);
background-origin: border-box;
background-clip: border-area;
padding: 1rem;
display: grid;
place-content: center;
font-size: calc(1vh + 1rem);
font-weight: 200;
color: light-dark(#8181f9, #5656f0);
line-height: 1.2;
span {
font-size: 360%;
font-weight: 350;
display: block;
color: light-dark(#3232cf, #6262ff);
letter-spacing: -2px;
margin-block-end: 0.075lh;
}
}
@supports not (background-clip: border-area) {
figure {
color: #3232cf;
font-weight: 350;
}
}
main {
font-family: system-ui, sans-serif;
text-align: center;
display: grid;
place-content: center;
height: 100vh;
}
& {
color-scheme: dark light;
}
Reached
8,426
steps
