Avatar

by Nicolas PUJOL

HTML

<div id="avatar" class="avatar"></div>

CSS

.avatar > div {
    float:left;
}

JavaScript

var avatar = document.getElementById("avatar");

genAvatar("245f785b4106251d4c8fa6c5c4f4e3d7", avatar, 3);
genAvatar("2477c78a4d9e2a742e96f75588da4f20", avatar, 3);
genAvatar("6695463d189291aa673c5ef0cf5d921b", avatar, 3);
genAvatar("dfb37ae77e202acfe9c27f646ca4a31e", avatar, 3);

genAvatar("ad9889d06374558065884870d8a52be1", avatar, 5);
genAvatar("76b3ccb13202b503ce998613ace4abed", avatar, 5);
genAvatar("1d75127c8490c017ef59a2c668486fb1", avatar, 5);
genAvatar("226fae0bd44e0f43a69c091797b3f814", avatar, 5);

genAvatar("9a044ff2320e6a452d5b84ed67a105b3", avatar, 7);
genAvatar("75bc23a5c07460127f471d7667ef73c9", avatar, 7);
genAvatar("43a92195c0cdb98ba3f95d712950d41a", avatar, 7);
genAvatar("9dd1284a8eceeb106e373fe6ce00ce7b", avatar, 7);

genAvatar("781963c692da2850cebafc663a4046a1", avatar, 9);
genAvatar("45f1699855760eb28e86d60f2f098f94", avatar, 9);
genAvatar("5252c71592625cb6a871d2ba68191026", avatar, 9);
genAvatar("7bfb851bfa3426df9905b48db47c99e6", avatar, 9);

function genAvatar(str, wrapper, s) {
    var wrap = document.createElement("div");
    wrapper.appendChild(wrap);
    var hash = toHex(str);
    while (hash.length < s * s) {
        hash += hash;
    }
    wrap.setAttribute("id", "a" + hash.substr(6, 6));
    wrap.setAttribute("style", "width:" + (s * 20) + "px;height:" + (s * 20) + "px;border:1px solid black;padding:10px;");
    var color = hash.substr(0, 6);
    for (var x = 0; x < s; x++) {
        for (var y = 0; y < s; y++) {
            var node = document.createElement("span");
            wrap.appendChild(node);
            node.setAttribute("style", "float:left;width:20px;height:20px;");
            if ((y > ((s - 1) / 2) && parseInt(hash[(x * s) + ((s - 1) - y)], 16) % 2 === 0) || (y <= ((s - 1) / 2) && parseInt(hash[(x * s) + y], 16) % 2 === 0)) {
                node.setAttribute("style", "float:left;width:20px;height:20px;background-color:#" + color + ";");
            }
        }
    }
}

function toHex(str) {
    var hex = '';
    for...