title: Donut Chart Multiple Radial Lines
body: <p>I have created a donut chart with multiple content, I dont want to use libraries so i created a native one with pure css ... Its done!</p>
  <p>The problem is, i need to create radial buttons like this</p>
  <p><a href="https://i.stack.imgur.com/QiHrp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QiHrp.png" alt="enter image description here" /></a></p>
  <p>and I created something like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.swiper-slide {
       transition: all 1s;
       height: 180px !important;
       width: 180px !important;
       background: #fff;
       border-radius: 16px;
       margin-top: 16px;
       margin-left: 16px;
       margin-bottom: 16px;
       width: calc(100% - 32px) !important;
  }
   .swiper-slide.swiper-slide-prev {
       margin-left: 40px;
  }
   .swiper-slide:last-child {
       margin-left: 8px;
  }
   .swiper-slide .col {
       display: grid;
       font-size: 12px;
       font-family: "Aeonik Regular";
  }
   .swiper-slide .col .chip {
       padding: 2px;
       height: 10px;
       width: 25px;
       margin-right: 5px;
  }
   .swiper-slide .col .chip.family {
       background-color: #f5ba19;
  }
   .swiper-slide .col .chip.health {
       background-color: #15f987;
  }
   .swiper-slide .col .chip.work {
       background-color: #33127a;
  }
   .swiper-slide .col .chip.others {
       background-color: #ef4d8e;
  }
   .swiper-slide .col .donut {
       width: auto;
       height: 180px;
       display: grid;
       place-items: center;
  }
   .swiper-slide .col .donut .circle {
       height: 147px;
       width: 147px;
       border-radius: 147px;
       display: grid;
       place-items: center;
       background: conic-gradient(#f5ba19 0deg 45deg, #15f987 45deg 110deg, #33127a 110deg 200deg, #ef4d8e 200deg);
  }
   .swiper-slide .col .donut .circle .inner-circle {
       height: 115px;
       width: 115px;
       border-radius: 115px;
       background-color: #fff;
       display: grid;
       place-items: center;
  }
   .swiper-slide .col .donut .circle .inner-circle .balance .col {
       display: inline-flex;
       align-items: flex-start;
  }
   .swiper-slide .col .donut .circle .inner-circle .balance .col span {
       font-family: "Poppins Medium";
       font-size: 16px;
       line-height: 18px;
  }
   .swiper-slide .col .donut .circle .inner-circle .balance .col span:first-child {
       font-family: "Roboto Bold";
  }
   .swiper-slide .col .donut .circle .inner-circle .balance .col span.int {
       line-height: 24px;
       font-size: 24px;
       margin-left: 2px;
  }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="swiper-slide"&gt;
    &lt;div class="row"&gt;&lt;div class="col"&gt;&lt;div class="donut"&gt;&lt;div class="circle"&gt;&lt;div class="inner-circle"&gt;&lt;div class="balance row"&gt;&lt;div class="col"&gt;&lt;span&gt;$&lt;/span&gt;&lt;span class="int"&gt;0&lt;/span&gt;&lt;span&gt;00&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="col"&gt;&lt;p&gt;&lt;div class="family chip"&gt;&lt;/div&gt;Família&lt;/p&gt;&lt;p&gt;&lt;div class="health chip"&gt;&lt;/div&gt;Saúde&lt;/p&gt;&lt;p&gt;&lt;div class="work chip"&gt;&lt;/div&gt;Trabalho&lt;/p&gt;&lt;p&gt;&lt;div class="others chip"&gt;&lt;/div&gt;Outros&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Someone can help me with this?</p>
  <p>PS: I used conic-gradient, i dont know if it is the better way ...</p>