Repository: phamfoo/figma-squircle
Branch: main
Commit: 45622dc2e9b2
Files: 24
Total size: 26.6 KB

Directory structure:
gitextract_bvuf0zy_/

├── .gitignore
├── LICENSE
├── README.md
├── eslint.config.js
├── package.json
├── prettier.config.js
├── site/
│   ├── .gitignore
│   ├── index.html
│   ├── package.json
│   ├── postcss.config.js
│   ├── src/
│   │   ├── App.tsx
│   │   ├── app.css
│   │   ├── index.css
│   │   ├── main.tsx
│   │   └── vite-env.d.ts
│   ├── tailwind.config.js
│   ├── tsconfig.app.json
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
├── src/
│   ├── distribute.ts
│   ├── draw.ts
│   └── index.ts
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# dependencies
node_modules
.pnp
.pnp.js

# testing
coverage

# next.js
.next/
out/
build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# turbo
.turbo

#parcel
.parcel-cache

# build
dist/


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2021 Tien Pham

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

================================================
FILE: README.md
================================================
# Figma Squircle

[![Stable Release](https://img.shields.io/npm/v/figma-squircle)](https://npm.im/figma-squircle) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)

> 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](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing), allowing you to create rounded shapes with a seamless continuous curve (squircles).

![](squircle.jpg)

This library helps you bring those squircles to your apps.

## Installation

```sh
npm install figma-squircle
```

## Usage

```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 (
    <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

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 `preserveSmoothing` 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](https://www.figma.com/community/plugin/1122437229616103296) that utilizes this option.

## Thanks

- Figma team for publishing [this article](https://www.figma.com/blog/desperately-seeking-squircles/) and [MartinRGB](https://github.com/MartinRGB) for [figuring out all the math](https://github.com/MartinRGB/Figma_Squircles_Approximation) behind it.
- [George Francis](https://github.com/georgedoescode) for creating [Squircley](https://squircley.app/), which was my introduction to squircles.

## Related

- https://github.com/phamfoo/react-native-figma-squircle


================================================
FILE: eslint.config.js
================================================
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'

export default [
  { ignores: ['dist/'] },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
]


================================================
FILE: package.json
================================================
{
  "name": "figma-squircle",
  "description": "Figma-flavored squircles for everyone",
  "type": "module",
  "author": "Tien Pham",
  "version": "1.1.0",
  "license": "MIT",
  "source": "src/index.ts",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "lint": "eslint",
    "build": "tsup src/index.ts --format esm --dts",
    "prepare": "npm run build"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.1",
    "eslint": "^9.9.1",
    "prettier": "^3.3.3",
    "tsup": "^8.3.0",
    "typescript": "^5.5.4",
    "typescript-eslint": "^8.3.0"
  },
  "files": [
    "dist",
    "src"
  ],
  "keywords": [
    "squircle",
    "react",
    "figma"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/phamfoo/figma-squircle.git"
  }
}


================================================
FILE: prettier.config.js
================================================
export default {
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: false,
  semi: false,
}


================================================
FILE: site/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?


================================================
FILE: site/index.html
================================================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/figma.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Figma Squircle</title>
    <meta name="description" content="Figma-flavored squircles for everyone">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>


================================================
FILE: site/package.json
================================================
{
  "name": "site2",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "figma-squircle": "file:..",
    "preact": "^10.23.1"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.9.0",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.45",
    "tailwindcss": "^3.4.10",
    "typescript": "^5.5.3",
    "vite": "^5.4.1"
  }
}


================================================
FILE: site/postcss.config.js
================================================
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}


================================================
FILE: site/src/App.tsx
================================================
import { useEffect, useState } from 'preact/hooks'
import './app.css'
import { getSvgPath } from 'figma-squircle'
import sizeIcon from './assets/size.svg'
import radiusIcon from './assets/radius.svg'

export function App() {
  const [size, setSize] = useState(400)
  const [cornerRadius, setCornerRadius] = useState(120)
  const [cornerSmoothingPercent, setCornerSmoothingPercent] = useState(60)
  const [preserveSmoothing, setPreserveSmoothing] = useState(false)

  const svgPath = getSvgPath({
    width: size,
    height: size,
    cornerRadius,
    cornerSmoothing: cornerSmoothingPercent / 100,
    preserveSmoothing,
  })

  return (
    <div className="flex flex-1">
      <div className="flex flex-1 bg-neutral-900 justify-center items-center">
        <svg width={size} height={size} xmlns="http://www.w3.org/2000/svg">
          <path d={svgPath} fill="pink" />
        </svg>
      </div>

      <div className="flex flex-col bg-neutral-800 w-80 p-6 gap-8">
        <div className="flex gap-4">
          <div className="flex-1">
            <NumberInput
              label="Size"
              icon={sizeIcon}
              value={size}
              onChange={setSize}
            />
          </div>
          <div className="flex-1">
            <NumberInput
              label="Radius"
              icon={radiusIcon}
              value={cornerRadius}
              onChange={setCornerRadius}
            />
          </div>
        </div>

        <CornerSmoothingSlider
          value={cornerSmoothingPercent}
          onChange={setCornerSmoothingPercent}
        />

        <PreserveSmoothingToggle
          value={preserveSmoothing}
          onChange={setPreserveSmoothing}
        />
      </div>
    </div>
  )
}

interface NumberInputProps {
  label: string
  icon: string
  value: number
  onChange: (value: number) => void
}

function NumberInput({ label, icon, value, onChange }: NumberInputProps) {
  return (
    <label>
      <span className="text-neutral-400 text-xs uppercase font-bold tracking-widest">
        {label}
      </span>
      <div className="flex rounded-sm py-1 -translate-x-2 has-[:focus]:bg-neutral-700 has-[:focus]:ring-2 has-[:focus]:ring-blue-600 transition duration-200 ease-out">
        <IconSlider value={value} onChange={onChange} icon={icon} />

        <input
          value={value}
          onChange={(e) => onChange(Number(e.currentTarget.value))}
          type="number"
          class="w-full font-normal bg-transparent text-white text-lg focus:outline-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
        />
      </div>
    </label>
  )
}

interface IconSliderProps {
  value: number
  onChange: (value: number) => void
  icon: string
}

// https://dev.to/graftini/how-to-change-numeric-input-by-dragging-in-react-315
function IconSlider({ value, onChange, icon }: IconSliderProps) {
  const [initialX, setInitialX] = useState<number | null>(null)
  const [snapshot, setSnapshot] = useState(value)

  useEffect(() => {
    function onUpdate(event: MouseEvent) {
      if (initialX !== null) {
        onChange(snapshot + event.clientX - initialX)
      }
    }

    function onEnd() {
      setInitialX(null)
    }

    document.addEventListener('mousemove', onUpdate)
    document.addEventListener('mouseup', onEnd)

    return () => {
      document.removeEventListener('mousemove', onUpdate)
      document.removeEventListener('mouseup', onEnd)
    }
  }, [initialX, onChange, snapshot])

  return (
    <div
      className="flex justify-center items-center cursor-ew-resize select-none px-2"
      draggable={false}
      onMouseDown={(e) => {
        setInitialX(e.clientX)
        setSnapshot(value)
      }}
    >
      <img
        src={icon}
        alt=""
        draggable={false}
        className="fill-neutral-300 w-4 h-4"
      />
    </div>
  )
}

interface PreserveSmoothingToggleProps {
  value: boolean
  onChange: (value: boolean) => void
}

function PreserveSmoothingToggle({
  value,
  onChange,
}: PreserveSmoothingToggleProps) {
  return (
    <label class="flex items-center gap-2">
      <div class="relative">
        <input
          type="checkbox"
          class="sr-only peer"
          checked={value}
          onChange={(e) => onChange(e.currentTarget.checked)}
        />
        <div class="w-11 h-6 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-blue-800 rounded-full bg-neutral-700 peer-checked:bg-blue-600" />
        <div class="absolute top-[2px] left-[2px] bg-white border rounded-full h-5 w-5 transition-all peer-checked:translate-x-full border-neutral-600" />
      </div>
      <span class="text-neutral-400 text-xs uppercase font-bold tracking-widest">
        Preserve Smoothing
      </span>
    </label>
  )
}

interface CornerSmoothingSliderProps {
  value: number
  onChange: (value: number) => void
}

function CornerSmoothingSlider({
  value,
  onChange,
}: CornerSmoothingSliderProps) {
  return (
    <div>
      <div className="flex justify-between items-baseline">
        <label
          className="flex-1 text-neutral-400 text-xs uppercase font-bold tracking-widest"
          htmlFor="corner-smoothing-slider"
        >
          Corner Smoothing
        </label>
        <div className="text-white">{value}%</div>
      </div>
      <input
        id="corner-smoothing-slider"
        type="range"
        min="0"
        max="100"
        value={value}
        onInput={(e) => onChange(Number(e.currentTarget.value))}
        className="w-full rounded-full appearance-none focus:outline-none focus:ring-blue-600 focus-visible:ring-2 bg-neutral-700 accent-white"
      />
    </div>
  )
}


================================================
FILE: site/src/app.css
================================================
#app {
  display: flex;
  flex: 1;
}


================================================
FILE: site/src/index.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  min-height: 100vh;
}


================================================
FILE: site/src/main.tsx
================================================
import { render } from 'preact'
import { App } from './App'
import './index.css'

render(<App />, document.getElementById('app')!)


================================================
FILE: site/src/vite-env.d.ts
================================================
/// <reference types="vite/client" />


================================================
FILE: site/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
export default {
  mode: 'jit',
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}


================================================
FILE: site/tsconfig.app.json
================================================
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}


================================================
FILE: site/tsconfig.json
================================================
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}


================================================
FILE: site/tsconfig.node.json
================================================
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}


================================================
FILE: site/vite.config.ts
================================================
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()],
})


================================================
FILE: src/distribute.ts
================================================
interface RoundedRectangle {
  topLeftCornerRadius: number
  topRightCornerRadius: number
  bottomRightCornerRadius: number
  bottomLeftCornerRadius: number
  width: number
  height: number
}

interface NormalizedCorner {
  radius: number
  roundingAndSmoothingBudget: number
}

interface NormalizedCorners {
  topLeft: NormalizedCorner
  topRight: NormalizedCorner
  bottomLeft: NormalizedCorner
  bottomRight: NormalizedCorner
}

type Corner = keyof NormalizedCorners

type Side = 'top' | 'left' | 'right' | 'bottom'

interface Adjacent {
  side: Side
  corner: Corner
}

export function distributeAndNormalize({
  topLeftCornerRadius,
  topRightCornerRadius,
  bottomRightCornerRadius,
  bottomLeftCornerRadius,
  width,
  height,
}: RoundedRectangle): NormalizedCorners {
  const roundingAndSmoothingBudgetMap: Record<Corner, number> = {
    topLeft: -1,
    topRight: -1,
    bottomLeft: -1,
    bottomRight: -1,
  }

  const cornerRadiusMap: Record<Corner, number> = {
    topLeft: topLeftCornerRadius,
    topRight: topRightCornerRadius,
    bottomLeft: bottomLeftCornerRadius,
    bottomRight: bottomRightCornerRadius,
  }

  Object.entries(cornerRadiusMap)
    // Let the bigger corners choose first
    .sort(([, radius1], [, radius2]) => {
      return radius2 - radius1
    })
    .forEach(([cornerName, radius]) => {
      const corner = cornerName as Corner
      const adjacents = adjacentsByCorner[corner]

      // Look at the 2 adjacent sides, figure out how much space we can have on both sides,
      // then take the smaller one
      const budget = Math.min(
        ...adjacents.map((adjacent) => {
          const adjacentCornerRadius = cornerRadiusMap[adjacent.corner]
          if (radius === 0 && adjacentCornerRadius === 0) {
            return 0
          }

          const adjacentCornerBudget =
            roundingAndSmoothingBudgetMap[adjacent.corner]

          const sideLength =
            adjacent.side === 'top' || adjacent.side === 'bottom'
              ? width
              : height

          // If the adjacent corner's already been given the rounding and smoothing budget,
          // we'll just take the rest
          if (adjacentCornerBudget >= 0) {
            return sideLength - roundingAndSmoothingBudgetMap[adjacent.corner]
          } else {
            return (radius / (radius + adjacentCornerRadius)) * sideLength
          }
        })
      )

      roundingAndSmoothingBudgetMap[corner] = budget
      cornerRadiusMap[corner] = Math.min(radius, budget)
    })

  return {
    topLeft: {
      radius: cornerRadiusMap.topLeft,
      roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.topLeft,
    },
    topRight: {
      radius: cornerRadiusMap.topRight,
      roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.topRight,
    },
    bottomLeft: {
      radius: cornerRadiusMap.bottomLeft,
      roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.bottomLeft,
    },
    bottomRight: {
      radius: cornerRadiusMap.bottomRight,
      roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.bottomRight,
    },
  }
}

const adjacentsByCorner: Record<Corner, Array<Adjacent>> = {
  topLeft: [
    {
      corner: 'topRight',
      side: 'top',
    },
    {
      corner: 'bottomLeft',
      side: 'left',
    },
  ],
  topRight: [
    {
      corner: 'topLeft',
      side: 'top',
    },
    {
      corner: 'bottomRight',
      side: 'right',
    },
  ],
  bottomLeft: [
    {
      corner: 'bottomRight',
      side: 'bottom',
    },
    {
      corner: 'topLeft',
      side: 'left',
    },
  ],
  bottomRight: [
    {
      corner: 'bottomLeft',
      side: 'bottom',
    },
    {
      corner: 'topRight',
      side: 'right',
    },
  ],
}


================================================
FILE: src/draw.ts
================================================
interface CornerPathParams {
  a: number
  b: number
  c: number
  d: number
  p: number
  cornerRadius: number
  arcSectionLength: number
}

interface CornerParams {
  cornerRadius: number
  cornerSmoothing: number
  preserveSmoothing: boolean
  roundingAndSmoothingBudget: number
}

// The article from figma's blog
// https://www.figma.com/blog/desperately-seeking-squircles/
//
// The original code by MartinRGB
// https://github.com/MartinRGB/Figma_Squircles_Approximation/blob/bf29714aab58c54329f3ca130ffa16d39a2ff08c/js/rounded-corners.js#L64
export function getPathParamsForCorner({
  cornerRadius,
  cornerSmoothing,
  preserveSmoothing,
  roundingAndSmoothingBudget,
}: CornerParams): CornerPathParams {
  // From figure 12.2 in the article
  // p = (1 + cornerSmoothing) * q
  // in this case q = R because theta = 90deg
  let p = (1 + cornerSmoothing) * cornerRadius

  // When there's not enough space left (p > roundingAndSmoothingBudget), there are 2 options:
  //
  // 1. What figma's currently doing: limit the smoothing value to make sure p <= roundingAndSmoothingBudget
  // But what this means is that at some point when cornerRadius is large enough,
  // increasing the smoothing value wouldn't do anything
  //
  // 2. Keep the original smoothing value and use it to calculate the bezier curve normally,
  // then adjust the control points to achieve similar curvature profile
  //
  // preserveSmoothing is a new option I added
  //
  // If preserveSmoothing is on then we'll just keep using the original smoothing value
  // and adjust the bezier curve later
  if (!preserveSmoothing) {
    const maxCornerSmoothing = roundingAndSmoothingBudget / cornerRadius - 1
    cornerSmoothing = Math.min(cornerSmoothing, maxCornerSmoothing)
    p = Math.min(p, roundingAndSmoothingBudget)
  }

  // In a normal rounded rectangle (cornerSmoothing = 0), this is 90
  // The larger the smoothing, the smaller the arc
  const arcMeasure = 90 * (1 - cornerSmoothing)
  const arcSectionLength =
    Math.sin(toRadians(arcMeasure / 2)) * cornerRadius * Math.sqrt(2)

  // In the article this is the distance between 2 control points: P3 and P4
  const angleAlpha = (90 - arcMeasure) / 2
  const p3ToP4Distance = cornerRadius * Math.tan(toRadians(angleAlpha / 2))

  // a, b, c and d are from figure 11.1 in the article
  const angleBeta = 45 * cornerSmoothing
  const c = p3ToP4Distance * Math.cos(toRadians(angleBeta))
  const d = c * Math.tan(toRadians(angleBeta))

  let b = (p - arcSectionLength - c - d) / 3
  let a = 2 * b

  // Adjust the P1 and P2 control points if there's not enough space left
  if (preserveSmoothing && p > roundingAndSmoothingBudget) {
    const p1ToP3MaxDistance =
      roundingAndSmoothingBudget - d - arcSectionLength - c

    // Try to maintain some distance between P1 and P2 so the curve wouldn't look weird
    const minA = p1ToP3MaxDistance / 6
    const maxB = p1ToP3MaxDistance - minA

    b = Math.min(b, maxB)
    a = p1ToP3MaxDistance - b
    p = Math.min(p, roundingAndSmoothingBudget)
  }

  return {
    a,
    b,
    c,
    d,
    p,
    arcSectionLength,
    cornerRadius,
  }
}

interface SVGPathInput {
  width: number
  height: number
  topRightPathParams: CornerPathParams
  bottomRightPathParams: CornerPathParams
  bottomLeftPathParams: CornerPathParams
  topLeftPathParams: CornerPathParams
}

export function getSVGPathFromPathParams({
  width,
  height,
  topLeftPathParams,
  topRightPathParams,
  bottomLeftPathParams,
  bottomRightPathParams,
}: SVGPathInput) {
  return `
    M ${width - topRightPathParams.p} 0
    ${drawTopRightPath(topRightPathParams)}
    L ${width} ${height - bottomRightPathParams.p}
    ${drawBottomRightPath(bottomRightPathParams)}
    L ${bottomLeftPathParams.p} ${height}
    ${drawBottomLeftPath(bottomLeftPathParams)}
    L 0 ${topLeftPathParams.p}
    ${drawTopLeftPath(topLeftPathParams)}
    Z
  `
    .replace(/[\t\s\n]+/g, ' ')
    .trim()
}

function drawTopRightPath({
  cornerRadius,
  a,
  b,
  c,
  d,
  p,
  arcSectionLength,
}: CornerPathParams) {
  if (cornerRadius) {
    return rounded`
    c ${a} 0 ${a + b} 0 ${a + b + c} ${d}
    a ${cornerRadius} ${cornerRadius} 0 0 1 ${arcSectionLength} ${arcSectionLength}
    c ${d} ${c}
        ${d} ${b + c}
        ${d} ${a + b + c}`
  } else {
    return rounded`l ${p} 0`
  }
}

function drawBottomRightPath({
  cornerRadius,
  a,
  b,
  c,
  d,
  p,
  arcSectionLength,
}: CornerPathParams) {
  if (cornerRadius) {
    return rounded`
    c 0 ${a}
      0 ${a + b}
      ${-d} ${a + b + c}
    a ${cornerRadius} ${cornerRadius} 0 0 1 -${arcSectionLength} ${arcSectionLength}
    c ${-c} ${d}
      ${-(b + c)} ${d}
      ${-(a + b + c)} ${d}`
  } else {
    return rounded`l 0 ${p}`
  }
}

function drawBottomLeftPath({
  cornerRadius,
  a,
  b,
  c,
  d,
  p,
  arcSectionLength,
}: CornerPathParams) {
  if (cornerRadius) {
    return rounded`
    c ${-a} 0
      ${-(a + b)} 0
      ${-(a + b + c)} ${-d}
    a ${cornerRadius} ${cornerRadius} 0 0 1 -${arcSectionLength} -${arcSectionLength}
    c ${-d} ${-c}
      ${-d} ${-(b + c)}
      ${-d} ${-(a + b + c)}`
  } else {
    return rounded`l ${-p} 0`
  }
}

function drawTopLeftPath({
  cornerRadius,
  a,
  b,
  c,
  d,
  p,
  arcSectionLength,
}: CornerPathParams) {
  if (cornerRadius) {
    return rounded`
    c 0 ${-a}
      0 ${-(a + b)}
      ${d} ${-(a + b + c)}
    a ${cornerRadius} ${cornerRadius} 0 0 1 ${arcSectionLength} -${arcSectionLength}
    c ${c} ${-d}
      ${b + c} ${-d}
      ${a + b + c} ${-d}`
  } else {
    return rounded`l 0 ${-p}`
  }
}

function toRadians(degrees: number) {
  return (degrees * Math.PI) / 180
}

function rounded(strings: TemplateStringsArray, ...values: number[]): string {
  return strings.reduce((acc, str, i) => {
    const value = values[i]

    if (typeof value === 'number') {
      return acc + str + value.toFixed(4)
    } else {
      return acc + str + (value ?? '')
    }
  }, '')
}


================================================
FILE: src/index.ts
================================================
import { distributeAndNormalize } from './distribute'
import { getPathParamsForCorner, getSVGPathFromPathParams } from './draw'

export interface FigmaSquircleParams {
  cornerRadius?: number
  topLeftCornerRadius?: number
  topRightCornerRadius?: number
  bottomRightCornerRadius?: number
  bottomLeftCornerRadius?: number
  cornerSmoothing: number
  width: number
  height: number
  preserveSmoothing?: boolean
}

export function getSvgPath({
  cornerRadius = 0,
  topLeftCornerRadius,
  topRightCornerRadius,
  bottomRightCornerRadius,
  bottomLeftCornerRadius,
  cornerSmoothing,
  width,
  height,
  preserveSmoothing = false,
}: FigmaSquircleParams) {
  topLeftCornerRadius = topLeftCornerRadius ?? cornerRadius
  topRightCornerRadius = topRightCornerRadius ?? cornerRadius
  bottomLeftCornerRadius = bottomLeftCornerRadius ?? cornerRadius
  bottomRightCornerRadius = bottomRightCornerRadius ?? cornerRadius

  if (
    topLeftCornerRadius === topRightCornerRadius &&
    topRightCornerRadius === bottomRightCornerRadius &&
    bottomRightCornerRadius === bottomLeftCornerRadius &&
    bottomLeftCornerRadius === topLeftCornerRadius
  ) {
    const roundingAndSmoothingBudget = Math.min(width, height) / 2
    const cornerRadius = Math.min(
      topLeftCornerRadius,
      roundingAndSmoothingBudget
    )

    const pathParams = getPathParamsForCorner({
      cornerRadius,
      cornerSmoothing,
      preserveSmoothing,
      roundingAndSmoothingBudget,
    })

    return getSVGPathFromPathParams({
      width,
      height,
      topLeftPathParams: pathParams,
      topRightPathParams: pathParams,
      bottomLeftPathParams: pathParams,
      bottomRightPathParams: pathParams,
    })
  }

  const { topLeft, topRight, bottomLeft, bottomRight } = distributeAndNormalize(
    {
      topLeftCornerRadius,
      topRightCornerRadius,
      bottomRightCornerRadius,
      bottomLeftCornerRadius,
      width,
      height,
    }
  )

  return getSVGPathFromPathParams({
    width,
    height,
    topLeftPathParams: getPathParamsForCorner({
      cornerSmoothing,
      preserveSmoothing,
      cornerRadius: topLeft.radius,
      roundingAndSmoothingBudget: topLeft.roundingAndSmoothingBudget,
    }),
    topRightPathParams: getPathParamsForCorner({
      cornerSmoothing,
      preserveSmoothing,
      cornerRadius: topRight.radius,
      roundingAndSmoothingBudget: topRight.roundingAndSmoothingBudget,
    }),
    bottomRightPathParams: getPathParamsForCorner({
      cornerSmoothing,
      preserveSmoothing,
      cornerRadius: bottomRight.radius,
      roundingAndSmoothingBudget: bottomRight.roundingAndSmoothingBudget,
    }),
    bottomLeftPathParams: getPathParamsForCorner({
      cornerSmoothing,
      preserveSmoothing,
      cornerRadius: bottomLeft.radius,
      roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget,
    }),
  })
}


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": { 
    "target": "es2022",
    "module": "esnext",
    "esModuleInterop": true,
    "declaration": true,
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}