Skip to main content
SimilarExport ZIP
100%

Sol LeWitt in d3

✓ Published1🌍 Public
TTobi Olabode
Last edited Nov 6, 2023
Created on Nov 6, 2023

This example recreates Sol LeWitt’s geometric wall drawings using D3 v5, rendering a grid of horizontal and vertical black rectangles on an SVG canvas. The code employs the `select` and `range` functions from D3 to generate 100 line segments in each direction, while two SVG masks—each containing a white circle—reveal only the portions of the rectangles that fall within the circular boundaries. The visualization uses `join` to efficiently build the rectangles and applies the masks via the `mask` attribute, producing intersecting line patterns that interact with the circular cutouts.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.

Test Heading

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt in d3 v2

This example recreates Sol LeWitt's geometric wall drawings using D3 v5. It creates a grid of intersecting horizontal and vertical rectangles on an SVG canvas. Two SVG masks define a circular window, with one mask inverting the other, revealing the line intersections within the circle. The code uses D3's `select`, `range`, and data join operations to generate the 100 rect elements per axis, with dimensions tied to the browser window.

TTobi Olabode
96% match
Loading thumbnail…

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
93% 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
92% match
Loading thumbnail…

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
92% match
Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of intersecting horizontal and vertical rectangles as SVG elements. The artwork shows a dense cross-hatch pattern that gradually disappears within a central circular region, creating a stark contrast between the outer textured area and the empty circle. The code generates 100 lines in each direction using `d3.range` and `selectAll(...).join('rect')`, then applies two SVG masks (`inner-mask` and `outer-mask`) to selectively reveal or hide the lines. The piece scales to the full browser window size.

AAngela Kochoska
92% 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
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical lines. Ninety-nine horizontal rectangles and ninety-nine vertical rectangles are drawn across the full browser window, with two circular masks applied to reveal the lines only within intersecting circular regions, creating an overlapping geometric pattern. The code uses D3’s `select`, `range`, and `join` methods with the SVG renderer, and relies on the `mask` attribute to define the circular cutouts.

WWolfgang
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3 to generate a grid of alternating horizontal and vertical bands across the full viewport. Two masks reveal circular cutouts: the first exposes a black circle on a transparent background, while the second creates an inverse pattern. The code uses D3's `select`, `append`, and `join` APIs to efficiently construct SVG rectangles from `range(n)` data, with masks defined via SVG `mask` elements containing `rect` and `circle` shapes, rendering entirely as vector graphics.

Mma-jacobs
92% match