We all love the squircle! It's great, we can use it to make corners feel extra smooth. Gives that little bit of zhuzh. Others can tell you all about the math and why we love it. And now we can use them in CSS! There's just one problem... for the same border-radius, the squircle will look less rounded than the circle. That's where this package comes in.
Each run renders a number of pills at mixed sizes — a quarter with a border, a quarter at G3 — whose widths are a share of their container, then shrinks that container to 45% and back over 120 frames so every pill resizes, and changes aspect ratio, every frame. Runs happen in a fresh iframe each, because a registered paint worklet cannot be unregistered. worklet is the CSS Paint API path, polyfill the clip-path fallback forced on, and none the plain stadium as a baseline. Frame times are the gaps between animation frames, so anything over 16.7 ms is a dropped frame at 60 Hz. Keep this tab in front while it runs.
| mode | pills | setup ms | mean frame | p50 | p95 | max | frames >20ms | long tasks (ms) |
|---|