Color Gradient on Area

The previous example of a varying gradient on a line is neat. But hopefully, you’re already thinking: “Hang on, can’t that same thing be applied to an area fill?”

Damn! You’re catching on.

Applying a color gradient to an area fill

To do this, there are only a few things we need to change:

CSS

First of all, the CSS for the line needs to be amended to refer to the area. So the CSS for the line gets changed to this:

.area {
  fill: url(#area-gradient);
  stroke-width: 0px;
}

We’ve defined the styles for the area this time. But instead of the stroke being defined by the separate script, now it’s the area. While we’ve changed the URL name, it’s actually the same piece of code with a different ID (because it seemed wrong to be talking about an area when the label said line). We’ve also set the stroke width to zero because we don’t want any lines around our filled area.

JS

Now we want to take the block of code that defined our line, and we need to replace it with the standard block that defined an area fill.