Skip to content

[svg-2][css-transitions] Can we fix arc interpolation? #10195

Open
@LeaVerou

Description

@LeaVerou

Currently paths are naively interpolated by matching up segments and points and interpolating them as numbers.
This is defined in the SVG 2 spec:

For animation, two d 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 using the discrete animation type.

If the list of path data commands have the same structure, then each parameter to each path data command must be interpolated separately as real numbers. 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.

So basically, control points are animated separately, and flags (of which the arc command has two!) just flip halfway.
As you can see in this demo this produces terrible, 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):

arc-wrong.mp4

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?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions