css-houdini-bubbles

0.0.7 • Public • Published

CSS Houdini Bubbles

NPM license

A CSS Houdini Paint Worklet to draw background bubbles.

CSS Houdini Bubbles

Usage

1. Getting Started

Installing using UNPKG

Using CDN is the easiest way to add the library:

if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('https://unpkg.com/css-houdini-bubbles/dist/bubbles.js');
}

For old browsers, you need to add a pollyfill.
Include the css-paint-polyfill before loading the Worklet.

<script>
(async function() {
    if (CSS['paintWorklet'] === undefined) {
        await import('https://unpkg.com/css-paint-polyfill');
    }

    CSS.paintWorklet.addModule('https://unpkg.com/css-houdini-bubbles/dist/bubbles.js');
})()
</script>

Installing it Locally

You can install the css-houdini-bubbles locally using NPM.

npm install css-houdini-bubbles

Usage in CSS

To use Bubbles Paint Worklet you need to set the background-image property to paint(bubbles)

.bubbles {
    background-image: paint(bubbles);
}

Bubbles Paint Worklet has few custom properties for tweaking its appearance.

.bubbles {
    --bubbles-colors: #007C8E, #7940c1;
    --bubbles-min-radius: 20;
    --bubbles-max-radius: 100;
    --bubbles-total-num: 30;
    --bubbles-is-dark: no;

    background-image: paint(bubbles);
}
property description default value
--bubbles-colors Colors to use, one or more hexadecimal colors comma separated #007C8E, #7940c1
--bubbles-min-radius Minimum radius, minimum bubble radius 10
--bubbles-max-radius Maximum radius, maximum bubble radius 60
--bubbles-total-num Number of Bubbles to draw 20
--bubbles-is-dark Render bubbles on dark background, (accepts yes or no ) no

Demo

Play around on Codepen https://codepen.io/spanion/pen/rNMgerx

Acknowledgement

Got the inspiration from this video by @una

License

MIT

Package Sidebar

Install

npm i css-houdini-bubbles

Weekly Downloads

94

Version

0.0.7

License

ISC

Unpacked Size

5.52 kB

Total Files

3

Last publish

Collaborators

  • spanion