Image Liquid Metallic Chrome Material Top View

async function processImage(originalImg) {
    /**
     * Creates a liquid metallic chrome effect on an image.
     * This function uses SVG filters to create a complex material effect that simulates
     * a molten, chrome-like surface, viewed from the top, isolated on a black background.
     * The effect is achieved by:
     * 1. Generating a turbulence pattern to act as a liquid texture.
     * 2. Using the input image's alpha channel (its shape) as a base.
     * 3. Displacing the shape with the turbulence pattern to create a molten, uneven look.
     * 4. Treating the resulting shape as a 3D height map.
     * 5. Applying specular lighting to the height map to create bright, chrome-like highlights.
     * 6. Combining the highlights with a metallic base color.
     * 7. Placing the final result on a black background.
     *
     * @returns {SVGSVGElement} An SVG element containing the filtered image.
     */

    // Create a canvas to convert the Image object to a Data URL, which is needed for the SVG <image> element.
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = originalImg.naturalWidth;
    tempCanvas.height = originalImg.naturalHeight;
    tempCtx.drawImage(originalImg, 0, 0);
    const imgDataURL = tempCanvas.toDataURL();

    // The SVG namespace is required for creating SVG elements programmatically.
    const svgNS = "http://www.w3.org/2000/svg";

    // Create the main SVG element container.
    const svg = document.createElementNS(svgNS, "svg");
    svg.setAttribute('width', originalImg.naturalWidth);
    svg.setAttribute('height', originalImg.naturalHeight);
    svg.setAttribute('viewBox', `0 0 ${originalImg.naturalWidth} ${originalImg.naturalHeight}`);

    // Create a <defs> section to hold the filter definition.
    const defs = document.createElementNS(svgNS, "defs");
    const filter = document.createElementNS(svgNS, "filter");
    filter.id = "liquid-chrome-effect";
    // Set filter region attributes to prevent clipping of the effect at the edges.
    filter.setAttribute('x', '-20%');
    filter.setAttribute('y', '-20%');
    filter.setAttribute('width', '140%');
    filter.setAttribute('height', '140%');

    // Define the chain of filter primitives.
    filter.innerHTML = `
        <!-- Step 1: Create a turbulence pattern for the liquid effect. 'fractalNoise' is good for organic patterns -->
        <feTurbulence type="fractalNoise" baseFrequency="0.02 0.05" numOctaves="3" result="turbulence" seed="5"/>

        <!-- Step 2: Blur the original image's alpha channel to get smooth, rounded edges -->
        <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blurredAlpha"/>

        <!-- Step 3: Use the turbulence map to displace the blurred alpha channel, creating the molten shape -->
        <feDisplacementMap in="blurredAlpha" in2="turbulence" scale="40" xChannelSelector="R" yChannelSelector="G" result="displacedAlpha"/>

        <!-- Step 4: Create a height map from the displaced alpha for the lighting effect. A slight blur smooths the surface. -->
        <feGaussianBlur in="displacedAlpha" stdDeviation="3" result="bumpMap"/>

        <!-- Step 5: Apply specular lighting to create the bright, sharp highlights characteristic of chrome. -->
        <feSpecularLighting in="bumpMap" surfaceScale="8" specularConstant="1.2" specularExponent="40" lighting-color="white" result="specularLight">
            <!-- A distant light source simulates parallel light rays, like from the sun. -->
            <feDistantLight azimuth="235" elevation="60" />
        </feSpecularLighting>

        <!-- Step 6: Mask the highlights to the shape of the liquid metal. -->
        <feComposite in="specularLight" in2="displacedAlpha" operator="in" result="maskedSpecular"/>

        <!-- Step 7: Create a solid metallic base color (a mid-grey) -->
        <feFlood flood-color="#707070" result="baseFill"/>

        <!-- Step 8: Mask the base color to the liquid shape. -->
        <feComposite in="baseFill" in2="displacedAlpha" operator="in" result="baseColor"/>

        <!-- Step 9: Merge the base color and the specular highlights. The last node is rendered on top. -->
        <feMerge>
            <feMergeNode in="baseColor"/>
            <feMergeNode in="maskedSpecular"/>
        </feMerge>
    `;

    defs.appendChild(filter);
    svg.appendChild(defs);

    // Add a black rectangle for the background, as requested.
    const background = document.createElementNS(svgNS, "rect");
    background.setAttribute('width', '100%');
    background.setAttribute('height', '100%');
    background.setAttribute('fill', 'black');
    svg.appendChild(background);

    // Create the SVG <image> element that will be the target of the filter.
    const image = document.createElementNS(svgNS, "image");
    image.setAttribute('href', imgDataURL);
    image.setAttribute('width', originalImg.naturalWidth);
    image.setAttribute('height', originalImg.naturalHeight);
    
    // Apply the filter to the image.
    image.setAttribute('filter', 'url(#liquid-chrome-effect)');
    svg.appendChild(image);

    // Return the completed SVG element.
    return svg;
}