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

100%

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

✓ Published0🌍 Public

Last edited Mar 6, 2023

Created on Mar 6, 2023

Forked from 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.

AI-generated description

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

Similar vizzes

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

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

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

93% match

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

86% match

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

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

80% match

Loading thumbnail…

Fork of Sol LeWitt with d3

This example reinterprets Sol LeWitt’s geometric wall drawings as a generative SVG composition. The view shows a grid of horizontal and vertical stripes, each rendered as a series of `rect` elements, clipped by two circular masks that create a central lens effect. Using d3’s `select`, `range`, and `.join()`, the code creates 48 stripes in each direction across the full window width and height. One mask reveals the horizontal pattern within the circle, while an inverted mask shows the vertical pattern outside it, blending the two orientations.

Mmax-31

79% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate overlapping striped rectangles and symbol-based masks. The visualization shows a grid of horizontal and vertical bars filtered through two inverted mask layers, each containing a row of D3’s built-in symbol shapes (circles, crosses, diamonds, squares, stars, triangles, and wye). The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct SVG elements dynamically, rendering directly into the browser window with no external data source.

Ccardoza-IPH

79% match