{"id":18887667,"url":"https://github.com/bramus/css-houdini-voronoi","last_synced_at":"2025-04-14T22:34:06.266Z","repository":{"id":66326440,"uuid":"321764438","full_name":"bramus/css-houdini-voronoi","owner":"bramus","description":"A CSS Houdini Paint Worklet that draws a Voronoi Diagram as a background image","archived":false,"fork":false,"pushed_at":"2021-02-15T15:18:59.000Z","size":598,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T17:46:53.370Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bramus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-15T19:09:26.000Z","updated_at":"2025-01-16T07:23:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"c2b7c780-0709-4731-af8a-ccdd00ca36c4","html_url":"https://github.com/bramus/css-houdini-voronoi","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"8cd2a9d5ef65b5f4ff93c96ebf2a3f2bf8cb8288"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fcss-houdini-voronoi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fcss-houdini-voronoi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fcss-houdini-voronoi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramus%2Fcss-houdini-voronoi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bramus","download_url":"https://codeload.github.com/bramus/css-houdini-voronoi/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248717254,"owners_count":21150389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T07:38:52.793Z","updated_at":"2025-04-14T22:34:01.255Z","avatar_url":"https://github.com/bramus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Houdini Voronoi\n\nA CSS Houdini Paint Worklet that draws a Voronoi Diagram as a background image\n\n[![CSS Houdini Voronoi](https://github.com/bramus/css-houdini-voronoi/blob/main/assets/css-houdini-voronoi.png?raw=true)](https://codepen.io/bramus/pen/mdrWrGm)\nDemo: [https://codepen.io/bramus/pen/mdrWrGm](https://codepen.io/bramus/pen/mdrWrGm)\n\n## Usage\n\n### 1. Getting `css-houdini-voronoi`\n\n#### Using a pre-built hosted version\n\nThe easiest way to get `css-houdini-voronoi` is to use the prebuilt version through UNPKG. Just skip ahead to step 2 in that case.\n\n#### Installing it Locally\n\nYou can install the `css-houdini-voronoi` locally using NPM.\n\n```bash\nnpm install css-houdini-voronoi\n```\n\nAlternatively you can clone [the `css-houdini-voronoi` repo](https://github.com/bramus/css-houdini-voronoi/) and after manually build the project:\n\n```bash\ncd css-houdini-voronoi\nnpm install\nnpm run build\n```\n\nYou'll find the built file in the `./dist` folder.\n\n### 2. Loading `css-houdini-voronoi`\n\nTo include it you must loads the module in the given JavaScript file and add it to the Paint Worklet.\n\nIf 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`.\n\n```js\nif ('paintWorklet' in CSS) {\n    CSS.paintWorklet.addModule('https://unpkg.com/css-houdini-voronoi/dist/worklet.js');\n}\n```\n\nIf you've installed `css-houdini-voronoi` using NPM or have manually built it, refer to its url:\n\n```js\nif ('paintWorklet' in CSS) {\n    CSS.paintWorklet.addModule('url/to/worklet.js');\n}\n```\n\n#### A note on older browsers\n\nTo add support for [browsers that don't speak Houdini](https://ishoudinireadyyet.com/), you can include the [css-paint-polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill) before loading the Worklet.\n\n```html\n\u003cscript\u003e\n(async function() {\n    if (CSS['paintWorklet'] === undefined) {\n        await import('https://unpkg.com/css-paint-polyfill');\n    }\n\n    CSS.paintWorklet.addModule('https://unpkg.com/css-houdini-voronoi/dist/worklet.js');\n})()\n\u003c/script\u003e\n```\n\n### 3. Applying `css-houdini-voronoi`\n\nTo use Voronoi Paint Worklet you need to set the `background-image` property to `paint(voronoi)`\n\n```css\n.element {\n    background-image: paint(voronoi);\n}\n```\n\n## Configuration\n\nYou can tweak the appearance of the Paint Worklet by setting some CSS Custom Properties\n\n| property | description | default value |\n| -------- | ----------- | ------------- |\n| --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` |\n| --voronoi-margin | **Margin to keep from edges**, as a percentage (0% – 50%). _Set to a negative value to create a zoom effect_ | `0%` |\n| --voronoi-line-color | **Line Color** | `#000` |\n| --voronoi-line-width | **Line Width**, in pixels  | `3` |\n| --voronoi-dot-color | **Color of the dot in each cell**  | `transparent` |\n| --voronoi-dot-size | **Size of the dot in each cell**, in pixels  | `4` |\n| --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` |\n| --voronoi-seed | **Seed for the \"predictable random\" generator**, See [https://jakearchibald.com/2020/css-paint-predictably-random/](https://jakearchibald.com/2020/css-paint-predictably-random/) for details. | `123456` |\n\n_💡 The Worklet provides default values so defining them is not required_\n\n### Example\n\n```css\n.element {\n    --voronoi-number-of-cells: 100;\n    --voronoi-margin: 5%;\n    --voronoi-line-color: #000;\n    --voronoi-line-width: 4;\n    --voronoi-dot-color: rgba(0,0,0,0.2);\n    --voronoi-dot-size: 10;\n    --voronoi-cell-colors: #50514f, #f25f5c, #ffe066, #247ba0, #70c1b3;\n    --voronoi-seed: 654321;\n\n    background-image: paint(voronoi);\n}\n```\n\n### Registering the Voronoi Custom Properties\n\nTo properly animate the Voronoi Custom Properties and to make use of the built-in syntax validation you [need to register the Custom Properties](https://web.dev/at-property/). Include this CSS Snippet to do so:\n\n```css\n@property --voronoi-number-of-cells {\n    syntax: \"\u003cinteger\u003e | auto\";\n    initial-value: 25;\n    inherits: false;\n}\n@property --voronoi-margin {\n    syntax: \"\u003cpercentage\u003e\";\n    initial-value: 0%;\n    inherits: false;\n}\n@property --voronoi-line-color {\n    syntax: \"\u003ccolor\u003e\";\n    initial-value: #000;\n    inherits: false;\n}\n@property --voronoi-line-width {\n    syntax: \"\u003cinteger\u003e\";\n    initial-value: 1;\n    inherits: false;\n}\n@property --voronoi-dot-color {\n\tsyntax: '\u003ccolor\u003e';\n\tinitial-value: transparent;\n\tinherits: false;\n}\n@property --voronoi-dot-size {\n\tsyntax: '\u003cinteger\u003e';\n\tinitial-value: 2;\n\tinherits: false;\n}\n@property --voronoi-cell-colors {\n\tsyntax: '\u003ccolor\u003e#';\n\tinitial-value: #66ccff, #99ffcc, #00ffcc, #33ccff, #99ff99, #66ff99, #00ffff;\n\tinherits: false;\n}\n@property --voronoi-seed {\n  syntax: '\u003cnumber\u003e';\n  initial-value: 123456;\n  inherits: true;\n}\n```\n\n💡 Inclusion of this code snippet is not required, but recommended.\n\n## Demo / Development\n\nYou can play with a small demo on CodePen over at [https://codepen.io/bramus/pen/mdrWrGm](https://codepen.io/bramus/pen/mdrWrGm)\n\nIf you've cloned the repo you can run `npm run dev` to launch the included demo.\n\n## Acknowledgements\n\nThe Voronoi Diagram is generated using a precompiled [Javascript-Voronoi](https://github.com/gorhill/Javascript-Voronoi). It is included in the build. Further inspiration was gotten from [this demo](https://library.fridoverweij.com/codelab/voronoi/voronoi_animation_2.html).\n\n## License\n\n`css-houdini-voronoi` is released under the MIT public license. See the enclosed `LICENSE` for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramus%2Fcss-houdini-voronoi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbramus%2Fcss-houdini-voronoi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramus%2Fcss-houdini-voronoi/lists"}