Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction with D3

✓ Published2🌍 Public
Lliu yang
Last edited Nov 11, 2023
Created on Nov 10, 2023

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, masked to reveal a white diamond shape at the center and a black circle behind it. The visualization is rendered as an SVG using D3 v7, leveraging `select`, `range`, `join`, and `symbol` APIs to generate the grid of lines. Two masks (`circle-mask` and `circle-mask2`) combine the shapes, with the horizontal bars visible through the diamond and vertical bars elsewhere. The code imports from `d3` and appends elements to the body, adapting to the full window size.

AI-generated description

Sol LeWitt Reproduction

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt-style drawing using two sets of overlapping rectangular grids, each masked to reveal a circular region at the center of the screen. Vertical and horizontal stripes alternate visibility through complementary black-and-white circle masks, creating an intersecting pattern. The visualization uses D3 v7 with `select`, `range`, and SVG masks. It generates 100 rectangles per axis, sized relative to the viewport, and appends them dynamically without binding external data.

PPetrescu Alexandru
92% match
Loading thumbnail…

full Sol LeWitt Reproduction with D3

This example shows a full-screen abstract geometric composition inspired by Sol LeWitt, built with D3 v7 and rendered as SVG. Two sets of overlapping horizontal and vertical striped rects create a grid, while a diamond-shaped mask and a circular mask reveal different sections of the pattern. The code uses `d3.select`, `d3.range`, `d3.symbol` with a square symbol, and `.join()` to generate the shapes. The masks are constructed with `svg.append('mask')`, combining black and white rects and paths to control visibility.

Rroyable88
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 and SVG. It renders two sets of alternating horizontal and vertical rectangles that cover the full viewport, with each set clipped by a mask. The masks combine a white or black background with a large diamond-shaped symbol path, creating a starburst effect where the grid lines are selectively revealed. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs, with SVG `<g>` groups and `mask` elements. The drawing is generated dynamically to match the browser window’s dimensions.

Ccardoza-IPH
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3 to generate SVG shapes. Alternating vertical and horizontal striped rectangles are layered beneath two masks, creating a geometric composition where the pattern changes across the canvas. Each mask contains alternating black and white regions with D3 symbol paths—including circles, crosses, and diamonds—positioned at intervals. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to build the visualization, with the masks inverted relative to each other for a contrasting effect.

MMatthew Bruffey
92% match
Loading thumbnail…

Full Sol LeWitt kind of reproduction with D3

This example uses D3 to generate a full-screen SVG reproduction of a Sol LeWitt–style geometric drawing. It renders two alternating sets of vertical and horizontal stripes, each partially masked by rows of D3’s built-in symbol shapes (including circles, crosses, and diamonds). The code leverages `d3.range`, `d3.symbol`, and SVG `<mask>` elements to create the overlapping optical effect, with the masks alternating between inverted and normal fill modes. All drawing is done in the browser using D3 v6 and SVG.

VValentine Solonechnyi
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction D3 v2

A full-screen D3 visualization reproduces Sol LeWitt’s wall drawing using 48 horizontal and 48 vertical striped rectangles. Two SVG masks, created with `d3.symbol` and the `symbols[0]` diamond path, define circular cutouts that invert the stripe pattern. The code uses D3 v7’s `select`, `range`, and `join` to generate elements, with the second mask rendered in opposite fill colors to create a contrasting central motif. Rendering is purely SVG-based without animation.

Ttverdone
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering a full-screen SVG composed of 100 horizontal and 100 vertical stripes that are masked by two overlapping circular forms. The code directly uses `d3.select`, `d3.range`, and the `join` API to append and position the rectangles, while `d3.symbol` and `d3.symbols` generate the circular mask paths. The two masks, one inverted, are applied via the `mask` attribute to create a subtle interplay between the grid and the geometric shapes. The visualization responds to the browser window’s dimensions, as the width and height are taken from `window.innerWidth` and `window.innerHeight`.

Wwgloss
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using intersecting striped rectangles and circular masks. It renders two sets of perpendicular lines—horizontal and vertical—each composed of 100 thin `rect` elements, with overlapping regions revealed through the use of SVG `mask` elements and circles. The visualization uses D3 v7’s `select`, `range`, and `join` methods to generate and bind data, drawing directly to an SVG canvas sized to the browser window. The complementary masks create a striking negative-space circle in the center.

PPetrescu Alexandru
91% match