BACKGROUND PATTERN GENERATOR

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let currentType = 'dots';
    const elSize = document.getElementById('input-size');
    const elStroke = document.getElementById('input-stroke');
    const elFg = document.getElementById('input-fg');
    const elBg = document.getElementById('input-bg');

    const stage = document.getElementById('pattern-stage');
    const cssOut = document.getElementById('css-output');
    const toast = document.getElementById('toast');

    let lastSvgCode = '';

    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 2000);
    }

    function generatePatternSvg() {
      const size = parseInt(elSize.value);
      const stroke = parseInt(elStroke.value);
      const fg = elFg.value;
      const bg = elBg.value;

      document.getElementById('val-size').textContent = size + 'px';
      document.getElementById('val-stroke').textContent = stroke + 'px';

      let patternContent = '';

      if (currentType === 'dots') {
        patternContent = `<circle cx="${size/2}" cy="${size/2}" r="${stroke}" fill="${fg}" />`;
      } else if (currentType === 'grid') {
        patternContent = `<path d="M ${size} 0 L 0 0 0 ${size}" fill="none" stroke="${fg}" stroke-width="${stroke}" />`;
      } else if (currentType === 'iso') {
        patternContent = `<path d="M 0 ${size/2} L ${size/2} 0 L ${size} ${size/2} L ${size/2} ${size} Z" fill="none" stroke="${fg}" stroke-width="${stroke}" />`;
      } else if (currentType === 'stripes') {
        patternContent = `<path d="M 0 ${size} L ${size} 0 M -${size/4} ${size/4} L ${size/4} -${size/4} M ${size*3/4} ${size*5/4} L ${size*5/4} ${size*3/4}" fill="none" stroke="${fg}" stroke-width="${stroke}" />`;
      }

      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
  <rect width="100%" height="100%" fill="${bg}" />
  ${patternContent}
</svg>`;

      lastSvgCode = svg;

      const encoded = encodeURIComponent(svg).replace(/'/g, "%27").replace(/"/g, "%22");
      const css = `background-color: ${bg};\nbackground-image: url("data:image/svg+xml,${encoded}");\nbackground-size: ${size}px ${size}px;`;

      stage.style.cssText = css;
      cssOut.textContent = css;
    }

    document.querySelectorAll('.btn-preset').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentType = btn.dataset.type;
        generatePatternSvg();
      });
    });

    [elSize, elStroke, elFg, elBg].forEach(input => {
      input.addEventListener('input', generatePatternSvg);
    });

    document.getElementById('btn-copy-css').addEventListener('click', () => {
      navigator.clipboard.writeText(cssOut.textContent);
      showToast('CSS Background copied!');
    });

    document.getElementById('btn-copy-svg').addEventListener('click', () => {
      navigator.clipboard.writeText(lastSvgCode);
      showToast('SVG Code copied!');
    });

    generatePatternSvg();