Pie chart HTML SVG animation, circle SVG animation, SVG CSS HTML circle Animation

SVG animation in HTML, without Jquery or Javascript. codes used in the conversion is given below.

HTML code Implemantation:-

〈div id="abc"〉〈⁄div〉

***Always implement below script after calling Jquery library script above***
〈script〉
});
*** all the SVG script changes needs to be implemented inside this script***
〈⁄script〉

SVG code before SVG close tag:-
〈circle id="circle_animation" cx="50%" cy="50%" r="50%"⁄〉〈⁄circle〉

Note:-
⁄ means forward slash, you tube description box does not support punctuation.

CSS code:-

Circle animation Clock wise:-

.Pichart_animation{width:400px; margin:20px 40px;}
#circle_animation{
fill-opacity: 0;
stroke:#FFF;
stroke-width: 100%;
stroke-dasharray: 315%;
stroke-dashoffset: 0%;
transform-origin: center center;
transform: rotatez(90deg) rotatey(-180deg);
animation: circle 2s linear forwards 0.5s;}

@keyframes circle{to{stroke-dashoffset:315%; visibility:hidden;}}

Circle animation Anti-Clock wise:-

.Pichart_animation{width:400px; margin:20px 40px;}
#circle_animation{
fill-opacity: 0;
stroke:#FFF;
stroke-width: 100%;
stroke-dasharray: 315%;
stroke-dashoffset: 0%;
transform-origin: center center;
transform: rotatez(-90deg) rotatey(0deg);
animation: circle 2s linear forwards 0.5s;}

@keyframes circle{to{stroke-dashoffset:315%; visibility:hidden;}}

Website link:

Music:-

Artist:- Tobu:

Music Title:- Itro & Tobu - Cloud 9 [NCS Release]