CalRender() is svg icon

<!DOCTYPE html>
<html lang="en">
<head>
<title>calRender() SVG JS</title>

<style>

body {background-color:black;}


#boxe {
display:block;
margin:0 auto;
height:300px;
width:300px;
}


#boxe svg {
width:100%;
height:100%;
margin:0 auto;
}

</style>

</head>
<body>


<script>

function calRender(){
var pieces = [
'#FF3636','0,5 32,5 32,20 0,20 0,5',
'#F40000','32,5 64,5 64,20 32,20 32,5',
'#68544F','6,0 6,10 9,10 9,0 6,0',
'#68544F','22,0 22,10 25,10 25,0 22,0',
'#68544F','39,0 39,10 42,10 42,0 39,0',
'#68544F','55,0 55,10 58,10 58,0 55,0',
'#EDE9E8','0,20 0,64 32,64 32,20 0,20',
'#DFD7D5','32,20 32,64 64,64 64,20 32,20',
'#D2C5C2','9,28 9,40 21,40 21,28 9,28',
'#D2C5C2','9,45 9,57 21,57 21,45 9,45',
'#D2C5C2','26,28 26,40 32,40 32,28 26,28',
'#D2C5C2','26,45 26,57 32,57 32,45 26,45',
'#C4B3AF','32,28 32,40 38,40 38,28 32,28',
'#C4B3AF','32,45 32,57 38,57 38,45 32,45',
'#C4B3AF','43,28 43,40 55,40 55,28 43,28',
'#C4B3AF','43,45 43,57 55,57 55,45 43,45',
'#C4B3AF','58,64 58,58 64,58'];

document.write('<span id="boxe"><svg viewBox="0 0 64 64">');
document.write('<defs>');
document.write('<pattern id="slate" width="64" height="64" patternUnits="userSpaceOnUse"><g>');

for(i = 0; i < pieces.length;i = i + 2){
var j = i + 1;

document.write('<polyline fill="'+pieces[i]+'" points="'+pieces[j]+'"><\/polyline>');
}

document.write('<\/g><\/pattern><\/defs>');
document.write('<rect x="0" y="0" width="100%" height="100%" fill="url(#slate)" \/>');
document.write('<\/svg><\/span>');
}
calRender();

</script>


</body>
</html>