function element(name, attr, content) {
  const el = document.createElementNS('http://www.w3.org/2000/svg', name);
  if(attr) {
    Object.entries(attr).forEach(([key,value]) => el.setAttribute(key,value));
  }
  if(content !== undefined) {
    el.innerHTML = content;
  }
  return el;
}

const {cos, sin, sqrt, PI} = Math;
const [x1,y1] = [2,0];
const [x2,y2] = [2*cos(PI/3), 2*sin(PI/3)];

function hex_to_screen([i,j]) {
  return [x1*i + x2*j, y1*i + y2*j];
}

const svg = document.querySelector('svg');

const bg = element('g');
svg.append(bg);

for(let i=-8;i<8;i++) {
  for(let j=-8;j<8;j++) {
    const [cx,cy] = hex_to_screen([i,j]);
    const bg_tri = element(
      'path', 
      {
        fill: 'lightblue',
        d: `M ${cx} ${cy} L ${cx+x1} ${cy+y1} ${cx+x2} ${cy+y2}`
      }
    );
    bg.append(bg_tri);
  }
}

function make_cell(i,j) {
  const [cx,cy] = hex_to_screen([i,j]);

  const f = i + j;
  const g = element('g', {
    style: `
      transform: translate(${cx}px, ${cy}px) rotate(var(--turn));
      --f: ${f};
    `
  });
  svg.append(g);
  
  const circle = element('circle',{
    r: 1,
  });
  g.append(circle);
  
  const points = [];
  for(let n=0;n<6;n++) {
    const an = n*PI/3;
    points.push([cos(an),sin(an)]);
  }
  const path = element('path', {
    fill: 'green',
    d: `M 0 0 ` + [0,1,2].map(n => `L ${points[2*n][0]} ${points[2*n][1]} A 1 1 0 0 1 ${points[2*n+1][0]} ${points[2*n+1][1]} L 0 0`).join(' ')
  });
  g.append(path);

}

make_cell(0,0);
for(let s=1;s<4;s++) {
    make_cell(s,0);
    for(let r=1;r<=s;r++) {
      const [i,j] = [s,-r];
      make_cell(s,-r);
      make_cell(s-r,-s);
      make_cell(-r,r-s);
      make_cell(-s,r);
      make_cell(r-s,s);
      make_cell(r,s-r);
    }
}