CSS Houdini Voronoi

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

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.

npm