SVG पैटर्न जेनरेटर - सीमलेस बैकग्राउंड पैटर्न बनाएं ऑनलाइन

// Create SVG background patterns programmatically

function createDiagonalLinesPattern(options = {}) {
    const {
        size = 10,
        strokeWidth = 1,
        color = "#6366f1",
        backgroundColor = "#ffffff",
        opacity = 1,
        rotation = 45,
    } = options;

    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
  <rect width="${size}" height="${size}" fill="${backgroundColor}" />
  <line x1="0" y1="${size}" x2="${size}" y2="0"
    stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"
    transform="rotate(${rotation} ${size / 2} ${size / 2})" />
</svg>`;
}

function createDotsPattern(options = {}) {
    const {
        size = 20,
        dotRadius = 2,
        color = "#6366f1",
        backgroundColor = "#ffffff",
        opacity = 1,
    } = options;

    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
  <rect width="${size}" height="${size}" fill="${backgroundColor}" />
  <circle cx="${size / 2}" cy="${size / 2}" r="${dotRadius}"
    fill="${color}" opacity="${opacity}" />
</svg>`;
}

// Convert SVG pattern to CSS background
function svgToCssBackground(svgString) {
    const encoded = encodeURIComponent(svgString)
        .replace(/'/g, "%27")
        .replace(/"/g, "%22");
    return `url("data:image/svg+xml,${encoded}")`;
}

// Usage
const linesSvg = createDiagonalLinesPattern({ size: 12, strokeWidth: 1.5, color: "#3b82f6" });
const dotsSvg = createDotsPattern({ size: 16, dotRadius: 1.5, color: "#8b5cf6" });

const element = document.getElementById("my-element");
element.style.backgroundImage = svgToCssBackground(linesSvg);
element.style.backgroundRepeat = "repeat";

console.log("CSS:", svgToCssBackground(dotsSvg));