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:
SVGKit with JSBin experiment by myself
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); }
Discussion