Simple_SolLettWittRecreation_no.json

100%

Simple_SolLettWittRecreation_no.json

✓ Published0🌍 Public

Last edited Jan 4, 2023

Created on Jan 4, 2023

Forked from Simple_SolLettWittRecreation

This example uses D3 v7 to render a grid of 100 vertical and horizontal bar-shaped rectangles that intersect across the full viewport. A circular SVG mask, centered in the frame, reveals only the area inside its 200-pixel radius, while the surrounding bars remain hidden behind a white overlay rectangle. The code appends SVG elements via `select`, `append`, and `join`, and uses `range` to generate the data for each bar. The visualization demonstrates how SVG masks can selectively crop layered geometric compositions in real time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Simple_SolLettWittRecreation

Two nested sets of d3-selected SVG rectangles form a subtle grid of vertical and horizontal lines, which is partially occluded by a circular mask. The entire composition is filled with a white overlay that uses the same circular mask, isolating the grid intersection in the center of the viewport. The code builds the 100 vertical and horizontal bars with `d3.range`, `selection.join`, and `selection.attr`, then applies a `<mask>` element with a centered circle to clip the background and horizontal lines against the vertical bars.

Ppeter@attachmentdivision.com

89% match

Loading thumbnail…

Sol LeWitt SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi

84% match

Loading thumbnail…

testD3 Sol LetWitt Reproduction

This example reproduces a Sol LeWitt-style drawing using D3.js, where a grid of horizontal and vertical rectangles is rendered in SVG. The code uses `d3.select` to append an SVG canvas and `d3.range` to generate 100 equal intervals, creating thin striped bars. Two masks, each containing a circle, control visibility: one mask makes the horizontal bars disappear outside a central circle while the other does the opposite for vertical bars, producing an overlapping circular pattern. The dimensions adapt to the full browser window.

Ggaoqing027

83% match

Loading thumbnail…

SOl Le witt with D3

This example recreates a Sol LeWitt-inspired drawing using D3.js, showing a grid of horizontal and vertical bars that intersect within two circular masks. The SVG rendering uses D3 selections and data joins to generate 100 horizontal rectangles and 100 vertical rectangles, each constrained by a separate mask. The first mask reveals horizontal bars through a white circle on black, while the second uses the inverse, creating a contrasting circular crosshatch pattern. The code leverages D3’s `select`, `append`, and `range` APIs to build the scene dynamically.

Ddexuzi

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

83% match

Loading thumbnail…

Sol LeWitt with D3

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

JJetlinZ

83% match

Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 to generate a grid of horizontal and vertical rectangles. It shows two sets of 100 thin bars, one stacked vertically and one horizontally, which intersect to form a fine lattice across the full browser window. The code uses SVG masks with `d3.select` and `range` to reveal a central 200-pixel-radius circle where one set of bars appears white on black, while the other appears black on white, creating a contrast inversion. The visualization is rendered with SVG elements created via `append` and `join` within the D3 v7 library.

GGullyPlook

83% match

Loading thumbnail…

Sol LeWitt Reproduction With D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal bars that form a circular cutout in the center. The visualization shows 100 thin, full-width rectangles stacked vertically across the screen, with a circular mask applied to create a negative-space circle in the middle of the canvas. The code leverages D3’s `select`, `range`, and data-join methods to generate the SVG rectangles, while an SVG `<mask>` element containing a black rectangle and white circle defines the visible region. The rendering uses the D3 v7 library and outputs vector-based SVG graphics that fill the entire browser viewport.

PPrince Kumar

83% match