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).

This library helps you bring those squircles to your apps.

Installation

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>
  )
}

Preserve Smoothing

This option allows corner smoothing to work better on large rounded corners.

const svgPath = getSvgPath({
  width: 200,
  height: 200,
  cornerRadius: 80,
  cornerSmoothing: 0.8,
  // This is false by default
  preserveSmoothing: true,
})

There's also a Figma plugin you can install that utilizes this option.

Thanks

• 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.

Related

• https://github.com/tienphaw/react-native-figma-squircle