Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
AAprilF
Last edited Jun 21, 2024
Created on Jun 21, 2024

This example reproduces a Sol LeWitt-style geometric composition by layering horizontal and vertical stripes with D3 SVG masks. It generates 120 evenly spaced bands across the viewport, then applies two complementary masks that alternate between black and white columns containing D3’s built-in symbol shapes (circles, crosses, diamonds, and more). The masks flip the symbol fill and stripe polarity inversely, creating an overlapping optical pattern. The code uses `d3.range`, `d3.scaleBand`, `d3.symbol`, and `d3.symbols` to structure the stripes and mask geometry.

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 visualization reproduces a Sol LeWitt art piece using D3 to create a grid of horizontal and vertical stripes that alternate based on masks containing overlapping symbol shapes. Two sets of rectangular bands are drawn, each masked by a pattern of symbols (using `d3.symbol` and `d3.symbols`) arranged across the width via `d3.scaleBand`, with inverted black-and-white fills. The SVG rendering uses `select`, `range`, and `join` to generate 120 stripes per dimension, with masks (`<mask>`) controlling which areas of the two layers remain visible. The result is a geometric interplay of lines and icons derived from LeWitt’s conceptual style.

Jjsoudeer
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using overlapping horizontal and vertical striped rectangles, with two SVG masks revealing different symbol shapes at their intersection. The visualization generates 100 thin rectangular bands along each axis, then applies mask-1 and mask-2 to selectively display or hide regions based on d3 symbols. Built with D3 v6, the code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to create the masked effects, rendering entirely in SVG within a full-viewport canvas.

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

Fork of Sol LeWitt Reproduction with D3 - reference

This example reproduces a Sol LeWitt art piece using D3 v6. It renders two sets of translucent black-and-white striped rectangles overlaid with masks, creating a grid of alternating symbols. The code uses `d3.select`, `d3.range`, `d3.symbol`, `d3.symbols`, `d3.scaleBand`, and SVG masks. Each mask layers vertically and horizontally offset rectangles with D3 symbol paths, alternating white and black fills to generate overlapping geometric patterns. The page fills the browser window with 120 stripes per axis, using inlined SVG without external data.

FFelicity Wu
93% match
Loading thumbnail…

Fork of Fork of Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7, rendering two sets of overlapping horizontal and vertical stripes on an SVG canvas. The stripes are filtered through mask elements that reveal different symbol glyphs—circles, crosses, and other d3.symbol shapes—positioned along the center. The code uses d3.select, d3.range, and d3.symbol to generate the paths, with masks applied via SVG attributes. The artwork alternates mask inversion to create contrasting positive and negative space across the full window dimensions.

IIgorGorin00
92% match
Loading thumbnail…

Fork of Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 with SVG rendering, layering horizontal and vertical striped rectangles over masked symbol shapes. The code generates 50 horizontal and vertical bars positioned incrementally, then applies two masks—one containing a row of D3 symbols (circles, crosses, diamonds, etc.) and another with a large central triangle. The masks alternate inverted fills, creating intersecting cutout effects where the stripes show through the symbol shapes. The visualization updates dynamically to the browser window dimensions, demonstrating D3’s `range`, `symbol`, and `join` methods for procedural art.

Rroyable88
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical stripes. Two sets of SVG rectangles are drawn across the full width and height of the viewport, each filtered through a separate SVG mask. The masks reveal or hide portions of the stripes using a row of D3 symbol shapes (from `d3.symbol`), with one mask inverted. The visualization uses D3 v6 selections, `range`, and `join` to generate the elements, and renders entirely as SVG in the browser.

CCurran Kelleher
92% match