Skip to main content
SimilarExport ZIP
100%

Joe LeWitt con D3

✓ Published0🌍 Public
Ccssergio
Last edited May 23, 2022
Created on May 23, 2022
Forked from Fourth Class

A grid of horizontal and vertical rectangles overlays the full viewport, with SVG masks revealing a circular window at the center. The piece reproduces Sol LeWitt's geometric wall drawing style using D3's `select`, `range`, and `join` methods to generate 100 rects in each orientation. Mask `circle-mask` exposes the horizontal bars inside a white circle, while `circle-mask-2` inverts the effect, showing the vertical bars outside the same radius. The composition renders dynamically to the browser's current dimensions using an SVG container.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full of Joe LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece by layering two sets of thin, parallel lines—one horizontal and one vertical—across the full browser window. The lines are partially hidden by two overlapping circular masks, creating a geometric interplay of filled and empty space. It uses D3 v3 to generate SVG rectangles and applies masks via D3’s selection and data-join methods, along with `symbol` and `range` for positioning.

Ccssergio
87% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of horizontal and vertical bars that intersect within two circular regions. The visualization shows a geometric pattern where a circle in the center masks horizontal lines, and a second ring-shaped mask reveals vertical lines around it. The code uses D3 selections and the `range` function to generate 100 rectangles in each orientation, applying SVG masks (`circle-mask` and `circle-mask-2`) to control visibility. The rendering is done entirely with SVG elements, with the artwork filling the full browser window.

Aajoua
86% match
Loading thumbnail…

D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt wall drawing using D3.js and SVG rendering. It displays a grid of horizontal and vertical bars that intersect, with circular masks applied to create a rounded viewing window in the center of the canvas. The code uses D3’s `select`, `range`, and `join` APIs to generate the rect elements, and constructs two SVG masks—one with a white circle on black and another with a black circle on white—to reveal and conceal portions of the bars. The visualization fills the entire browser window, with the bars spaced at 20-pixel intervals.

AArturo Guevara
85% match
Loading thumbnail…

SOL Lewitt with D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js version 7.8.5. It displays a grid of horizontal and vertical striped rectangles that form a circular mask pattern at the center of the screen, rendered as SVG. The code builds the visualization with `select`, `range`, and `.join('rect')`, layering two sets of rectangles and applying SVG `<mask>` elements to create the intersecting shapes.

DDonald Bagwell
85% match
Loading thumbnail…

Sol LeWitt with D3

A reproduction of a Sol LeWitt wall drawing uses D3 selections to generate an SVG of layered horizontal and vertical bands. The code, using d3.select and svg.attr, builds a full-screen grid of colored rectangles that visually alternate within a circular mask. While several mask and rect creation routines are commented out, the active script sets up the SVG canvas and dimensions to recreate the geometric pattern. The piece relies primarily on D3's DOM manipulation capabilities rather than data binding or scales.

CChloe Ransom
85% match
Loading thumbnail…

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Llukasreber
85% 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
85% match
Loading thumbnail…

D3 Sol LeWitt

This example reproduces a Sol LeWitt art piece using D3 v3 and SVG. It renders a grid of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart, covering the full window. Two SVG masks define a central circular aperture: the first mask reveals horizontal stripes inside the circle, while the second reveals vertical stripes outside it, creating a contrasting geometric pattern. The code uses `d3.select`, `d3.range`, and chained `.attr` calls to generate the shapes, with data bounds derived from the window dimensions.

AArturo Guevara
85% match