Sol LeWitt US Flag with d3.

100%

Sol LeWitt US Flag with d3.

✓ Published0🌍 Public

Last edited Dec 27, 2022

Created on Dec 27, 2022

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`.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt US Flag with d3.

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.

Wwgloss

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

88% 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

87% 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

84% 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

82% match

Loading thumbnail…

Sol LeWitt reproduction with d3 (symbols)

This example recreates a Sol LeWitt-inspired drawing using D3.js by layering two perpendicular sets of striped rectangles. Horizontal bars appear only within a circular region defined by an SVG mask, while vertical bars are masked to the inverse shape, creating a clean intersection of stripes inside the circle. The code uses `d3.range`, `d3.select`, SVG `rect` elements, and `symbol` with `symbols[2]` to generate the circle mask paths. The visualization is rendered entirely in the browser with D3 v7, filling the viewport dynamically.

FFrancisco Ibelles

82% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 - Different shape

This example recreates a Sol LeWitt-inspired drawing using D3 to generate a grid of thin horizontal and vertical bars. Two SVG masks, each containing a large star-shaped path created with the `d3.symbol` API, are applied to the grid so the bars remain visible only within the star’s silhouette. The first mask uses a black background with a white star, while the second inverts the pattern, producing contrasting filled and striped regions. The visualization is rendered entirely in SVG, with coordinates calculated from the window dimensions via D3’s `select` and `range`.

KKhanin Sisaengsuwanchai

82% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This interactive SVG reproduction of a Sol LeWitt piece uses D3 to generate a grid of horizontal and vertical stripes. The code defines two masks that selectively reveal or hide the stripes based on a series of symbol-shaped paths, creating a dynamic and layered geometric composition. The program uses D3's `select`, `range`, `symbol`, and `symbols` functions to build the SVG elements and masks, with the rendering adapting to the window size. The artwork's behavior is driven entirely by the mask transformations and symbol generation.

Rrwata97

81% match