Package Exports

simplex.css
simplex.css/dist/simplex-css.bundle.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (simplex.css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

simplex-css

Simplex.css Preview

Installation

To use simplex-css in your project:

Install the package via npm:

npm install simplex-css

(async () => {
    if (!CSS["paintWorklet"]) {
        await import("https://unpkg.com/css-paint-polyfill");
    } else {
        CSS.paintWorklet.addModule('https://unpkg.com/simplex-css@1.0.5/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>

Browser Support

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/simplex-css@1.0.5/dist/simplex.min.js');
}

For more information on browser support for the CSS Paint API, you can check the compatibility on can I use.

Demo

Live demo here.

Contributing

Feel free to submit issues or pull requests to improve the package.

License

This project is licensed under the MIT License - see the LICENSE file for details.