Fork of Sol LeWitt-d3-2

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

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

Ccharlieronchetti@gmail.com

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style grid of horizontal and vertical bars, with the pattern masked to reveal a central circle. It uses D3’s `select` and `range` to generate 100 rectangular strips in each direction, while two SVG `<mask>` elements—one inverted—combine to create the circular cutout effect. The code runs in a React environment and renders vector graphics as SVG.

Fork of Sol LeWitt Reproduction with D3

This example generates a full-screen generative artwork with a grid of alternating vertical and horizontal bar stripes, separated by a circular mask. Built with React and rendered as SVG, it uses D3’s `select` and `range` to append 100 rectangles in each direction, then applies two mask definitions (`circle-mask` and `circle-mask-2`) to invert the pattern inside and outside the circle. The result is a modern, interactive take on a Sol LeWitt drawing, where the composition depends on the browser window’s dimensions.

Aa0x0

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

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

Fork of Sol LeWitt with d3

This example reinterprets Sol LeWitt’s geometric wall drawings as a generative SVG composition. The view shows a grid of horizontal and vertical stripes, each rendered as a series of `rect` elements, clipped by two circular masks that create a central lens effect. Using d3’s `select`, `range`, and `.join()`, the code creates 48 stripes in each direction across the full window width and height. One mask reveals the horizontal pattern within the circle, while an inverted mask shows the vertical pattern outside it, blending the two orientations.

Mmax-31

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece using D3, generating a series of horizontal bars that are clipped by a circular mask. The visualization fills the entire browser window with alternating offset rectangles, creating a geometric pattern. The code uses D3's `select` and `range` functions to build SVG elements, though the mask and circle logic is present but commented out. The rendered output shows a grid of colored bands restricted to a central circular area.

Bbtlhgboy@icloud.com