Add gradient support to fill

[nym]

Noticed there's no way to do a shape with a gradient. Would be a nice addition if anyone has time to implement!

[legomushroom]

Hi @nym,

Thanks for the issue! Something like this?

const new mojs.Shape({
  fill: 'url(#greadient)'
});

Or you mean a CSS gradient?

[nym]

@legomushroom I was thinking more like a CSS gradient, something that could support transparency. I had not considered using an image for a gradient.

// basic example with hexadecimal colors
const new mojs.Shape({
  fill: 'linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)'
});

// lots of control over color stops
const new mojs.Shape({
  fill: 'linear-gradient(45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%)'
});

// transparency with rgba colors
const new mojs.Shape({
  fill: 'linear-gradient(45deg, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%)'
});

[eybarta]

@legomushroom actually the example you wrote above is exactly what I would do, the only thing is where would I put the tag with the gradient stops? could the #gradientTag be used from a different SVG on the page? is there a way to implement this as of today? thx