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');
