Gradientee
Gradientee is a tiny, self-contained library to create randomized gradient backgrounds based on triangles, squares or quadrilaterals.
It is using Jake Archibald's seeded random function to get predictable results and avoid significant pattern changes on rerenders, for example during box resize
How to use
Canvas painter
Include script
<script type="text/javascript" src="../dist/gradientee.js"></script>
and then use
<canvas id="canvas"></canvas>
const node = document.getElementById("canvas");
const ctx = node.getContext("2d");
const options = {
width: node.clientWidth,
height: node.clientHeight,
colorFrom: "#f00",
colorTo: "#ff0",
};
paintTriangles(ctx, options);
CSS Paint Api
(experimental)
Due to experimental nature of Paint API that solution will work only for chrome-based browsers.
Please consult Can I Use for current browser state
Be advised to implement workarounds for other major browsers
To use CSS Houdini paint worklet, add module import into <script>
tags in header of your page
<script type="text/javascript">
CSS.paintWorklet.addModule("../dist/gradientee-worklet.js");
</script>
and then use the css paint:
.selector-to-paint {
width: 1000px;
height: 400px;
background-image: paint(gradientee);
--gradientee-color-from: #00ff00;
--gradientee-color-to: #0000ff;
--gradientee-box-size: 60;
--gradientee-seed: 1234;
--gradientee-deflection-level: 20;
--gradientee-color-randomness: 0;
}
Options
Javascript
To control the canvas generator, use options js object
{
boxSize: 20,
colorFrom: "#fff",
colorTo: "#000",
colorRandomness: 0,
deflectionLevel: 20,
triangles: true,
seed: 1234
}
CSS Paint API
For CSS, all options have respective custom properties, formed by applying --gradientee
prefix to a kebab-case formatted option name
.selector-to-paint {
--gradientee-box-size: 20;
--gradientee-color-from: #fff;
--gradientee-color-to: #000;
--gradientee-color-randomness: 0;
--gradientee-deflection-level: 20;
--gradientee-triangles: 1;
--gradientee-seed: 1234;
}
List of all the options:
- boxSize - cell size of grid, defaults to 20
- colorFrom - starting color of gradient, defaults to #fff
- colorTo - ending color of gradient, defaults to #000
- colorRandomness - randomness of single cell color selection, defaults to 0
- deflectionLevel - how far should nodes be deflected from original coordinates, in %. Max is 25, defaults to 20
- triangles - selector triangles/quadrilaterals. 0 for quads, 1 for triangles. Defaults to 1
- seed - numerical value of seed, used for randomizing. Using constant seed will result in getting repetitive random results. Defaults to
Math.rand()
How to build
To build, simply run:
> npm install
> npm run build