JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<div id="avatar"></div>

CSS

#avatar {
  border : 1px solid gray;
  height : 200px;
  width: 200px;
}

JavaScript

let shapes = [
  'M25,25 L75,25 L75,75 L25,75 Z',
  'M50,25 L100,25 L75,75 L25,75 Z',
  'M75,25 L100,75 L25,75 L50,25 Z',
  'M25,25 L25,75 L75,75 L75,25 Z',
  'M25,25 L75,75 L25,75 L75,25 Z',
  'M50,25 L100,50 L75,75 L25,50 Z',
  'M25,25 L75,25 L100,75 L75,75 L25,75 Z',
  'M25,25 L75,25 L100,50 L75,75 L25,75 Z',
  'M25,25 L100,75 L25,75 L100,25 Z',
  'M25,25 L75,25 L100,50 L100,75 L75,75 L25,75 Z'
];

let colors = [
  '#FF0000', '#00FF00', '#0000FF',
  '#FFFF00', '#00FFFF', '#FF00FF',
  '#800000', '#008000', '#000080',
  '#808000', '#008080', '#800080'
];

function getColor(hash, idx) {
  let color = colors[hash.charCodeAt(idx) % colors.length];
  return color;
}

function GenerateSvgAvatar(emailHash) {
  let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('viewBox', '0 0 100 100');

  let background = getBackgroundShape(emailHash);
  svg.appendChild(background);

  let border = getBorder(emailHash);
  svg.appendChild(border);

  let text = getText(emailHash);
  svg.appendChild(text);

  let shape = getShape(emailHash, 6);
  svg.appendChild(shape);

  let face = createFace(emailHash);
  svg.appendChild(face);

  return svg;
}

function getBackgroundColor(emailHash) {
  let hash = emailHash.trim().toLowerCase();
  let hue = hash.length % 360;
  let saturation = 50 + (parseInt(hash, 16) % 50);
  let lightness = 50 + (parseInt(hash, 16) % 20);
  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}


function getBorder(emailHash) {
  let hash = emailHash.trim().toLowerCase();
  let borderWidth = parseInt(hash, 16) % 4;
  if (borderWidth > 0) {
    let options = {
      width: 100,
      height: 100,
    };
    let borderCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    borderCircle.setAttribute('cx', options.width / 2);
    borderCircle.setAttribute('cy', options.height / 2);
    borderCircle.setAttribute('r', options.width / 2 - borderWidth);
    borderCircle.setAttribute('fill', 'none');
   ...