Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1

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.

CCasualWanderer20XX
91% match
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (using enter method)

This example renders a grid of vertical and horizontal bars overlaid with two circular masks, creating a crosshatch pattern that fades within a central circle. It uses D3 v7’s `select`, `range`, and the enter method to append SVG rectangles, while defining masks with `circle` and `rect` elements to control visibility. The code draws 100 vertical and 100 horizontal strips, each masked to reveal only the intersecting circular regions. The visualization demonstrates a geometric generative composition inspired by Sol Lewitt, rendered entirely with SVG.

CCasualWanderer20XX
90% match
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
89% match
Loading thumbnail…

Sol LeWitt Reproduction (D3 groups)

This example reproduces a Sol LeWitt art piece using D3 groups to draw two sets of overlapping stripes. One group renders 100 horizontal rectangles, and another draws 100 vertical rectangles, each set filtered through a circular mask. The code uses `select`, `append`, and `join` from D3's API, with the masks defined via `svg.append('mask')` and styled using `rect` and `circle` elements. The artwork dynamically fills the browser window, showcasing a grid-and-circle motif.

LLohitB
88% match
Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

JJohnny Dodge
88% 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
88% match
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (d3-shape & function block)

A generative SVG composition draws on Sol Lewitt's geometric wall drawings, using striped vertical and horizontal bands overlaid with a central symbol. The code employs D3 v3's `select`, `range`, and `join` to create rect grids, while `d3.symbol` and `symbols[6]` define a star-shaped path. Function blocks `renderMask` apply inverted and normal SVG masks, combining the shapes to produce layered, intersecting patterns across the full viewport.

CCasualWanderer20XX
87% match
Loading thumbnail…

Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-inspired geometric composition using D3.js. It renders a grid of horizontal and vertical SVG rectangles across the full window, with each set masked to reveal intersecting circular cutouts at the center. The visualization relies on d3.select, d3.range, and SVG mask elements to layer two sets of stripes, alternating black and white fills within the circles. The result is a clean, minimal pattern that mimics the artist’s systematic approach to drawing, with no data input beyond the generated grid dimensions.

Mmaciekawsq@gmail.com
87% match