🧪 Indie software researcher & developer
👾 React game developer
Public
Edited
Apr 22, 2023
{
const boxSize = 100;
const cx1 = 10;
const cy1 = 10;
const cx2 = 15;
const cy2 = 18;
const cx3 = 8;
const cy3 = 18;
return html`<svg width="400" viewBox="0 0 ${boxSize} ${boxSize}" style="border: 2px solid black">
${[
...(function* () {
for (let i = 0; i < boxSize; i++) {
for (let j = 0; j < boxSize; j++) {
yield `<rect x="${i}" y="${j}" width="1" height="1" fill="black" opacity="${
(1 +
(noise.simplex2(i / 40, j / 40) +
noise.simplex2(i / 10, j / 10) * 0.5 +
noise.simplex2(i / 2, j / 2) * 0.2)) *
0.5 *
0.3
}" />`;
}
}
})()
].join("\n")}
<path d="M${cx1},${cy1} L${cx2},${cy2} L${cx3},${cy3}" stroke="grey" stroke-width="0.1" />
</svg>`;
}
noise.simplex2(0, 2)
noise = {
const noise = new Noise();
noise.seed(Math.random());
return noise;
}
Noise = require("noisejs").catch(() => window.Noise)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
