To use simplex-css in your project:
- Install the package via npm:
npm install simplex-css- Register the worklet:
(async () => {
if (!CSS["paintWorklet"]) {
await import("https://unpkg.com/css-paint-polyfill");
} else {
CSS.paintWorklet.addModule('https://unpkg.com/[email protected]/dist/simplex.min.js');
}
})();- Customize it in your CSS:
@layer simplex {
@property --animate {
syntax: "<number>";
initial-value: 0;
inherits: false;
}
@property --blend-mode {
syntax: "<lighter | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity>";
initial-value: lighter;
inherits: false;
}
@property --t {
syntax: "<number>";
initial-value: 0;
inherits: false;
}
@keyframes tick {
from {
--t: 0;
}
to {
--t: 86400000;
}
}
.simplex {
--seed: 55555;
--color: #a0a0a0;
--line-width: 0.05;
--line-count: 850;
--amplitude: 1;
--frequency: 0.3;
--scale-x: 1;
--scale-y: 1;
--overall-scale: 1;
--angle: 0;
--opacity: 1;
--smoothing: 10;
--line-spacing: 1;
/* Note: To animate, set --play-state to running but be aware it may impact performance. */
--speed: 0.2;
--play-state: paused;
--animate: calc(mod(var(--t) / 50000, 50000));
background-image: paint(simplex);
animation: tick 86400000ms linear infinite;
animation-play-state: var(--play-state, paused);
}
}- Use it in your HTML:
<div class="simplex"></div>If you need to support browsers that do not natively support the CSS Paint API, you can use a polyfill:
if (!CSS["paintWorklet"]) {
await import("https://unpkg.com/css-paint-polyfill");
} else {
CSS.paintWorklet.addModule('https://unpkg.com/[email protected]/dist/simplex.min.js');
}For more information on browser support for the CSS Paint API, you can check the compatibility on can I use.
Live demo here.
Feel free to submit issues or pull requests to improve the package.
This project is licensed under the MIT License - see the LICENSE file for details.