Neverending Puppy Marathon

    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

    Install

    npm i css-houdini-bubbles

    DownloadsWeekly Downloads

    177

    Version

    0.0.7

    License

    ISC

    Unpacked Size

    5.52 kB

    Total Files

    3

    Last publish

    Collaborators

    • spanion