5:08 Exercise So LeWitt Reproduction with D3

100%

5:08 Exercise So LeWitt Reproduction with D3

✓ Published1🌍 Public

Last edited Aug 25, 2022

Created on Aug 25, 2022

Forked from 4:50 So LeWitt Reproduction with D3

A generative art piece reproduces a Sol LeWitt-inspired composition using D3 v7. The visualization renders a grid of overlapping thin rectangles on an SVG canvas, masked by patterns of colored shapes and symbols. It uses `d3.range`, `d3.symbols`, and `d3.symbol` to create the mask elements, with rectangle positions calculated from the window dimensions. The two masks invert their fill colors to produce contrasting effects across the horizontal and vertical stripe layers.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of 5:08 Exercise So LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt-style geometric drawing by layering horizontal and vertical striped rectangles, masked by three large symbols arranged diagonally. The masks reveal or hide portions of the line grids, creating interlocking shapes against a black-and-white canvas. Built with D3 v7, it uses `select`, `range`, and `symbol` to generate SVG marks, while custom mask elements with inverted fill colors alternate visibility. The code renders directly to the full window size, with no external data source, relying purely on procedural generation and SVG masking techniques.

Mmax-31

91% match

Loading thumbnail…

4:50 So LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s wall drawing “4:50” using D3 with SVG rendering. Two sets of 48 alternating thin horizontal and vertical rectangles intersect, each masked by a distinct pattern of D3’s built-in symbol shapes (such as circles and crosses). Masks are generated with the `symbol` API and applied via the `mask` attribute, using inverted fill colors to create contrasting cutout effects across the grid. The scene fills the entire viewport, with rectangles positioned using D3’s `range` and `join`.

Mmax-31

90% match

Loading thumbnail…

Exercise Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of overlaid horizontal and vertical rectangles that are masked to create a geometric, abstract composition. The visualization uses `d3.select`, `d3.range`, and `d3.symbols` to create SVG elements, with `d3.symbol` generating custom shapes within masks. The code dynamically assigns x and y positions to the rectangles, alternating between horizontal and vertical orientations, and applies inverted and non-inverted masks to achieve the layered visual effect. The result is a generative, screen-filling artwork that mimics the minimal, rule-based style of LeWitt's wall drawings.

Rrwata97

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 Exercise

This visualization reproduces a Sol LeWITT-style geometric composition using overlapping horizontal and vertical line grids. Four mask layers alternate line orientations and symbol shapes—including circles, diamonds, crosses, and triangles—to create a rhythmic interplay of foreground and background elements. The code uses D3 selections, `range`, `symbol`, and `symbols` APIs to generate SVG rectangles and paths, with masks defined via `renderMask` to invert or combine patterns across the full viewport.

Kkathrynrbernard

88% match

Loading thumbnail…

Full Sol Lewitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of alternating horizontal and vertical stripes across the full screen. Two masks—one inverted—cut circular symbol shapes from the stripe patterns, creating overlapping geometric forms. The code uses d3.select, d3.range, d3.symbol, and d3.symbols to render SVG paths, with each mask applied via SVG mask elements. The result is a dynamic, screen-filling composition that highlights D3's ability to create intricate generative art from simple primitives.

PPhan Nguyen

88% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais

88% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

A generative reproduction of a Sol LeWitt art piece uses D3 to draw intersecting horizontal and vertical striped bands filtered by two complementary masks. The SVG rendering employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.scaleBand` to place alternating white and black symbol shapes within each mask, creating a woven visual pattern. The masks alternate transparency to combine the striped layers, producing a geometric composition that echoes LeWitt’s systematic wall drawings.

CCurran Kelleher

87% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using the D3.js library in a React framework, rendered as scalable vector graphics. The code creates an SVG canvas that fills the browser window and applies circular masks to horizontal and vertical striped rectangles, producing an overlapping grid pattern. The implementation uses D3’s `select` method to build the SVG element and appends shapes programmatically, though the mask and rectangle logic is commented out, leaving only the blank SVG. The visualization adopts LeWitt’s geometric, rule-based aesthetic.

TTheo-0201

87% match