CSS Houdini Bubbles

A CSS Houdini Paint Worklet to draw background 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