Figma-squircle NPM

Figma Squircle

Figma-flavored squircles for everyone

Disclaimer

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.

What is this?

Figma has a great feature called corner smoothing, allowing you to create rounded shapes with a seamless continuous curve (squircles).

npm.io

This library helps you bring those squircles to your apps.

Installation

yarn add figma-squircle

npm install figma-squircle

Usage

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 (
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <path d={svgPath} fill="pink" />
    </svg>
  )
}

// Or with the clip-path CSS property
function ProfilePicture() {
  return (
    <div
      style={{
        width: 200,
        height: 200,
        clipPath: `path('${svgPath}')`,
      }}
    >
      ...
    </div>
  )
}