hatch gradient

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": "orange"}},
    {
      "mark": {
        "type": "area",
        "fill": {
          "x1": 0.1,
          "y1": 1,
          "x2": 1,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "transparent"},
            {"offset": 0.01, "color": "red"},
            {"offset": 0.02, "color": "transparent"},
            {"offset": 0.03, "color": "red"},
            {"offset": 0.04, "color": "transparent"},
            {"offset": 0.05, "color": "red"},
            {"offset": 0.06, "color": "transparent"},
            {"offset": 0.07, "color": "red"},
            {"offset": 0.08, "color": "transparent"},
            {"offset": 0.09, "color": "red"},
            {"offset": 0.1, "color": "transparent"},
            {"offset": 0.11, "color": "red"},
            {"offset": 0.12, "color": "transparent"},
            {"offset": 0.13, "color": "red"},
            {"offset": 0.14, "color": "transparent"},
            {"offset": 0.15, "color": "red"},
            {"offset": 0.16, "color": "transparent"},
            {"offset": 0.17, "color": "red"},
            {"offset": 0.18, "color": "transparent"},
            {"offset": 0.19, "color": "red"},
            {"offset": 0.2, "color": "transparent"},
            {"offset": 0.21, "color": "red"},
            {"offset": 0.22, "color": "transparent"},
            {"offset": 0.23, "color": "red"},
            {"offset": 0.24, "color": "transparent"},
            {"offset": 0.25, "color": "red"},
            {"offset": 0.26, "color": "transparent"},
            {"offset": 0.27, "color": "red"},
            {"offset": 0.28, "color": "transparent"},
            {"offset": 0.29, "color": "red"},
            {"offset": 0.3, "color": "transparent"},
            {"offset": 0.31, "color": "red"},
            {"offset": 0.32, "color": "transparent"},
            {"offset": 0.33, "color": "red"},
            {"offset": 0.34, "color": "transparent"},
            {"offset": 0.35, "color": "red"},
            {"offset": 0.36, "color": "transparent"},
            {"offset": 0.37, "color": "red"},
            {"offset": 0.38, "color": "transparent"},
            {"offset": 0.39, "color": "red"},
            {"offset": 0.4, "color": "transparent"},
            {"offset": 0.41, "color": "red"},
            {"offset": 0.42, "color": "transparent"},
            {"offset": 0.43, "color": "red"},
            {"offset": 0.44, "color": "transparent"},
            {"offset": 0.45, "color": "red"},
            {"offset": 0.46, "color": "transparent"},
            {"offset": 0.47, "color": "red"},
            {"offset": 0.48, "color": "transparent"},
            {"offset": 0.49, "color": "red"},
            {"offset": 0.5, "color": "transparent"},
            {"offset": 0.51, "color": "red"},
            {"offset": 0.52, "color": "transparent"},
            {"offset": 0.53, "color": "red"},
            {"offset": 0.54, "color": "transparent"},
            {"offset": 0.55, "color": "red"},
            {"offset": 0.56, "color": "transparent"},
            {"offset": 0.57, "color": "red"},
            {"offset": 0.58, "color": "transparent"},
            {"offset": 0.59, "color": "red"},
            {"offset": 0.6, "color": "transparent"},
            {"offset": 0.61, "color": "red"},
            {"offset": 0.62, "color": "transparent"},
            {"offset": 0.63, "color": "red"},
            {"offset": 0.64, "color": "transparent"},
            {"offset": 0.65, "color": "red"},
            {"offset": 0.66, "color": "transparent"},
            {"offset": 0.67, "color": "red"},
            {"offset": 0.68, "color": "transparent"},
            {"offset": 0.69, "color": "red"},
            {"offset": 0.7, "color": "transparent"},
            {"offset": 0.71, "color": "red"},
            {"offset": 0.72, "color": "transparent"},
            {"offset": 0.73, "color": "red"},
            {"offset": 0.74, "color": "transparent"},
            {"offset": 0.75, "color": "red"},
            {"offset": 0.76, "color": "transparent"},
            {"offset": 0.77, "color": "red"},
            {"offset": 0.78, "color": "transparent"},
            {"offset": 0.79, "color": "red"},
            {"offset": 0.8, "color": "transparent"},
            {"offset": 0.81, "color": "red"},
            {"offset": 0.82, "color": "transparent"},
            {"offset": 0.83, "color": "red"},
            {"offset": 0.84, "color": "transparent"},
            {"offset": 0.85, "color": "red"},
            {"offset": 0.86, "color": "transparent"},
            {"offset": 0.87, "color": "red"},
            {"offset": 0.88, "color": "transparent"},
            {"offset": 0.89, "color": "red"},
            {"offset": 0.9, "color": "transparent"},
            {"offset": 0.91, "color": "red"},
            {"offset": 0.92, "color": "transparent"},
            {"offset": 0.93, "color": "red"},
            {"offset": 0.94, "color": "transparent"},
            {"offset": 0.95, "color": "red"},
            {"offset": 0.96, "color": "transparent"},
            {"offset": 0.97, "color": "red"},
            {"offset": 0.98, "color": "transparent"},
            {"offset": 0.99, "color": "red"}
          ]
        }
      },
      "encoding": {"opacity": {"value": 0.4}}
    }
  ],
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "opacity": {"value": 1}
  }
}