Almost Original Sol Lewitt reproduction with d3

Refactoring Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js and SVG rendering within a React framework. It creates a grid of 100 horizontal and 100 vertical rectangles, each with a 10-pixel thickness, that span the full width and height of the viewport. The piece applies two distinct masks, generated with the D3 `symbol` API using a circle shape, to reveal or hide portions of the grid. The code demonstrates D3’s functional chaining with `select`, `range`, and `join` to build and style elements efficiently, while the masks are configured conditionally with inverted fills.

91% match

3 try of Sol Lewitt reproduction with d3

This example recreates a Sol LeWitt-inspired wall drawing using D3.js and SVG. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each strip assigned a mask that clips it into a repeating pattern of D3’s built-in symbol shapes (circles, crosses, diamonds, and triangles). Two masks are applied: one uses black symbols on white, the other inverts the fill, creating contrast between the two overlapping grids. The code builds masks programmatically via a reusable `renderMask` function and leverages D3’s `range`, `symbol`, and `symbols` APIs to generate the clipped geometry.

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using the D3.js library in a React framework, rendered as scalable vector graphics. The code creates an SVG canvas that fills the browser window and applies circular masks to horizontal and vertical striped rectangles, producing an overlapping grid pattern. The implementation uses D3’s `select` method to build the SVG element and appends shapes programmatically, though the mask and rectangle logic is commented out, leaving only the blank SVG. The visualization adopts LeWitt’s geometric, rule-based aesthetic.

TTheo-0201

Sol Lewitt Reproduction with D3

This visualization reproduces a Sol Lewitt wall drawing using D3.js in a React application, rendered as SVG. It displays a grid of horizontal and vertical thin rectangles that are masked to reveal a circular window at the center, creating an overlapping pattern reminiscent of Lewitt’s geometric art. The code uses `d3.select` and `d3.range` to generate 100 rects in each direction, while SVG `mask` elements with circle shapes control visibility. The example demonstrates data-driven SVG generation and masking techniques without external data sources.

PPhan Nguyen

2. try Almost Original Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt-inspired geometric composition using a grid of horizontal and vertical rectangles overlaid with masked decorative symbols. The piece creates a dynamic interplay between the striped background and the alternating black-and-white shapes, including paths generated from D3's `symbol` API. Built with React, the code uses D3.js selection and joining methods (`select`, `append`, `join`) to construct the SVG elements, with masks (`mask` and `mask2`) defining which areas of the symbols remain visible.

Full Sol Lewitt reproduction with d3

This visualization reproduces a Sol LeWitt wall drawing using a grid of thin horizontal and vertical rectangles generated with d3's `range`, `select`, and `join` methods. An SVG mask with a circular `symbol` path creates a central aperture, revealing the underlying grid in contrasting hues. The code renders entirely in-browser with React, using procedural loops to construct the 100x100 element pattern.

4 try of Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-inspired generative drawing using D3.js version 6 and React, rendered as SVG. It creates 100 horizontal and 100 vertical rectangles across the viewport, each masked so that alternating shapes—drawn with D3’s `symbol` API for circles, triangles, and other forms—reveal or hide the grid lines. Two masks are applied via `svg.call(renderMask, ...)` with inverted fill patterns, producing a layered, geometric composition. The code relies on D3 selections, `range`, `join`, and mask definitions to achieve the visual effect.

89% match