Create a conic gradient background in a div element.

by Scott Kaye

HTML

<div id="c"></div>

CSS

#c {
  aspect-ratio: 1;
  width: 300px;
  border-radius: 50%;
}

JavaScript

const segments = [0.2, 0.3, 0.5];

const stops = segments.reduce(
  (p, _, i, a, c = `oklch(.6 .5 ${i * 270})`) =>
    (
      (a[i] += a[i - 1] ?? 0),
      `${p},${c} ${(a[i - 1] ?? 0) * 100}%,${c} ${(a[i] ?? 1) * 100}%`
    ),
  '',
)
.slice(1);

document.querySelector("#c")
  .style
  .background = `conic-gradient(${stops})`;