- From: Michal Čaplygin via GitHub <sysbot+gh@w3.org>
- Date: Wed, 10 Apr 2024 18:02:07 +0000
- To: public-css-archive@w3.org
Historical side note: at this point, for the "pie graph" (circle segments) colouring and animating (like in the video), `stroke-dasharray` and `stroke-dashoffset` are abused in the wild, like so:
```HTML
<style>
circle { animation: 8s a infinite ease-in-out; }
@keyframes a {
<..>% { stroke-dasharray: <"like angle">, 360; stroke-dashoffset: <"start, 0=45%">; }
}
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1,-1,2,2">
<circle r=".5" pathlength="360" fill="none" stroke="currentcolor"></circle>
</svg>
```
([Sandbox](https://myfonj.github.io/sandbox.html#%3C!doctype%20html%3E%3Chtml%20lang%3D%22en%22%3E%3Ctitle%3E%0AAnimating%20SVG%20%22arcs%22%20with%20CSS%20(dasharray%20hack)%0A%3C%2Ftitle%3E%3Cmeta%20name%3D%22color-scheme%22%20content%3D%22dark%20light%22%3E%0A%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0A%3Cstyle%3E%0Acircle%20%7B%20animation%3A%208s%20a%20infinite%20ease-in-out%3B%20%7D%0A%40keyframes%20a%20%7B%0A0%25%2C%20100%25%20%7B%20stroke-dasharray%3A%2090%2C%20360%3B%20stroke-dashoffset%3A%20-270%3B%20%7D%0A20%25%20%7B%20stroke-dasharray%3A%2060%2C%20360%3B%20stroke-dashoffset%3A%200%3B%20%7D%0A40%25%20%7B%20stroke-dasharray%3A%2010%2C%20360%3B%20stroke-dashoffset%3A%20-70%3B%20%7D%0A60%25%20%7B%20stroke-dasharray%3A%201%2C%20360%3B%20stroke-dashoffset%3A%20-120%3B%20%7D%0A80%25%20%7B%20stroke-dasharray%3A%20100%2C%20360%3B%20stroke-dashoffset%3A%20-10%3B%20%7D%0A%7D%0A%3C%2Fstyle%3E%0A%3Cbody%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1%2C-1%2C2%2C2%22%3E%0A%20%3Ccircle%20r%3D%22.5%22%20pathlength%3D%22360%22%20fill%3D%22none%22%20stroke%3D%22currentcolor%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E))
--
GitHub Notification of comment by myfonj
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10195#issuecomment-2048158797 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 10 April 2024 18:02:08 UTC