Squircle CSS Houdini
A tiny CSS Houdini module that allows adding a squircle shape to HTML elements.
🎻 Demo on GitHub Pages
👾 Codepen examples
🗞 Medium article
🎛 Custom CSS Properties
--squircle-radius
The property controls the roundness of the corners.
- Syntax:
<px> - Defaul value:
— - Min/Max values:
—
--squircle-smooth
The property controls the length of bezier guide lines. Could be defined by --squircle-ratio.
- Syntax:
<number> - Defaul value:
1 - Min/Max values:
0.1 / 1
--squircle-outline
The property controls squircle outline. There are two methods how too use it with background-mask and mask+:pseudo-element. to find out more check codepen examples.
- Syntax:
<px> - Defaul value:
— - Min/Max values:
—
--squircle-fill
The property accepts any color, including variables.
background: paint(squircle);. For mask-image: paint(squircle); use background property.
- Syntax:
<color> - Defaul value:
#f45 - Min/Max values:
—
--squircle-ratio: <number>
This property makes the squircle radius visually the same as the standart border-radius.
- Syntax:
<px> - Defaul value:
1.8 - Min/Max values:
—
🕹 How to install
In order to make squircle works you need to register the module somewere as a JS script.
Use via external link
// latest version
<script>
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule(
"https://www.unpkg.com/css-houdini-squircle/squircle.min.js"
);
}
</script>
// or particular version
<script>
if ("paintWorklet" in CSS) {
CSS.paintWorklet.addModule(
"https://www.unpkg.com/[email protected]/squircle.min.js"
);
}
</script>Install via NPM
npm i css-houdini-squircle
Download
You can download the min version of the module from UNPKG
// latest version
https://www.unpkg.com/browse/css-houdini-squircle/squircle.min.js
✨ Use css-paint-polyfill
In order to get the module work on other browsers, you can use Paint Worklets polyfill.
// use with polifill example
<script>
(async function () {
if (!("paintWorklet" in CSS)) {
await import("css-paint-polyfill");
}
CSS.paintWorklet.addModule(
`https://www.unpkg.com/css-houdini-squircle/squircle.min.js`
);
})();
</script>🚬 TO-DO
- Animation support