Unknown issue with Metallic paint

[ben4ali]

I'm trying to use your Metallic paint on a SVG on a React Typescript CSS project initialized with Vite but nothing appears when I use the component.

I've used different SVGs to test it and made another React project using Javascript and CSS but it's the same result

My github repo (Javascript version)

[DavidHDev]

@ben4ali of course it won't work, you skipped the entire image initialization step and you're not passing any of your SVGs to the component, as highlighted in the "Usage" example on the website, you know, the part right here that actually shows you how to use the component:

import MetallicPaint, { parseLogoImage } from "./MetallicPaint";'
import { useState, useEffect } from 'react';

// replace with your own SVG
// NOTE: your SVG should have a bit of padding around the shape, to keep it from being cut off
// it should also have black fill color, to allow the metallic effect to show through the mask
import logo from '../../assets/logos/react-bits-solid-black.svg';

const Component = () => {
  const [imageData, setImageData] = useState(null);

  useEffect(() => {
    async function loadDefaultImage() {
      try {
        const response = await fetch(logo);
        const blob = await response.blob();
        const file = new File([blob], "default.png", { type: blob.type });
        const { imageData } = await parseLogoImage(file);
        setImageData(imageData);
      } catch (err) {
        console.error("Error loading default image:", err);
      }
    }
      
    loadDefaultImage();
  }, []);

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <MetallicPaint 
        imageData={imageData} 
        params={{ edge: 2, patternBlur: 0.005, patternScale: 2, refraction: 0.015, speed: 0.3, liquid: 0.07 }} 
      />
    </div>
  );
}

[ben4ali]

Okay I figured it out, it was not the image initialization, it was the edge parameter that was set too high.

Now it works and it looks great, amazing work