<div>
  <input type="radio" name="pattern" value="diamond" id="diamond">
  <label for="diamond">Diamond</label>
  
  <input type="radio" name="pattern" value="circle" id="circle" checked>
  <label for="circle">Circle</label>
  
  <input type="radio" name="pattern" value="hex" id="hex">
  <label for="hex">Hexagon</label>

  <input type="radio" name="pattern" value="triangle" id="triangle">
  <label for="triangle">Triangle</label>
</div>
<svg id="svg" viewBox="0 0 25 25" width="1000" height="1000"></svg>


body {
  align-items: center;
  color: #023932;
  display: flex;
  flex-direction: column;
}

label {
  box-shadow: inset 0 0 0 2px #FCA521;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  margin: 10px 4px;
  padding: 10px;
  width: 100px;
  text-align: center;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  background: #FCA521;
}
const width = 40;
const height = 40;

function sample(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const colors = [
  '#025952',
  '#FAE3BA',
  '#F1523E',
  '#F27B35',
  '#FCA521'
];

function makePath(pathString, data = {}) {
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('fill', sample(colors));
  path.setAttribute('d', pathString);
  for (let key in data) path.setAttribute(key, data[key]);
  return path;
}

const PATTERNS = {
  diamond(x, y) {
    const pathString =
      (x + y) % 2 === 0
        ? `M ${x} ${y - 1} L ${x + 1} ${y} L ${x} ${y + 1} Z`
        : `M ${x} ${y} L ${x + 1} ${y + 1} L ${x + 1} ${y - 1} Z`;

    if (Math.random() < 0.2) return;
    document.getElementById('svg').appendChild(makePath(pathString));
  },
  circle(x, y) {
    const pathString = `M ${x} ${y} l 1 0 a 1 1 0 0 1 -1 1 Z`
    const dx = x + 0.5
    const dy = y + 0.5
    const rotate = 90 * Math.floor(Math.random() * 4) // 0, 90, 180, or 270
    const transform = `translate(${dx} ${dy}) rotate(${rotate}) translate(${-dx} ${-dy})`;
    if (Math.random() < 0.9) document.getElementById('svg').appendChild(makePath(pathString, { transform }));
  },
  hex(x, y) {
    const ox = (x % 4) / 2;
    const px = ((x - 1) / 2) % 2;
    const cx = 0.75 * (x - 1) + 1;

    const pathString =
      x % 2 === 0
        ? `M ${0.75 * x + 1} ${2 * y + ox + 1} L ${0.75 * x + 1.5} ${2 * y +
            ox} L ${0.75 * x + 1} ${2 * y + ox - 1} L ${0.75 * x} ${2 * y +
            ox -
            1} Z`
        : `M ${cx} ${2 * y + px - 1} L ${cx + 0.5} ${2 * y + px} L ${cx +
            1.5} ${2 * y + px} L ${cx + 0.5} ${2 * y + px - 2} Z`;
    const transform = "scale(1, 0.85)";
    if (Math.random() < 0.92) document.getElementById('svg').appendChild(makePath(pathString, { transform }));    
  },
  triangle(x, y) {
    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', x);
    rect.setAttribute('y', y);    
    rect.setAttribute('width', 1);
    rect.setAttribute('height', 1);
    rect.setAttribute('fill', sample(colors));
    const pathString = `M ${x} ${y} L ${x + 1} ${y} L ${x + 1} ${y + 1} Z`;
    
    if (Math.random() < 0.9) document.getElementById('svg').appendChild(rect);
    if (Math.random() < 0.9) document.getElementById('svg').appendChild(makePath(pathString));     
  }
}

function generate() {
  document.getElementById('svg').innerHTML = '';
  const pattern = Array.from(document.querySelectorAll('[name="pattern"]')).find(radio => radio.checked);
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height + 1; y++) {
      PATTERNS[pattern.value](x, y);
    }
  }
}

generate();

Array.from(document.querySelectorAll('label')).forEach(label => {
  label.addEventListener('click', () => setTimeout(generate, 10));
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.