houdini-perlin-noise

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.