CODEWITHSUNDEEP
htmlcssbackgroundgeometry
Zack Antony Bucci
Zack Antony Bucci

Reputation: 591

CSS Circle Donut Chart Transparent Background

Hi I am attempting to make a 'donut chart' in the center that looks the following:

enter image description here

This is displayed using the following code:

:root {
  --size: 90px;
  --bord: 20px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--bord));
  height: calc(100% - var(--bord));
  background: white;
  border-radius: inherit;
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}
<div class="chart x-60">

</div>

I want to make the background from 'white' to transparent so it shows the wooden image in the background whilst still retaining the 'border'.

How do I achieve this as changing the background to none simply makes the 'circle' a pie chart: enter image description here

Thanks.

Upvotes: 3

Views: 1662

Answers (1)

Temani Afif
Temani Afif

Reputation: 272806

Use mask with a radial-gradient to create a hole

:root {
  --size: 80px;
  --bord: 10px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}

body {
  background:linear-gradient(to right,yellow,blue);
}
<div class="chart x-60">

</div>

Upvotes: 4

Related Questions