Is there a way to use d3.js to create a gradient definition that will result in such:

Sorry for the previous ASCII, 
This is what i'm trying to achieve:

![enter image description here](https://i.stack.imgur.com/wvdwc.png)

Instead of a simple linear gradient:

![enter image description here](https://i.stack.imgur.com/HkMov.png)

I didn't manage to find a way to do this without splitting the rects and creating opposing gradients.

Thanks!