diff --git a/src/components/download.js b/src/components/download.js
index 6bee702..ffd7468 100644
--- a/src/components/download.js
+++ b/src/components/download.js
@@ -73,7 +73,7 @@ export async function download_as_png (svg) {
const opts = {
fitTo: {
mode: 'width', // If you need to change the size
- value: 400,
+ value: 1200,
}
};
const resvgJS = new resvg.Resvg(svgstr, opts)
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)