<style>
.identicon { width:30px;height:30px; }
</style>
<canvas class='identicon' data-username='Benjamin'></canvas>
<canvas class='identicon' data-username='8.8.8.8'></canvas>
<canvas class='identicon' data-username='8.8.4.4'></canvas>
<canvas class='identicon' data-username='yzalis'></canvas>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.identicon').each(function() {
m=md5($(this).data('username'));
p = m.match(/(.{1,2})/g);
q = p.map((_,i)=>p[i][0]>'4'?1:0);
p.reverse();
r = [0,0,0]
f = '#'+r.map((_,i)=>p[i][0]+"0").join('');
g = '#0000';
a = [0,0,0,0,0]
b = a.map((_,i)=>a.map((_,j)=>q[i*3+j]));
t=$(this)[0].getContext('2d');
t.scale(60,30);
b.map((c,i)=>c.map((_,j)=>{t.fillStyle=j>=3?c[j==3?1:0]?f:g:c[j]?f:g;t.fillRect(j,i,1,1)}))
})
</script>
