Column chart with different height and width - svg

[Pk8524]

I would like to achieve a column chart using svg with different height, widht and project name. I have a very simple data:

The goal is to have something like this:

i have managed to do some svg which horizontally works and we see different widht but not in vertical:

Can you help me to create such custom visual?

https://drive.google.com/file/d/1CtnSe47cWBdqrqjdZs4_q01mKUfRfsBP/view?usp=sharing 

[lbendlin]

Have you considered using Deneb for this?

{
  "data": {
    "name": "dataset"
  },
  "transform": [
    {
      "window": [
        {
          "op": "sum",
          "field": "Width",
          "as": "cum_total"
        }
      ],
      "sort": [
        {
          "field": "Project",
          "order": "ascending"
        }
      ],
      "frame": [null, 0]
    },
    {
      "calculate": "0", "as": "bottomedge"
    },
    {
      "calculate": "datum.cum_total - datum['Width'] + 2", "as": "leftedge"
    }
  ],"mark": {
    "type": "bar"
  },
  "encoding": {
    "x": {
      "field": "cum_total",
      "type": "quantitative"
    },
    "x2": {"field":"leftedge"},
    "y2": {"field":"bottomedge"},
    "y": {
      "field": "Height",
      "type": "quantitative"
    },
    "color":{"field":"Project"}
  }
}