From 3b50b395698caf191c695bdc3dd792d110c18911 Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Wed, 26 Mar 2025 18:33:36 +1100
Subject: [PATCH 1/2] Made the downloadable pngs 1200x1200

---
 src/components/download.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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)

From 7a1db41c18048952d5f47a56a3f3b556ae21591e Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Wed, 26 Mar 2025 18:57:25 +1100
Subject: [PATCH 2/2] Got clipping working in the web version too

---
 src/index.md | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

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/)
 
-<p>v1.1.1 | by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
+<p>v1.1.2 | by <a href="https://mikelynch.org">mike lynch</a> | <a href="https://aus.social/@mikelynch">@mikelynch@aus.social</a> | <a href="https://git.tilde.town/bombinans/poptimal">source</a></p>
 
 <div class="grid grid-cols-2">
 
@@ -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)