Fork of test lewitt vertical

100%

Fork of test lewitt vertical

✓ Published1🌍 Public

Last edited Nov 23, 2022

Created on Oct 21, 2022

This visualization uses D3 v7 and Anime.js to generate an abstract, grid-based composition of colored vertical and horizontal bars. It shows a pattern of alternating purple and green vertical rectangles layered over black horizontal lines, with two circular SVG masks creating distinct circular cutout regions that reveal the different bar orientations. The code constructs elements via D3 selections and raw SVG DOM manipulation, applying masks to selectively show portions of the two bar layers.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of test lewitt d3

This example creates a grid-based generative artwork using D3.js version 7 and Anime.js. It draws 100 horizontal and 100 vertical rectangular strips across the full viewport, with each strip assigned an SVG mask. Two distinct masks are applied using D3's `symbol` and `symbols` functions to generate complex path patterns, with the first mask using a black fill on white and the second using the inverse. The SVG output is rendered directly to the browser window, filling the entire screen with no margins.

Kkhalil-ryu

86% match

Loading thumbnail…

Fork of SolLeWitt - convert from VanillaJS to D3

This visualization generates a geometric pattern using Sol LeWitt-inspired horizontal and vertical bars. It uses `d3.select` and `d3.range` to create rectangles, with SVG masks (`mask_bottom` and `mask_top`) that reveal or hide parts of the bars based on circular fill regions. The code computes bar positions based on window dimensions and uses the D3 `join` API to efficiently append and style `<rect>` elements. The final composition displays a grid of bars with a circular cutout effect in the center.

JJun Alvarado

84% match

Loading thumbnail…

Fork of Fork of Sol Lewwit D3 1

This visualization uses D3 version 7.8.4 with level selection and join operations to generate a grid of horizontal and vertical rectangles. The SVG canvas spans the browser window, and two masks create overlapping circular regions. In the first mask, a white circle over a black rectangle reveals horizontal bars, while the second mask uses inverted colors to expose vertical bars. The resulting composition shows intersecting striped patterns emerging from the circular cutouts.

PPeiyang Li

84% match

Loading thumbnail…

Fork of Sol Lewitt, Now d3

This example reproduces Sol Lewitt’s geometric wall drawing using D3.js, creating a grid of vertical and horizontal bars on an SVG canvas. It visualizes the interaction of two perpendicular bar sets, where a circular mask reveals or hides portions of each set to produce overlapping patterns. The code employs D3’s selection and range functions to generate bars, and SVG mask elements to apply contrasting circular cutouts. The composition shifts between shown and hidden bar segments, echoing Lewitt’s algorithmic art. The rendering fills the browser window, with bar placement calculated from screen dimensions.

JJoel Wilson

83% match

Loading thumbnail…

Fork of LeWitt Recreation w/ D3

This example recreates a LeWitt-style drawing using an SVG canvas populated with two intersecting sets of 100 rectangular bars—horizontal and vertical bands that form a grid. A circular mask is applied to the horizontal bars, and an inverted circular mask is applied to the vertical bars, producing a central circle where only the vertical lines appear, while the surrounding area shows both orientations. The visualization uses D3 version 7, specifically the `select` and `range` functions, to generate the rectangles and apply SVG mask elements dynamically based on the window dimensions.

CChirag

82% match

Loading thumbnail…

Fork of Full Sol Lewitt whit D3 reduce code

This visualization reproduces a Sol LeWitt wall drawing as a grid of horizontal and vertical bars, intersected by a central circular symbol. It uses the D3 library (v7.8.5) to generate SVG masks that reveal or hide alternating bar orientations. The code defines two masks, one for each direction, applying a path built from D3’s `symbol` API to create the geometric cutout. The artwork is generated procedurally with `range`, `select`, and `append` calls, rendering abstract geometric forms without external data.

FFrancisco Ibelles

82% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js and SVG rendering. It displays a grid of horizontal and vertical black bars that are partially revealed through two circular mask effects, creating intersecting line patterns across the full viewport. The visualization uses d3.select and data joins to generate 100 rectangle elements for each orientation, while SVG mask elements with circle shapes control which portions of the lines remain visible. The bars are positioned mathematically based on array indices, with the masks centered in the window to produce the layered optical effect.

Kkwambokar

82% match

Loading thumbnail…

Fork of Full Fork of Fork of Sol lewitt reproduction in d3 after consolidation

This example reproduces a Sol LeWitt-style drawing using D3 v7 and SVG. It creates a grid of alternating horizontal and vertical black bars, each layer masked by geometric symbols (circles, squares, and other shapes) generated with the d3.symbol API. Two separate masks with inverted fill logic reveal different bar orientations. The code uses d3.select, d3.range, and mask elements to compose the final visual pattern.

Ssheldonv2.0@gmail.com

82% match