Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Repro w/ D3

✓ Published1🌍 Public
Hhelloelectro
Last edited Feb 12, 2023
Created on Feb 10, 2023

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical bars whose visibility is controlled by inverted SVG masks, creating a distinctive halftone pattern. The code uses D3 v7’s `select`, `selectAll`, and `data().join()` to bind an array of 100 rectangle marks to SVG `rect` elements, each masked via `url(#mask-Inv)`. A central circular mask region inverts the bar visibility, producing the artwork’s characteristic optical interplay.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative artwork fills the browser window with a grid of overlapping horizontal and vertical bars. The piece uses two SVG masks—one revealing a central circle through dark stripes, the other inverting the effect—to create a dynamic interplay of lines and negative space. Built with D3 v6, the code leverages `select`, `range`, and data joins to render 100 rectangles in each direction, with mask elements defining the circular focal point. The result is a precise, minimalist composition that echoes LeWitt’s geometric aesthetic while demonstrating D3’s declarative SVG manipulation.

AAngie Va. Moreno
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 AG

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical bars on a full-window SVG canvas. Two mask elements with contrasting black-and-white fill patterns clip the bars, creating a circular window at the center that reveals the layered strip intersections. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles in each direction, with `append('mask')` defining the circle masks. The composition directly reflects LeWitt's geometric, rule-based aesthetic through D3's data-driven SVG generation.

Gguththered
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical stripes. The piece uses two circular SVG masks to invert the stripe pattern within a central circle, creating a subtle visual contrast against the background. The code employs D3.js version 7.8.4, utilizing `select` and `range` from the library to construct SVG elements. Rendering is done entirely through SVG. The `append`, `attr`, and `join` methods are used to build the masks and the striped rectangles programmatically, with the masks defining the visible region.

CClaudio Puggioni
90% match
Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt–inspired wall drawing as a series of horizontal SVG bars, each masked by a circular clip path. Built with D3 v7 and React, the code uses `select` to append an SVG and `range` to generate 100 marks with increasing y positions. The bars stretch across the full viewport width, creating a striped pattern that is visually cropped into a circle by the mask reference. The rendering approach relies on SVG mask elements rather than geometric clipping, demonstrating a simple, grid-based generative composition.

SSinasirousnejad
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece uses SVG to render a grid of horizontal and vertical black bars over a full-screen canvas. Two circular masks, defined via SVG `<mask>` elements, create a central circular window: the first mask reveals a white circle, while the second inverts it with a black circle, producing a layered visual effect. The code uses `d3.select`, `d3.range`, and data joins (`append` and `join`) to generate 100 rect elements in each direction, with the masks controlling visibility.

SSalahAnwer-dev
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 selections and SVG masks. It renders 100 horizontal rectangles across the full window width, each masked by a circular cutout centered on the screen, creating a striped pattern with a visible circle. The code uses D3’s `select`, `selectAll`, `data`, and `join` methods to bind array data to SVG `<rect>` elements, and defines the mask via a hardcoded SVG `<mask>` element with a black background and white circle. The visualization runs in a React framework with a minimal HTML setup, relying on D3 v6.6.1 for DOM manipulation and SVG rendering.

MMonWas
90% match
Loading thumbnail…

D3 Sol LeWitt Reproduction

This D3.js example reproduces a Sol LeWitt wall drawing using generated SVG rects and masks. It creates two circular masks over a grid of horizontal and vertical bars, with one mask inverting the circle to show a ring pattern. The visualization uses native SVG mask elements and the d3 selection API, though the rendering is primarily procedural JavaScript manipulating the DOM. The piece fills the browser window dynamically using window dimensions, generating 100 rects in each orientation.

IIndranil Biswas
90% match