<h1>CSS only Pie Chart</h1>

<ul>
  <li style="--value: 120deg; --previousValue: 0deg; --color: #F00;"><span>33%</span></li>
  <li style="--value: 72deg; --previousValue: 120deg; --color: #F50;"><span>20%</span></li>
  <li style="--value: 144deg; --previousValue: 192deg; --color: #FFD200;"><span>40%</span></li>
</ul>

ul {
  background: #BBB;
  clip-path: circle(50%);
  height: 200px;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 200px;
  li {
    background: conic-gradient(from var(--previousValue), var(--color) var(--value), transparent var(--value));
    height: 100%;
    position: absolute;
    width: 100%;
    &:first-child {
      background: conic-gradient(var(--color) var(--value), transparent var(--value));
    }
    span {
      display: none;
    }
  }
}