Javascript line around a circle

Question

Interesting!

The black circle in the middle is just an absence of curves.

The "lines" are cubic Bezier curves.

The beziers appear to be anchored on both ends to the circle circumference at intervals.

Here's my try at a simplified version of that PI: http://jsfiddle.net/m1erickson/Ju6E8/

This could be addictive so I'm leaving my attempt simple!

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:50px; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var PI2=Math.PI*2;
    var cx=150;
    var cy=150;
    var r=100;

    ctx.arc(cx,cy,r,0,Math.PI*2);
    ctx.closePath();
    ctx.stroke();

    for(var a=0;a<PI2;a+=PI2/20){
        ctx.strokeStyle="blue";
        curve(a,PI2/2.5,25);
        ctx.strokeStyle="green";
        curve(a,PI2/5,50);
        ctx.strokeStyle="red";
        curve(a,PI2/10,75);
    }

    function curve(rotation,offset,innerRadius){
        var x1=cx+r*Math.cos(rotation);
        var y1=cy+r*Math.sin(rotation);
        var x2=cx+innerRadius*Math.cos(rotation+offset/3.5);
        var y2=cy+innerRadius*Math.sin(rotation+offset/3.5);
        var x3=cx+innerRadius*Math.cos(rotation+offset/1.5);
        var y3=cy+innerRadius*Math.sin(rotation+offset/1.5);
        var x4=cx+r*Math.cos(rotation+offset);
        var y4=cy+r*Math.sin(rotation+offset);
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.bezierCurveTo(x2,y2,x3,y3,x4,y4);
        ctx.stroke();
    }


    $("#stop").click(function(){});

}); // end $(function(){});
</script>

</head>

<body>
    <button id="stop">Stop</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>