Donut / Pie Chart
An animated SVG donut chart with segment breakdown and center label.
Adjust the preview
Every choice updates the preview and the wording below.
Segments
Colors
Thickness
Center Content
Legend
Your prompt
Highlighted values follow your choices — click one to write your own.
Create an animated donut chart using SVG. It has 4 segments with vibrant purple, blue, orange, and green colors. The donut has a medium ring (20px stroke) and shows a total value number in the center. Include a legend with colored dot indicators with labels on the side. Animate each segment growing from 0 on scroll with smooth easing.
Paste it into Claude, Cursor, or v0 along with the context for your project.