Sol LeWitt US Flag with d3.

index.js

import { select, range, symbols, symbol } from 'd3';

const height = window.innerHeight;

const width = window.innerWidth;

const svg = select('body')

.append('svg')

.attr('width', width)

.attr('height', height);

const aa = 500;

const bb = 1.9 * aa;

const cc = (aa * 7) / 13;

const dd = (2 / 5) * bb;

const ee = cc / 10;

const ff = ee;

const gg = dd / 12;

const hh = gg;

const kk = ll * (4 / 5);

const ll = (1 / 13) * aa;

const redMask = svg.append('mask').attr('id', 'redMask');

const blueMask = svg.append('mask').attr('id', 'blueMask');

redMask

.append('rect')

.attr('height',aa)

.attr('width',bb)

.attr('fill','black')

redMask

.append('g')

.selectAll('rect.bar')

.data(range(7))

.join('rect')

.attr('y', (d) => d * 2 * ll)

.attr('width', bb)

Last edited Apr 03, 2021

Created on Apr 03, 2021

A bare minimum HTML page demonstrating use of CSS and JavaScript.