Fork of advancement sol lewit

100%

Fork of advancement sol lewit

✓ Published1🌍 Public

Last edited May 5, 2023

Created on May 5, 2023

This visualization creates a geometric pattern of overlapping horizontal and vertical rectangles, masked by two circular regions that reveal different sections of the grid. The code uses D3 selections and data joins to generate 100 thin rectangles in each direction across the full viewport. Two SVG masks control visibility: the first shows a white circle on black, while the second inverts this pattern, producing an interplay of solid and empty forms inspired by Sol LeWitt's minimalist wall drawings.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Sol Lewwit 2

This interactive visualization renders a grid of horizontal rectangles, masked by a central circle, creating a striking geometric pattern. The SVG elements are dynamically generated using the Document Object Model (DOM) API, with a mask defined by a `<circle>` element. The visualization adapts to the browser window size by using `window.innerWidth` and `window.innerHeight`. One hundred rectangles, each 10 pixels high, are drawn sequentially down the screen, with the circle mask revealing a circular region of the striped pattern against a plain background.

PPeiyang Li

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

89% match

Loading thumbnail…

Fork of Sol lewitt d3

This example generates an abstract grid of 100 horizontal and vertical rectangles that intersect to form a full-screen pattern. Two SVG masks with circular holes are applied to the groups of rectangles, creating the illusion of a blank circular area at the center where the two mask types overlap. The code uses d3.select, d3.range, and SVG join operations to append the rect elements, along with mask and circle SVG elements to define the clipping effect. The visualization adapts to the browser window size by setting width and height from window.innerWidth and innerHeight.

Ddwikbtn

89% match

Loading thumbnail…

Fork of Sol LeWitt-d3-2

This visualization generates a grid of horizontal and vertical bars across the full browser window, then applies circular SVG masks to reveal a bold geometric composition. Using d3 selections and `range()`, it appends 100 rectangles in each orientation, with a black-and-white mask pair creating a contrasting ring pattern at the center. The code uses D3 v6 with `select`, `range`, and `join`, rendering to SVG while dynamically sizing to the viewport. This mirrors Sol LeWitt’s minimalist wall drawings through a React-compatible, single-file example.

Bbillzhou2005

88% match

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3

This example generates a grid of thin horizontal and vertical lines using D3’s `select`, `range`, and `join` methods, rendered as SVG rectangles across the full browser viewport. Two circular masks invert the visibility of each set of lines: the first hides everything outside a 200-pixel circle centered on the screen, while the second hides everything inside its circle. The result juxtaposes a solid disk of vertical strips against an outer field of horizontal strips, creating a Sol LeWitt-inspired geometric pattern. The code runs in React and relies on D3 v7 for data binding and SVG manipulation.

Mmax-31

88% match

Loading thumbnail…

Fork of Fork of Sol LeWitt-d3-3

This example generates a grid-based abstract pattern using D3.js version 6, rendering SVG rectangles in horizontal and vertical orientations. The visualization uses the d3.select and d3.range functions to create 100 stripes of each direction, layered with SVG mask elements to create two circular cutout effects at the center of the viewport. The first mask uses a white circle on black, while the second uses a black circle on white, producing contrasting visibility through the overlapping stripes. The visualization fills the entire browser window dynamically by setting the width and height to the inner dimensions of the viewport.

Bbillzhou2005

88% match

Loading thumbnail…

Fork of Sol Lewit Repro1

This visualization uses 100 horizontal and 100 vertical rectangular strips, each 10 pixels thick, arranged in a grid across the full screen. A central circular mask reveals the intersection of these strips, creating a crosshatch pattern within a 200-pixel radius circle. Built with vanilla JavaScript and the SVG DOM API, it dynamically creates SVG elements like `<rect>`, `<mask>`, and `<circle>` to apply the masking effects. The code demonstrates careful manipulation of SVG masks, where the first mask uses a black background with a white circle and the second inverts this logic, producing alternating visibility in the overlapping regions.

HHayden-V

88% match

Loading thumbnail…

Fork of Sol Lewwit D3

This visualization reinterprets Sol LeWitt’s geometric wall drawings using a grid of horizontal and vertical stripes. It renders 100 SVG rectangles in each direction across the full browser window, with the intersecting lines partially masked by a central circle. Built with React and D3 v7, it uses `select`, `range`, and `.join()` to generate the marks, while two SVG masks create the contrasting circular reveal. The code dynamically sizes the artwork to the viewport using `window.innerWidth` and `window.innerHeight`.

PPeiyang Li

88% match