<svg xmlns="http://www.w3.org/2000/svg" width="{{ width }}" height="{{ height }}">
  <linearGradient id="b" x2="0" y2="100%">
    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
    <stop offset="1" stop-opacity=".1"/>
  </linearGradient>
  <mask id="a">
    <rect width="{{ width }}" height="{{ height }}" rx="3" fill="#fff"/>
  </mask>
  <g mask="url(#a)">
    {% set accx = 0 %}
    {% for c, w, x, t in parts %}
      <path fill="{{ c }}" d="M{{ accx }} 0h{{ w }}v{{ height }}H{{ accx }}z"/>
      {% set accx += w %}
    {% end %}
    <path fill="url(#b)" d="M0 0h{{ width }}v{{ height }}H0z"/>
  </g>
  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
    {% set accx = 0 %}
    {% for c, w, x, t in parts %}
      <text x="{{ accx + x }}" y="15" fill="#010101" fill-opacity=".3">{{ t }}</text>
      <text x="{{ accx + x }}" y="14">{{ t }}</text>
      {% set accx += w %}
    {% end %}
  </g>
</svg>