Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
AAkinola Samson
Last edited Feb 13, 2024
Created on Feb 13, 2024

This example reproduces a Sol LeWitt art piece using D3’s `select` and `range` APIs to generate layered SVG rectangles. Two groups of 100 horizontal and vertical striped rects are rendered across the full viewport, each masked with circular clip regions. The first mask reveals a white circle on a black background, while the second inverts the effect, creating a central pattern of intersecting bands. The code constructs SVG masks and rects dynamically, with dimensions tied to the window size.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3. It draws a grid of horizontal and vertical rectangles that are masked by two circles, creating a pattern of alternating lines within circular cutouts. The code uses D3’s `select` and `range` functions to generate SVG elements, and applies SVG masks with `circle` elements to clip the rectangles. The artwork is rendered as an SVG, filling the browser window.

Rrwata97
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6 and SVG rendering. The visualization shows a grid of horizontal and vertical rectangles, with two circular masks creating a layered geometric pattern where the lines alternate visibility. The code employs `d3.select`, `d3.range`, and the `join` method to generate 100 rect elements for each orientation. SVG masks—defined with distinct IDs and circles of white and black fills—control which line segments appear within the overlapping circular regions.

PPeter Prevos
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, rendering 100 horizontal and 100 vertical striped rectangles in an SVG canvas. The artwork uses two circular mask patterns—one with a black background and white circle, another with inverted colors—to create intersecting circular cutouts where the lines cross. The code uses D3's `select`, `range`, and `join` APIs to efficiently generate and position the rect elements, with the masks applied via SVG `mask` attributes to achieve the geometric composition.

Jjctmercado
94% match
Loading thumbnail…

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

Fork of Sol LeWitt Reproduction

This example uses D3.js to recreate a Sol LeWitt-inspired drawing with horizontal and vertical striped bands. It renders 100 horizontal rectangles and a secondary set of vertical bars clipped by two circle masks, creating an intersecting geometric pattern. The SVG masks reveal only the areas inside the circular regions, with the second mask inverting the visibility. The code uses D3 selections and the `range()` function to generate the marks, with the primary source being the LeWitt reproduction referenced in the README.

Kktshim@snu.ac.kr
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, layering horizontal and vertical striped rectangles on an SVG canvas. The composition uses two masks with inverted circle shapes to create a central circular cutout, revealing the grid-like pattern of 100-pixel stripes. The code employs D3’s `select`, `range`, `append`, and `join` APIs to generate the SVG elements dynamically, with masks defined via `mask` and `circle` elements. The artwork spans the full browser viewport, adapting its size to the window dimensions.

TTobi Olabode
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using SVG rect elements generated with d3.selectAll, d3.range, and .join. Horizontal and vertical rectangles are rendered across the full viewport, with two overlapping SVG masks—one showing a white circle on black and the other inverted—creating a circular focal pattern. The code uses D3 v7 selection and data-binding APIs to create 100 rects in each orientation, with the masks revealing and hiding portions of the grid to mimic the geometric interplay of LeWitt’s wall drawings.

Nnim@brejnholt.dk
93% match