real squircle everywhere
npm install pretty-squirclefigma-squircle.
sh
npm i pretty-squircle
`
Usage
`jsx
import { getSquirclePath } from "pretty-squircle";
const svgPath = getSquirclePath({
width: 200,
height: 200,
cornerRadius: 24,
cornerSmoothing: 0.8, // From 0 to 1
});
const svgPath = getSquirclePath({
width: 200,
height: 200,
cornerRadius: {
default: 24,
topLeft: 48,
}, // Also use a object to set radius individually
cornerSmoothing: 0.8,
});
// The result is a svg path you can use it to create svg element
function PinkSquircle() {
return (
);
}
// Or with the clip-path CSS property
function ProfilePicture() {
return (
style={{
width: 200,
height: 200,
clipPath: path('${svgPath}'),
}}
>
...
Mini Version
There's also a mini version for uniform corner squircle.
`jsx
import { getSquirclePath } from "pretty-squircle/mini";
const svgPath = getSquirclePath({
width: 200,
height: 200,
cornerRadius: 24, // Only support number
cornerSmoothing: 0.8,
});
`
Attention
I deleted preserveSmoothing because there's no need to use it to get a better shape.
Thanks
- Figma team's article as the original ideas.
- figma-squircle` as the original project.