Fork of Fork of Sol LeWitt Reproduction by D3 2

100%

Fork of Fork of Sol LeWitt Reproduction by D3 2

✓ Published0🌍 Public

Last edited Sep 4, 2025

Created on Sep 4, 2025

Forked from Fork of Sol LeWitt Reproduction by D3 2

A D3.js reproduction of a Sol LeWitt drawing fills the browser viewport with a grid of horizontal and vertical bars layered on top of each other. Two SVG masks, each containing differently shaped symbols from `d3.symbol` and `symbols`, selectively reveal parts of the grid. The first mask applies a non-inverted pattern, while the second uses an inverted fill, creating a dynamic interplay between the geometric bars and symbol silhouettes. Rendered entirely with SVG elements and styled through CSS, the code uses `select`, `range`, and `join` to generate the repeating bars.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This fork of a Sol LeWitt reproduction uses D3.js to generate an abstract geometric composition. The visualization displays a grid of alternating horizontal and vertical bars that overlap to create a dynamic pattern across the full browser window. It builds two layered sets of rectangles, each masked with a pattern derived from D3’s `symbol` API—one mask uses the standard symbol set, the other an inverted version. The `scaleBand` function positions the masks, while `select` and `join` manage SVG elements. The result mirrors LeWitt’s minimal, rule-based aesthetic using interactive vector graphics.

Xxscotta@yahoo.com

93% match

Loading thumbnail…

Fork of Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 with SVG rendering, layering horizontal and vertical striped rectangles over masked symbol shapes. The code generates 50 horizontal and vertical bars positioned incrementally, then applies two masks—one containing a row of D3 symbols (circles, crosses, diamonds, etc.) and another with a large central triangle. The masks alternate inverted fills, creating intersecting cutout effects where the stripes show through the symbol shapes. The visualization updates dynamically to the browser window dimensions, demonstrating D3’s `range`, `symbol`, and `join` methods for procedural art.

Rroyable88

93% match

Loading thumbnail…

Fork of Full of Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of thin horizontal and vertical rectangles across the full browser window. The code uses `d3.range()` and `d3.select` to generate 100 rows and columns, then applies two SVG masks to shape the overlapping lines. Each mask contains a large `d3.symbol` with a star shape, defined via `symbol(symbols[1], 100000)`, which cuts a circular diamond pattern out of the otherwise regular grid. The masked rectangles create a layered visual where lines appear through the star-shaped holes, demonstrating SVG mask composition with D3 selections.

IIgorGorin00

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a dense grid of horizontal and vertical bars, creating an optical pattern of intersecting lines. The bars are rendered as SVG rectangles, with each set of bars repeated across the canvas at regular intervals. Two SVG masks with circular cutouts are applied to the bar groups, revealing and concealing portions of each direction to form a layered, lens-like visual effect. The code uses D3’s `select`, `range`, and `join` API to efficiently build and position the rectangles, and the Canvas API sets the drawing size to the full browser window.

AAaron

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction + D3

A fork of a Sol LeWitt reproduction uses D3 to generate layered horizontal and vertical striped rectangles across the full viewport. Two SVG masks create geometric cutouts: a white diamond-shaped hole in one mask and a black circular hole in another, revealing intersecting grid patterns. The code employs d3.select, d3.range, d3.symbols, and d3.symbol to draw paths and shapes, with masking applied via SVG mask elements. The example renders entirely in SVG, driven by window dimensions.

Iionakeeley

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired drawing using D3 and SVG. It shows a grid of horizontal and vertical bars that are partially hidden by two circular masks, creating a pattern of lines that fade in and out of view. The code uses D3’s `select`, `append`, `range`, and `.join()` API to generate the bars and masks, with the masks defined as SVG elements containing rectangles and circles. The visualization is rendered entirely with vector graphics, using a full-window canvas and a data-driven approach to build the repeating line structure.

Eedw.ext@gmail.com

92% match

Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction Final with D3

This example draws a generative grid inspired by Sol LeWitt using SVG and D3. It fills the viewport with 100 horizontal and 100 vertical stripes, each masked so that only parts of the grid remain visible. Two separate masks, created with d3.mask, contain large D3 symbols (from d3.symbol) that act as cutouts or reveals, inverting their effect between the axes. The code uses d3.select, d3.range, and d3.symbol to build the composition programmatically, producing a layered geometric pattern that plays with visibility and form.

Kkwambokar

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js and SVG rendering. It displays a grid of horizontal and vertical black bars that are partially revealed through two circular mask effects, creating intersecting line patterns across the full viewport. The visualization uses d3.select and data joins to generate 100 rectangle elements for each orientation, while SVG mask elements with circle shapes control which portions of the lines remain visible. The bars are positioned mathematically based on array indices, with the masks centered in the window to produce the layered optical effect.

Kkwambokar

92% match