CSS Houdini Perlin Noise

A CSS Houdini Paint Worklet that draws a Perlin Noise as a background image.

Demo: https://mefody.github.io/houdini-perlin-noise/

Installation

You can install the houdini-perlin-noise using NPM.

npm install houdini-perlin-noise

Also you can clone the houdini-perlin-noise repo.

Build

npm install
npm run build

The built file will be in the ./dist folder.

Usage

Load the module in the dist/worklet.js file and add it to the Paint Worklet.

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

Then set the background-image property of some DOM-element to paint(perlin-noise).

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

Run demo locally

npm run dev

Configuration

| property | description | default value | | -------- | ----------- | ------------- | | --perlin-color | Color of lines, (color) | #ecee81 | | --perlin-bg-color | Color of background, (color) | tomato | | --perlin-x | Magic number for axis X (number, > 1) | 5 | | --perlin-y | Magic number for axis Y (number, > 1) | 5 | | --perlin-z | Magic number for axis Z (number) | 0 | | --perlin-line-width | Stroke width, (number) | 1 |

Example

.element {
    --perlin-color: #ecee81;
    --perlin-bg-color: tomato;
    --perlin-line-width: 1;
    --perlin-x: 5;
    --perlin-y: 5;
    --perlin-z: 0;

    background-image: paint(perlin-noise);
}

License

houdini-perlin-noise is released under the MIT public license. See the enclosed LICENSE for details.