Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Zzhuomo-maker
Last edited Jun 16, 2023
Created on Jun 12, 2023

This work reproduces a Sol LeWitt piece by generating a grid of black-and-white symbols, with each column alternating between a geometric icon and a plain block. The code uses D3's `select`, `range`, `symbol`, `symbols`, `scaleBand`, and `selectAll` with a `.join` pattern to create two overlapping masked groups of horizontal and vertical rectangles. It defines two SVG masks, `mask1` and `mask2`, which inversely filter the stroke and fill of the symbols and bars, producing a layered, interlocking composition. The visualization is rendered as an SVG that fills the browser window.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition as an interactive SVG visualization. It renders 100 horizontal and vertical stripes that intersect to form a grid, with a mask applied to reveal a diamond-shaped symbol in the center. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the shapes and masks, while `renderMask` creates two complementary mask layers. The visualization fills the browser window and is built entirely with SVG elements in D3 v6.

Zzhuomo-maker
93% 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
92% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v7 and SVG. It generates two sets of striped rectangles—horizontal and vertical—layered over each other. The code applies two complementary SVG masks, each containing a row of D3 symbol shapes, to selectively reveal or hide parts of the grid. The masks are created programmatically with the `renderMask` function, which uses `d3.range`, `d3.symbol`, and `d3.symbols` to position the mask shapes across the canvas. The final result creates an intricate, textured interplay between the geometric lines and the symbol cutouts.

ZzolboBatsaikhan
92% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines as SVG rectangles. Two masks overlay the composition, with one inverted, creating a contrasting pattern where the line grid is partially revealed or hidden. The code builds 100 spaced rectangles in each direction, then applies masks generated from D3’s `symbol` paths, which are transformed and positioned across the canvas. The rendering uses D3’s selection and join APIs to construct the SVG dynamically, with dimensions matching the browser window.

Zzhuomo-maker
92% match
Loading thumbnail…

Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of alternating horizontal and vertical rectangles. The rectangles are masked by two overlapping circular symbols, one inverted, to create the final visual composition. The code leverages `select`, `range`, `symbol`, and `symbols` from D3, rendering SVG shapes across the full window dimensions. The masks are built with appended `mask` elements and paths, using D3’s `join` for efficient data binding.

Rroyable88
92% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate geometric patterns of horizontal and vertical bands. It employs `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to create SVG rectangles and symbols within two masks, alternating their fills to produce an interlocking striped composition. The code uses an SVG renderer with `window.innerWidth` and `window.innerHeight` for full-screen display. While mask creation functions are defined for both layers, only the initial band structures are rendered in the current setup.

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