Pictogram Chart in HTML, CSS and JavaScript

const years = [['2021', 340], ['2022', 520], ['2023', 610]];
const per = 100, size = 34;
const tree = (x, y, s) => 'M' + (x + s / 2) + ',' + y + 'L' + (x + s) + ',' + (y + s * 0.8) + 'H' + (x + s * 0.6) + 'V' + (y + s) + 'H' + (x + s * 0.4) + 'V' + (y + s * 0.8) + 'H' + x + 'Z';

years.forEach(([year, count], row) => {
  const y = 20 + row * 50;
  drawText(50, y + 24, year, 'end');
  for (let i = 0; i < count / per; i++) {
    const part = Math.min(1, count / per - i);
    make('path', { d: tree(60 + i * size, y, size - 4), fill: '#2f8a3a', 'fill-opacity': part < 1 ? 0.4 : 1 });
  }
});

const svg = document.querySelector('svg');
function make(tag, attrs) {
  const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (const k in attrs) n.setAttribute(k, attrs[k]);
  svg.appendChild(n);
  return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
  return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
  const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
  t.textContent = str;
  return t;
}