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.
Two ways to join a pill's semicircular cap to its straight edge with no jump in curvature.
Left, the shipped squircle-pill worklet. Right, the same pill
with the join built the way CAD tools build a curvature-continuous fillet, complete with the
controls those tools expose. The comb on each cap is curvature — the same graph Rhino's
CurvatureGraph and SolidWorks' curvature combs draw — and the plot beneath is
κ·R against arc length. A step at the arc join is G1 only, a
kink is G2, no kink is G3. Where the browser has no paint worklets, both pills are drawn without
them: the shipped one by its polyfill, the fillet by a clip-path of the same outline.
Back to the Tailwind demo.