Sol Lewitt D3 v2

100%

Sol Lewitt D3 v2

✓ Published1🌍 Public

Last edited Nov 13, 2024

Created on Nov 13, 2024

A grid of vertical and horizontal striped rectangles, generated with D3 v6, covers the screen. The full-width and full-height strips use `select` and `range` to map data to `rect` elements. Two SVG masks reveal overlapping circular regions: a white-filled circle on a black background shows the horizontal lines, while an inverted cutout mask displays the vertical lines, creating a cross-shaped intersection at the center. Rendering is via SVG with D3's `join` method.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt - D3

A grid of thin horizontal and vertical white strokes overlays the full browser window, but a circular mask reveals the pattern only within a central disc, creating a crisp boundary between the visible striped interior and a blank exterior. Built with D3.js (version 7.9.0) and rendered as SVG, the code uses `select`, `range`, and the `.join('rect')` API to generate 100 rects in each orientation. Two SVG masks—one with a white circle on black, the other inverted—alternately hide and reveal the respective stroke sets, producing the final composed image.

Hhquazza@gmail.com

91% match

Loading thumbnail…

Sol Lewitt (D3)

Two overlapping grids of thin horizontal and vertical rectangles render on an SVG canvas, creating a crosshatched composition. Masking reveals the pattern only within two circular regions: one section shows horizontal lines, while the other displays vertical lines. Built with vanilla JavaScript and D3 v6, the code uses `select`, `range`, and `join` to generate 100 rectangles per axis, with SVG `mask` elements defining the circular cutouts.

WWaseem Medhat

91% match

Loading thumbnail…

SOL Lewitt with D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js version 7.8.5. It displays a grid of horizontal and vertical striped rectangles that form a circular mask pattern at the center of the screen, rendered as SVG. The code builds the visualization with `select`, `range`, and `.join('rect')`, layering two sets of rectangles and applying SVG `<mask>` elements to create the intersecting shapes.

DDonald Bagwell

90% match

Loading thumbnail…

Sol Lewitt Variant with D3

This example reproduces Sol Lewitt’s geometric wall drawing as an interactive SVG visualization. It displays a grid of alternating horizontal and vertical stripes, masked into two overlapping circular windows at the center of the canvas. Using D3 selections and data joins, the code generates 100 rectangles in each direction via `range(n)`. Two SVG masks with complementary black-and-white circles control which stripes appear inside each circle, creating a layered optical effect.

Iibaird6@gatech.edu

90% match

Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical stripes. Two circular masks are applied to the stripes, creating a layered pattern where each mask reveals or hides portions of the rects. The visualization uses d3.select and d3.range to create 100 rectangles in each direction, rendering the final composition as an SVG. The code builds the masks with SVG mask elements and circle shapes, filling the entire window.

Yyejichun@naver.com

90% match

Loading thumbnail…

Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt-style drawing using two sets of overlapping rectangular grids, each masked to reveal a circular region at the center of the screen. Vertical and horizontal stripes alternate visibility through complementary black-and-white circle masks, creating an intersecting pattern. The visualization uses D3 v7 with `select`, `range`, and SVG masks. It generates 100 rectangles per axis, sized relative to the viewport, and appends them dynamically without binding external data.

PPetrescu Alexandru

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A grid of horizontal and vertical striped rectangles is partially visible through two circular masks, creating a layered crosshatch pattern reminiscent of Sol LeWitt's geometric wall drawings. The example uses D3 selections with `selectAll` and `join` to bind data from `d3.range` to SVG `rect` elements, rendered directly as SVG. Two SVG `mask` elements define the circular cutouts: one inverts the grid by showing only the intersection of shapes, while the other reveals the full pattern. The code dynamically sizes the visualization to the full browser window.

Ppawelsapiecha

90% match

Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js reproduction of a Sol LeWitt piece covers the viewport with two sets of striped rectangles—horizontal bands and vertical bands—that intersect at a central circular area. The rendering uses SVG masks (`circle-mask` and `rect-mask`) to selectively reveal or hide stripes, creating the illusion of a circular window through the grid. The code draws 100 rects in each orientation, layering them with opposite mask fills to alternate visibility. This generative artwork leverages D3's `select`, `range`, and `join` API to build the SVG structure dynamically, scaling to the full window size.

DDilara Bozkurt

90% match