Fork of Sol LeWitt Reproduction with D3

100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Oct 4, 2025

Created on Oct 4, 2025

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

AI-generated description

MIT Licensed

Similar vizzes

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

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

95% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder

95% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece using D3, generating a series of horizontal bars that are clipped by a circular mask. The visualization fills the entire browser window with alternating offset rectangles, creating a geometric pattern. The code uses D3's `select` and `range` functions to build SVG elements, though the mask and circle logic is present but commented out. The rendered output shows a grid of colored bands restricted to a central circular area.

Bbtlhgboy@icloud.com

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js. The visualization displays a grid of horizontal and vertical striped bars, which are masked to create two overlapping circular windows that reveal different parts of the pattern. The code builds an SVG canvas sized to the browser window, generates 100 horizontal and vertical rectangles each, and applies two distinct SVG masks with opposing black-and-white circular cutouts to produce the final layered effect. The rendering uses D3's `select`, `range`, and fluent `.join().attr()` chain for efficient element creation.

Llennardightcore@gmail.com

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It displays a series of 100 horizontal bars overlaid with a circular mask that reveals only the central area of the pattern. Built with the D3 `select` and `range` APIs, the code constructs SVG elements via raw `document.createElementNS` calls and applies a mask to hide bars outside the circle. The design uses black rectangles on a white background, with the circle placed at the center of the viewport.

AAdeelah Mir

94% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3’s selection and data-join methods. It displays a grid of alternating horizontal and vertical black striped bars filtered through two circular masks, creating a central ring-like pattern on a white background. The visualization renders to SVG, with width and height set to the window dimensions. The code uses `d3.select`, `d3.range`, and the `.join()` pattern to generate the rect elements, while `svg.append("mask")` defines the circular cutouts that shape the final artwork.

MMatthew Bixby

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6 and SVG rendering. The visualization shows a grid of horizontal and vertical rectangles, with two circular masks creating a layered geometric pattern where the lines alternate visibility. The code employs `d3.select`, `d3.range`, and the `join` method to generate 100 rect elements for each orientation. SVG masks—defined with distinct IDs and circles of white and black fills—control which line segments appear within the overlapping circular regions.

PPeter Prevos

93% match