Skip to main content
SimilarExport ZIP
100%

Sol Lewitt - D3 multi shapes

✓ Published1🌍 Public
Hhquazza@gmail.com
Last edited Dec 27, 2024
Created on Dec 27, 2024

This example recreates Sol Lewitt-inspired geometric art using D3.js, rendering a grid of horizontal and vertical rectangles that are selectively masked by overlapping symbols. The visualization displays five distinct shapes—including circles, crosses, and diamonds—positioned at the center of the canvas. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to generate SVG paths, while SVG masks with inverted black-and-white fills determine which grid lines remain visible. The final pattern emerges from alternating mask states applied to the two perpendicular line sets.

AI-generated description

Trying to reproduce Sol Lewitt art in D3.

To know which version is the latest D3, go to Unpkg.com - when produced, latest version was D3.7.9

package.json --> used to pull in D3.js latest version

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt con D3 - Symbols

This example recreates Sol LeWitt-style geometric art using D3 v6, generating a grid of horizontal and vertical rectangles in SVG. Two masks, each containing a large D3 symbol path, cut circular holes through the intersecting lines, creating overlapping negative space. The visualization uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct the shapes programmatically, with masks applied via D3's selection and call methods. A third triangle symbol appears on the left, rendered with `d3.symbolTriangle`.

SSergio
91% 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
90% 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…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using D3.js to generate SVG shapes. It displays a grid of horizontal and vertical rectangles that are partially masked by overlapping circular regions, creating geometric intersections. The code constructs an SVG canvas sized to the browser window, then uses D3’s `select`, `append`, and `attr` methods to add and position the rectangles. Although the data array is currently empty, the logic prepares to map a sequence of marks with varying y-offsets and mask references, demonstrating how D3 can drive generative art through declarative joins and SVG masks.

Ssirenajbpearl@gmail.com
89% match
Loading thumbnail…

Sol lewitt in d3 after consolidation

This example reproduces Sol LeWitt’s geometric wall drawings using D3.js with an SVG rendering. It draws a grid of black horizontal and vertical rectangles, then applies two masks—one normal and one inverted—to selectively reveal or hide parts of the lines. The masks use d3.symbol and d3.symbols to create white or black shape cutouts positioned across the canvas. The code relies on d3.select, d3.range, and d3.join to bind data and construct the SVG elements dynamically.

Mmarc.chatton@outlook.com
89% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 - Multiple Shapes

Two overlapping grids of horizontal and vertical rectangles form a Sol LeWitt-inspired composition, with each grid masked by a separate pattern of D3 symbols. The code uses d3.select, range, symbols, and symbol to generate SVG rectangles and mask shapes, defining two masks via svg.call and renderMask. One mask is inverted, creating intersecting geometric layering across the full browser viewport.

Kkathrynrbernard
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
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