Fork of Sol Lewitt, Now d3

100%

Fork of Sol Lewitt, Now d3

✓ Published1🌍 Public

Last edited Nov 7, 2024

Created on Nov 7, 2024

This example reproduces Sol Lewitt’s geometric wall drawing using D3.js, creating a grid of vertical and horizontal bars on an SVG canvas. It visualizes the interaction of two perpendicular bar sets, where a circular mask reveals or hides portions of each set to produce overlapping patterns. The code employs D3’s selection and range functions to generate bars, and SVG mask elements to apply contrasting circular cutouts. The composition shifts between shown and hidden bar segments, echoing Lewitt’s algorithmic art. The rendering fills the browser window, with bar placement calculated from screen dimensions.

AI-generated description

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

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

93% match

Loading thumbnail…

Fork of SolLeWitt - convert from VanillaJS to D3

This visualization generates a geometric pattern using Sol LeWitt-inspired horizontal and vertical bars. It uses `d3.select` and `d3.range` to create rectangles, with SVG masks (`mask_bottom` and `mask_top`) that reveal or hide parts of the bars based on circular fill regions. The code computes bar positions based on window dimensions and uses the D3 `join` API to efficiently append and style `<rect>` elements. The final composition displays a grid of bars with a circular cutout effect in the center.

JJun Alvarado

92% match

Loading thumbnail…

Fork of Full Sol Lewitt whit D3 reduce code

This visualization reproduces a Sol LeWitt wall drawing as a grid of horizontal and vertical bars, intersected by a central circular symbol. It uses the D3 library (v7.8.5) to generate SVG masks that reveal or hide alternating bar orientations. The code defines two masks, one for each direction, applying a path built from D3’s `symbol` API to create the geometric cutout. The artwork is generated procedurally with `range`, `select`, and `append` calls, rendering abstract geometric forms without external data.

FFrancisco Ibelles

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

90% match

Loading thumbnail…

Fork of Sol LeWitt-d3-2

This visualization generates a grid of horizontal and vertical bars across the full browser window, then applies circular SVG masks to reveal a bold geometric composition. Using d3 selections and `range()`, it appends 100 rectangles in each orientation, with a black-and-white mask pair creating a contrasting ring pattern at the center. The code uses D3 v6 with `select`, `range`, and `join`, rendering to SVG while dynamically sizing to the viewport. This mirrors Sol LeWitt’s minimalist wall drawings through a React-compatible, single-file example.

Bbillzhou2005

90% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt wall drawing using D3.js, generating a grid of horizontal and vertical bars that intersect to form a dynamic pattern. The code draws 100 rectangular strips in each direction, using SVG masks to selectively hide portions of the grid with large mathematical symbols. The artwork relies on `d3.range`, `d3.select`, and `d3.symbol` to construct the visual, with the mask system alternating between inverted and non-inverted states to create contrasting regions across the canvas.

Aadityapalliyil0@gmail.com

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

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

90% match