Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (using data & d3-shape)

This work uses generative shapes drawn with d3-shape’s `symbol` and `symbols` to create large mask patterns. Vertical and horizontal bands of rectangles are clipped via two SVG masks arranged over a full-window canvas, each mask containing a row of distinct symbols laid along the center line. The render uses D3.js 7.9.0 for selections, joins, and attribute updates.

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 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
89% 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
88% 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
87% 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
87% 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
87% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as a generative SVG artwork. It renders a grid of alternating horizontal and vertical black lines, which are partially revealed through two SVG masks that use large geometric symbols to create the negative space. The code uses D3’s `select`, `range`, `join`, and `symbol` APIs to build the composition, with the `symbol` function generating the mask paths. The result is a dynamic, layered interplay of lines and shapes that fills the browser window.

AAaron
86% match