Простой график pie-chart на чистом CSS (SVG)

Иногда бывает нужно создать очень простой круговой график всего из двух элементов. Для этого не обязательно подключать какие-то специальные библиотеки, а можно воспользоваться SVG и CSS.

Пример Круговой диаграммы (pie-chart) на SVG с помощью свойства stroke-dasharray:

Подробнее про свойство stroke-dasharray на основе которого создается такой чарт-пирог, читайте в этой заметке.

Сколько от круга будет закрашено можно регулировать просто изменив CSS переменную --fill-percent.

HTML:

<svg style="--fill-percent:30" class="pie-chart" viewBox="0 0 20 20">
	<circle r="20" cx="10" cy="10" />
</svg>

CSS:

svg.pie-chart {
  --fill-percent: 25; /* сколько закрасить */
  width: 10em; /* size */

  --radius: 20;
  --circumference: calc( var( --radius ) * 2 * 3.1415 ); /* дилна окружности */

  transform: rotate(-90deg); /* попрвим чтобы stroke начиналась сверху */
  border-radius: 50%; /* спрячем выступающий stroke */

  fill: #ccc;
  stroke: tomato;
  stroke-width: calc( var( --radius ) * 2 );
  stroke-dasharray: calc( var(--circumference) * var(--fill-percent)/100 ) var(--circumference);
  transition: stroke-dasharray 700ms ease;
}