Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction with D3 - Multiple Shapes

✓ Published1🌍 Public
Kkathrynrbernard
Last edited Jan 6, 2023
Created on Jan 5, 2023

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.

AI-generated description

Reproduction of Sol LeWitt artwork.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3 Exercise

This visualization reproduces a Sol LeWITT-style geometric composition using overlapping horizontal and vertical line grids. Four mask layers alternate line orientations and symbol shapes—including circles, diamonds, crosses, and triangles—to create a rhythmic interplay of foreground and background elements. The code uses D3 selections, `range`, `symbol`, and `symbols` APIs to generate SVG rectangles and paths, with masks defined via `renderMask` to invert or combine patterns across the full viewport.

Kkathrynrbernard
94% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 - One Shape

This example reproduces a Sol LeWitt-inspired geometric artwork using D3 v3 with SVG rendering. It displays 100 horizontal and 100 vertical rectangles layered over each other, with circular masks creating a central circular reveal and its inverted counterpart. The code uses `d3.select` to append an SVG element, `d3.range` and data joins via `.join('rect')` to generate the rectangles, and SVG `<mask>` elements with appended rect and circle shapes to define the visibility patterns. The rendering dynamically fills the browser window based on `window.innerWidth` and `window.innerHeight`.

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

Sol LeWitt Reproduction more shapes with D3

This visualization reproduces a Sol LeWitt-style geometric composition using overlapping striped rectangles and mask-based shapes. A grid of horizontal and vertical bars is drawn with D3’s `select` and `range` methods, while two SVG masks create contrasting circular cutouts—one inverted—by combining black and white fills with a `symbol` path from the `symbols` array. The masks alternate the visibility of the stripes, producing an optical interaction of positive and negative space. The piece uses fixed window dimensions and renders entirely with SVG, mirroring the minimal aesthetic of the original artwork.

YYingkai Song
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3 v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It displays two overlapping sets of striped rectangles—horizontal and vertical—that intersect through the use of SVG masks. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to generate mask shapes, then applies those masks to the rectangles. The masks are created by rendering inverted and non-inverted versions of the symbols, which reveal or hide portions of the grid-like stripes across the full viewport.

JJuan Corrales Correyero
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical grid lines rendered as SVG rectangles. The lines are selectively revealed or hidden through two complementary mask patterns, each containing a row of varied symbols that create organic interruptions in the strict grid. The visualization demonstrates D3’s data-joining capabilities and masking utilities, using `d3.select`, `d3.range`, and `d3.symbols` to generate the visual rhythm. A custom `renderMask` function builds the masks, with one mask using inverted fill logic to produce contrast across the full viewport.

Mmaciekawsq@gmail.com
90% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A grid of horizontal and vertical striped rectangles is partially visible through two circular masks, creating a layered crosshatch pattern reminiscent of Sol LeWitt's geometric wall drawings. The example uses D3 selections with `selectAll` and `join` to bind data from `d3.range` to SVG `rect` elements, rendered directly as SVG. Two SVG `mask` elements define the circular cutouts: one inverts the grid by showing only the intersection of shapes, while the other reveals the full pattern. The code dynamically sizes the visualization to the full browser window.

Ppawelsapiecha
90% match