- From: Lea Verou via GitHub <sysbot+gh@w3.org>
- Date: Wed, 10 Apr 2024 16:27:54 +0000
- To: public-css-archive@w3.org
LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts: == [svg-2][css-transitions] Can we fix arc interpolation? == Currently paths are naively interpolated by matching up segments and points and interpolating them as numbers. This is defined in the [SVG 2](https://svgwg.org/svg2-draft/paths.html#DProperty) spec: > For animation, two [d](https://svgwg.org/svg2-draft/paths.html#DProperty) property values can only be interpolated smoothly when the path data strings contain have the same structure, (i.e. exactly the same number and types of path data commands which are in the same order). If an animation is specified and the lists of path data commands do not have the same structure, then the values must be [interpolated](https://drafts.csswg.org/web-animations/#animation-interpolation) using the [discrete](https://drafts.csswg.org/web-animations/#discrete-animation-type-section) animation type. > > If the list of path data commands have the same structure, then each parameter to each path data command must be [interpolated](https://drafts.csswg.org/web-animations/#animation-interpolation) separately [as real numbers](https://drafts.csswg.org/web-animations/#real-number-animation-type). Flags and booleans must be interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true. As you can see in [this demo](https://svelte.dev/repl/4258ae76ca5641138402d267686e1e7e?version=4.2.12) this produces *terrible* results. Here is another example: a dynamic pie chart using CSS transitions on `d` to animate across state changes (using a `3s` duration to clearly show what’s happening): https://github.com/w3c/csswg-drafts/assets/175836/3b88b0ce-0254-41a4-b546-fd5fb58ef4b8 We can easily fix this by adopting smarter interpolation rules for arc commands, which interpolate the actual _features_ of the arc (offset, angle, radii, etc.) instead of the coordinate points and flags. Can we do this? Is it web compatible? Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10195 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 16:27:56 UTC