diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 9d95f6e..e578ba8 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -19,7 +19,7 @@
 
 	var rings = [{
 		radius: 3,
-		width: 8,
+		width: 4,
 		switches: model.edgeSwitches,
 		className: 'edge'
 	}, {
@@ -46,7 +46,9 @@
 			return data;
 		}))
 			.enter().append("svg:g")
-			.attr("class", "square")
+			.attr("id", function (_, i) {
+				return data.className + i;
+			})
 			.attr("transform", function(_, i) {
 				return "rotate(" + i * k + ")translate(" + data.radius * 150 + ")rotate(" + (-i * k) + ")";
 			})
@@ -79,10 +81,13 @@
 		d.scale = 2;
 
 		svg.selectAll('.edge').data(model.edgeSwitches).transition().duration(100)
-			.attr("transform", function(data, i) {
-				var m = document.querySelector('svg').getTransformToElement().inverse();
-					m = m.scale(data.scale);
-				return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
+			// .attr("transform", function(data, i) {
+			// 	var m = document.querySelector('svg').getTransformToElement().inverse();
+			// 		m = m.scale(data.scale);
+			// 	return "matrix( " + m.a + " " + m.b + " " + m.c + " " + m.d + " " + m.e + " " + m.f + " )";
+			// })
+			.attr("r", function (data, i) {
+				return rings[0].width * data.scale;
 			})
 	}
 
@@ -99,7 +104,7 @@
 		// do it again in 1s
 		setTimeout(function () {
 			sync(svg)
-		}, 1000);
+		}, 5000);
 	});
 }