smooth-corners

Smooth Corners

Superellipse masks using the CSS Houdini API

Usage

CSS

Add mask-image: paint(smooth-corners) to the elements you want to mask

Default (Squircle)

Without a --smooth-corners variable set it will default to a value of 4

.squircle {
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: #d01257; /* So you can see it */
}

Customise Shape / Roundness

.mask {
  /* Integer 0 to 100. Scoped locally or globally in :root {}
     < 1 are concave rhombuses / asteroids
     = 1 is a perfect rhombus
     > 1 and <2 are convex rhombuses>
     = 2 is a perfect circle
     > 2 are rounded squares */
  --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
• cdn.jsdelivr.net/npm/smooth-corners/paint.js

<script>
  if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners')
</script>

Register with a file path

Download paint.js or install with npm install smooth-corners

// src/assets/paint.js
import 'smooth-corners' // ES Modules

// 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.

<script>
  if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('/assets/paint.js')
</script>

Result