Skip to main content
SimilarExport ZIP
100%

Fork of Full of Joe LeWitt Reproduction with D3

✓ Published1🌍 Public
Ccssergio
Last edited May 23, 2022
Created on May 23, 2022

This example reproduces a Sol LeWitt-style geometric drawing using a grid of horizontal and vertical stripes that interact through two SVG masks to reveal a central diamond shape. The visualization populates 100 rectangles in each direction, sized relative to the window, and applies the masks with inverted fills to create the overlapping cut-out effect. Built with D3 v6, it uses the `select`, `range`, `symbol`, and `symbols` APIs to construct the SVG elements and generate the diamond path.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Full of Joe LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as a generative drawing in the browser. It creates a grid of horizontal and vertical lines that are partially revealed through two distinct masks, resulting in an intersecting pattern of geometric shapes. The visualization uses D3.js version 6.6.1, specifically the `select`, `range`, and `symbol` APIs, to render SVG elements based on procedural rules. The code generates a hundred stripes in each direction and applies mask filters to alternate their visibility, producing a complex, layered composition that mimics the artist's systematic style.

Ccssergio
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v7, displaying 100 horizontal and vertical striped rectangles that overlap to create a grid pattern. Two SVG masks, each containing a large diamond symbol, selectively hide portions of the stripes, revealing the geometric interplay between the layers. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate the shapes, with masks defined via SVG `<mask>` elements and rendered as a static SVG scene.

Gguts
90% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition as an interactive SVG visualization. It renders 100 horizontal and vertical stripes that intersect to form a grid, with a mask applied to reveal a diamond-shaped symbol in the center. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the shapes and masks, while `renderMask` creates two complementary mask layers. The visualization fills the browser window and is built entirely with SVG elements in D3 v6.

Zzhuomo-maker
90% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping sets of thin horizontal and vertical rectangles. The drawing applies two distinct SVG masks to each set, creating a crosshatched grid that visually inverts where the shapes intersect. Built with D3 v6, it generates 100 rectangles per axis using `range` and `selectAll().join()`, while the `symbol` API draws a diamond-shaped mask path. The final SVG adapts to the full browser window size, with masks rendered through appended `<mask>` elements.

DDuckGorilla
89% match
Loading thumbnail…

Fork of Full Sol LeWitt reproduction with D3_2

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of vertical and horizontal striped rectangles overlaid with masked geometric symbols. The code employs D3 selections and data joins to generate 100 rectangles in each direction, while `d3.symbol` and `d3.symbols` create the diamond and triangle shapes used in the masks. Two SVG masks, defined via the `renderMask` function, apply the symbols as cutouts in alternating black-and-white fills, revealing the striped pattern through the shapes. The rendering uses SVG with dynamic window dimensions, and the masks are applied with inverted fill states to create the final layered composition.

DDilara Bozkurt
89% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger
88% 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
88% match
Loading thumbnail…

Fork of Full of Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of thin horizontal and vertical rectangles across the full browser window. The code uses `d3.range()` and `d3.select` to generate 100 rows and columns, then applies two SVG masks to shape the overlapping lines. Each mask contains a large `d3.symbol` with a star shape, defined via `symbol(symbols[1], 100000)`, which cuts a circular diamond pattern out of the otherwise regular grid. The masked rectangles create a layered visual where lines appear through the star-shaped holes, demonstrating SVG mask composition with D3 selections.

IIgorGorin00
88% match