<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.