Sol Lewitt Project

100%

Sol Lewitt Project

✓ Published0🌍 Public

Last edited Feb 14, 2023

Created on Feb 14, 2023

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

90% match

Loading thumbnail…

Sol_LeWitt

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The stripes are masked by two overlapping circles, creating a circular intersection pattern that reveals and hides parts of the grid. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to define the visual effect. The artwork scales to the browser window, with masks controlling which stripes remain visible, echoing LeWitt’s geometric, systematic style.

Ffcordon@pin.upv.es

90% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering two sets of horizontal and vertical striped rectangles that intersect within circular masks on an SVG canvas. The code generates 100 of each rectangle type, with the first mask revealing a solid circle and the second inverting the pattern, creating a layered geometric contrast. It uses D3’s `select` and `range` functions from version 6.6.1 to build the SVG dynamically, positioning elements based on window dimensions.

Aainhoadieruiz@gmail.com

89% match

Loading thumbnail…

sol lewitt2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 selections and SVG masks. It draws two intersecting sets of thin horizontal and vertical rectangles, each masked by a large circular symbol defined via `d3.symbol` and `d3.symbols`. The first mask uses a light-on-dark pattern, the second an inverted dark-on-light pattern, creating layered contrast across the full window. The code relies on `d3.select`, `range`, `symbol`, and SVG `mask` elements to generate the visual, with a hardcoded `n` of 100 for the line spacing.

Nneojournalist

89% match

Loading thumbnail…

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

89% match

Loading thumbnail…

Sol LeWitt

This example reproduces Sol LeWitt’s geometric art using an SVG rendering approach. It displays a grid of horizontal and vertical stripes, but only within a circular region at the center of the screen. The code creates SVG masks, specifically `circle-mask` and `circle-mask2`, to clip two sets of 100 rectangle elements. The first set uses a white-on-black mask for horizontal stripes, while the second uses a black-on-white mask for vertical stripes, producing a clean, intersecting pattern. The canvas automatically scales to the full window dimensions.

Aamrselaraby

89% match

Loading thumbnail…

Sol Lewitt (D3)

Two overlapping grids of thin horizontal and vertical rectangles render on an SVG canvas, creating a crosshatched composition. Masking reveals the pattern only within two circular regions: one section shows horizontal lines, while the other displays vertical lines. Built with vanilla JavaScript and D3 v6, the code uses `select`, `range`, and `join` to generate 100 rectangles per axis, with SVG `mask` elements defining the circular cutouts.

WWaseem Medhat

89% match

Loading thumbnail…

Sol Lewitt Variant with D3

This example reproduces Sol Lewitt’s geometric wall drawing as an interactive SVG visualization. It displays a grid of alternating horizontal and vertical stripes, masked into two overlapping circular windows at the center of the canvas. Using D3 selections and data joins, the code generates 100 rectangles in each direction via `range(n)`. Two SVG masks with complementary black-and-white circles control which stripes appear inside each circle, creating a layered optical effect.

Iibaird6@gatech.edu

89% match