houdini-perlin-noise v0.0.1

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

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.