-2

I need to implement this as doughnut chart - I looked around for css/svg/canvas solutions but couldn't find any reliable way of doing it.

enter image description here

I know I could have fully rounded corners of each segment, but that's not what I'm looking for.

Marek
  • 307
  • 3
  • 13
  • What is your programming question? Or a question at all? If it's the one in the title, then yes, it's possible. – Teemu Mar 04 '21 at 15:37
  • Please see https://stackoverflow.com/help/how-to-ask. You need to present your scenario and attempt. – isherwood Mar 04 '21 at 15:37
  • 1
    Please take a look at this answer https://stackoverflow.com/questions/52908752/svg-shaping-curved-edges#52909072 – enxaneta Mar 04 '21 at 15:42
  • @Teemu I was looking for a very general answer, but point taken. – Marek Mar 05 '21 at 09:04

2 Answers2

5

I would use this answer combined with this one

.palette {
  --g:20px; /* The gap between shapes*/
  --s:50px; /* the size*/

  height: 300px;
  width: 300px;
  position:relative;
  display:inline-block;
  overflow:hidden;
  filter: url('#goo');
}
.palette > * {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:var(--s) solid var(--c,red);
  border-radius:50%;
  clip-path:polygon(
    calc(50% + var(--g)/2) 50%, 
    calc(50% + var(--g)/2) 0%, 
    100% 0%,
    100% calc(33.745% - var(--g)/2),
    50% calc(50% - var(--g)/2)); 
}
.color1 {
  transform:rotate(72deg);
  --c:blue;
}
.color2 {
  transform:rotate(144deg);
  --c:orange;
}
.color3 {
  transform:rotate(-72deg);
  --c:green;
}
.color4 {
  transform:rotate(-144deg);
  --c:purple;
}
<div class="palette">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
  <div class="color5"></div>
</div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Hello dear, I need this with two sclice how would I achive it? Here is my question https://stackoverflow.com/questions/75418903/divide-circle-scope-into-two-differnet-segment-using-css – Udin M Mar 22 '23 at 17:39
2

That filter can also be applied to SVG stroked paths:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 20 60 60">
<defs>
      <filter id="round">
          <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="round1" />    
          <feColorMatrix in="round1" mode="matrix" 
             values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -14" result="round2"/>
          <feComposite in="SourceGraphic" in2="round2" operator="atop"/>
      </filter>
  </defs>
<style>
    path{
        fill:none;
        stroke-width:9;
     }
</style>
  <path stroke-dasharray="70 230" stroke-dashoffset="94" value="70" stroke="blue"
    filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
  ></path>
  <path stroke-dasharray="55 245" stroke-dashoffset="173" value="55" stroke="gold"
    filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
  ></path>
  <path stroke-dasharray="45 255" stroke-dashoffset="242" value="45" stroke="purple"
    filter="url(#round)" pathLength="300" d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
  ></path>
  <path stroke-dasharray="30 270" stroke-dashoffset="296" value="30" stroke="red"
    filter="url(#round)" pathLength="300"  d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
  ></path>
</svg>

<style> svg{ width:180px; background:lightgreen } </style>
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49