// Created on savesnippets.com · https://savesnippets.com/d5DOwFH6udeeDt
function initialsAvatar(name, size = 64) {
  const initials = name.split(' ').slice(0, 2).map((w) => w[0].toUpperCase()).join('');
  const hue      = [...name].reduce((sum, c) => sum + c.charCodeAt(0), 0) % 360;
  const canvas   = Object.assign(document.createElement('canvas'), { width: size, height: size });
  const ctx      = canvas.getContext('2d');

  ctx.fillStyle = `hsl(${hue}, 55%, 45%)`;
  ctx.beginPath();
  ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = '#fff';
  ctx.font      = `${Math.round(size * 0.38)}px sans-serif`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(initials, size / 2, size / 2);

  return canvas.toDataURL();
}

// Usage
const src = initialsAvatar('Alice Johnson');
document.querySelector('img.avatar').src = src;