title: Raphael.js: Drawing a circle with an edge border and a fill colour
body: <p>drawing SVGs with numbers is confusing but very, very useful. By modding other people's examples, I have a Raphael.js function that takes 60 seconds to draw a thick green line around a circle with text in the center of it. Here it is in JSFiddle form, with a black background on the container Div to show that there is currently no background colour on the circle:</p>
  
  <p><a href="http://jsfiddle.net/8NZfU/1/" rel="nofollow">http://jsfiddle.net/8NZfU/1/</a></p>
  
  <p>Here's the JS: </p>
  
  <pre><code>//60s circular timer
  function timer60s() {
  
  var archtype = Raphael("canvas60s", 200, 200);
  var set = archtype.set();
  
  function drawCircle() {
    var archtype = Raphael("canvas60s", 200, 200);
    archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
      var alpha = 360 / total * value,
          a = (90 - alpha) * Math.PI / 180,
          x = xloc + R * Math.cos(a),
          y = yloc - R * Math.sin(a),
          path;
      if (total == value) {
        path = [
            ["M", xloc, yloc - R],
            ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
        ];
      } else {
        path = [
            ["M", xloc, yloc - R],
            ["A", R, R, 0, +(alpha &gt; 180), 1, x, y]
        ];
      }
      return {
         path: path
      };
    };
  
  
    var my_arc = archtype.path().attr({
        "stroke": "#339933",
        "stroke-width": 10,
        arc: [100, 100, 0, 100, 50]
    });
  
  
  
    my_arc.animate({
       arc: [100, 100, 100, 100, 50]
    }, 60000);
  
  
  } //end drawCircle
  
  
  
  
  
      drawCircle();
  
    } // end timer60s
  
    timer60s();
  </code></pre>
  
  <p>What I want is to create the effect of a white background on the whole circle inside of where the arc is drawn. I also want to add static thin green borders to either side of the arc, so that it appears that the arc is slowly filling in between the lines.</p>
  
  <p>I haven't had any success drawing this background + borders in either CSS or Raphael- can anyone suggest an approach that could work, based on my JSFiddle?</p>