CSS Clip/Path/Mask/Shape Animation with circle or arc segment

user_14425699 0
Viewed 714

How can I do an animated shape in the form of cake or clock or circle that starts with one small slice and then over time fills the whole circle:example frames of the desired animation

Is that possible with CSS? Or do I need SVG? I couldn’t find any CSS shape or mask or clipping path or anything that would work with this shape.

Thank you very much for any hints!

animation svg shapes geometry css
1 Answers

Turns out, "pie chart" is the term to google by...

Based on an extensive article by Lea Verou featuring 2 different approaches https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/, this is my solution:

<svg viewbox="0 0 16 16" width="100px" height="100px" fill="none">

  <circle cx="8" cy="8" r="4" stroke="#000" data-fallback="edge"
    stroke-width="8px"
    transform="rotate(-90, 8, 8)"
    stroke-dasharray="0, 100" >
    
    <animate attributeName="stroke-dasharray"
      dur="2s" to="100,100"
      fill="freeze" />

  </circle>

</svg>

user_144256990
Related