Description

Randomly scattered ellipses and rectangles.

Created on 16 Aug 2026.

Code

<style>
  :root {
    color-scheme: light dark;
  }

  body {
    background: light-dark(#fee, #111)
  }

  button {
    background: none;
    border: none;
  }

  svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<button><svg viewBox='0 0 100 100'></svg></button>

<script type='module'>
  const svg = document.querySelector('svg');

  function randomInt(min = 0, max = 1) {
    return Math.floor((max - min) * Math.random() + min);
  }

  function randomItem(array) {
    return array[randomInt(0, array.length)];
  }

  const size = 50;

  function soup() {
    svg.innerHTML = '';
    
    for (let i = 0; i < 30; i++) {
      const x = randomInt(0, 100), 
        y = randomInt(0, 100),
        fill = `hsl(${randomInt(360)} 50 50 / ${Math.random()})`;
      
      svg.innerHTML += randomItem([
        `<rect 
          width='${randomInt(2, size)}' 
          height='${randomInt(2, size)}' 
          x='${x}'
          y='${y}'
          transform='rotate(${randomInt(0, 360)} ${x} ${y})'
          fill='${fill}'
        />`,
        `<ellipse 
          rx='${randomInt(2, size / 3)}' 
          ry='${randomInt(2, size / 3)}' 
          cx='${x}'
          cy='${y}'
          transform='rotate(${randomInt(0, 360)} ${x} ${y})'
          fill='${fill}'
        />`,
      ]);
    }
  }

  soup();

  document.querySelector('button').onclick = soup;
</script>