title: How would I go about editing the polar clock counter clockwise?
body: <p>From here: <a href="http://raphaeljs.com/polar-clock.html" rel="nofollow">http://raphaeljs.com/polar-clock.html</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Raphaël · Polar Clock&lt;/title&gt;
          &lt;link rel="stylesheet" href="demo.css" media="screen"&gt;
          &lt;link rel="stylesheet" href="demo-print.css" media="print"&gt;
          &lt;script src="raphael.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              window.onload = function () {
                  var r = Raphael("holder", 600, 600),
                      R = 200,
                      init = true,
                      param = {stroke: "#fff", "stroke-width": 30},
                      hash = document.location.hash,
                      marksAttr = {fill: hash || "#444", stroke: "none"},
                      html = [
                          document.getElementById("h"),
                          document.getElementById("m"),
                          document.getElementById("s"),
                          document.getElementById("d"),
                          document.getElementById("mnth"),
                          document.getElementById("ampm")
                      ];
                  // Custom Attribute
                  r.customAttributes.arc = function (value, total, R) {
                      var alpha = 360 / total * value,
                          a = (90 - alpha) * Math.PI / 180,
                          x = 300 + R * Math.cos(a),
                          y = 300 - R * Math.sin(a),
                          color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)"),
                          path;
                      if (total == value) {
                          path = [["M", 300, 300 - R], ["A", R, R, 0, 1, 1, 299.99, 300 - R]];
                      } else {
                          path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha &gt; 180), 1, x, y]];
                      }
                      return {path: path, stroke: color};
                  };
  
                  drawMarks(R, 60);
                  var sec = r.path().attr(param).attr({arc: [0, 60, R]});
                  R -= 40;
                  drawMarks(R, 60);
                  var min = r.path().attr(param).attr({arc: [0, 60, R]});
                  R -= 40;
                  drawMarks(R, 12);
                  var hor = r.path().attr(param).attr({arc: [0, 12, R]});
                  R -= 40;
                  drawMarks(R, 31);
                  var day = r.path().attr(param).attr({arc: [0, 31, R]});
                  R -= 40;
                  drawMarks(R, 12);
                  var mon = r.path().attr(param).attr({arc: [0, 12, R]});
                  var pm = r.circle(300, 300, 16).attr({stroke: "none", fill: Raphael.hsb2rgb(15 / 200, 1, .75).hex});
                  html[5].style.color = Raphael.hsb2rgb(15 / 200, 1, .75).hex;
  
                  function updateVal(value, total, R, hand, id) {
                      if (total == 31) { // month
                          var d = new Date;
                          d.setDate(1);
                          d.setMonth(d.getMonth() + 1);
                          d.setDate(-1);
                          total = d.getDate();
                      }
                      var color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)");
                      if (init) {
                          hand.animate({arc: [value, total, R]}, 900, "&gt;");
                      } else {
                          if (!value || value == total) {
                              value = total;
                              hand.animate({arc: [value, total, R]}, 750, "bounce", function () {
                                  hand.attr({arc: [0, total, R]});
                              });
                          } else {
                              hand.animate({arc: [value, total, R]}, 750, "elastic");
                          }
                      }
                      html[id].innerHTML = (value &lt; 10 ? "0" : "") + value;
                      html[id].style.color = Raphael.getRGB(color).hex;
                  }
  
                  function drawMarks(R, total) {
                      if (total == 31) { // month
                          var d = new Date;
                          d.setDate(1);
                          d.setMonth(d.getMonth() + 1);
                          d.setDate(-1);
                          total = d.getDate();
                      }
                      var color = "hsb(".concat(Math.round(R) / 200, ", 1, .75)"),
                          out = r.set();
                      for (var value = 0; value &lt; total; value++) {
                          var alpha = 360 / total * value,
                              a = (90 - alpha) * Math.PI / 180,
                              x = 300 + R * Math.cos(a),
                              y = 300 - R * Math.sin(a);
                          out.push(r.circle(x, y, 2).attr(marksAttr));
                      }
                      return out;
                  }
  
                  (function () {
                      var d = new Date,
                          am = (d.getHours() &lt; 12),
                          h = d.getHours() % 12 || 12;
                      updateVal(d.getSeconds(), 60, 200, sec, 2);
                      updateVal(d.getMinutes(), 60, 160, min, 1);
                      updateVal(h, 12, 120, hor, 0);
                      updateVal(d.getDate(), 31, 80, day, 3);
                      updateVal(d.getMonth() + 1, 12, 40, mon, 4);
                      pm[(am ? "hide" : "show")]();
                      html[5].innerHTML = am ? "AM" : "PM";
                      setTimeout(arguments.callee, 1000);
                      init = false;
                  })();
              };
          &lt;/script&gt;
          &lt;style media="screen"&gt;
              #holder {
                  height: 600px;
                  margin: -300px 0 0 -300px;
                  width: 600px;
              }
              #time {
                  text-align: center;
                  font: 100 3em "Helvetica Neue", Helvetica, Arial, sans-serif;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="holder"&gt;&lt;/div&gt;
          &lt;div id="time"&gt;
              &lt;span id="h"&gt;&lt;/span&gt;:&lt;span id="m"&gt;&lt;/span&gt;:&lt;span id="s"&gt;&lt;/span&gt; &lt;span id="ampm"&gt;&lt;/span&gt; · &lt;span id="d"&gt;&lt;/span&gt;/&lt;span id="mnth"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;p id="copy"&gt;Demo of &lt;a href="http://raphaeljs.com/"&gt;Raphaël&lt;/a&gt;—JavaScript Vector Library&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How would I go about getting only the minutes and turn it counter clockwise?</p>
  
  <p>Here is a little image of what I'm taking about: <a href="http://i.imgur.com/Pvmkvs7.png" rel="nofollow">http://i.imgur.com/Pvmkvs7.png</a></p>
  
  <p>Would there also be a way to edit he color easily or edit the size with CSS?</p>