hsl circular rainbow

by toubia95

HTML

<div id="circular-rainbow"></div>

CSS

body {
    padding: 20px;
}
#circular-rainbow {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 150px; 
    background-color: red;
}
#circular-rainbow:before {
    content:" ";
    position: absolute;
    top: 75px;
    left: 75px;
    width: 150px;
    height: 150px;
    border-radius: 75px; 
    background-color: white;
}

JavaScript

/* http://lea.verou.me/specs/conical-gradient/ */
/* http://stackoverflow.com/questions/6307857/circle-with-conical-gradient */