Full D3 Sol LeWitt pt2

100%

Full D3 Sol LeWitt pt2

✓ Published1🌍 Public

Last edited Sep 5, 2022

Created on Sep 5, 2022

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt with D3

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`.

Aainhoadieruiz@gmail.com

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

91% match

Loading thumbnail…

Full Sol LeWitt con D3

This example renders a grid of horizontal and vertical rectangles using D3’s `select`, `range`, and `join`. Two SVG masks, created via `append('mask')` and `attr('id')`, cut a diamond-shaped hole in the grid, with one mask inverted to show contrasting fill. The code uses `symbol` and `symbols[3]` to draw the diamond path, and `svg.call` to apply masks. It runs at full browser size with no external data, relying on D3 v6.6.1 and SVG rendering.

SSergio

91% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully

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

90% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping sets of thin horizontal and vertical rectangles. The drawing applies two distinct SVG masks to each set, creating a crosshatched grid that visually inverts where the shapes intersect. Built with D3 v6, it generates 100 rectangles per axis using `range` and `selectAll().join()`, while the `symbol` API draws a diamond-shaped mask path. The final SVG adapts to the full browser window size, with masks rendered through appended `<mask>` elements.

DDuckGorilla

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

90% match