Episode 4: Sol LeWitt Reproduction with D3

100%

Episode 4: Sol LeWitt Reproduction with D3

✓ Published6🌍 Public

Last edited May 15, 2021

Created on May 14, 2021

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.

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

89% 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

89% 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

87% 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

87% match

Loading thumbnail…

Sol LeWitt Reproduction with D3-episode 04

This piece displays a visual grid of alternating horizontal and vertical strips that are revealed through two contrasting circular masks. Built with the D3 library (version 6.6.1), it generates 100 semi-transparent rectangular bands in each orientation, with one mask using a black background and the other using white to invert the visible regions. The composition forms an intersecting pattern that echoes Sol LeWitt’s geometric style, rendered entirely through programmatic SVG element creation.

Mmaxthamt

87% match

Loading thumbnail…

4_Sol LeWitt Reproduction with D3

This piece uses D3.js within an SVG framework to create a geometric composition inspired by Sol LeWitt. It displays a central circular window formed by two overlapping masks—one creating a circular hole, the other creating a surrounding ring—through which horizontal and vertical striped rectangles pass. The artwork is generated procedurally by creating a mask element with a circle, applying it to a series of rect elements, then repeating the process with inverted colors for a second layered set of lines. The D3 import is present but unused; all shapes are built via direct SVG DOM manipulation.

DddG12g

86% match

Loading thumbnail…

Le04 Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3.js. It renders a grid of thin horizontal and vertical SVG rectangles across the full browser window, with each line colored by default. Two circular masks reveal the lines: the first shows a white circle over a black background, while the second inverts the effect, hiding the circle and showing the surrounding lines. The code uses `d3.select`, `d3.range`, and `selection.join` to bind data and create the rectangles.

CColin Frutschi

86% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 - squares

This example reproduces a Sol LeWitt geometric composition by dividing the canvas into four quadrants, each filled with a distinct pattern of parallel or rotated line segments. The piece uses D3 v6 to generate SVG rectangles and applies four separate `mask` definitions to confine each pattern to its respective square. Horizontal, vertical, and 45-degree rotated lines are created by binding data from `d3.range` and manipulating `x`, `y`, `width`, `height`, and `transform` attributes. The viewport is scaled to the browser window, and the code imports `select` and `range` directly from the D3 module.

TToly

86% match