Timeline in HTML, CSS and JavaScript

const events = [[2014.2, 'Founded'], [2016.5, '100 homes'], [2021.7, '1,000 homes'], [2026.6, '5,000 homes']];
const x = year => 40 + (year - 2014) / 13 * 520, mid = 150;

drawLine(20, mid, 580, mid, '#e9e5d6', 5);
events.forEach(([year, title], i) => {
  const up = i % 2 === 0, y = up ? mid - 60 : mid + 60;
  drawLine(x(year), mid, x(year), y, '#e8a300', 2);
  drawCircle(x(year), mid, 7, '#e8a300');
  drawText(x(year), y + (up ? -6 : 16), title, 'middle');
});

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;
}