title: arcs in raphael js Draw like a gauge
body: <p>My circle starts from 12 o clock. But I need to start from 7 and end at 5 . Always  starts horizontally  but I  need to start vertically . Also how to add Effects like shadow etc.</p>
  
  <pre><code>var amount = ("80");
  
  
  var archtype = Raphael("canvas", 600, 400);
  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
      };
  };
  
  //make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
  var my_arc = archtype.path().attr({
      "stroke": "#f00",
      "stroke-width": 14,
      arc: [200, 200, 0, 100, 60]
  });
  
  my_arc.animate({
      arc: [200, 200, amount, 100, 60]
  }, 1500, "bounce");
  </code></pre>