index.js
import {
select,
range,
symbol,
symbols,
scaleBand,
} from 'd3';
const padding = 0.6;
const size = 5000;
const n = 120;
const width = window.innerWidth;
const height = window.innerHeight;
const svg = select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
const gap = width / n;
svg
.append('g')
.attr('mask', 'url(#mask1)')
.selectAll('rect')
.data(range(n))
.join('rect')
.attr('y', (i) => i * gap)
.attr('width', width)
.attr('height', gap / 2);
svg
.append('g')
.attr('mask', 'url(#mask2)')
.selectAll('rect')
.data(range(n))
