svgColorBoxes

svgColorBoxes.js

function svgColorSwatches(colors, size = 64, vertical = false) {
    let svg = vertical
        ? `<svg width="${size}" height="${colors.length * size}" viewBox="0 0 ${size} ${colors.length * size}" fill="none" xmlns="http://www.w3.org/2000/svg">`
        : `<svg width="${colors.length * size}" height="${size}" viewBox="0 0 ${colors.length * size} ${size}" fill="none" xmlns="http://www.w3.org/2000/svg">`;
    let x = 0, y = 0;
    for (let shade of colors) {
        svg += `
          <rect width="${size}" height="${size}" fill="${shade}" x="${x}" y="${y}"/>`;
        x += vertical ? 0 : size;
        y += vertical ? size : 0;
    }
    svg += `
      </svg>`;
    return svg;
}