index.js
import { select, range } from "d3";
//Specify parameters
const width = window.innerWidth;
const height = window.innerHeight;
const n = 100;
//Create svg canvas
const svg = select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//Top left square
const mask = svg.append("mask").attr("id", "mask-top-left");
mask
.append("rect")
.attr("width", 150)
.attr("height", 150)
.attr("fill", "white");
svg
.append("g")
.selectAll("rect")
.data(range(n))
.join("rect")
.attr("y", (d) => d * 15)
.attr("width", width)
.attr("height", 10)
.attr("mask", "url(#mask-top-left)");
//Top right square
const mask_2 = svg.append("mask").attr("id", "mask-top-right");
mask_2
Trying to reproduce a Sol LeWitt art piece using D3. Inspired by the original piece here.
MIT Licensed