Merge pull request 'Better clipping for web' (#31) from feature-clip-web-version into main

Reviewed-on: #31

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)

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 dots1 = dm.dots(1 / m1, n1, false);
-const dots2 = dm.dots(1 / m2, n2, true);
+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)