Figma-flavored squircles for everyone
npm install figma-squircle 
> Figma-flavored squircles for everyone
> This library is not an official product from the Figma team and does not guarantee to produce the same results as you would get in Figma.
Figma has a great feature called corner smoothing, allowing you to create rounded shapes with a seamless continuous curve (squircles).
This library helps you bring those squircles to your apps.
``sh`
npm install figma-squircle
`jsx
import { getSvgPath } from 'figma-squircle'
const svgPath = getSvgPath({
width: 200,
height: 200,
cornerRadius: 24, // defaults to 0
cornerSmoothing: 0.8, // cornerSmoothing goes from 0 to 1
})
const svgPath = getSvgPath({
width: 200,
height: 200,
cornerRadius: 24,
cornerSmoothing: 0.8,
// You can also adjust the radius of each corner individually
topLeftCornerRadius: 48,
})
// svgPath can now be used to create SVG elements
function PinkSquircle() {
return (
)
}
// Or with the clip-path CSS property
function ProfilePicture() {
return (
width: 200,
height: 200,
clipPath: path('${svgPath}'),
}}
>
...
Preserve Smoothing
The larger the corner radius, the less space we have left to make a smooth transition from the straight line to the rounded corner. As a result, you might have noticed that the smoothing effect appears to be less pronounced as the radius gets bigger.
Try enabling
if you're not happy with the generated shape. `jsx
const svgPath = getSvgPath({
width: 200,
height: 200,
cornerRadius: 80,
cornerSmoothing: 0.8,
preserveSmoothing: true, // defaults to false
})
``There's also a Figma plugin that utilizes this option.
- Figma team for publishing this article and MartinRGB for figuring out all the math behind it.
- George Francis for creating Squircley, which was my introduction to squircles.
- https://github.com/phamfoo/react-native-figma-squircle