Skip to main content
SimilarExport ZIP
100%

Sol Lewitt Project in D3 Attempt #1

✓ Published1🌍 Public
CCasualWanderer20XX
Last edited Sep 9, 2025
Created on Sep 9, 2025

This D3.js example uses SVG masks to create an abstract composition inspired by Sol LeWitt’s wall drawings. Vertical and horizontal striped rectangles, generated with `d3.range` and `d3.select().join()`, are each partially revealed through circular masks defined with `mask` elements. Two distinct mask configurations alternate the visual prominence of the stripes, producing a dynamic interplay of lines and negative space across the full browser viewport. The rendering is purely algorithmic, with no external data source.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Project in D3 Attempt #2

This D3.js (v7.9.0) visualization recreates a Sol LeWitt-inspired wall drawing using two perpendicular sets of vertical and horizontal strips. Each set is masked by a distinct pattern, with one mask inverted relative to the other, creating an interlocking grid of geometric symbols. The SVG output is rendered directly to the browser window, using D3’s selection, symbol, and mask APIs to compose the overlapping forms. The code employs `d3.select`, `d3.range`, `d3.symbol`, and mask definitions to generate the alternating shapes at fixed intervals.

CCasualWanderer20XX
93% match
Loading thumbnail…

Sol Lewitt with D3 Project (from Scratch)

This example recreates Sol LeWitt’s geometric wall drawings using D3.js, rendering a dense grid of thin vertical and horizontal lines across the full browser window. Two opposing masks, each containing five distinct symbols from D3’s `symbol` API, selectively hide or expose portions of the line grid, creating overlapping, patterned regions. The visualization uses `d3.select`, `range`, and `join` to generate 120 rectangles in each orientation, with SVG masks applied via `mask.append` and `attr('mask', ...)`. The result is a digital homage that blends generative code with minimalist art.

CCasualWanderer20XX
91% match
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (group method)

This D3.js (v7.9.0) example constructs an SVG composition inspired by Sol LeWitt's geometric art. It draws a grid of vertical and horizontal stripes, each set masked by overlapping circles centered on the canvas. The first group of vertical rectangles is clipped by a circular mask, while the second group of horizontal rectangles is clipped by an inverse mask, revealing a cross-like pattern. The project uses D3's `select`, `append`, `range`, and the `.join()` API to build the SVG elements programmatically.

CCasualWanderer20XX
91% match
Loading thumbnail…

Sol Lewitt in D3 part 2

This example recreates Sol Lewitt’s geometric wall drawings using D3.js, rendering 500 horizontal and vertical stripes that overlap through two SVG masks. The code uses `d3.select`, `range`, and `symbol` to generate distinct symbol shapes (like circles and triangles) that act as the mask patterns, revealing or hiding the grid lines. Mask elements are built with `svg.append('mask')` and filled paths, producing layered visual effects of intersecting bands in black and white. The rendering approach uses SVG directly, with dimensions set from `window.innerWidth` and `window.innerHeight`.

Aashutoshc018@gmail.com
90% match
Loading thumbnail…

D3 Sol Lewitt

This example generates a geometric composition reminiscent of Sol LeWitt's wall drawings, using a series of horizontal and vertical bands that are selectively revealed through SVG masks. The design employs two distinct masks, each containing a circle, triangle, and rectangle, to create overlapping positive and negative shapes against a full-screen canvas. Built with D3 v7 and rendered as SVG, the code defines shapes using `d3.symbol()` for the triangle path, while the masks apply `url(#circle-mask)` and `url(#circle-mask-2)` to alternating striped rectangles. The result is a dynamic interplay of primary colors in black and white, driven entirely by procedural generation.

Aadonisacruz0@gmail.com
89% match
Loading thumbnail…

Sol LeWitt With D3

This example recreates a Sol LeWitt wall drawing using D3.js to render layered geometric abstractions in SVG. The visualization combines horizontal and vertical striped rectangles with concentric arc paths, all filtered through SVG masks that selectively reveal or hide portions of each shape across the viewport. The code uses D3 selections with `range()` to generate repeated elements, `.join()` for data binding, and `mask` attributes to composite intersecting forms. The result is a dynamic, generative composition that responds to the browser window dimensions while echoing LeWitt’s systematic, rule-based artistic style.

Jjony6290
89% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering 100 horizontal and 100 vertical stripes across the full browser window. It uses SVG masks to create alternating circular cutouts: the first mask (mask-1) reveals the grid in white with a black circle, while the second (mask-2) inverts the effect. The code employs D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric composition. The final output is a generative pattern where the intersection of stripes and circular voids produces the artwork’s characteristic visual rhythm.

CCurran Kelleher
89% match
Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical stripes. Two circular masks are applied to the stripes, creating a layered pattern where each mask reveals or hides portions of the rects. The visualization uses d3.select and d3.range to create 100 rectangles in each direction, rendering the final composition as an SVG. The code builds the masks with SVG mask elements and circle shapes, filling the entire window.

Yyejichun@naver.com
89% match