JS CALCULATOR SVG ICON

<!DOCTYPE html>
<html lang="en">
<head>
<title>BIBLE SVG JS</title>

<style>

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


#boxe svg {
display:block;
width:100%;
height:100%;
margin:0 auto;
}
</style>

<script>

function calcuSVGenerator(){
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>');

cubeSVG(52,62,'#596674',10,1);

cubeSVG(45,10,'#85CDEA',13,3);

cubeSVG(13,10,'#CC9966',13,15);
cubeSVG(13,10,'#CC9966',29,15);
cubeSVG(13,10,'#CC9966',45,15);

cubeSVG(13,10,'#CC9966',13,27);
cubeSVG(13,10,'#CC9966',29,27);
cubeSVG(13,10,'#CC9966',45,27);

cubeSVG(13,10,'#CC9966',13,39);
cubeSVG(13,10,'#CC9966',29,39);
cubeSVG(13,10,'#CC9966',45,39);

cubeSVG(13,10,'#CC9966',13,51);
cubeSVG(13,10,'#CC9966',29,51);
cubeSVG(13,10,'#CC9966',45,51);


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


function cubeSVG(W,H,F,X,Y){
var w = W - 10;
var h = H - 10;

var cube =[3,0,7,0,8.5,0.4,9.1,0.9,9.6,1.5,10,3,10,7,9.6,8.5,9.1,9.1,8.5,9.6,7,10,3,10, 1.5,9.6, 0.9,9.1, 0.4,8.5, 0,7, 0,3, 0.4,1.5, 0.9,0.9, 1.5,0.4, 3,0,5,0];

for(i = 0; i < cube.length;i = i + 2){
var j = i + 1;
cube[i] = cube[i] + X;
cube[j] = cube[j] + Y;
}

for(i = 2; i < 21;i = i + 2){cube[i] = cube[i] + w;}
for(i = 13; i < 31;i = i + 2){cube[i] = cube[i] + h;}

var a = "";

for(i = 0; i < cube.length;i = i + 2){

var a = a + cube[i]+','+cube[i+1]+' ';
}

document.write('<polyline fill="'+F+'" stroke="#020202" stroke-width="1" points="'+a+'"><\/polyline>');
}
}

</script>

</head>
<body>
<script>

calcuSVGenerator();

</script>
</body>
</html>