frenetic.be
simply beautiful.
In this post, we will show you how to make circles using pure CSS. We will then use JavaScript to make a pretty bubbly background.

Making a circle in CSS is straight-forward. All you have to do is a square div (width=height) and add a border radius that is half the width.
<style type="text/css">
div.circle1 {
    width:100px;
    height:100px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    background-color:#FF0000;
    float:left;
    margin-left:10px;
    margin-right:10px;
}
div.circle2 {
    width:100px;
    height:100px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    background-color:rgba(50,255,130,0.2);
    float:left;
    margin-left:10px;
    margin-right:10px;
}

div.circle3 {
    width:100px;
    height:100px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    border:1px dotted blue;
    float:left;
    margin-left:10px;
    margin-right:10px;
}
</style>
The above code will give:
Now that we know how to make circles using CSS, we can make a little JavaScript to fill a div with random circles ...
or with regular patterns ...