Conic donut

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/charts/chart-donut-conic.html
  Desc   : Donut chart from conic-gradient with @property sweep-open
  ============================================================
-->
<div class="sg-chart-donut-conic" style="--sg-color:#7F77DD; --sg-size:150px;">
  <div class="sg-chart-donut-conic-ring" role="img" aria-label="Donut chart of browser share: Chrome 38%, Safari 28%, Edge 20%, Firefox 14%"></div>
  <ul class="sg-chart-donut-conic-legend">
    <li>Chrome · 38%</li>
    <li>Safari · 28%</li>
    <li>Edge · 20%</li>
    <li>Firefox · 14%</li>
  </ul>
</div>
<style>
  @property --sg-chart-donut-sweep {
    syntax: '<angle>';
    inherits: false;
    initial-value: 360deg;
  }
  .sg-chart-donut-conic {
    display: flex;
    align-items: center;
    gap: 1.1em;
    font-family: inherit;
  }
  .sg-chart-donut-conic-ring {
    width: var(--sg-size);
    aspect-ratio: 1;
    border-radius: 50%;
    --sg-chart-donut-sweep: 360deg;
    background: conic-gradient(
      color-mix(in srgb, var(--sg-color) 100%, transparent) 0 calc(var(--sg-chart-donut-sweep) * 0.38),
      color-mix(in srgb, var(--sg-color) 65%, transparent) 0 calc(var(--sg-chart-donut-sweep) * 0.66),
      color-mix(in srgb, var(--sg-color) 40%, transparent) 0 calc(var(--sg-chart-donut-sweep) * 0.86),
      color-mix(in srgb, var(--sg-color) 22%, transparent) 0 var(--sg-chart-donut-sweep),
      transparent var(--sg-chart-donut-sweep) 360deg
    );
    -webkit-mask: radial-gradient(closest-side, transparent 61%, #000 62%);
    mask: radial-gradient(closest-side, transparent 61%, #000 62%);
    animation: sg-chart-donut-conic-open 1.1s cubic-bezier(0.25, 0.8, 0.3, 1);
  }
  @keyframes sg-chart-donut-conic-open {
    from { --sg-chart-donut-sweep: 0deg; }
  }
  .sg-chart-donut-conic-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    display: grid;
    gap: 0.35em;
  }
  .sg-chart-donut-conic-legend li {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .sg-chart-donut-conic-legend li::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--sg-color) 100%, transparent);
  }
  .sg-chart-donut-conic-legend li:nth-child(2)::before { background: color-mix(in srgb, var(--sg-color) 65%, transparent); }
  .sg-chart-donut-conic-legend li:nth-child(3)::before { background: color-mix(in srgb, var(--sg-color) 40%, transparent); }
  .sg-chart-donut-conic-legend li:nth-child(4)::before { background: color-mix(in srgb, var(--sg-color) 22%, transparent); }
</style>