Skip to main content
SimilarExport ZIP
100%

More-practice-shapes Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
WWeeeLi
Last edited Oct 30, 2023
Created on Oct 30, 2023

This reproduction of a Sol LeWitt drawing uses D3 to generate a grid of alternating black and white horizontal and vertical bands. The SVG canvas is divided into 120 intervals, each containing thin rectangular strips. Two masks, created with D3’s `scaleBand` and `symbol` API, overlay the bands with repeated symbolic shapes, with one mask inverted to produce a contrasting pattern. The rendering is fully vector-based, scaling to the browser window’s dimensions.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction more shapes with D3

This visualization reproduces a Sol LeWitt-style geometric composition using overlapping striped rectangles and mask-based shapes. A grid of horizontal and vertical bars is drawn with D3’s `select` and `range` methods, while two SVG masks create contrasting circular cutouts—one inverted—by combining black and white fills with a `symbol` path from the `symbols` array. The masks alternate the visibility of the stripes, producing an optical interaction of positive and negative space. The piece uses fixed window dimensions and renders entirely with SVG, mirroring the minimal aesthetic of the original artwork.

YYingkai Song
88% match
Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-style drawing using d3 and SVG. It shows a grid of thin black horizontal and vertical lines, arranged in bands, with a circular mask that reveals the lines in the center while hiding them elsewhere and a second mask that creates a central black circle outline. The code uses d3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the shapes. The program reads the full browser window dimensions for its canvas and draws a 100-band grid, placing the circle masks at the screen’s center.

Gg1g10
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 -pr

A grid of thin horizontal and vertical bands fills the browser window, but a circular mask reveals only the central intersection of the two patterns. The piece reproduces a Sol LeWitt wall drawing. Created with D3.js (v6.6.1) using `select`, `range`, and `.join` to build SVG `rect` elements, it applies two SVG masks—one with a black background and white circle, the other inverted—to cut the stripes into a disc-like view at the center of the canvas.

NNaveen Pratiksha
87% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A generative reproduction of a Sol LeWitt art piece uses D3 to draw intersecting horizontal and vertical striped bands filtered by two complementary masks. The SVG rendering employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.scaleBand` to place alternating white and black symbol shapes within each mask, creating a woven visual pattern. The masks alternate transparency to combine the striped layers, producing a geometric composition that echoes LeWitt’s systematic wall drawings.

CCurran Kelleher
87% match
Loading thumbnail…

Sol LeWitt Reproduction with d3

This piece reproduces a Sol LeWitt drawing using D3 and SVG renderings. Two sets of 100 thin rectangles are drawn—one horizontal and one vertical—creating a grid-like pattern. Each set of rectangles is masked by a circular region: the horizontal bars use a mask with a central white circle on black, while the vertical bars use an inverse mask with a black circle on white. The result shows a grid within a circular window, with the horizontal and vertical lines swapping visibility inside and outside the circle. The code uses `d3.select`, `d3.range`, `svg.append`, and `.join()` to build the SVG elements and masks programmatically.

Yyankesswang
87% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 - Different shape

This example recreates a Sol LeWitt-inspired drawing using D3 to generate a grid of thin horizontal and vertical bars. Two SVG masks, each containing a large star-shaped path created with the `d3.symbol` API, are applied to the grid so the bars remain visible only within the star’s silhouette. The first mask uses a black background with a white star, while the second inverts the pattern, producing contrasting filled and striped regions. The visualization is rendered entirely in SVG, with coordinates calculated from the window dimensions via D3’s `select` and `range`.

KKhanin Sisaengsuwanchai
87% match
Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical black-and-white stripes on an SVG canvas. The SVG is populated with 100 rectangles in each orientation, using D3’s selection and `join` API to bind data to elements. Two circular masks, defined in D3’s `append` and `attr` calls, clip the stripes so that only a central circular region is visible, creating a geometric optical effect against the full-screen canvas.

Uulrichzhan
86% 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
86% match