![follow taep96 on x](https://camo.githubusercontent.com/af4d16f4cf109e8b975095eb484a68f7677d64b960e8a9be078f6af9f6514972/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f7461657039363f7374796c653d666f722d7468652d6261646765266c6f676f3d78266c6162656c436f6c6f723d626c61636b26636f6c6f723d25323330303030)
bun install @taep96/squircle-path
import { squirclePath } from "@taep96/squircle-path";
const squircle = squirclePath({ width: 256, height: 256, squareness: 0.5 });
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
<img
style={{ "clip-path": `path("${squircle}")` }}
src="./image.png"
alt="squircle"
width="256"
height="256"
/>
Name |
Type |
Default |
Description |
width |
number |
|
Width of the squircle |
height |
number |
|
Height of the squircle |
squareness |
number? |
0.3 |
Squareness of the squircle. 0 is a circle, 1 is a square, 0.5 is a perfect squircle |