Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wopian/smooth-corners
CSS superellipse masks using the Houdini API
https://github.com/wopian/smooth-corners
astroid circle css curve curve-interpolation diamond ellipse houdini hyperellipse hypoellipse paint-worklet rectangle rhombus smooth-corners smoothing square squircle superellipse
Last synced: about 5 hours ago
JSON representation
CSS superellipse masks using the Houdini API
- Host: GitHub
- URL: https://github.com/wopian/smooth-corners
- Owner: wopian
- License: mit
- Created: 2020-07-28T03:49:48.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2024-04-29T04:57:10.000Z (7 months ago)
- Last Synced: 2024-05-02T02:58:07.782Z (7 months ago)
- Topics: astroid, circle, css, curve, curve-interpolation, diamond, ellipse, houdini, hyperellipse, hypoellipse, paint-worklet, rectangle, rhombus, smooth-corners, smoothing, square, squircle, superellipse
- Language: JavaScript
- Homepage: https://wopian.github.io/smooth-corners/
- Size: 7.33 MB
- Stars: 193
- Watchers: 3
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Smooth Corners
Superellipse masks using the CSS Houdini API
![Static demo of Smooth Corners][CTA]
## Demo
[Live demo](https://wopian.github.io/smooth-corners/) featuring several different `--smooth-corners` values and an interactive editor
## Limitations
To avoid leaking visited sites, the CSS Paint API is disabled on Chromium-based browsers for `` elements with an `href` attribute and all children of that element. For further details see the following:
- The CSS Painting API [Privacy Considerations section](https://drafts.css-houdini.org/css-paint-api/#privacy-considerations)
- The CSS Painting API spec issue [“CSS Paint API leaks browsing history”](https://github.com/w3c/css-houdini-drafts/issues/791)
To work around this limitation, `mask-image: paint(smooth-corners)` can be applied to the parent element of the `` element, for example:
```html
```
## Usage
### CSS
Add `mask-image: paint(smooth-corners)` to the elements you want to mask
#### Default (Squircle)
```css
.squircle {
mask-image: paint(smooth-corners);
-webkit-mask-image: paint(smooth-corners);
background: #d01257; /* So you can see it */
}
```
#### Customise Curvature
You can customise the mask curvature by using a CSS variable. This can be scoped locally to the selector or defined globally in `:root {}`
`--smooth-corners: X[, Y]`
- **X** - Float, Curvature of the X axis
- **Y** - Float, Curvature of the Y axis (optional, defaults to X axis)
##### Shapes by **X** value
- `0.6` - [Astroid]
- `< 1` - Concave rhombus
- `= 1` - Rhombus
- `> 1 and < 2` - Convex rhombus
- `= 2` - Circle
- `> 2` - Rounded rectangles
- `2.6` - KakaoTalk profile icon
- `4.0` - Squircle
- `5.0` - iOS app icon
###### Example
```css
.mask {
--smooth-corners: 3;
mask-image: paint(smooth-corners);
-webkit-mask-image: paint(smooth-corners);
background: #d01257; /* So you can see it */
```
### Registering the Paint Worklet
Register the [Paint Worklet] to the distributed path of [paint.js].
#### Register with a CDN (preferred)
Use any CDN that serves packages from the NPM registry, for example:
- [unpkg.com/smooth-corners](https://unpkg.com/smooth-corners)
- [cdn.jsdelivr.net/npm/smooth-corners/paint.js](https://cdn.jsdelivr.net/npm/smooth-corners/lib/paint.js)
```html
if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners')
```
#### Register with a file path
Download [paint.js] or install with `npm install smooth-corners`
```js
// src/assets/paint.js
import 'smooth-corners' // ES Modules
```
```js
// src/assets/paint.js
require('smooth-corners') // CommonJS
```
Like 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.
```html
if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('/assets/paint.js')
```
### Result
![2 examples: A rounded pink square and a pink squircle][Example]
[paint.js]:https://wopian.github.io/smooth-corners/paint.js
[Paint Worklet]:https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet
[CTA]:https://raw.githubusercontent.com/wopian/smooth-corners/master/.github/images/cta.png
[Example]:https://raw.githubusercontent.com/wopian/smooth-corners/master/.github/images/example.png
[Astroid]:https://en.wikipedia.org/wiki/Astroid