How to draw donut chart with rounded corners and different gradients and shadows in every section?

Question

I have to draw a donut chart like that on my website using sample data categories = [30,32,58,62].

As you can see, there's radial gradient for every section. I've tried to use d3 library for that, but I only could get the gradient which starts at the center of my figure but not from the center of every section.

There's also a box-shadow inside every section. How can I do that?

Applied styles for the figure are listed below:

Distance between different sections is 1%

border-radius: 6px;

CSS

background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(255, 184, 0, 0.56) 81.25%, rgba(255, 239, 153, 0.32) 100%);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(255, 176, 57, 0.9);

background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(191, 191, 191, 0.345) 82.81%, rgba(228, 228, 228, 0.1) 92.19%);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(131, 131, 131, 0.6);

background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(166, 166, 166, 0.1725) 82.81%, rgba(203, 203, 203, 0.05) 92.19%);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(105, 105, 105, 0.2);

background: radial-gradient(49.84% 49.84% at 49.84% 50.16%, rgba(255, 184, 0, 0.24) 81.25%, rgba(255, 239, 153, 0.12) 100%);
box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 20px rgba(255, 176, 57, 0.4);

Please take a look at this https://stackoverflow.com/questions/52908752/svg-shaping-curved-edges to understand how to draw a segment. You can drae as many segments you need, each with the fill you need, and rotate them in the needed position — enxaneta, Mar 16 '21 at 10:42

score 3 · Answer 1 · answered Mar 17 '21 at 16:23

In order for each segment to be independent to accept its own gradient and later could be used as a separate reference, instead of one circle we will use four circles, since there are 4 sectors in the diagram.

On each circle, only one sector will be displayed, and through the gaps, the second circle with its own one sector will be visible, etc.

#1. An example of a circle with one sector:

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" >  

<circle id="s2" transform="rotate(-120 200 200)" cx="200" cy="200" r="160"  fill="none"  stroke="#FAE094"  stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />

<polyline points="200,0 200,400" fill="none" stroke="black" />
  <polyline points="0,200 400,200" fill="none" stroke="black" />

</svg>

#2. Add the rest of the circles with their sectors

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" >  
    
<circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160"  fill="none"  stroke="#FAE094"  stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
 
 <circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> 
 
 <circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" /> 

    <circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" />


<polyline points="200,0 200,400" fill="none" stroke="black" />
  <polyline points="0,200 400,200" fill="none" stroke="black" />

</svg>

#3. Making rounded corners of the sectors

For this we use SVG filter:

Used a trick from the answer. Thanks @Temani Afif

<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" 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>

<style>
circle{ 
filter:url(#goo); 
}
</style>
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" style="border:1px solid" >  
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" 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> 
<circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160"  fill="none"  stroke="#FAE094"  stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
 
 <circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> 
 
 <circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" /> 

    <circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" />
</svg>

#4. Adding radial gradients
Each sector has its own gradient:

circle{ 
filter:url(#goo); 
}
#s1 {
stroke:url(#rg1);
}
#s2 {
stroke:url(#rg2);
} 
#s3 {
stroke:url(#rg3);
}
#s4 {
stroke:url(#rg4);
}

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" 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>
    <radialGradient id="rg1" r="1" fx="0.6" fy="0.5">
              <stop offset="40%" stop-color="#F6BD4A"></stop>
              <stop offset="50%" stop-color="#F6DFB2"></stop>
               <stop offset="70%" stop-color="white"></stop>
                <stop offset="90%" stop-color="#F6AC17"></stop>
              
            </radialGradient>
    
    <radialGradient id="rg2" r="1" fx="0.4" fy="0.5">
              <stop offset="40%" stop-color="#F6BD4A"></stop>
              <stop offset="50%" stop-color="#F6DFB2"></stop>
               <stop offset="70%" stop-color="white"></stop>
                <stop offset="90%" stop-color="#F6AC17"></stop>
    </radialGradient>           
     <radialGradient id="rg3" r="1" fx="0.5" fy="0.5">
              <stop offset="40%" stop-color="#DCDCDC"></stop>
              <stop offset="50%" stop-color="#FFFFFF"></stop>
               <stop offset="60%" stop-color="#CDCDCD"></stop>
                <stop offset="90%" stop-color="#CDCDCD"></stop>
              
            </radialGradient>                
            
    <radialGradient id="rg4" r="1" fx="0.5" fy="0.5">
              <stop offset="40%" stop-color="#DCDCDC"></stop>
              <stop offset="50%" stop-color="#F3F3F3"></stop>
               <stop offset="60%" stop-color="#B8B8B8"></stop>
                <stop offset="90%" stop-color="#B8B8B8"></stop>
              
            </radialGradient>       
    
    </defs>  

<circle id="s1" transform="rotate(-120 200 200)" cx="200" cy="200" r="160"  fill="none"    stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" />
 
 <circle id="s2" transform="rotate(-58 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#FCF0D0" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="167.5, 837.7" /> 
  
  <circle id="s3" transform="rotate(5 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="335, 670" /> 
  
  <circle id="s4" transform="rotate(137 200 200)" cx="200" cy="200" r="160"  fill="none" stroke="#C4C4C4" stroke-width="50" stroke-dashoffset="1005.2" stroke-dasharray="296, 695" />
</svg>

How to draw donut chart with rounded corners and different gradients and shadows in every section?

1 Answers1