I am trying to fill the path co-ordinates diagram based on the value. but unable to make it.
It is possbile in SVG and trying the same in vega-lite.
the SVG based one is below. ref:
[1]: https://codepen.io/thiru_tbl/pen/gOJBozb

But, in vega-lite is it possible like “pictorial fraction chart”?
mt vega lite code is below. let say, my data Value is 49. the color should be filled till 49.

{
 "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
 "data": { "name": "mydata",
"values": [
  {"Pic": "Pic", "Value":49}
]
},

"vconcat": [
{

  "encoding": {
    "x": {
      "field": "Pic",
      "type": "nominal"
    }
  },
  "layer": [
    {
      "mark": {"type": "point"}, 
      "encoding": {
        "y": {
          "field": "Value",
          "type": "quantitative",
          "scale": {"domain": [0, 100]}
        }

      }
    },
    {
      "mark": {
        "type": "point",
        "shape": "M -3 0 L 15 0 L 3 -73 L 3 -73 L -3 -1 L -3 0",
        "fill": "#fdfd"
        
      },
      "encoding": {"y": {"datum": 0}}
      
      
},
{
      "data": {"name": "mydata"},
      "encoding": {
        "y": {"field": "Value", "type": "quantitative"}, 
        "x": {}
      
      },
      "layer": [
        
        {"mark": {"type": "rule", "x2":100},
        "encoding": {
        "y": {"field": "Value", "type": "quantitative"} 
        }
        }
     ]
    },
    {
      "data": {"name": "mydata"},
      "encoding": {
        "y": {"field": "Value", "type": "quantitative"}, 
        "x": {}
      
      },
      "layer": [
        
        {"mark": {"type": "text","align": "left",
  "baseline": "middle",
  "dx": 90, "dy":-0, "size":20},
        "encoding": {
                   "text": {"field": "Value", "type": "quantitative","title": "points"}
               }
        }
     ]
    }

  ]
}
]
}