100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public

Last edited Sep 12, 2025

Created on Sep 12, 2025

Forked from Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt-inspired geometric artwork using D3.js, displaying a grid of horizontal and vertical black lines that appear to weave through overlapping symbolic shapes. The piece shows how layered masks create optical interference patterns, with seven different D3 symbols—including circles, crosses, diamonds, squares, stars, triangles, and wye forms—alternating between masking and revealing the line patterns beneath. Using D3 v6, the code employs `scaleBand`, `symbol`, and `mask` to generate the composition dynamically based on the browser window size, with two complementary masks determining which portions of the horizontal and vertical line grids remain visible.

AI-generated description

Sol LeWitt Reproduction with D3

This project recreates a Sol LeWitt-inspired artwork using D3.js. It generates a grid of lines masked by various geometric symbols to create an optical effect.

Features

Responsive design that fills the browser window
Two layered masks using D3 symbols
Horizontal and vertical line patterns
Dynamic generation based on screen size

How to Run

Open index.html in a web browser.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of alternating horizontal and vertical striped lines across the full browser window. Two SVG masks reveal the grid through circular and geometric shapes, while the second mask incorporates D3 symbol shapes and checkerboard patterns within its design. The code uses D3 v7 APIs including `select`, `range`, `symbol`, and `symbols` to generate the SVG elements, with mask composition controling which portions of the line grid remain visible.

AAngie Va. Moreno

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt geometric art piece using D3.js. It renders a grid of alternating horizontal and vertical black and white bands, with circular symbols and masks creating a complex, overlapping pattern. The visualization uses D3’s `scaleBand`, `range`, `symbols`, and `symbol` APIs, along with SVG masks and `<rect>` elements, to generate the composition dynamically. The code adapts to the browser window size and relies on D3’s `select` and `append` for DOM manipulation.

HHi I am Adil

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to create a grid of horizontal and vertical stripes that alternate based on masks containing overlapping symbol shapes. Two sets of rectangular bands are drawn, each masked by a pattern of symbols (using `d3.symbol` and `d3.symbols`) arranged across the width via `d3.scaleBand`, with inverted black-and-white fills. The SVG rendering uses `select`, `range`, and `join` to generate 120 stripes per dimension, with masks (`<mask>`) controlling which areas of the two layers remain visible. The result is a geometric interplay of lines and icons derived from LeWitt’s conceptual style.

Jjsoudeer

91% 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

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example visually recreates a Sol LeWitt wall drawing using only horizontal and vertical black lines, shaped by custom masks to form large geometric symbols. The piece uses D3.js (v6) with SVG rendering, generating 100 line groups across the canvas width and height. Two masks, one inverted, apply distinct patterns of D3’s built-in `symbols` (like circles and squares) to cut the lines, revealing positive and negative spaces. The code relies on `select`, `range`, `symbol`, and `join` from D3 to construct the composition dynamically.

Yyankesswang

91% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Aajoua

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example generates an abstract geometric composition inspired by Sol LeWitt, using D3 v6 to create intersecting striped rectangles with dynamic masking. The visualization alternates horizontal and vertical bands of thin lines, with masks that switch between filled and hollow symbol shapes—including circles, diamonds, and crosses—at regular intervals. Rendering in SVG, the code uses `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to position 120 strips across the viewport and apply patterned cutouts, producing a rhythmic interplay of line, shape, and negative space.

Mmkarnam.mahendra@gmail.com

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder

90% match