Skip to main content
SimilarExport ZIP
100%

Sol D3

✓ Published0🌍 Public
Jjonathanh21
Last edited Aug 29, 2022
Created on Aug 29, 2022

Two intersecting sets of thin horizontal and vertical lines form a grid across the full screen. D3 symbols (shapes) are used as masks to selectively reveal or hide sections of these lines, creating a pattern inspired by Sol LeWitt's wall drawings. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate SVG rectangles and masked paths, with two mask layers applied in opposite color inversions.

AI-generated description

A reproduction of Sol LeWitt art piece

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

Sol Lewitt - D3 multi shapes

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.

Hhquazza@gmail.com
88% match
Loading thumbnail…

Sol Lewitt D3 v2

A grid of vertical and horizontal striped rectangles, generated with D3 v6, covers the screen. The full-width and full-height strips use `select` and `range` to map data to `rect` elements. Two SVG masks reveal overlapping circular regions: a white-filled circle on a black background shows the horizontal lines, while an inverted cutout mask displays the vertical lines, creating a cross-shaped intersection at the center. Rendering is via SVG with D3's `join` method.

Ppirani.sabah@gmail.com
87% 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
87% 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
87% match
Loading thumbnail…

Full Sol LeWitt D3

Sol LeWitt’s geometric drawing system is recreated as a generative SVG composition using D3. Horizontal and vertical grid lines are drawn across the viewport, each filtered through one of two masks that reveal alternating symbol shapes from `d3.symbol` at fixed intervals. The masks are constructed with `d3.select` and `append`, using `d3.range` to place five distinct symbols, while the grid relies on `selectAll` and `join` with `rect` elements. This implementation adapts the artist’s rule-based aesthetics to a full-screen, code-driven format.

PParker-D5
87% match
Loading thumbnail…

Sol LeWitt Reprod D3 symbols AG

This example recreates a Sol LeWitt-inspired geometric composition using D3.js. It shows a grid of thin horizontal and vertical rectangles layered to create a woven texture, with two central plus-shaped masks cutting away portions of the pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG elements, applying `mask` attributes to hide or reveal the intersecting lines. Two mask layers, one inverted, define the contrasting positive and negative spaces at the center of the piece.

Gguththered
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