arc.css
1[popover] {
2 position-anchor: --anchor;
3 bottom: anchor(top);
4 left: anchor(center);
5}
6[popover] .arc {
7 position: absolute;
8 height: calc(var(--height, 150) * 1vh);
9 width: calc(var(--width, 120) * 1vw);
10 border-radius: calc(var(--radius) * 1%);
11}
12[popover]:popover-open .arc li {
13 offset-distance: calc(-24% + (var(--index) * 80px));
14 offset-path: xywh(0 0 100% 100% round 50%);
15 offset-anchor: 50% 0;
16 transition: offset-distance 0.875s var(--spring-ease);
17 @starting-style {
18 offset-distance: -24%;
19 }
20}
Popover
11411417125 Anchor Positioning
125125×× Offset Path
557915.472