womb3-simplex.mjs

The library for creating creepy sticky background

Example

<canvas class="wrap"></canvas>

<svg style="position: absolute">
  <defs>
    <filter id="blob">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="blob"></feColorMatrix>
    </filter>
  </defs>
</svg>

import("/js/modules/gallery.mjs").then((module) => {
  // Initializing the instance
  const womb = new module.womb(document.getElementById("wrap"));
  womb.init();
  womb.generate();
        
  // Initializing the process registers
  let offset = 0;
  let speed = 0.01;

  // Starting the process
  setInterval(function() {
    womb.dump();
    womb.generate(offset += speed);
  }, 30);

  // Initializing the resizing event processor
  window.addEventListener('resize', function(e) {
    womb.init();
    womb.dump();
    womb.generate(offset += speed);
  }, true);
});

Demonstration

CodePen