[css-shapes] A proposal of the definition of the distance between two shape functions #662
Description
https://w3c.github.io/web-animations/#paced-keyframe-spacing-mode
https://drafts.csswg.org/css-shapes/#basic-shape-interpolation
In web-animations (@birtles), we need to calculate the distance between two shape functions for paced spacing. Unfortunately, we don't have a definition of the distance between two shape functions in [css-shapes], so I propose some ideas about it (which is very similar to interpolation):
- Both shapes must use the same reference box.
- If both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, subtract each value in the shape functions and get the square root of the sum of these difference values. (Kind of Euclidean distance, I think)
- If both shapes are of type inset(), subtract each value in the shape functions and get the square root of the sum of these difference values.
- If both shapes are of type polygon(), both polygons have the same number of vertices, and use the same fill-rule, subtract each value in the shape functions and get the square root of the sum of these difference values.
- In all other cases, there is no distance, so we return 0.
e.g.
shape1: { clipPath: "circle(calc(10px + 10px) at 20px 10px)" }
shape2: { clipPath: "circle(calc(20px + 30px) at 10px 50%)" }
- Step 1: The difference shape function:
circle(calc(30px) at -10px calc(50% - 10px)) - Step 2: The distance is:
sqrt(30 * 30 + (-10) * (-10) + 0.5 * 0.5 + (-10) * (-10)) - P.S. We use computed values, so 50% is 0.5 in this example.