<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0px
}
</style>
</head>
<body>
<script type="text/javascript">
var svg = (function(colors){
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = 10
canvas.height = 5
var upscale = 10
var im = ctx.getImageData(0,0,canvas.width,canvas.height)
for (var i = 0; i < im.data.length; i+=4) {
im.data[i] = Math.round(Math.random()*255)
im.data[i+1] = Math.round(Math.random()*255)
im.data[i+2] = Math.round(Math.random()*255)
im.data[i+3] = 255
};
ctx.putImageData(im,0,0)
var url = canvas.toDataURL()
im = new Image()
im.src = url
canvas.width *= upscale
canvas.height *= upscale
ctx.drawImage(im,0,0,canvas.width, canvas.height)
im = ctx.getImageData(0,0,canvas.width,canvas.height)
var xmlns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(xmlns, 'svg')
svg.setAttribute('viewBox',"0 0 "+im.width+" "+im.height)
for (var i = 0; i < im.data.length; i+=4) {
var mindist = 195075
var mincolor = [0,0,0]
var pix = [im.data[i],im.data[i+1],im.data[i+2]]
for (var j = 0; j < colors.length; j++) {
var color = colors[j]
var d0 = color[0] - pix[0]
var d1 = color[1] - pix[1]
var d2 = color[2] - pix[2]
var d = Math.abs(d0)+Math.abs(d1)+Math.abs(d2)
if (d<mindist) {
mindist = d
mincolor = color
}
};
var n = i/4
ctx.fillStyle = 'rgba('+Math.min(mincolor[0]+n%2*20,255)+', '+mincolor[1]+', '+mincolor[2]+',1)'
var elem = document.createElementNS(xmlns, "rect");
elem.setAttributeNS(null,"x",n%im.width);
elem.setAttributeNS(null,"y",Math.floor(n/im.width));
elem.setAttributeNS(null,"width",1.5);
elem.setAttributeNS(null,"height",1.5);
elem.setAttributeNS(null,"fill", 'rgba('+Math.min(mincolor[0]+n%2*20,255)+', '+mincolor[1]+', '+mincolor[2]+',1)');
svg.appendChild(elem);
};
return svg
})([[39, 198, 249], [6, 188, 249], [116, 218, 251], [91, 211, 251]])
document.body.appendChild(svg)
// wrap.appendChild(svg)
// document.body.style.backgroundImage = "url(data:image/svg+xml;utf8,"+wrap.innerHTML+")"
// document.styleSheets[0].insertRule("body {background: url('data:image/svg+xml;utf8,"+wrap.innerHTML+"')}",0)
// ctx.putImageData(im,0,0)
// canvas.style.width = 2000
// canvas.style.height = 2000
// document.body.appendChild(canvas)
</script>
<!-- <script type="text/javascript" src="wolo.js"></script> -->
</body>
</html>