diff --git a/src/components/dots.js b/src/components/dots.js
index 5372353..fc17a9a 100644
--- a/src/components/dots.js
+++ b/src/components/dots.js
@@ -45,6 +45,7 @@ function int_range(v1, v2) {
 
 class DotMaker {
 	constructor(width) {
+		console.log(width);
 		this.width = width;
 		this.cx = 0.5 * width;
 		this.cy = 0.5 * width;
diff --git a/src/index.md b/src/index.md
index bc112ba..0dfe2ea 100644
--- a/src/index.md
+++ b/src/index.md
@@ -29,7 +29,16 @@ const MAG = 2;
 const WIDTH = 20;
 const HEIGHT = WIDTH;
 
-const dm = new DotMaker(WIDTH);
+const cell = view(Inputs.range([1,20], {value: 10, step:1, label: "Cell size"}));
+const mag = view(Inputs.range([1,5], {value: 2, step:1, label: "Magnificaton"}));
+const width = view(Inputs.range([1,40], {value: 20, step:1, label: "Width"}));
+const height = view(Inputs.range([1,40], {value: 20, step:1, label: "Height"}));
+
+
+```
+
+
+```js
 
 const bg_input = Inputs.color({label: "background", value: d3.color("yellow").formatHex()});
 const bg = view(bg_input);
@@ -118,6 +127,8 @@ if( palette_fn ) {
 
 ```js
 
+const dm = new DotMaker(width, height);
+
 const dots1 = dm.dots(1 / m1, n1, false);
 const dots2 = dm.dots(1 / m2, n2, false);
 
@@ -129,9 +140,9 @@ const dots2 = dm.dots(1 / m2, n2, false);
 
 
 const svg = d3.create("svg")
-  .attr("width", WIDTH * CELL * MAG)
-  .attr("height", HEIGHT * CELL * MAG)
-  .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);
+  .attr("width", width * cell * mag)
+  .attr("height", height * cell * mag)
+  .attr("viewBox", [ 0, 0, width, height ]);
 
 
 svg.append("clipPath")
@@ -139,8 +150,8 @@ svg.append("clipPath")
     .append("rect")
     .attr("x", 0)
     .attr("y", 0)
-    .attr("width", WIDTH)
-    .attr("height", HEIGHT);
+    .attr("width", width)
+    .attr("height", height);
 
 
 // re transitions: they should only run when updating the palette and
@@ -160,8 +171,8 @@ bg_g.selectAll("rect")
   .join("rect")
   .attr("x", 0)
   .attr("y", 0)
-  .attr("width", WIDTH)
-  .attr("height", WIDTH)
+  .attr("width", width)
+  .attr("height", height)
   .attr("fill", (d) => d.bg)
 ;