CODEWITHSUNDEEP
svgpie-chartsnap.svgsvg-animate
Tejas C
Tejas C

Reputation: 107

How do I clockwise animate Pie Chart onLoad in SVG

I am stuck with pie chart which should animate clockwise onLoad. Here, is my pie chart fiddle

I need this animation to work with brezier curve paths, for instance,

<path d="M 276 63.03 C 329.93 63.03 381.86 78.24 421.4 105.63 L 276 222.79 M 276 63.03" />

I am also aware that, it can be achieved using snap.svg library but is unable workout in this case.

Any help is appreciated.

Thanks in advance!

Upvotes: 2

Views: 1437

Answers (1)

helderdarocha
helderdarocha

Reputation: 23637

You can use a nested animate and change some attribute with a progressive delay.

In this example I placed the stroke g inside the fill g for each slice, and added an animate element inside, each animation starting 0.5s. I animated the opacity attribute (so I added an opacity="0" attribute for each element; you can replace it for another attribute). This is the second slice:

<g id="pieFillSection2" opacity="0" style="fill: yellow;fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" >
    <animate attributeName="opacity" from="0" to="1"
             begin="0.5s" dur="1s" fill="freeze"/>
    <path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" />
    <g class="pieStroke" id="pieStrokeSection2" style="stroke-width: 1.0;stroke: rgb(128,128,128);stroke-opacity: 1.0; fill: none" transform="matrix(1,0,0,1,0,0)" >
        <path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" />
    </g>
</g>

Check the updated JSFiddle.

Upvotes: 1

Related Questions