style circle stroke width 10 r 5 cx 15 cy 5 style svg height 300px width 300px viewBox 0 0 10 10 style border 1px solid gray border radius 50 g transform rotate 90 10 10 fill none g svg script let data id s0 v 1 0 c red id s1 v 2 0 c green id s2 v 3 0 c blue id s3 v 4 0 c yellow let g document getElementsByTagName svg 0 children 0 console log g g let sum 0 0 data forEach d let color d c let ang d v var circle document createElementNS http www w3 org 2000 svg circle g appendChild circle circle id d id circle setAttribute stroke color circle setAttribute stroke dashoffset calc sum 10 1 0 3 14 10 circle setAttribute stroke dasharray calc ang 10 1 0 3 14 10 calc 3 14 10 sum d v function change let v document getElementsByTagName input v v let total 0 v forEach el total parseInt el value let c document getElementsByTagName circle c c let sum 0 c forEach circle i let ang parseInt v i value console log ang ang total total sum sum circle setAttribute stroke dashoffset calc sum total 1 0 3 14 10 circle setAttribute stroke dasharray calc ang total 1 0 3 14 10 calc 3 14 10 sum ang script br input type range max 100 value 50 oninput change input br input type range max 100 value 50 oninput change input br input type range max 100 value 50 oninput change input br input type range max 100 value 50 oninput change input br style body min height 600px circle stroke width 10 r 5 cx 15 cy 5 style svg height 300px width 300px viewBox 0 0 10 10 style border 1px solid gray border radius 50 g transform rotate 90 10 10 fill none g text id svgtext style font size 2px x 50 y 50 text anchor middle stroke 51c5cf stroke width 0 1px dy 3em text svg br input type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br div id details div script let data id s0 v 1 0 c red id s1 v 2 0 c green id s2 v 3 0 c blue id s3 v 4 0 c yellow let g document getElementsByTagName svg 0 children 0 console log g g let sum 0 0 data forEach d let color d c let ang d v var circle document createElementNS http www w3 org 2000 svg circle g appendChild circle circle id d id circle setAttribute stroke color circle setAttribute stroke dashoffset calc sum 10 1 0 3 14 10 circle setAttribute stroke dasharray calc ang 10 1 0 3 14 10 calc 3 14 10 sum d v function change let v document getElementsByTagName input v v let total 0 v forEach el total parseInt el value let c document getElementsByTagName circle c c let sum 0 c forEach circle i let ang parseInt v i value console log ang ang total total sum sum circle setAttribute stroke dashoffset calc sum total 1 0 3 14 10 circle setAttribute stroke dasharray calc ang total 1 0 3 14 10 calc 3 14 10 sum ang change function generateData t let v document getElementsByTagName input v v v 0 value 1000 Math sin 3 14 2 t 2 0 v 1 value 1000 Math cos 3 14 2 t 3 0 1 0 v 2 value 1000 Math cos 3 14 2 t 1 0 Math sin 3 14 2 t 6 v 3 value 1000 Math cos 3 14 2 t 6 0 change let count 0 const maxcount 100000 let intervalId setInterval count if count maxcount clearInterval intervalId generateData count maxcount let perc 100 count maxcount toFixed 1 document getElementById svgtext textContent perc 10 script
put type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br input type range max 1000 value 500 oninput change input br div id details div script let data id s0 v 1 0 c red id s1 v 2 0 c green id s2 v 3 0 c blue id s3 v 4 0 c yellow let g document getElementsByTagName svg 0 children 0 console log g g let sum 0 0 data forEach d let color d c let ang d v var circle document createElementNS http www w3 org 2000 svg circle g appendChild circle circle id d id circle setAttribute stroke color circle setAttribute stroke dashoffset calc sum 10 1 0 3 14 10 circle setAttribute stroke dasharray calc ang 10 1 0 3 14 10 calc 3 14 10 sum d v function change let v document getElementsByTagName input v v let total 0 v forEach el total parseInt el value let c document getElementsByTagName circle c c let sum 0 c forEach circle i let ang parseInt v i value console log ang ang total total sum sum circle setAttribute stroke dashoffset calc sum total 1 0 3 14 10 circle setAttribute stroke dasharray calc ang total 1 0 3 14 10 calc 3 14 10 sum ang change function generateData t let v document getElementsByTagName input v v v 0 value 1000 Math sin 3 14 2 t 2 0 v 1 value 1000 Math cos 3 14 2 t 3 0 1 0 v 2 value 1000 Math cos 3 14 2 t 1 0 Math sin 3 14 2 t 6 v 3 value 1000 Math cos 3 14 2 t 6 0 change let count 0 const maxcount 100000 let intervalId setInterval count if count maxcount clearInterval intervalId generateData count maxcount let perc 100 count maxcount toFixed 1 document getElementById svgtext textContent perc 10 script