I know Tavmjong Bah has also been working on a polyfill, so hopefully you two can join forces & figure out how to handle remaining issues.
Some comments, which I'll also file as Issues in your GitHub repository:
- To make the sample files viewable online, you could enable GitHub pages (https://help.github.com/articles/what-is-github-pages/), creating a simple index.html file that links to the samples with and without polyfill.
- To keep the generated DOM & styles as close as possible to the original, I would recommend putting the generated <image> inside a <pattern>, and using the <pattern> to paint the shape that should be painted with the <meshGradient>. (In the case of a <mesh>, you would need to generate a <path> and paint it with the <pattern>.) If you reuse the same id value from the meshGradient, then you shouldn't need to worry about parsing CSS on the shapes, you would just look for the actual <meshGradient> objects.
- I haven't yet tried to debug the gradient code, but there is a "dead pixel" effect in some of the examples (see attached screenshot).
As I said, awesome work! I look forward to being able to use mesh gradients on the web.
Best,
Amelia Bellamy-Royds