TD_Sol_Lewitt_D3

Sol LeWitt in D3

This example reproduces a Sol LeWitt wall drawing using D3.js and raw SVG manipulation. It generates 100 vertical and 100 horizontal rectangles, applying circular masks to create intersecting line patterns against contrasting backgrounds. The code manually constructs SVG elements and mask definitions, using two masks with inverse color schemes to reveal or hide portions of the drawn lines. It relies on D3 for selection and the document object model, while the rendering approach uses native SVG APIs.

DDouChinn

Sol Lewitt with D3

This example recreates a Sol LeWitt-inspired drawing by layering horizontal and vertical stripes within circular masks. The stripes are generated as SVG rectangles using D3's `select` and `range` utilities, with the `join` operator binding data to the DOM. Two SVG masks create contrasting circular windows: one reveals the grid inside a circle, the other creates an inverse ring effect. The visualization adapts to the full browser window, using the viewport dimensions for the canvas size, and renders entirely through SVG elements without a separate data source.

TTirth Trivedi

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

JJinpeng Li

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Llukasreber

Sol LeWitt with D3

This example renders a minimalist, generative composition inspired by Sol LeWitt using D3.js. It draws one hundred horizontal rectangles stacked vertically, each with a fixed height and dynamic width, all clipped by a circular mask. The SVG output uses a black background rectangle inside the mask to reveal the bars only within the circle’s bounds. The code relies on D3’s `select`, `range`, and `join` methods to create the rectangles, demonstrating a simple data-driven approach to geometric art.

Llok noe

Sol LeWitt SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi

SOL Lewitt with D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js version 7.8.5. It displays a grid of horizontal and vertical striped rectangles that form a circular mask pattern at the center of the screen, rendered as SVG. The code builds the visualization with `select`, `range`, and `.join('rect')`, layering two sets of rectangles and applying SVG `<mask>` elements to create the intersecting shapes.

DDonald Bagwell

Sol LeWitt Reproduction Vertical with D3

This example reproduces a Sol LeWitt-inspired drawing, showing a series of horizontal SVG rectangles that are masked to reveal a circle in the center of the viewport. The code builds the visualization using D3.js methods, specifically `select`, `append`, `attr`, and the `join` operation to create and style the shapes. By setting each rectangle's `mask` attribute to a predefined SVG mask, the piece demonstrates how layered vector shapes can create a generative, minimalist artwork. The rendered output uses SVG and occupies the full browser window.

WWasanta Pruttisarikorn