css-houdini-voronoi

    1.1.5 • Public • Published

    CSS Houdini Voronoi

    A CSS Houdini Paint Worklet that draws a Voronoi Diagram as a background image

    CSS Houdini Voronoi Demo: https://codepen.io/bramus/pen/mdrWrGm

    Usage

    1. Getting css-houdini-voronoi

    Using a pre-built hosted version

    The easiest way to get css-houdini-voronoi is to use the prebuilt version through UNPKG. Just skip ahead to step 2 in that case.

    Installing it Locally

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

    npm install css-houdini-voronoi

    Alternatively you can clone the css-houdini-voronoi repo and after manually build the project:

    cd css-houdini-voronoi
    npm install
    npm run build

    You'll find the built file in the ./dist folder.

    2. Loading css-houdini-voronoi

    To include it you must loads the module in the given JavaScript file and add it to the Paint Worklet.

    If you want to use the UNPKG hosted version of css-houdini-voronoi, use https://unpkg.com/css-houdini-voronoi/dist/worklet.js as the moduleURL.

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

    If you've installed css-houdini-voronoi using NPM or have manually built it, refer to its url:

    if ('paintWorklet' in CSS) {
        CSS.paintWorklet.addModule('url/to/worklet.js');
    }

    A note on older browsers

    To add support for browsers that don't speak Houdini, you can 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-voronoi/dist/worklet.js');
    })()
    </script>

    3. Applying css-houdini-voronoi

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

    .element {
        background-image: paint(voronoi);
    }

    Configuration

    You can tweak the appearance of the Paint Worklet by setting some CSS Custom Properties

    property description default value
    --voronoi-number-of-cells Number of cells, (integer or auto). When set to auto it will adjust itself the number of cells based on the available space. 25
    --voronoi-margin Margin to keep from edges, as a percentage (0% – 50%). Set to a negative value to create a zoom effect 0%
    --voronoi-line-color Line Color #000
    --voronoi-line-width Line Width, in pixels 3
    --voronoi-dot-color Color of the dot in each cell transparent
    --voronoi-dot-size Size of the dot in each cell, in pixels 4
    --voronoi-cell-colors Cell Colors, one or more colors to colorize the cells (comma separated). Set to transparent to not colorize the cells #66ccff, #99ffcc, #00ffcc, #33ccff, #99ff99, #66ff99, #00ffff
    --voronoi-seed Seed for the "predictable random" generator, See https://jakearchibald.com/2020/css-paint-predictably-random/ for details. 123456

    💡 The Worklet provides default values so defining them is not required

    Example

    .element {
        --voronoi-number-of-cells: 100;
        --voronoi-margin: 5%;
        --voronoi-line-color: #000;
        --voronoi-line-width: 4;
        --voronoi-dot-color: rgba(0,0,0,0.2);
        --voronoi-dot-size: 10;
        --voronoi-cell-colors: #50514f, #f25f5c, #ffe066, #247ba0, #70c1b3;
        --voronoi-seed: 654321;
    
        background-image: paint(voronoi);
    }

    Registering the Voronoi Custom Properties

    To properly animate the Voronoi Custom Properties and to make use of the built-in syntax validation you need to register the Custom Properties. Include this CSS Snippet to do so:

    @property --voronoi-number-of-cells {
        syntax: "<integer> | auto";
        initial-value: 25;
        inherits: false;
    }
    @property --voronoi-margin {
        syntax: "<percentage>";
        initial-value: 0%;
        inherits: false;
    }
    @property --voronoi-line-color {
        syntax: "<color>";
        initial-value: #000;
        inherits: false;
    }
    @property --voronoi-line-width {
        syntax: "<integer>";
        initial-value: 1;
        inherits: false;
    }
    @property --voronoi-dot-color {
    	syntax: '<color>';
    	initial-value: transparent;
    	inherits: false;
    }
    @property --voronoi-dot-size {
    	syntax: '<integer>';
    	initial-value: 2;
    	inherits: false;
    }
    @property --voronoi-cell-colors {
    	syntax: '<color>#';
    	initial-value: #66ccff, #99ffcc, #00ffcc, #33ccff, #99ff99, #66ff99, #00ffff;
    	inherits: false;
    }
    @property --voronoi-seed {
      syntax: '<number>';
      initial-value: 123456;
      inherits: true;
    }

    💡 Inclusion of this code snippet is not required, but recommended.

    Demo / Development

    You can play with a small demo on CodePen over at https://codepen.io/bramus/pen/mdrWrGm

    If you've cloned the repo you can run npm run dev to launch the included demo.

    Acknowledgements

    The Voronoi Diagram is generated using a precompiled Javascript-Voronoi. It is included in the build. Further inspiration was gotten from this demo.

    License

    css-houdini-voronoi is released under the MIT public license. See the enclosed LICENSE for details.

    Install

    npm i css-houdini-voronoi

    DownloadsWeekly Downloads

    299

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    27 kB

    Total Files

    4

    Last publish

    Collaborators

    • bramus