Fork of d3 all out on sol lewitt - updates

100%

Fork of d3 all out on sol lewitt - updates

✓ Published0🌍 Public

Last edited Feb 27, 2023

Created on Feb 27, 2023

Two alternating line grids are masked into interlocking black-and-white bands and geometric symbols, reproducing a Sol LeWitt wall drawing. The SVG uses d3.mask elements, d3.range, d3.symbol and d3.symbols to generate vertical and horizontal line rectangles and rotating symbol shapes. Mask colors flip according to grid position and inner/outer layer, creating mirrored contrast. The code updates mask geometry dynamically with d3 joins, and renders to the full viewport using plain SVG attributes.

AI-generated description

A reproduction of a Sol LeWitt piece with d3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt w/ D3

A grid of thin horizontal and vertical white lines is drawn across a black canvas, intersecting to form a dense woven pattern. Two circular masks selectively reveal the grid: one centered rectangle masks the horizontal lines, while an inverted mask reveals the vertical lines, creating a layered, offset visual effect reminiscent of Sol LeWitt’s geometric art. The example uses D3 v7’s `select`, `range`, `symbol`, and `symbols` APIs to generate the lines and SVG masks programmatically.

Ddanheavern

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of alternating horizontal and vertical striped lines across the full browser window. Two SVG masks reveal the grid through circular and geometric shapes, while the second mask incorporates D3 symbol shapes and checkerboard patterns within its design. The code uses D3 v7 APIs including `select`, `range`, `symbol`, and `symbols` to generate the SVG elements, with mask composition controling which portions of the line grid remain visible.

AAngie Va. Moreno

89% match

Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger

89% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Aajoua

89% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical black lines. The piece uses D3 to render two sets of rectangles, each masked by a custom SVG mask. One mask reveals a pattern of geometric symbols—circles, squares, and triangles—while the other inverts the effect, creating a layered, intersecting composition. The masks are built with D3's `symbol` API, and the SVG elements are positioned using `range` and `selectAll` with `join`. The rendering is entirely SVG-based, with the artwork sized to the viewport.

Wwspwll@gmail.com

88% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3_test

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js. It renders a grid of thin, alternating horizontal and vertical lines by combining SVG `rect` elements with two custom masks, creating an intersecting pattern that visually shifts between the two orientations. The JavaScript code uses D3 APIs such as `select`, `range`, `symbol`, `scaleBand`, and the `join` method to generate the 120-line structure. Each mask cycles through symbols from D3’s symbol set to alternate black and white fill, producing the final composed effect. The SVG output is sized to the full browser window.

Ppawelsapiecha

88% match

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3js 2

A grid of alternating horizontal and vertical black lines is masked so that only a circular area is visible. The example uses D3 v6 to generate SVG rectangles with `selectAll`, `data`, and `join`, and applies two SVG masks to invert the visibility pattern. `d3.range` creates the sequence for positioning, while masks define a central circle where lines appear or disappear.

Iinnocent thomas

88% match

Loading thumbnail…

Fork of Sol LeWitt reproduction with d3 _ 2

This SVG reproduction of a Sol LeWitt piece uses d3 to generate two overlapping sets of rectangular grids. The code creates horizontal and vertical bars, each masked to reveal either a central circular area or the surrounding region. Using d3’s `select` and `range`, it appends a full-window SVG and populates group elements with 100 rectangles each. The inner mask highlights a 200-pixel-radius circle, while the outer mask inverts this shape, producing the characteristic geometric interplay.

AAngela Kochoska

88% match