Word Cloud in HTML, CSS and JavaScript

const words = [['friendly', 142], ['clean', 128], ['location', 118], ['small', 48], ['noisy', 41]];
const ctx = document.createElement('canvas').getContext('2d');
const placed = [], cx = 300, cy = 150;

words.forEach(([word, count]) => {
  const size = 14 + Math.sqrt(count) * 3; ctx.font = size + 'px sans-serif';
  const w = ctx.measureText(word).width, h = size;
  for (let t = 0; t < 2000; t++) {
    const x = cx + t * 0.9 * Math.cos(t * 0.35) - w / 2, y = cy + t * 0.6 * Math.sin(t * 0.35);
    if (placed.some(p => x < p.x + p.w && x + w > p.x && y - h < p.y && y > p.y - p.h)) continue;
    placed.push({ x, y, w, h });
    make('text', { x, y, 'font-size': size }).textContent = word;
    break;
  }
});

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