Sol LeWitt-d3

100%

✓ Published1🌍 Public

Bbillzhou2005

Last edited Jan 6, 2023

Created on Jan 5, 2023

This example renders a full-screen SVG composed of 100 horizontal rectangles, each 10 pixels tall and spaced 20 pixels apart. The rectangles are masked by a circular pattern, creating an effect reminiscent of Sol LeWitt’s wall drawings. The visualization uses React and is built with d3.select, d3.range, and the data-join pattern via the .join('rect') method, while the SVG mask is defined in the marks array as 'url(#circle-mask)'. The code also demonstrates dynamic sizing based on the browser window dimensions.

AI-generated description

A demostration for SVG shapes

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

92% match

Loading thumbnail…

Sol LeWitt with d3

This example uses React and d3 to render a grid of horizontal and vertical rectangles, creating a pattern inspired by Sol LeWitt. The code uses `d3.select` and `d3.range` to generate 48 rectangles per axis, each masked by a circular shape. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to the respective sets, producing a cross-hatching effect inside the circle and a contrasting negative space outside. The rendering targets a full-window SVG.

Mmax-31

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 selections and SVG masks. It renders 100 horizontal rectangles across the full window width, each masked by a circular cutout centered on the screen, creating a striped pattern with a visible circle. The code uses D3’s `select`, `selectAll`, `data`, and `join` methods to bind array data to SVG `<rect>` elements, and defines the mask via a hardcoded SVG `<mask>` element with a black background and white circle. The visualization runs in a React framework with a minimal HTML setup, relying on D3 v6.6.1 for DOM manipulation and SVG rendering.

MMonWas

91% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt drawing as a full-screen SVG composition of horizontal and vertical striped rectangles. Two circular masks reveal the overlapping line grids, creating a dynamic intersection pattern. The visualization uses D3 v6 with `select`, `range`, and data joins to generate the rect elements, while SVG `mask` elements define the circular cutouts. The rendering is built with React and SVG, adapting to the window dimensions.

MMark Christian

91% match

Loading thumbnail…

full Sol LeWitt-d3

This example displays a full-screen grid of horizontal and vertical stripes within two circular masks, creating an overlapping pattern of lines at the center of the viewport. The visualization generates 100 rectangles for each orientation using `d3.range`, appending them to SVG groups via `d3.select` and the `join` operation. Two SVG masks, one with a black background and white circle and the other inverted, control visibility of the stripes, producing a dynamic interplay of crisp bands within the circular boundaries. The rendering is built with React, uses the d3 library version 6.6.1, and outputs to SVG.

Bbillzhou2005

90% match

Loading thumbnail…

Sol LeWitt D3

This example recreates Sol LeWitt’s geometric wall drawings using D3.js and SVG masks. A grid of horizontal and vertical rectangles is clipped by two complementary circular masks, creating intersecting bands that reveal or hide lines in alternating regions. The visualization uses `d3.select`, `d3.range`, and `join` to generate the rectangles, with masks defined via SVG `mask` elements. The layout fills the browser window, and the code runs in a React environment with SVG rendering.

JJamie

90% match

Loading thumbnail…

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

90% match

Loading thumbnail…

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.

Cclara7227

90% match