gradient texture

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Google's stock price over time.",
  "data": {"url": "data/stocks.csv"},
  "transform": [{"filter": "datum.symbol==='GOOG'"}],
  "layer": [
    {"mark": {"type": "area", "fill": "red"}},
    {
      "mark": {
        "type": "area",
        "fill": {
          "x1": 0.1,
          "y1": 1,
          "x2": 1,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "white"},
            {"offset": 0.1, "color": "darkgreen"},
            {"offset": 0.2, "color": "white"},
            {"offset": 0.3, "color": "darkgreen"},
            {"offset": 0.4, "color": "white"},
            {"offset": 0.5, "color": "darkgreen"},
            {"offset": 0.6, "color": "white"},
            {"offset": 0.7, "color": "darkgreen"},
            {"offset": 0.8, "color": "white"},
            {"offset": 0.9, "color": "darkgreen"}
          ]
        }
      },
      "encoding": {"opacity": {"value": 0.4}}
    }
  ],
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "opacity": {"value": 1}
  }
}