diff --git a/src/components/dots.js b/src/components/dots.js
index 6af7a83..9f0bbed 100644
--- a/src/components/dots.js
+++ b/src/components/dots.js
@@ -17,4 +17,6 @@ export function make_dots(m, n, cell, max) {
 		}
 	}
 	return ps;
-}
\ No newline at end of file
+}
+
+
diff --git a/src/index.md b/src/index.md
index c957590..9592c3d 100644
--- a/src/index.md
+++ b/src/index.md
@@ -4,9 +4,13 @@ toc: false
 
 <h1>poptimal</h1>
 
+<div class="grid grid-cols-2">
+
+  <div class="card">
+
 ```js
 
-import {make_dots} from './components/dots.js'
+import {make_dots, dot_func} from './components/dots.js'
 
 const CELL = 10;
 const WIDTH = 20;
@@ -16,6 +20,8 @@ const bg = view(Inputs.color({label: "background", value: d3.color("yellow").for
 const fg1 = view(Inputs.color({label: "fg1", value: d3.color("red").formatHex()}))
 const m1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m1"}));
 const n1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n1"}));
+const r1 = view(Inputs.range([0, 0.5], {value: 0.3, step: 0.01, label: "radius"}));
+const f1 = view(Inputs.radio(["constant", "right", "left", "up", "down"], {value: "constant"}));
 
 
 const v2 = view(Inputs.toggle({label: "Second grid", value:true}));
@@ -27,19 +33,42 @@ const v2 = view(Inputs.toggle({label: "Second grid", value:true}));
 const fg2 = view(Inputs.color({
   label: "fg2", value: d3.color("blue").formatHex(),
   disabled: !v2
-}))
+}));
 
-const m2 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m2", disabled: !v2}));
-const n2 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n2", disabled: !v2}));
+const m2 = view(Inputs.range([1, 5], {value: 1, step: 1, label:"m2", disabled: !v2}));
+const n2 = view(Inputs.range([1, 5], {value: 3, step: 1, label:"n2", disabled: !v2}));
+const r2 = view(Inputs.range([0, 0.5], {value: 0.2, step: 0.01, label: "radius"}));
+const f2 = view(Inputs.radio(["constant", "right", "left", "up", "down"], {value: "constant"}));
 
 
 ```
 
+</div>
+<div>
+
+
 ```js
 
 const dots1 = make_dots(1 / m1, n1, CELL, WIDTH)
 const dots2 = v2 ? make_dots(1 / m2, n2, CELL, WIDTH) : []
 
+function radius_func(d, func, maxr) {
+  switch (func) {
+    case "constant":
+      return maxr;
+    case "right":
+      return maxr * d.x / WIDTH;
+    case "left":
+      return maxr * (WIDTH - d.x) / WIDTH;
+    case "up":
+      return maxr * d.y / WIDTH;
+    case "down":
+      return maxr * (WIDTH - d.y) / WIDTH;
+    default:
+      return maxr;
+  }
+}
+
 ```
   
 ```js
@@ -64,7 +93,7 @@ const dots_g1 = svg.append("g")
 dots_g1.selectAll("circle")
   .data(dots1)
   .join("circle")
-  .attr("r", 0.2)
+  .attr("r", (d) => radius_func(d, f1, r1))
   .attr("fill", fg1)
   .attr("cx", (d) => d.x)
   .attr("cy", (d) => d.y);
@@ -75,7 +104,7 @@ const dots_g2 = svg.append("g")
 dots_g2.selectAll("circle")
   .data(dots2)
   .join("circle")
-  .attr("r", 0.2)
+  .attr("r", (d) => radius_func(d, f2, r2))
   .attr("fill", fg2)
   .attr("cx", (d) => d.x)
   .attr("cy", (d) => d.y);
@@ -87,6 +116,8 @@ display(svg.node());
 
 ```
 
+</div>
+</div>
 
 <style>