smooth-corners - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "smooth-corners",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "CSS superellipse masks with the Houdini API",
		"main": "paint.js",
		"browser": "paint.js",
		"scripts": {
		@@ -7,0 +8,0 @@ "start": "serve",

README.md

		@@ -9,14 +9,12 @@ <h1 align=center>Smooth Corners</h1>

		### JavaScript
		### CSS

		Add [paint.js] to your web application.
		Add `mask-image: paint(smooth-corners)` to the elements you want to mask

		[paint.js]:https://wopian.github.io/smooth-corners/paint.js
		#### Default (Squircle)

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

		#### Default (Squircle)

		```css
		.round {
		.squircle {
		mask-image: paint(smooth-corners);
		@@ -28,26 +26,60 @@ -webkit-mask-image: paint(smooth-corners);

		#### Customise Superellipse Shape
		#### Customise Shape / Roundness

		```cs
		.round {
		```css
		.mask {
		/* Integer 1 to 100. Scopped locally or globally in :root {}
		2 is a perfect circle
		< 2 are diamonds / asteroids
		> 2 are rounded squares */
		--smooth-corners: 3;
		mask-image: paint(smooth-corners);
		-webkit-mask-image: paint(smooth-corners);
		background: #d01257;
		background: #d01257; /* So you can see it */
		```

		### HTML
		### 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:

		- https://unpkg.com/smooth-corners
		- https://cdn.jsdelivr.net/npm/smooth-corners/paint.js

		```html
		<body>
		<div class='round'></div>
		...
		<script>
		if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('paint.js')
		</script>
		</body>
		<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`

		```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
		<script>
		if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('/assets/paint.js')
		</script>
		```

		### Result

		![2 examples: A rounded pink square and a pink squircle](https://raw.githubusercontent.com/wopian/smooth-corners/master/example.png)
		![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
		[Example]:https://raw.githubusercontent.com/wopian/smooth-corners/master/example.png

smooth-corners - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics