hsl rainbows

by toubia95

HTML

<div id="rainbow1"></div>
<div id="rainbow2"></div>

CSS

#rainbow1, #rainbow2 {
    display: block;
    float: left;
    width : 20px;
    height: 1px;
    background-color:none;
    margin-right: 10px;
}

JavaScript

function g2y(h) {
    var y = h;
    if (h <= 120) y = Math.round(h / 2);
    if (h > 120 && h <= 240) y = Math.round(((h - 120) * (3 / 2)) + 60);
    return y;
}

var lum = 50;

var bsr1 = "0px 1px 0px 0px hsl(0, 100%, '+lum+'%)", bsr2 = "0px 1px 0px 0px hsl(0, 100%, '+lum+'%)";
for(var i=0; i<360; i++){
	bsr1 = bsr1+', 0px '+i+'px 0px 0px hsl('+i+', 100%, '+lum+'%)';
    bsr2 = bsr2+', 0px '+i+'px 0px 0px hsl('+g2y(i)+', 100%, '+lum+'%)';
}
$('#rainbow1').css('box-shadow',bsr1);
$('#rainbow2').css('box-shadow',bsr2);