<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">html {
  --page-background: #fff;
  --graph-background: #eee;
}

.one {
  --color: blue;
  --value: 3;
  --max: 4;
}

.two {
  --color: teal;
  --value: 4;
  --max: 6;
}

.three {
  --color: rebeccapurple;
  --value: 6;
  --max: 7;
}

.four {
  --color: green;
  --value: 30;
  --max: 100;
}

.five {
  --color: orange;
  --value: 4;
  --max: 10;
}

.six {
  --color: orangered;
  --value: 7;
  --max: 10;
}

body {
  margin: 0;
  display: grid;
  place-content: center;
  height: 100vh;
  background: var(--page-background, white);
}

svg {
  width: 90vmin;
  height: 90vmin;
  transform: rotate(12deg);
  border-radius: 50%;
  background: radial-gradient(var(--page-background), var(--graph-background));
}

circle {
  fill: none;
  stroke: var(--color, red);
  stroke-width: calc(50px * (var(--value, 0) / var(--max, 100)));
  stroke-dasharray: 1 6;
  r: calc(25px * (var(--value) / var(--max)));
}
circle:last-child {
  stroke-dasharray: 1.2 6;
}
@media (prefers-reduced-motion: no-preference) {
  circle {
    -webkit-animation: circle 0.75s linear both;
            animation: circle 0.75s linear both;
  }
}

@-webkit-keyframes circle {
  0% {
    opacity: 0;
    stroke-width: 0;
    stroke-dasharray: 0 6;
  }
}

@keyframes circle {
  0% {
    opacity: 0;
    stroke-width: 0;
    stroke-dasharray: 0 6;
  }
}
circle:nth-child(1) {
  stroke-dashoffset: 0;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

circle:nth-child(2) {
  stroke-dashoffset: -1;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

circle:nth-child(3) {
  stroke-dashoffset: -2;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

circle:nth-child(4) {
  stroke-dashoffset: -3;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

circle:nth-child(5) {
  stroke-dashoffset: -4;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

circle:nth-child(6) {
  stroke-dashoffset: -5;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}</pre></body></html>