Sol LeWitt US Flag with d3.

100%

Sol LeWitt US Flag with d3.

✓ Published3🌍 Public

Last edited Apr 3, 2021

Created on Apr 3, 2021

This example recreates Sol LeWitt’s geometric interpretation of the US flag using D3.js and SVG. It draws the flag’s red and white stripes and blue canton through overlapping horizontal and vertical bands, each masked by a rectangular region that reveals the alternating pattern. White stars are placed in a grid across the canton, with a path symbolizing a five-pointed star. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the SVG elements and masks.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sol LeWitt US Flag with d3.

This visualization reproduces Sol LeWitt’s geometric interpretation of the US flag using only SVG shapes and masks. It displays a field of red and blue stripes composed of thin, overlapping rectangles, with a canton containing white five-pointed stars. The code uses d3’s `select`, `range`, and `symbol` APIs to generate the pattern procedurally. It builds two masks (`redMask` and `blueMask`) to clip the horizontal and vertical stripe groups, then places stars via repeated `path` elements with `symbol(symbols[4], …)`. The rendering is pure SVG, with dimensions and spacing derived from the variables `aa`, `bb`, and `ll`.

TToly

93% match

Loading thumbnail…

Fork of Sol LeWitt US Flag with d3 -.

This example recreates Sol LeWitt’s geometric interpretation of the US flag using D3.js. It renders a full-screen SVG with horizontal and vertical stripes defined by mask elements, producing the flag’s red and blue regions through layered rectangles. Fifty white star symbols are positioned in a grid within the canton area, using D3’s symbol generator. The piece demonstrates how algorithmic composition and masking techniques can construct a recognizable national flag from basic geometric primitives.

FFrancesco Di Filippo

92% match

Loading thumbnail…

Fork of Sol LeWitt US Flag with d3.

This example shows the geometry of the US flag, constructed with rectangles and star-shaped symbols in SVG. The flag’s stripes and canton are rendered as masks that filter dashed diagonal and vertical line groups, based on Sol LeWitt’s conceptual art. It uses D3 selections and joins with `select`, `range`, and `symbol` to generate 50 white stars in a grid, with masks applying the flag’s color regions.

HHelip3

92% match

Loading thumbnail…

Vel's Fork of Sol LeWitt US Flag with d3.

This example recreates Sol LeWitt’s US Flag using D3 v3 within a React framework, rendering entirely as SVG. It shows the flag constructed from repeating horizontal and vertical striped rectangles, with masks controlling the red and blue color regions and D3’s `symbol()` generator drawing the white stars. The code uses `d3.select`, `range`, and `join` to build the repetitive geometric elements, while dimensions are derived from proportional constants. The visualization fills the browser window dynamically using `window.innerHeight` and `window.innerWidth`.

VVel Wu

88% match

Loading thumbnail…

US Flag with d3.

This example uses D3.js to render the US flag as an SVG. The code calculates the flag’s proportions from an arbitrary base length, drawing the 13 red and white stripes with `rect` elements and the blue canton with a filled rectangle. Fifty white stars are created using D3’s `symbol` and `symbols` for a five-pointed star path, placed in alternating rows of six and five across the canton. The visualization is built entirely with D3’s low-level selection and joining APIs, scaling to fill the browser window.

Wwgloss

86% match

Loading thumbnail…

Fork of Vel's Fork of Sol LeWitt US Flag with d3.

This example renders a Sol LeWitt-inspired US flag using D3 v6, constructing the image through layered SVG shapes and mask filtering. The code computes flag dimensions from a base unit and applies red and blue masks to overlapping horizontal and vertical rectangles, generating the striped field and canton. Alternatively spaced star symbols, created with `d3.symbol` and `symbols[4]`, are positioned across the canton to complete the composition.

SSantiago Toso

86% match

Loading thumbnail…

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

Ddalia.miliauskaite@me.com

81% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 and SVG. It renders two sets of alternating horizontal and vertical rectangles that cover the full viewport, with each set clipped by a mask. The masks combine a white or black background with a large diamond-shaped symbol path, creating a starburst effect where the grid lines are selectively revealed. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs, with SVG `<g>` groups and `mask` elements. The drawing is generated dynamically to match the browser window’s dimensions.

Ccardoza-IPH

81% match