<div class="pie-chart"></div>
:root {
  --pie-1-value: 10%;
  --pie-2-value: 10%;
  --pie-3-value: 80%;

  --pie-1-computed: var(--pie-1-value);
  --pie-2-computed: 0 calc(var(--pie-1-value) + var(--pie-2-value));
  --pie-3-computed: 0 calc(var(--pie-2-value) + var(--pie-3-value));
}

body {
  display: flex;
  place-content: center;
  place-items: center;
  background: hsl(0, 0%, 14%);
  height: 100vh;
  padding: 1rem 2rem;
}

.pie-chart {
  background-image: conic-gradient(
    purple var(--pie-1-computed),
    magenta var(--pie-2-computed),
    cyan 0
  );
  border-radius: 50%;
  width: 50%;
  height: 0;
  padding-top: 50%;
}
function setPieChartValue(percentage, index) {
  let root = document.documentElement;
  root.style.setProperty(`--pie-${index + 1}-value`, `${percentage}%`);
}

let percentages = [25, 35, 60];
percentages.forEach(setPieChartValue);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.