Full Sol LeWitt with D3

100%

Full Sol LeWitt with D3

✓ Published0🌍 Public

Last edited Dec 2, 2023

Created on Dec 2, 2023

A grid of alternating horizontal and vertical rectangles creates a full-screen Sol LeWitt–style composition, masked by two large diamond shapes. The D3 code uses `select` and `range` to generate 100 rectangles in each orientation, applying SVG `mask` elements to reveal or hide strokes. It leverages D3’s `symbol` and `symbols` APIs to draw the diamond masks, with `translate` positioning them at the center. The rendering is SVG-based, sized to the window with `innerWidth` and `innerHeight`.

AI-generated description

A reproduction of a Sol LeWitt art piece

MIT Licensed

Similar vizzes

Loading thumbnail…

Full D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 and SVG rendering. It shows a grid of thin vertical and horizontal rectangles spanning the full viewport, with each set masked to reveal a central diamond shape through alternating positive and negative space. The code builds the masks by appending `mask` elements with contrasting fill colors, then draws the diamond using a D3 path generator with the `symbol` API and a large size value. The layout relies on `d3.range` to generate 100 equally spaced rectangles along each axis.

AArturo Guevara

93% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles that overlap across the full browser window. The composition uses SVG masks to create alternating visibility: one mask reveals a central diamond shape against a black background, while the other inverts the pattern with a white background. The code leverages D3’s `select`, `range`, and `join` to append rectangles, and `symbol` with `symbols` to define the diamond mask paths. Rendering is SVG-based, with masks applied via the `mask` element.

Jjajinkya

90% 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

90% match

Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example renders a generative grid of thin horizontal and vertical rectangles that form a woven, screen-like texture across the full browser window. A large diamond-shaped hole and a circular cutout are created using two SVG masks, revealing the underlying white background. The piece reproduces a Sol LeWitt wall drawing using D3’s selection and data-join methods, along with `symbol`, `symbols`, and `range` to define the geometry. The layout responds dynamically to the viewport’s dimensions, and the composition relies on alternating white and default black fills for contrast.

IIgorGorin00

90% 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

90% match

Loading thumbnail…

Full Sol LeWitt Reproduction Final with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js to render a grid of thin horizontal and vertical lines across the full browser window. The piece uses SVG masks to create two contrasting geometric cutouts: a large white diamond-shaped symbol in the center and a black circular hole, revealing the line patterns beneath. The code employs d3.select, d3.range, and d3.symbol to generate the composition, with the mask elements dynamically positioned based on the viewport dimensions. The artwork is drawn entirely with SVG rectangles arranged by D3’s data join.

Kkwambokar

89% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

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.

Lliu yang

89% match

Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Jjmetzg11alpine

89% match