Skip to main content
SimilarExport ZIP
100%

Fork of Episode 4: Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Rrwata97
Last edited Apr 20, 2023
Created on Apr 20, 2023

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.

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

Fork of Episode 4: Sol LeWitt Reproduction with D3

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.

DDea Bardhoshi
91% 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
89% 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
89% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3 v7, generating a grid of horizontal and vertical stripes overlaid with a circular mask. The SVG rendering shows a black-and-white composition where two perpendicular striped layers intersect, with a central circle revealing horizontal bands while the outer area displays both orientations. The code uses `d3.select`, `d3.range`, and `join` to create rectangles, and applies SVG `<mask>` elements with circles to control which stripes appear in each region, with the circle radius derived from a fixed pixel step.

VVincent Leduc
88% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It renders a grid of horizontal and vertical SVG rectangles, each masked to reveal a circular cutout in the center. The visualization uses two overlapping D3 selections with `mask` attributes to create alternating stripes visible only in the circular region. The code leverages D3’s `select`, `range`, and data joins to generate elements efficiently. The full-screen SVG canvas displays 100 horizontal and vertical bands, with the second mask inverting the visibility pattern to achieve the final layered effect.

CCurran Kelleher
88% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v7, displaying 100 horizontal and vertical striped rectangles that overlap to create a grid pattern. Two SVG masks, each containing a large diamond symbol, selectively hide portions of the stripes, revealing the geometric interplay between the layers. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate the shapes, with masks defined via SVG `<mask>` elements and rendered as a static SVG scene.

Gguts
88% match