BIBLE SVG ICON JS

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

<style>

body {background-color:black;}

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


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

}

</style>

</head>
<body>

<script>

function bibleRender(){
var pieces = [
'#A9825A','32,0 32,64 16,64 14,63 13,62 12,60.25 12,3 12.5,2 13.5,0.75 15,0 32,0',
'#7E6142','32,0 48,0 50,0.5 51.25,1.5 52,3 52,57 51,57.75 50.5,59 51,60.25 52,61 52,64 32,64 32,0',
'#FFDC35','30,10 32,8.5 34,10 34,15 39,15 40.5,17 39,19 34,19 34,31 32,32.5 30,31 30,19 25,19 23.5,17 25,15 30,15 30,10',
'#FAC678','52,61 32,61 32,57 52,57 51,57.75 50.5,59 51,60.25 52,61',
'#F5D5A6','32,61 16,61 15.2,60 15,59 15.2,58 16,57 32,57',

];

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>');
}
bibleRender();

</script>


</body>
</html>