is a javascript what is modifing the dom of the browser. The code is not made by me. It is just modified to can work with "thousands"
just add the flowing code before </body> tag in your html
<script type="text/javascript">
<!--
var noKarma = "No Karma";
var crossOver = 10; //Cross Over Point from small to large icons
var bbbInt = 100;
var bigInt = 10; //Number of Karma for Big Icon
var smallInt = 2; //Number of Karma for Small Icon
var positive = [
['http://www.webmasterstalks.com/images/reputation_balance.gif'], // Small Karma Icon
['http://www.webmasterstalks.com/images/reputation_green.gif'], // Big Karma Icon
['http://www.webmasterstalks.com/images/reputation_greenh.gif'], // Big Karma Icon
];
var negative = [
['http://www.webmasterstalks.com/images/reputation_neg.gif'], // Small Karma Icon
['http://www.webmasterstalks.com/images/reputation_neg.gif'], // Big Karma Icon
['http://www.webmasterstalks.com/images/reputation_neg.gif'], // Small Karma Icon
];
var noKarma="No Karma";
var td=document.getElementsByTagName('div');
for(i=0; i<td.length; i++) {
if(td.item(i).parentNode.innerHTML.match(/(Points: (-)?(.+?))</i)) {
var iTemp = RegExp.$1;
var iHolder = 'Points: ';
if(RegExp.$3 == '0')
iHolder += noKarma;
else {
var base = (RegExp.$2 == '-')? negative : positive;
var kar = parseInt(RegExp.$3)
var small = Math.round(((kar % bbbInt)%bigInt) / smallInt);
var big = Math.round(((kar-small) % bbbInt) / bigInt);
var bbb = Math.round((kar - (kar % bbbInt)) / bbbInt);
for(bb=0; bb<bbb; bb++)
{
iHolder += '<img src="'+ base[2] +'" alt="'+ bbbInt +' Karma" />';
}
for(b=0; b<big; b++)
{
iHolder += '<img src="'+ base[0] +'" alt="'+ bigInt +' Karma" />';
}
for(s=0; s<small; s++)
{
iHolder += '<img src="'+ base[1] +'" alt="'+ smallInt +' Karma" />';
}
td.item(i).innerHTML = td.item(i).innerHTML.replace(iTemp,iHolder)
}
}
}
//-->
</script>