CODEWITHSUNDEEP
javascriptcsssvg
Suika
Suika

Reputation: 660

Doughnut graph using SVG

I need to replicate this doughnut graph:

enter image description here

I saw this question and played with the solution given but I haven't been able to get good progress as I have no experience whatsoever in SVG. But this shows what I did so far. (link here to fiddle)

<svg width="600" height="600">
    <defs>
        <mask id="innerbevel">
            <rect width="100%" height="100%" fill="black"/>
            <circle cx="0" cy="0" r="235" fill="white"/>
        </mask>

        <mask id="centrehole">
            <rect x="-100%" y="-100%" width="200%" height="200%" fill="white"/>
            <circle cx="0" cy="0" r="195" fill="black"/>
        </mask>

        <linearGradient id="grad1">
            <stop offset="0%" stop-color="#2188cb"/>
            <stop offset="100%" stop-color="##2188cb" stop-opacity="0" />
            </linearGradient>
    </defs>

    <g transform="translate(300,300)" mask="url(#centrehole)">
        <g>
            <path d="M0 0 0 -275 A 275 275 0 0 1 0 275" fill="url(#grad1)"/>
            <path d="M0 0 0 275 A 275 275 0 0 1 -275 0" fill="#a6a6a6"/>
            <path d="M0 0 -275 0 A 275 275 0 0 1 0 -275" fill="#a6a6a6"/>

            <circle cx="0" cy="235" r="40" fill="#2188cb"/>
            <circle cx="-235" cy="0" r="40" fill="#a6a6a6"/>
            <circle cx="0" cy="-235" r="40" fill="#a6a6a6"/>
        </g>
    </g>
</svg>

The graph is originally divided into three and since I couldn't work around it I thought about just setting the same color to the second and last path.. The gradient wasn't also very nice.. And I couldn't easily change the "percentage" of the graph.

PS: the text is only a dummy text, I know it's not 75% on the image. And yes, my work is a mess.

Help, anyone?

Edit: Question is how do I make it only two paths with the closest division as with the image I am replicating? I don't quite get how the paths are set, as well as how to correctly set the gradient to follow the path because right now it's linear.

Upvotes: 2

Views: 2726

Answers (1)

jcaron
jcaron

Reputation: 17710

A much simpler version:

<svg width="500" height="500">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>
  <circle cx="250" cy="250" r="200" stroke="grey" stroke-width="50" fill="none"/>
  <path d="M 250,50 A 200 200 0 1 1 250 450 A 200 200 0 1 1 250 50"
        stroke="url(#linear)" stroke-linecap="round" stroke-width="50"
        fill="none" stroke-dasharray="750,1256" />
</svg>

jsFiddle: https://jsfiddle.net/jacquesc/ywus1z14/2/

enter image description here

The only thing that needs to change to make it "grow" is the first value of stroke-dasharray which should be x * circumference. Here, circumference is about 1256 (2 * radius=200 * pi).

EDIT

Just for fun, another version that uses a combination of stroke-dasharray and stroke-dashoffset, set via CSS, and animated:

https://jsfiddle.net/jacquesc/ywus1z14/1/

Upvotes: 4

Related Questions