bombinans/poptimal
1
0
Fork 0
Code Issues 11 Pull Requests Packages Projects 1 Releases Wiki Activity

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

Browse Source 
Reviewed-on: #31
This commit is contained in:
bombinans 2025-03-26 07:59:04 +00:00
commit e6f977b29e
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/download.js
View File

@ -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)

21
src/index.md
View File

@ -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)