{"id":20326933,"url":"https://github.com/wopian/smooth-corners","last_synced_at":"2025-04-05T05:10:02.056Z","repository":{"id":40508557,"uuid":"283091953","full_name":"wopian/smooth-corners","owner":"wopian","description":"CSS superellipse masks using the Houdini API","archived":false,"fork":false,"pushed_at":"2024-04-29T04:57:10.000Z","size":7689,"stargazers_count":193,"open_issues_count":5,"forks_count":6,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2024-05-02T02:58:07.782Z","etag":null,"topics":["astroid","circle","css","curve","curve-interpolation","diamond","ellipse","houdini","hyperellipse","hypoellipse","paint-worklet","rectangle","rhombus","smooth-corners","smoothing","square","squircle","superellipse"],"latest_commit_sha":null,"homepage":"https://wopian.github.io/smooth-corners/","language":"JavaScript","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/wopian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"wopian","ko_fi":"wopian","custom":"https://paypal.me/wopian"}},"created_at":"2020-07-28T03:49:48.000Z","updated_at":"2024-05-03T05:49:34.288Z","dependencies_parsed_at":"2023-11-12T16:05:59.146Z","dependency_job_id":"1e20086d-9dc0-4dd3-8715-c3c1a1c612c1","html_url":"https://github.com/wopian/smooth-corners","commit_stats":{"total_commits":113,"total_committers":5,"mean_commits":22.6,"dds":0.4690265486725663,"last_synced_commit":"9ab3189b3e5e368f939b90113ecd48865392aa24"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wopian%2Fsmooth-corners","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wopian%2Fsmooth-corners/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wopian%2Fsmooth-corners/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wopian%2Fsmooth-corners/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wopian","download_url":"https://codeload.github.com/wopian/smooth-corners/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289429,"owners_count":20914464,"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":["astroid","circle","css","curve","curve-interpolation","diamond","ellipse","houdini","hyperellipse","hypoellipse","paint-worklet","rectangle","rhombus","smooth-corners","smoothing","square","squircle","superellipse"],"created_at":"2024-11-14T19:45:44.952Z","updated_at":"2025-04-05T05:10:02.026Z","avatar_url":"https://github.com/wopian.png","language":"JavaScript","funding_links":["https://github.com/sponsors/wopian","https://ko-fi.com/wopian","https://paypal.me/wopian","https://github.com/sponsors/wopian'"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=center\u003eSmooth Corners\u003c/h1\u003e\n\n\u003cp align=center\u003e\n  \u003ca href='https://www.npmjs.com/package/smooth-corners'\u003e\u003cimg alt='npm' src='https://flat.badgen.net/npm/v/smooth-corners'\u003e\u003c/a\u003e\n  \u003ca href='https://www.npmjs.com/package/smooth-corners'\u003e\u003cimg alt='npm' src='https://flat.badgen.net/npm/dt/smooth-corners'\u003e\u003c/a\u003e\n  \u003ca href='https://bundlephobia.com/result?p=smooth-corners'\u003e\u003cimg alt='bundlephobia' src='https://flat.badgen.net/bundlephobia/minzip/smooth-corners?label=library%20size'\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=center\u003e\n  \u003ca href='https://github.com/wopian/smooth-corners/actions'\u003e\u003cimg alt='checks' src='https://flat.badgen.net/github/checks/wopian/smooth-corners'\u003e\u003c/a\u003e\n  \u003c!--\u003ca href='https://github.com/wopian/smooth-corners/network/dependents'\u003e\u003cimg alt='repoDependants' src='https://flat.badgen.net/github/dependents-repo/wopian/smooth-corners'\u003e\u003c/a\u003e--\u003e\n  \u003ca href='https://github.com/wopian/smooth-corners/graphs/contributors'\u003e\u003cimg alt='devDeps' src='https://flat.badgen.net/github/contributors/wopian/smooth-corners'\u003e\u003c/a\u003e\n  \u003ca href='https://github.com/sponsors/wopian'\u003e\u003cimg alt='sponsor' src='https://flat.badgen.net/badge/sponsor/%E2%9D%A4/pink?icon=github'\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=center\u003eSuperellipse masks using the \u003ca href='https://developer.mozilla.org/en-US/docs/Web/Houdini'\u003eCSS Houdini\u003c/a\u003e API\u003c/p\u003e\n\n![Static demo of Smooth Corners][CTA]\n\n## Demo\n\n[Live demo](https://wopian.github.io/smooth-corners/) featuring several different `--smooth-corners` values and an interactive editor\n\n## Limitations\n\nTo avoid leaking visited sites, the CSS Paint API is disabled on Chromium-based browsers for `\u003ca\u003e` elements with an `href` attribute and all children of that element. For further details see the following:\n\n- The CSS Painting API [Privacy Considerations section](https://drafts.css-houdini.org/css-paint-api/#privacy-considerations)\n- The CSS Painting API spec issue [“CSS Paint API leaks browsing history”](https://github.com/w3c/css-houdini-drafts/issues/791)\n\nTo work around this limitation, `mask-image: paint(smooth-corners)` can be applied to the parent element of the `\u003ca\u003e` element, for example:\n\n```html\n\u003cdiv style='mask-image: paint(smooth-corners)'\u003e\n  \u003ca href='https://github.com/wopian/smooth-corners'\u003eSmooth Corners\u003c/a\u003e\n\u003c/div\u003e\n```\n\n## Usage\n\n### CSS\n\nAdd `mask-image: paint(smooth-corners)` to the elements you want to mask\n\n#### Default (Squircle)\n\n```css\n.squircle {\n  mask-image: paint(smooth-corners);\n  -webkit-mask-image: paint(smooth-corners);\n  background: #d01257; /* So you can see it */\n}\n```\n\n#### Customise Curvature\n\nYou can customise the mask curvature by using a CSS variable. This can be scoped locally to the selector or defined globally in `:root {}`\n\n`--smooth-corners: X[, Y]`\n\n- **X** - Float, Curvature of the X axis\n- **Y** - Float, Curvature of the Y axis (optional, defaults to X axis)\n\n##### Shapes by **X** value\n\n- `0.6` - [Astroid]\n- `\u003c 1` - Concave rhombus\n- `= 1` - Rhombus\n- `\u003e 1 and \u003c 2` - Convex rhombus\n- `= 2` - Circle\n- `\u003e 2` - Rounded rectangles\n- `2.6` - KakaoTalk profile icon\n- `4.0` - Squircle\n- `5.0` - iOS app icon\n\n###### Example\n\n```css\n.mask {\n  --smooth-corners: 3;\n  mask-image: paint(smooth-corners);\n  -webkit-mask-image: paint(smooth-corners);\n  background: #d01257; /* So you can see it */\n```\n\n### Registering the Paint Worklet\n\nRegister the [Paint Worklet] to the distributed path of [paint.js].\n\n#### Register with a CDN (preferred)\n\nUse any CDN that serves packages from the NPM registry, for example:\n\n- [unpkg.com/smooth-corners](https://unpkg.com/smooth-corners)\n- [cdn.jsdelivr.net/npm/smooth-corners/paint.js](https://cdn.jsdelivr.net/npm/smooth-corners/lib/paint.js)\n\n```html\n\u003cscript\u003e\n  if (CSS \u0026\u0026 'paintWorklet' in CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners')\n\u003c/script\u003e\n```\n\n#### Register with a file path\n\nDownload [paint.js] or install with `npm install smooth-corners`\n\n```js\n// src/assets/paint.js\nimport 'smooth-corners' // ES Modules\n```\n\n```js\n// src/assets/paint.js\nrequire('smooth-corners') // CommonJS\n```\n\nLike Web Workers, the [Paint Worklet] API requests the module path in the browser during runtime and must be a seperate entryfile. This is not the path to the source code location.\n\n```html\n\u003cscript\u003e\n  if (CSS \u0026\u0026 'paintWorklet' in CSS) CSS.paintWorklet.addModule('/assets/paint.js')\n\u003c/script\u003e\n```\n\n### Result\n\n![2 examples: A rounded pink square and a pink squircle][Example]\n\n[paint.js]:https://wopian.github.io/smooth-corners/paint.js\n[Paint Worklet]:https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet\n[CTA]:https://raw.githubusercontent.com/wopian/smooth-corners/master/.github/images/cta.png\n[Example]:https://raw.githubusercontent.com/wopian/smooth-corners/master/.github/images/example.png\n[Astroid]:https://en.wikipedia.org/wiki/Astroid\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwopian%2Fsmooth-corners","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwopian%2Fsmooth-corners","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwopian%2Fsmooth-corners/lists"}