SVG ब्लॉब जनरेटर - ऑर्गेनिक ब्लॉब आकार ऑनलाइन बनाएं

// Generate an organic SVG blob shape in JavaScript

// Seeded random number generator (Mulberry32)
function createSeededRandom(seed) {
    return function () {
        seed |= 0;
        seed = (seed + 0x6d2b79f5) | 0;
        let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
}

// Generate blob points using polar coordinates with random deviation
function generateBlobPoints(numPoints, radius, randomness, seed) {
    const rng = createSeededRandom(seed);
    const points = [];
    const angleStep = (Math.PI * 2) / numPoints;

    for (let i = 0; i < numPoints; i++) {
        const theta = i * angleStep;
        const deviation = 1 + (rng() - 0.5) * (randomness / 50);
        const r = radius * deviation;
        points.push({
            x: Math.cos(theta) * r,
            y: Math.sin(theta) * r,
        });
    }
    return points;
}

// Convert points to smooth SVG path using Catmull-Rom spline
function pointsToSvgPath(points, center) {
    const n = points.length;
    let d = `M ${points[0].x + center} ${points[0].y + center}`;

    for (let i = 0; i < n; i++) {
        const p0 = points[(i - 1 + n) % n];
        const p1 = points[i];
        const p2 = points[(i + 1) % n];
        const p3 = points[(i + 2) % n];

        const cp1x = p1.x + (p2.x - p0.x) / 6;
        const cp1y = p1.y + (p2.y - p0.y) / 6;
        const cp2x = p2.x - (p3.x - p1.x) / 6;
        const cp2y = p2.y - (p3.y - p1.y) / 6;

        d += ` C ${cp1x + center} ${cp1y + center}, ${cp2x + center} ${cp2y + center}, ${p2.x + center} ${p2.y + center}`;
    }
    return d + " Z";
}

// Generate complete SVG string
function generateBlobSvg(options = {}) {
    const {
        seed = Math.floor(Math.random() * 100000),
        complexity = 8,
        randomness = 50,
        size = 400,
        color = "#6366f1",
    } = options;

    const center = size / 2;
    const radius = size * 0.35;
    const points = generateBlobPoints(complexity, radius, randomness, seed);
    const path = pointsToSvgPath(points, center);

    return `<svg viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
  <path d="${path}" fill="${color}" />
</svg>`;
}

// Usage
const svg = generateBlobSvg({
    seed: 42,
    complexity: 10,
    randomness: 60,
    size: 400,
    color: "#8b5cf6",
});
console.log(svg);
document.getElementById("blob-container").innerHTML = svg;