Writing SVG's with SVGKit and JSBin

I've been using FabLab Amersfoort's Parametric SVG editor for a while now, a great online tool for writing scalable / parametric vector images. Recently I found out about SVGKit, a Javascript library based on MochiKit which makes it easy to create SVG's from Javascript.

FabLab Amersfoort's pSVG editor by Harmen Zijp & Peter Uithoven: FabLab Amersfoort's pSVG editor by Harmen Zijp & Peter Uithoven

SVGKit with JSBin experiment by myself SVGKit with JSBin

You can try it here and improve the sourcecode you like.

Add two circles the svg group <g> called root:

//Circles
var innerRadius = 322;
var outerRadius = 390;
 
appendChildNodes(
  root, 
  svg.CIRCLE({cx:0, cy:0, r:outerRadius}),
  svg.CIRCLE({cx:0, cy:0, r:innerRadius})
);

Clone SVG nodes and transform them in a for loop:

//Lockers
var lockerY = -338;
var lockerAngleOffset = 85; //75;
 
appendChildNodes(locker = svg.G(),
  svg.CIRCLE({r:3,cx:-48/2}), //left
  svg.CIRCLE({r:3,cx:48/2}), //right
  svg.RECT({x:-5,y:-8,width:10,height:16,rx:4,ry:4}) //middle
);
 
for (i=0; i<3; i++) {
  var locker2 = locker.cloneNode(true); //recursive
  svg.rotate(locker2,i*120+lockerAngleOffset); //note: never rotate 0 degrees
  svg.translate(locker2,0,lockerY);
  appendChildNodes(root,locker2);
}