Houdini Blobs PaintWorklet

View on Github
              
  <style>
  .css-houdini-blobs {
    --min-extra-points: 0;
    --max-extra-points: 1;
    --min-randomness: 50;
    --max-randomness: 50;
    --min-size: 20;
    --max-size: 200;
    --num-blobs: 20;
    --offset-x: 0;
    --offset-y: 0;

    --seed: 1234;
    --colors: #71a7ee, #7940c1, #f0e891;
    --min-opacity: 0.1;
    --max-opacity: 0.5;
    background: paint(blobs);
  }
  </style>
              
            

offsetX, offsetY & numBlobs are animated thanks to CSS custom properties.

Close Controls