Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Ccniekel
Last edited Nov 5, 2023
Created on Nov 5, 2023

This example recreates a Sol LeWitt-inspired geometric composition using D3.js, displaying ten red-striped rectangles overlaid with a circular mask and a diamond-shaped symbol. The SVG rendering uses `d3.select`, `range`, `scaleBand`-like positioning via manual arithmetic, and `symbol` to generate the diamond path. A mask defined with `<mask>` and appended shapes—a white background rect, a black circle, and a white diamond—controls which parts of the green-filled, red-stroked rectangles remain visible. The artwork scales to the full browser window, with layout based on `window.innerWidth` and `window.innerHeight`.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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
92% 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
91% match
Loading thumbnail…

Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of alternating horizontal and vertical rectangles. The rectangles are masked by two overlapping circular symbols, one inverted, to create the final visual composition. The code leverages `select`, `range`, `symbol`, and `symbols` from D3, rendering SVG shapes across the full window dimensions. The masks are built with appended `mask` elements and paths, using D3’s `join` for efficient data binding.

Rroyable88
91% 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
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example generates an abstract geometric composition inspired by Sol LeWitt, using D3 v6 to create intersecting striped rectangles with dynamic masking. The visualization alternates horizontal and vertical bands of thin lines, with masks that switch between filled and hollow symbol shapes—including circles, diamonds, and crosses—at regular intervals. Rendering in SVG, the code uses `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to position 120 strips across the viewport and apply patterned cutouts, producing a rhythmic interplay of line, shape, and negative space.

Mmkarnam.mahendra@gmail.com
91% 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
91% 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
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt art piece using d3 to render horizontal and vertical striped rectangles within a circular mask, creating a geometric pattern that fills the browser window. The SVG output uses two masks—one circular and one inverted—to alternately reveal horizontal or vertical bands across the canvas. Built with d3.select and SVG attributes, the code generates 100 rect elements in each orientation, with the circular mask defined via mask elements and fill colors. The artwork dynamically adapts to the window’s width and height, reflecting LeWitt’s instructional-based aesthetic in a programmatic form.

Iinnocent thomas
91% match