How to create a circle diagram / pie chart?

Design help General
1

Hey. I’ve trying to create a circle diagram / pie chart like so

image
image1190×948 20.1 KB

I’ve found other guides here on the forum but they haven’t been applicable to my use case.
Does anybody have an idea for how I might create a chart like the one above? For now, I’ve just been uploading svg’s into my project but I wanna make the real thing.

https://preview.webflow.com/preview/mytutor-mental-health-report-2020?utm_medium=preview_link&utm_source=designer&utm_content=mytutor-mental-health-report-2020&preview=88f66437f43eae5f9ed787a0b4ecf59d&mode=preview

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

For a pie chart, an SVG graphic is the real thing.

3

Thanks! Is there a good way to do that natively in Webflow. I literally designed my stuff in Figma and exported to Webflow. I applied scroll interactions to each of the 4 layers but things easily misalign.

Wondering if there’s a hack in Webflow recreate the chart. Seen some working here in the forum but they’re using borders, I want the div body to have a fill.

4

Question could be “in HTML/CSS” rather than Webflow. And no, there’s no native way in HTML/CSS to generate such graphics.

Your pie chart is a graphic, an illustration, it’s normal that it must be either an image or an animation.

If you want it to be “native” becaus you want to interact with it, you can either use Lottie animations, or look for a Javascript coder to do all that in JS. You can also compose your chart with several SVG elements and animate them with IX.