Skip to content

AKAspanion/css-houdini-bubbles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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