Fork of d3 sol lewit

100%

Fork of d3 sol lewit

✓ Published1🌍 Public

Last edited May 5, 2023

Created on May 5, 2023

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, with two masks that reveal or hide different symbol shapes across the grid. The project uses D3 v6 APIs including `select`, `range`, `symbols`, and `symbol` to render the masked patterns. The two masks, created via `renderMask`, alternate between white and black backgrounds with the opposite fill for the symbols, producing a moiré-like interplay between the line grid and the overlaid symbol clusters. The code runs on a React framework and uses raw SVG rendering with dynamic window dimensions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Full Sol Lewitt Reproduction with D3

This visualization creates a grid of horizontal and vertical bars across the full browser window, using SVG masks to reveal d3 symbols (shapes) from the d3-shape module. It uses the `select`, `range`, `symbols`, and `symbol` functions from D3 v6 to generate a striped pattern with four distinct symbol types as mask cutouts. The code renders 100 rectangles in each orientation, with two masks applied to alternate between light and dark shading on the revealed shapes. The rendering adapts to the window’s dimensions and uses `join` to bind data to SVG elements.

Mmaximus2581

91% match

Loading thumbnail…

Complete Sol LeWit Fork of SVG Fundamentals - D3 (group)

This example generates a grid of thin horizontal and vertical rectangles across the full screen, with each rectangle masked by one of two overlapping masks. The first mask uses white space around a black D3 symbol, while the second inverts that relationship, creating a woven intersection of shapes across the canvas. The code constructs the SVG using D3 selections, `range`, `join`, and the `symbol` API, with each mask defined by an SVG `mask` element. A React wrapper manages the page, and the visualization draws directly into the window-sized viewport.

SSidney Oluoch

90% match

Loading thumbnail…

Fork of Fork of Sol Levitt's Art Reproduction2

This visualization presents a grid of horizontal and vertical bars overlaid with two circular masks, creating a dynamic interplay of black and white regions reminiscent of Sol LeWitt's generative art. The code uses D3.js selection and data-binding APIs, including `select`, `range`, and `join`, to render 100 SVG rectangles. A custom `renderMask` function builds inverted `mask` elements, applying `symbols[0]` (a circle) to selectively reveal or hide parts of the grid. The rendering is fully SVG-based within a React-free vanilla JavaScript setup.

Jjajinkya

89% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate overlapping striped rectangles and symbol-based masks. The visualization shows a grid of horizontal and vertical bars filtered through two inverted mask layers, each containing a row of D3’s built-in symbol shapes (circles, crosses, diamonds, squares, stars, triangles, and wye). The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct SVG elements dynamically, rendering directly into the browser window with no external data source.

Ccardoza-IPH

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt–style grid using two sets of horizontal and vertical rectangles, each clipped by a circular mask to produce a black-and-white geometric composition. The code uses D3’s `select`, `range`, and `join` to generate 100 stripes in each direction, while `d3.symbol` and `symbols[1]` draw a diamond-shaped mask path. Two SVG masks alternate inverted fills, revealing or hiding parts of the grid. The visualization runs in React, renders as SVG, and adapts to the full browser window size.

MMark Christian

89% match

Loading thumbnail…

Fork of D3-Sol-LeWitt--2

This visualization creates an abstract geometric composition by layering two sets of grid lines—horizontal and vertical rectangles—each masked by distinct symbolic shapes. It renders 100 evenly spaced bars in each direction, using SVG masks to reveal the underlying grid only within the paths of predefined symbols. The piece is built with React and D3.js, leveraging the `symbols` and `symbol` functions to generate complex path data, and the `selectAll`/`join` API to efficiently manage SVG elements. The code directly responds to the browser window size, scaling the entire artwork to fill the viewport.

AAbdulafeez-okewunmi

89% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example generates an abstract grid pattern using Sol Lewitt-inspired geometry. It draws horizontal and vertical strips of rectangles, then applies two distinct masks with D3’s `symbol` shapes (including circles, crosses, and diamonds) to selectively reveal or hide portions of the grid. The masks are created with `d3.mask`, one inverted against the other, producing a layered interplay between the symbol silhouettes and the underlying striped composition. The visualization uses D3 v7 selections, `range`, and `join` to construct the SVG elements within a full-window viewport.

Aaidarshafeev1@gmail.com

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction With D3

This visualization reproduces a Sol LeWitt-inspired geometric drawing using D3 v6 and SVG rendering in a React context. It shows a grid of horizontal and vertical rectangles, each with a circle-shaped mask, creating an intersecting pattern that reveals or hides lines depending on mask polarity. The code uses `d3.select`, `d3.range`, and SVG `mask` elements with black and white fills to produce the effect over a full-window canvas. Rendering relies on SVG attributes for positioning and sizing, with no external data source beyond generated ranges.

Wwgloss

89% match