Skip to main content
SimilarExport ZIP
100%

LeWitt Art With Multiple Shapes in function in D3

✓ Published1🌍 Public
AAkbarjon
Last edited May 19, 2022
Created on May 19, 2022

This example reproduces a Sol LeWitt–style generative artwork by layering two sets of thin rectangular strips—vertical and horizontal—across the full viewport. Each set is masked using an SVG `<mask>` element, with the masks populated by D3 symbols (from `d3.symbol` and `symbols`) positioned in a row, alternating fill colors to create intersecting geometric patterns. The code uses `select`, `range`, and `join` from D3 v7 to bind data and render both the rectangles and the mask shapes dynamically.

AI-generated description

a reproduction of a sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js v7. It layers two sets of thin rectangles—one horizontal, one vertical—across the full viewport, creating a grid-like pattern. Two SVG masks, each containing a D3 symbol (a cross), selectively reveal or hide portions of the rects by applying alternating black and white fills. The code uses `d3.range` to generate data, `d3.symbol` with `symbolCross`, and `d3.select` to append elements and masks.

Ddeebanks77
87% match
Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

MMarvin Frede
87% 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
86% match
Loading thumbnail…

LeWitt with D3

Inspired by Sol LeWitt’s geometric wall drawings, this SVG visualization uses D3 to layer horizontal and vertical striped rectangles over each other. Two masks—one inverted—reveal and hide sections of the grid using D3’s `symbol` shapes (such as circles and crosses) as cutouts. Built with React and D3 v6, the code generates 200 stripes per direction and positions symbols across the canvas to create intersecting patterns.

Ggrassfluffy02
86% match
Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 2

This example reproduces a Sol LeWitt-inspired drawing using D3.js v7, rendered as SVG. It displays two perpendicular sets of thin horizontal and vertical rectangles that form a dense grid over the full viewport. Two circular masks—created with `svg.append("mask")`, `symbol(symbolCircle)`, and inverted black-and-white fills—cut overlapping circular holes in the grid, revealing the background. The code uses `select`, `range`, `join`, and `attr` to generate 100 rectangles per axis, with the `symbolCircle` path defining the mask shapes.

Ddeebanks77
86% match
Loading thumbnail…

recreate LeWitt art

This visualization recreates a Sol LeWitt-style geometric drawing using nested SVG masks to create an intersecting grid of vertical and horizontal bars. The code generates 100 thin vertical rectangles and 100 horizontal rectangles, each offset by 20 pixels, with two circular masks applied to reveal a central circular window where the bars remain visible. Built with D3.js (using `select`, `range`, and `join`), the SVG masks use white and black fills to selectively show or hide the rectilinear pattern. The final piece presents a clean, minimalist composition of repeating lines interrupted by a smooth circular void.

AAkbarjon
86% match
Loading thumbnail…

4:50 So LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s wall drawing “4:50” using D3 with SVG rendering. Two sets of 48 alternating thin horizontal and vertical rectangles intersect, each masked by a distinct pattern of D3’s built-in symbol shapes (such as circles and crosses). Masks are generated with the `symbol` API and applied via the `mask` attribute, using inverted fill colors to create contrasting cutout effects across the grid. The scene fills the entire viewport, with rectangles positioned using D3’s `range` and `join`.

Mmax-31
86% 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
85% match