Fork of Sol Levitt's Art Reproduction2

100%

Fork of Sol Levitt's Art Reproduction2

✓ Published1🌍 Public

Last edited Oct 30, 2022

Created on Oct 30, 2022

Forked from Sol Levitt's Art Reproduction

This visualization reproduces a Sol LeWitt-inspired drawing using intersecting horizontal and vertical striped rectangles, with two mask layers creating a circular cutout effect. The piece shows a dense grid of lines that forms a geometric composition with a central diamond-shaped aperture. Built with React and D3.js, the code uses `select`, `range`, `symbol`, and `symbols` to generate SVG elements, while custom masks (`circleMask` and `circleMask2`) combine black-and-white fills to blend the line patterns selectively. The result is a dynamic interplay of overlapping stripes and negative space, rendered responsively to the browser window dimensions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sol Levitt's Art Reproduction

This visualization reproduces Sol LeWitt's geometric art using overlapping horizontal and vertical striped rectangles, masked to form a circular composition in the center of the viewport. The piece shows a grid-like pattern of alternating bands that intersect within a defined circular boundary against a contrasting background. The code uses D3.js selections and data joins (`selectAll`, `data`, `join`) to generate 100 horizontal and 100 vertical SVG rectangles across the full window dimensions. Two SVG masks (`circleMask`, `circleMask2`) apply inverted circle shapes to reveal or hide portions of the layered stripes, creating the characteristic LeWitt-style interplay of line and form.

Jjajinkyaa

91% match

Loading thumbnail…

Fork of Fork of Sol Levitt's Art Reproduction2

This visualization presents a grid of horizontal and vertical bars overlaid with two circular masks, creating a dynamic interplay of black and white regions reminiscent of Sol LeWitt's generative art. The code uses D3.js selection and data-binding APIs, including `select`, `range`, and `join`, to render 100 SVG rectangles. A custom `renderMask` function builds inverted `mask` elements, applying `symbols[0]` (a circle) to selectively reveal or hide parts of the grid. The rendering is fully SVG-based within a React-free vanilla JavaScript setup.

Jjajinkya

91% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using overlaid horizontal and vertical stripes, each masked by a circle at the center. The composition reveals a square grid of lines intersecting within a circular boundary against a contrasting background. The visualization uses the D3.js library (v6.6.1) through a React interface, rendering SVG elements via the `select`, `range`, and `append` APIs. It constructs masks with `attr` to define the circular cutouts, and generates the 100 stripes per direction using D3's `join` for efficient data-driven element creation.

Mmaximus2581

90% match

Loading thumbnail…

Fork of Sol Lewitt reproduction itv d3

This interactive piece displays two intersecting grids of rectangles within a circular mask, evoking Sol LeWitt's geometric wall drawings. The visualization pairs overlapping horizontal and vertical bands, with one grid serving as a negative mask to create a dynamic visual interplay between filled and empty space. Built with React and D3.js, the code uses the `select` API to construct SVG elements, the `range()` helper to generate iterations, and a layered masking technique to clip the rectangular pattern into a central circular composition. The result is a clean, generative study in form and negative space.

Cclara7227

90% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction Vertical 2

This visualization reproduces a Sol LeWitt-inspired drawing using vertical black bars, with a circular mask that creates a clear central window against a white background. The code generates 100 evenly spaced rectangles, each 10 pixels tall, and applies a mask containing a 200-pixel-radius circle. The piece uses raw SVG elements created via the Document Object Model API, setting the mask’s rect to white and circle to black to control visibility. It dynamically sizes to the browser window, adapting the composition to the full viewport.

Eelgato_1994

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt–style grid using two sets of horizontal and vertical rectangles, each clipped by a circular mask to produce a black-and-white geometric composition. The code uses D3’s `select`, `range`, and `join` to generate 100 stripes in each direction, while `d3.symbol` and `symbols[1]` draw a diamond-shaped mask path. Two SVG masks alternate inverted fills, revealing or hiding parts of the grid. The visualization runs in React, renders as SVG, and adapts to the full browser window size.

MMark Christian

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js within a React framework, rendered as an SVG. It displays a grid of horizontal and vertical rectangular stripes that are partially revealed through two circular masks, creating a crosshatched pattern with a central circular void. The code leverages D3's `select`, `range`, and `.join()` API to generate the stripes, while SVG mask elements define the visibility zones. The visualization dynamically sizes to the browser window, demonstrating a blend of generative art and data-driven DOM manipulation.

MMark Christian

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction With D3

This visualization reproduces a Sol LeWitt-inspired geometric drawing using D3 v6 and SVG rendering in a React context. It shows a grid of horizontal and vertical rectangles, each with a circle-shaped mask, creating an intersecting pattern that reveals or hides lines depending on mask polarity. The code uses `d3.select`, `d3.range`, and SVG `mask` elements with black and white fills to produce the effect over a full-window canvas. Rendering relies on SVG attributes for positioning and sizing, with no external data source beyond generated ranges.

Wwgloss

89% match