title: RaphaelJS - I need help understanding a transform
body: <p>I have a question about the following demo - <a href="http://raphaeljs.com/hand.html" rel="nofollow">http://raphaeljs.com/hand.html</a>.</p>
  
  <p>Here is code from the sample...</p>
  
  <pre><code>var r = Raphael("holder", 640, 480), angle = 0;
  while (angle &lt; 360) {
      var color = Raphael.getColor();
      (function(t, c) {
          r.circle(320, 450, 20).attr({
              stroke : c,
              fill : c,
              transform : t,
              "fill-opacity" : .4
          }).click(function() {
              s.animate({
                  transform : t,
                  stroke : c
              }, 2000, "bounce");
          }).mouseover(function() {
              this.animate({
                  "fill-opacity" : .75
              }, 500);
          }).mouseout(function() {
              this.animate({
                  "fill-opacity" : .4
              }, 500);
          });
      })("r" + angle + " 320 240", color);
      angle += 30;
  }
  Raphael.getColor.reset();
  var s = r.set();
  s.push(r.path("M320,240c-50,100,50,110,0,190").attr({
      fill : "none",
      "stroke-width" : 2
  }));
  s.push(r.circle(320, 450, 20).attr({
      fill : "none",
      "stroke-width" : 2
  }));
  s.push(r.circle(320, 240, 5).attr({
      fill : "none",
      "stroke-width" : 10
  }));
  s.attr({
      stroke : Raphael.getColor()
  });
  </code></pre>
  
  <p>The question I have is about the following line of code...</p>
  
  <pre><code>("r" + angle + " 320 240", color);
  </code></pre>
  
  <p>In the anonymous function the circle is initially drawn at 320, 450 with a radius of 20.   Then a transform is applied,   for example ("r30 320 240") when the angle is 30.  </p>
  
  <p>How does this transform work?  The way I read this transform is to rotate the circle 30 degrees around 320,450 , then move 320 horizontally (to the right) and 240 vertically down.    </p>
  
  <p>But i'm obviously reading this transform wrong because this is not what is happening.</p>
  
  <p>What am i missing?   </p>
  
  <p>Thanks</p>