squircle-path
Generate squircle paths
Installation
bun install @taep96/squircle-path
Usage
import { squirclePath } from "@taep96/squircle-path";
const squircle = squirclePath({ width: 256, height: 256, squarness: 0.5 });
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
<img
style={{ "clip-path": `path("${squircle}")` }}
src="./image.png"
alt="squircle"
width="256"
height="256"
/>
Options
Name | Type | Default | Description |
---|---|---|---|
width | number | Width of the squircle | |
height | number | Height of the squircle | |
squarness | number? | 0.3 | Squarness of the squircle. 0 is a circle, 1 is a square, 0.5 is a perfect squircle |