<div class="chart">
  <div id="pie"></div>
  <h3><span id="ngval">120</span></h3>
</div>  
<input type="range" max="360" value="120" id="ng">

@layer demo {
  #pie {
    --ng: 120deg; /* can be set via slider */
    --thickness: 3px;
    --_inner: calc(70% - var(--thickness));
    --_outer: calc(var(--_inner) + 1px); /* fixes aliasing */
    
    /* hides the inner part of the conic gradient */
    mask: radial-gradient(circle, #0000 var(--_inner), #000 var(--_outer));
    
    /* the conic gradient, transparent after --ng */
    background-image: conic-gradient(deeppink, cyan var(--ng), #0000 0);
  }
}

@layer demo.support {
  #pie {
    aspect-ratio: 1;
    inline-size: 50vmin;
    border-radius: 50%;
  }
  
  .chart {
    display: grid;
    place-items: center;
  }
  
  .chart > * {
    grid-area: 1/1;
  }
  
  .chart > h3 {
    font-variant-numeric: tabular-nums;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 5vmin;
  }
}

ng.oninput = e => {
  pie.style.setProperty('--ng', e.target.value + 'deg')
  ngval.textContent = e.target.value
}