Sol LeWitt Designs

100%

Sol LeWitt Designs

✓ Published0🌍 Public

Last edited Jun 27, 2022

Created on Jun 26, 2022

This piece generates a Sol LeWitt-inspired wall drawing using D3. It displays 100 horizontal bands across the full screen, masked by a singular circular cutout. A second, vertical set of bands is masked by an inverted circle, creating a geometric interplay of lines and voids. The code demonstrates D3's selection and join APIs to build the SVG structure, with the circular masks defining the visible regions.

AI-generated description

Following the curse Data Visualization with D3 I created a "piece of art" copying Sol LeWitt's style.

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This piece recreates a Sol LeWitt wall drawing using D3.js to generate layered, mask-based geometric forms. It displays a grid of horizontal and vertical lines that intersect within a central circular region, creating a dynamic visual pattern. The code uses the D3 selection API and raw SVG elements, employing two circular masks to selectively reveal the line structures. The rendering is dynamically sized to fit the browser window, producing an interactive, generative art experience.

Ssean@wall.ninja

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

JJinpeng Li

90% match

Loading thumbnail…

Sol LeWitt in D3

This example reproduces a Sol LeWitt wall drawing using D3.js and raw SVG manipulation. It generates 100 vertical and 100 horizontal rectangles, applying circular masks to create intersecting line patterns against contrasting backgrounds. The code manually constructs SVG elements and mask definitions, using two masks with inverse color schemes to reveal or hide portions of the drawn lines. It relies on D3 for selection and the document object model, while the rendering approach uses native SVG APIs.

DDouChinn

90% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3 to generate a grid of alternating horizontal and vertical bands across the full viewport. Two masks reveal circular cutouts: the first exposes a black circle on a transparent background, while the second creates an inverse pattern. The code uses D3's `select`, `append`, and `join` APIs to efficiently construct SVG rectangles from `range(n)` data, with masks defined via SVG `mask` elements containing `rect` and `circle` shapes, rendering entirely as vector graphics.

Mma-jacobs

89% match

Loading thumbnail…

Sol LeWitt reproduction with D3

A full-screen SVG shows a grid of thin horizontal and vertical black lines, masked to reveal a central white circle on a black background. The piece reproduces a Sol LeWitt wall drawing: horizontal bars cross the entire canvas, while vertical bars are visible only outside a centered black circle. Using D3 selections and `range`, the code generates 100 rects for each orientation, then applies two SVG masks—one with a white circle to show the horizontal lines within it, and another with a black circle to hide the vertical lines there. The result creates a subtle interplay of line directions across the circular boundary.

ZzolboBatsaikhan

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical rectangles in SVG. Two circular masks are applied to show only the overlapping region where the lines intersect. The code uses d3.select and d3.range to generate 100 bars in each direction, with the masks defined as SVG elements that hide or reveal portions of the grid. The artwork fills the entire browser window, displaying only the masked circular intersection.

Lliu yang

89% match

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of intersecting horizontal and vertical rectangles as SVG elements. The artwork shows a dense cross-hatch pattern that gradually disappears within a central circular region, creating a stark contrast between the outer textured area and the empty circle. The code generates 100 lines in each direction using `d3.range` and `selectAll(...).join('rect')`, then applies two SVG masks (`inner-mask` and `outer-mask`) to selectively reveal or hide the lines. The piece scales to the full browser window size.

AAngela Kochoska

89% match