diff --git a/src/index.md b/src/index.md index 133451b..bc112ba 100644 --- a/src/index.md +++ b/src/index.md @@ -8,7 +8,7 @@ toc: false colourful generative patterns using [d3](https://d3js.org/) and [Observable Framework](https://observablehq.com/framework/) -

v1.1.1 | by mike lynch | @mikelynch@aus.social | source

+

v1.1.2 | by mike lynch | @mikelynch@aus.social | source

@@ -118,8 +118,8 @@ if( palette_fn ) { ```js -const dots1 = dm.dots(1 / m1, n1, true); -const dots2 = dm.dots(1 / m2, n2, true); +const dots1 = dm.dots(1 / m1, n1, false); +const dots2 = dm.dots(1 / m2, n2, false); ``` @@ -134,6 +134,15 @@ const svg = d3.create("svg") .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]); +svg.append("clipPath") + .attr("id", "clipRect") + .append("rect") + .attr("x", 0) + .attr("y", 0) + .attr("width", WIDTH) + .attr("height", HEIGHT); + + // re transitions: they should only run when updating the palette and // grid, not via the sliders @@ -158,7 +167,8 @@ bg_g.selectAll("rect") const dots_g1 = svg.append("g") - .attr("id", "dots1"); + .attr("id", "dots1") + .attr("clip-path", "url(#clipRect)"); dots_g1.selectAll("circle") .data(dots1) @@ -168,7 +178,8 @@ dots_g1.selectAll("circle") .attr("fill", fg1); const dots_g2 = svg.append("g") - .attr("id", "dots2"); + .attr("id", "dots2") + .attr("clip-path", "url(#clipRect)"); dots_g2.selectAll("circle") .data(dots2)