Skip to main content
SimilarExport ZIP
100%

Fork of Episode 4: Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
DDea Bardhoshi
Last edited Jun 19, 2023
Created on Jun 19, 2023

This example reproduces a Sol LeWitt wall drawing using an SVG canvas. Four equal quadrants display distinct generative line patterns: horizontal bands in the top left, vertical lines in the top right, diagonal hatching in the bottom left, and a rotated diagonal grid in the bottom right, each confined by rectangular masks. The work uses D3 v6 to generate repeated rectangles via `selectAll("rect").join("rect")`, applying spatial transformations like `rotate(45)` and `translate(-100, 0)` to create geometric variations. The full browser window serves as the drawing surface, with each pattern built from 100 iterated shapes.

AI-generated description

Trying to reproduce a Sol LeWitt art piece using D3. Inspired by the original piece here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt geometric artwork using D3.js v6 to generate a square divided into four quadrants, each filled with distinct linear patterns. The visualization uses SVG rendering with `d3.select` and `d3.range` to create hundreds of thin rectangular shapes, while SVG `<mask>` elements define the boundaries of each quadrant. Horizontal, vertical, and rotated line patterns are clipped within the masks, recreating LeWitt’s systematic, rule-based aesthetic. The code defines all layout parameters manually, including square positions and rotation transforms, producing a static, procedural homage to the original piece.

Xxani
91% match
Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces one quadrant of a Sol LeWitt wall drawing, showing a single square of repeating horizontal stripes clipped to mask boundaries. The visualization uses D3 v6 to generate 100 SVG rectangles positioned vertically across the full viewport, each masked by a white 150×150 pixel square in the canvas’s top-left corner. The code defines the mask with SVG `<mask>` elements and appends rectangle data via `selectAll`, `data`, and `join`, using `range` from D3 to supply indices. Only the top-left square is enabled; the other three quadrants remain commented out.

Rrwata97
91% match
Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style geometric drawing using SVG masks to reveal distinct line patterns in four quadrants. The code uses D3 selections and `range(n)` to generate 100 horizontal, vertical, and diagonally rotated rectangles, each clipped by a rectangular mask. The `select` and `append` methods build the SVG canvas and mask elements, while `join` binds data to create the rects. The result demonstrates how D3 v3 and SVG masking can compose layered linear compositions.

CCurran Kelleher
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3.js version 7.3.0, generating a grid-like pattern of alternating vertical and horizontal bands over the full browser viewport. The artwork uses two SVG masks—one with a white circle punched through black and another with a black circle on white—so that vertical stripes appear only within the circular region, while horizontal stripes are visible everywhere except inside that circle. The code constructs 100 rectangles in each orientation via `selectAll` and `data().join()`, setting positions and dimensions to cover the canvas.

SSamuele Greco
87% match
Loading thumbnail…

Episode 4: Sol LeWitt Reproduction with D3

This piece reproduces a Sol LeWitt wall drawing by dividing the viewport into four quadrants, each displaying a distinct pattern of narrow black lines: horizontal, vertical, and two diagonal sets. The design uses D3 selections and masks to clip these lines into separate square regions. The code creates SVG rectangles via `selectAll` and `join`, with each quadrant’s pattern masked using SVG `<mask>` elements. The example relies on D3 v6 and renders purely as SVG, without external data, highlighting the minimal geometry of LeWitt’s original work.

KKaustav Sen
87% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt wall drawing using an SVG canvas. It layers two sets of perpendicular, striped rectangles, each masked to reveal the artwork through repeating geometric symbols. The code uses D3 v7 methods like `select`, `range`, `join`, and `symbol` to generate the marks. Two SVG masks are applied with inverted fills, producing a crosshatched pattern where the symbols appear as cutouts.

Lliu yang
86% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

A generative geometric composition mirrors a Sol LeWitt wall drawing, displaying a grid of horizontal and vertical striped rectangles on an SVG canvas. The primary visual effect is a circular white mask that reveals only the horizontal lines within its radius, while the vertical lines remain fully visible across the entire viewport. Built with D3 v6, the code uses `select`, `range`, and `join` to create 100 rectangles per axis, with `window.innerWidth` and `window.innerHeight` defining the responsive full-screen dimensions.

Ppeter@attachmentdivision.com
86% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition, generating a grid of overlaid horizontal and vertical stripes that are masked to reveal a central circle. The visualization uses D3 v6 to create an SVG scene, drawing 100 rectangles in each orientation and applying two masks with contrasting black-and-white circular cutouts to shape the final pattern. The rendering fills the entire browser window, with the circle positioned at the center of the viewport.

DDuckGorilla
86% match