0.1.5 • Published 5 months ago

corner-smoothie v0.1.5

Weekly downloads
-
License
ISC
Repository
github
Last release
5 months ago

corner-smoothie

npm

Squircle without smoothing   Squircle with iOS smoothing   Squircle with full smoothing

Create elements with Figma corner smoothing.

Live Demo

Usage

CSS Painting API (Recommended)

!IMPORTANT See Browser compatibility.

CSS.paintWorklet.addModule('<url-to-corner-smoothie-worklet>')

Using CDN (jsdelivr)

CSS.paintWorklet.addModule('https://cdn.jsdelivr.net/npm/corner-smoothie/dist/worklet.js')

Using Vite

import smoothieWorklet from 'corner-smoothie/worklet?url'

CSS.paintWorklet.addModule(smoothieWorklet)

Registering (Required)

!NOTE registerProperties relies on the CSS Properties and Values ​​API, which has different browser compatibility.

import { registerProperties } from 'corner-smoothie'

registerProperties()

CSS Declarations

.my-element {
  border-radius: 12px;
}

@supports (mask-image: paint(smoothie-mask)) {
  .my-element {
    --smoothie-border-radius: 12px;
    --smoothie-border-smoothing: 0.6;
    border-radius: 0;
    mask-image: paint(smoothie-mask);
  }
}
.my-element {
  background-color: cyan;
  border-radius: 12px;
}

@supports (background-image: paint(smoothie-background)) {
  .my-element {
    --smoothie-background-color: cyan;
    --smoothie-border-radius: 12px;
    --smoothie-border-smoothing: 0.6;
    background-color: transparent;
    border-radius: 0;
    background-image: paint(smoothie-background);
  }
}

The border-radius: 0 above can also be omitted, since smooth rounded corners are completely inside the tangent rounded corners.

Supported custom properties

  • --smoothie-background-color: Alternative to background-color. Available in background mode.
  • --smoothie-border-color: Alternative to border-color. Available in background mode.
  • --smoothie-border-radius: Alternative to border-radius. Available in BOTH modes.
  • --smoothie-border-radius-smoothing: A decimal between 0 and 1, aka ξ in Figma smoothing parameterized. The larger the value, the smoother the corners. Available in BOTH modes.
    • It is consistent with the iOS specification when specified as 0.6.
  • --smoothie-border-width: Alternative to border-width. Available in background modes.

JS API

import { createMaskImage } from 'corner-smoothie'

const mask = createMaskImage(
  { width: 72, height: 72 },
  { borderRadius: 12, borderRadiusSmoothing: 0.6 },
)
element.style.maskImage = mask
import { createBackgroundImage } from 'corner-smoothie'

const background = createBackgroundImage(
  { width: 72, height: 72 },
  { borderRadius: 12, borderRadiusSmoothing: 0.6, backgroundColor: 'cyan' },
)
element.style.backgroundImage = background

JS API is especially useful for browsers that do not support the CSS Painting API such as Firefox. You can use ResizeObserver to have a similar experience to the CSS Painting API:

import { createMaskImage } from 'corner-smoothie'

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    if (entry.borderBoxSize.length) {
      entry.target.style.maskImage = createMaskImage({
        width: entry.borderBoxSize[0].inlineSize,
        height: entry.borderBoxSize[0].blockSize,
      }, {
        // Normally you can't use the CSS Typed OM API
        // because you only need to use the CSS Painting API in these browsers
        borderRadius: parseFloat(getComputedStyle(entry.target).getPropertyValue('--smoothie-border-radius')),
        borderRadiusSmoothing: 0.6,
      })
    }
  }
})

observer.observe(element)

Some older browsers may not support borderBoxSize, you may need to use contentRect instead.

Differences between mask and background

FeatureMaskBackground
Corner radius
Background image
Border
Overflow content
0.1.4

5 months ago

0.1.5

5 months ago

0.1.3

5 months ago

0.1.2

5 months ago

0.1.1

5 months ago

0.1.0

5 months ago