<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" onload="initBoard();" id="chessBoard_01">
<rect id="Border" x="0" y="0" width="100" height="100" fill="none" stroke="black"/>
<g id="board_01"/>
<script type="application/ecmascript">
<![CDATA[
 var unicPrefix  = '_01';
 var klekaColors = ["#FFFACD","#DAA520"];
 var kletkaChars = ['A','B','C','D','E','F','G','H'];
 var peshkaPath  = "M2 8 A1.5,1.5 0 0,1 3.5,6 A1.5,4 0 0,1 6.5,6 A1.5,1.5 0 0,1 8 8 z";
 var nextStep    = 0;
 var moves       = ['E2E4','D7D5','E4D5','E7E5','D5E6E5','F7E6']; 

 function kletkaXY(kletka){
  return {"x":(kletka.toUpperCase().charCodeAt(0)-64)*10,"y":(9-kletka.substring(1,2))*10};
 }

 function createFig(path,color){
     var fig = document.createElementNS("http://www.w3.org/2000/svg",'path');
     fig.setAttribute('d',path);
     fig.setAttribute('fill',color?'white':'black');
     fig.setAttribute('stroke',color?'black':'white');
     fig.setAttribute('stroke-width','0.3');
     return fig;
 }

 function initBoard(){
  var svg=document.getElementById("board"+unicPrefix);
  while (svg.hasChildNodes()) {  
    svg.removeChild(svg.firstChild);
  }
  var color = 1;
  for (var i=0;i<kletkaChars.length;i++) {
   for (var j=1;j<=8;j++) {
    var kletkaNum=kletkaChars[i]+j+unicPrefix;
    var kletka = document.createElementNS("http://www.w3.org/2000/svg",'g');
    kletka.id ='kletka'+kletkaNum;
    var rect = document.createElementNS("http://www.w3.org/2000/svg",'rect');
    rect.setAttribute('stroke','black');
    rect.setAttribute('fill',klekaColors[color]);
    rect.setAttribute('width',10);
    rect.setAttribute('height',10);
    var x = (i+1)*10;
    var y = 90-j*10;
    rect.setAttribute('x',x);
    rect.setAttribute('y',y);
    kletka.appendChild(rect);
    if (j==2) {
     var peshka = createFig(peshkaPath,true);
     peshka.id = 'fig'+kletkaNum;
     peshka.setAttribute('transform','translate('+x+' '+y+')');
     kletka.appendChild(peshka);
    }
    if (j==7) {
     var peshka = createFig(peshkaPath,false);
     peshka.id = 'fig'+kletkaNum;
     peshka.setAttribute('transform','translate('+x+' '+y+')');
     kletka.appendChild(peshka);
    }
    svg.appendChild(kletka);
    color ^= 1;
   }
   color ^= 1;
  }
  nextStep = 0;
  setTimeout(nextMove,1000);
 }

 function nextMove() {
  if (nextStep<moves.length) {
   frm = moves[nextStep].substring(0,2);
   tto = moves[nextStep].substring(2,4);
   ddl = moves[nextStep].substring(4,6);
   var fig = document.getElementById("fig"+tto+unicPrefix);
   var kletkaTo = document.getElementById("kletka"+tto+unicPrefix);;
   if ((fig!=null)&&(kletkaTo!=null)) {
    kletkaTo.removeChild(fig);
   }
   fig = document.getElementById("fig"+frm+unicPrefix);
   var kletkaFrom = document.getElementById("kletka"+frm+unicPrefix);;
   if ((fig!=null)&&(kletkaTo!=null)&&(kletkaFrom!=null)) {
    kletkaFrom.removeChild(fig);
    fig.id="fig"+tto+unicPrefix;
    var xy = kletkaXY(tto);
    fig.setAttribute('transform','translate('+xy.x+' '+xy.y+')');
    kletkaTo.appendChild(fig);
   }
   fig = document.getElementById("fig"+ddl+unicPrefix);
   kletkaTo = document.getElementById("kletka"+ddl+unicPrefix);;
   if ((fig!=null)&&(kletkaTo!=null)) {
    kletkaTo.removeChild(fig);
   }
   nextStep++;
   setTimeout(nextMove,1000);
  } else {
   setTimeout(initBoard,3000);
  }
 }

 function refreshBoard() {
  var svg=document.getElementById("chessBoard"+unicPrefix);
  svg.innerHTML = svg.innerHTML;
 }
]]>
</script></svg>