Skip to main content
SimilarExport ZIP
100%

Fork of Full Sol LeWitt Reproduction with d3

✓ Published0🌍 Public
Bbjfmbeck
Last edited Mar 8, 2023
Created on Mar 8, 2023

This example reproduces a Sol LeWitt-style grid of black horizontal and vertical bars, using d3-selection, d3-range, and d3-symbol to generate rectangular stripes overlaid with circular and triangular mask shapes. The SVG rendering creates 100 vertical and 100 horizontal rectangles, each masked by a different pattern of d3 symbols, producing a layered geometric composition. The two masks alternate inverted fills to control which stripes remain visible, resulting in a dynamic interplay of line and shape across the full window.

AI-generated description

A reproduction of a Sol LeWitt art piece.

YouTube link

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical stripes. Two sets of SVG rectangles are drawn across the full width and height of the viewport, each filtered through a separate SVG mask. The masks reveal or hide portions of the stripes using a row of D3 symbol shapes (from `d3.symbol`), with one mask inverted. The visualization uses D3 v6 selections, `range`, and `join` to generate the elements, and renders entirely as SVG in the browser.

CCurran Kelleher
93% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction Final with D3

This example draws a generative grid inspired by Sol LeWitt using SVG and D3. It fills the viewport with 100 horizontal and 100 vertical stripes, each masked so that only parts of the grid remain visible. Two separate masks, created with d3.mask, contain large D3 symbols (from d3.symbol) that act as cutouts or reveals, inverting their effect between the axes. The code uses d3.select, d3.range, and d3.symbol to build the composition programmatically, producing a layered geometric pattern that plays with visibility and form.

Kkwambokar
92% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3 - reference

This example reproduces a Sol LeWitt art piece using D3 v6. It renders two sets of translucent black-and-white striped rectangles overlaid with masks, creating a grid of alternating symbols. The code uses `d3.select`, `d3.range`, `d3.symbol`, `d3.symbols`, `d3.scaleBand`, and SVG masks. Each mask layers vertically and horizontally offset rectangles with D3 symbol paths, alternating white and black fills to generate overlapping geometric patterns. The page fills the browser window with 120 stripes per axis, using inlined SVG without external data.

FFelicity Wu
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v7, displaying 100 horizontal and vertical striped rectangles that overlap to create a grid pattern. Two SVG masks, each containing a large diamond symbol, selectively hide portions of the stripes, revealing the geometric interplay between the layers. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate the shapes, with masks defined via SVG `<mask>` elements and rendered as a static SVG scene.

Gguts
92% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a grid of overlapping horizontal and vertical rectangles as SVG elements. The piece shows alternating stripes of black and white that intersect within two circular masks, creating a layered, op-art effect across the full browser viewport. The code uses d3.select, d3.range, and selection.join to generate 100 rectangles along each axis, with svg.append('mask') defining two circular regions that invert the fill colors. The rectangles are masked so that one circle reveals white-on-black stripes while the other shows black-on-white, producing a dynamic visual contrast.

FFerasMorsi
92% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate overlapping striped rectangles and symbol-based masks. The visualization shows a grid of horizontal and vertical bars filtered through two inverted mask layers, each containing a row of D3’s built-in symbol shapes (circles, crosses, diamonds, squares, stars, triangles, and wye). The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct SVG elements dynamically, rendering directly into the browser window with no external data source.

Ccardoza-IPH
92% match
Loading thumbnail…

Fork of Fork of Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7, rendering two sets of overlapping horizontal and vertical stripes on an SVG canvas. The stripes are filtered through mask elements that reveal different symbol glyphs—circles, crosses, and other d3.symbol shapes—positioned along the center. The code uses d3.select, d3.range, and d3.symbol to generate the paths, with masks applied via SVG attributes. The artwork alternates mask inversion to create contrasting positive and negative space across the full window dimensions.

IIgorGorin00
92% match