Squircle
Superellipse / squircle clip-path container — corners follow the equation |x|n + |y|n = 1. n=2 is a circle, n=4matches Apple's app-icon curve, larger n approaches a square. Pure CSS, no animation cost.
Squircle
iOS · n=4
Squircle
n=2 · circle
Squircle
n=6 · squarer
Squircle
n=10 · near-square
Usage
import { Squircle } from '@bwo-ui/react';
<Squircle smoothness={4} style={{ width: 80, height: 80, background: '#ff481f' }}>
<img src="/avatar.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
</Squircle>
// Less curve, more square-ish
<Squircle smoothness={6}>
<div>Card content…</div>
</Squircle>Props
| Prop | Type | Default | Description |
|---|---|---|---|
smoothness | number | 4 | Exponent n. 2 = circle, 4 = iOS, 6+ = squarer. |
resolution | number | 48 | Number of points used to render the path. Higher = smoother edge. |
as | ElementType | 'div' | Tag to render. |