Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published1🌍 Public
HHi I am Adil
Last edited Dec 5, 2024
Created on Dec 5, 2024

This example reproduces a Sol LeWitt geometric art piece using D3.js. It renders a grid of alternating horizontal and vertical black and white bands, with circular symbols and masks creating a complex, overlapping pattern. The visualization uses D3’s `scaleBand`, `range`, `symbols`, and `symbol` APIs, along with SVG masks and `<rect>` elements, to generate the composition dynamically. The code adapts to the browser window size and relies on D3’s `select` and `append` for DOM manipulation.

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 generates an abstract visual composition inspired by Sol LeWitt, using D3 to create a grid of alternating horizontal and vertical bands. Two SVG masks, built with `d3.symbol` and `scaleBand`, modulate the bands with geometric symbol shapes. The code applies `select`, `range`, and `symbol` from D3 v6 to render the patterns, with the rendering handled entirely in SVG. The design reproduces the algorithmic, rule-based aesthetics of LeWitt’s wall drawings through code-driven geometry.

Bbeyzadoganay
95% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate geometric patterns of horizontal and vertical bands. It employs `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to create SVG rectangles and symbols within two masks, alternating their fills to produce an interlocking striped composition. The code uses an SVG renderer with `window.innerWidth` and `window.innerHeight` for full-screen display. While mask creation functions are defined for both layers, only the initial band structures are rendered in the current setup.

Aaalyousfi
95% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This fork of a Sol LeWitt reproduction uses D3.js to generate an abstract geometric composition. The visualization displays a grid of alternating horizontal and vertical bars that overlap to create a dynamic pattern across the full browser window. It builds two layered sets of rectangles, each masked with a pattern derived from D3’s `symbol` API—one mask uses the standard symbol set, the other an inverted version. The `scaleBand` function positions the masks, while `select` and `join` manage SVG elements. The result mirrors LeWitt’s minimal, rule-based aesthetic using interactive vector graphics.

Xxscotta@yahoo.com
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The visualization shows overlapping line patterns where a circular mask inverts the stripes, creating a contrasting circular region in the center of the composition. The code uses D3’s `selection` API to append SVG elements, including rectangles and masks with white and black fills, to generate the alternating bands. It uses the `d3` library version 7.8.5 and dynamically sizes the canvas to the browser window.

Hhaithamradhi
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6, rendering a grid of horizontal and vertical stripes masked by two concentric circles. The visualization shows a geometric pattern of alternating line thicknesses, with the circular masks creating a layered negative-space effect. The code uses `d3.select`, `d3.range`, and `join` to generate SVG rectangles, while SVG `<mask>` elements with `circle` and `rect` shapes define the visible regions. All rendering occurs client-side in SVG, with dimensions set to the full window size.

AAdityan Nainar
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as an interactive SVG graphic. It generates a grid of 120 horizontal and vertical bands, each with a repeating pattern that shifts based on a mask. The code builds two alternating bands of white and black, then uses two masks, each applying a different pattern rotation. Using the D3 library, it leverages `select`, `range`, `symbol`, `symbols`, and `scaleBand` to construct the visual, with `symbol(d, size)()` generating the shape paths. The rendering is fully in SVG, defined entirely in `index.js` with `window.innerWidth` and `window.innerHeight` for dimensions and a `padding` constant.

JJaga-droid
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
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js and SVG rendering. It displays a grid of horizontal and vertical black lines that form a geometric pattern across the full viewport, with a circular white mask creating a negative-space shape in the center. The code uses D3 selections with `range`, `join`, and `attr` to generate repeated rectangles on each axis, while masks are built with `append('mask')` and SVG circles. The rendering is entirely procedural, generating 100 lines per direction from data arrays rather than loading external data.

Xxyzcorrupt@gmail.com
94% match