{"id":14981581,"url":"https://github.com/phamfoo/figma-squircle","last_synced_at":"2025-04-06T07:15:31.930Z","repository":{"id":43745487,"uuid":"369759120","full_name":"phamfoo/figma-squircle","owner":"phamfoo","description":"Figma-flavored squircles for everyone","archived":false,"fork":false,"pushed_at":"2023-06-25T09:41:32.000Z","size":532,"stargazers_count":151,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-25T13:42:33.728Z","etag":null,"topics":["figma","react","squircle"],"latest_commit_sha":null,"homepage":"https://figma-squircle.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phamfoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-22T08:44:22.000Z","updated_at":"2024-06-18T18:05:45.879Z","dependencies_parsed_at":"2024-06-18T18:05:36.931Z","dependency_job_id":"bbbc36e9-2678-46de-aa8f-0eeab629a90d","html_url":"https://github.com/phamfoo/figma-squircle","commit_stats":null,"previous_names":["tienphaw/figma-squircle"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Ffigma-squircle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Ffigma-squircle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Ffigma-squircle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phamfoo%2Ffigma-squircle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phamfoo","download_url":"https://codeload.github.com/phamfoo/figma-squircle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445682,"owners_count":20939961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma","react","squircle"],"created_at":"2024-09-24T14:03:53.141Z","updated_at":"2025-04-06T07:15:31.900Z","avatar_url":"https://github.com/phamfoo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Figma Squircle\n\n[![Stable Release](https://img.shields.io/npm/v/figma-squircle)](https://npm.im/figma-squircle) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)\n\n\u003e Figma-flavored squircles for everyone\n\n## Disclaimer\n\n\u003e 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.\n\n## What is this?\n\nFigma 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).\n\n![](squircle.jpg)\n\nThis library helps you bring those squircles to your apps.\n\n## Installation\n\n```sh\nnpm install figma-squircle\n```\n\n## Usage\n\n```jsx\nimport { getSvgPath } from 'figma-squircle'\n\nconst svgPath = getSvgPath({\n  width: 200,\n  height: 200,\n  cornerRadius: 24, // defaults to 0\n  cornerSmoothing: 0.8, // cornerSmoothing goes from 0 to 1\n})\n\nconst svgPath = getSvgPath({\n  width: 200,\n  height: 200,\n  cornerRadius: 24,\n  cornerSmoothing: 0.8,\n  // You can also adjust the radius of each corner individually\n  topLeftCornerRadius: 48,\n})\n\n// svgPath can now be used to create SVG elements\nfunction PinkSquircle() {\n  return (\n    \u003csvg width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n      \u003cpath d={svgPath} fill=\"pink\" /\u003e\n    \u003c/svg\u003e\n  )\n}\n\n// Or with the clip-path CSS property\nfunction ProfilePicture() {\n  return (\n    \u003cdiv\n      style={{\n        width: 200,\n        height: 200,\n        clipPath: `path('${svgPath}')`,\n      }}\n    \u003e\n      ...\n    \u003c/div\u003e\n  )\n}\n```\n\n## Preserve Smoothing\n\nThe 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.\n\nTry enabling `preserveSmoothing` if you're not happy with the generated shape. \n\n```jsx\nconst svgPath = getSvgPath({\n  width: 200,\n  height: 200,\n  cornerRadius: 80,\n  cornerSmoothing: 0.8,\n  preserveSmoothing: true, // defaults to false\n})\n```\n\nThere's also a [Figma plugin](https://www.figma.com/community/plugin/1122437229616103296) that utilizes this option.\n\n## Thanks\n\n- 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.\n- [George Francis](https://github.com/georgedoescode) for creating [Squircley](https://squircley.app/), which was my introduction to squircles.\n\n## Related\n\n- https://github.com/phamfoo/react-native-figma-squircle\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphamfoo%2Ffigma-squircle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphamfoo%2Ffigma-squircle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphamfoo%2Ffigma-squircle/lists"}