Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
AAlpineStranger
Last edited Oct 16, 2022
Created on Oct 16, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

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

Fork of Fork of Full Sol LeWitt Reproduction Final with D3

This example draws a generative grid inspired by Sol LeWitt using SVG and D3. It fills the viewport with 100 horizontal and 100 vertical stripes, each masked so that only parts of the grid remain visible. Two separate masks, created with d3.mask, contain large D3 symbols (from d3.symbol) that act as cutouts or reveals, inverting their effect between the axes. The code uses d3.select, d3.range, and d3.symbol to build the composition programmatically, producing a layered geometric pattern that plays with visibility and form.

Kkwambokar
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of alternating horizontal and vertical striped lines across the full browser window. Two SVG masks reveal the grid through circular and geometric shapes, while the second mask incorporates D3 symbol shapes and checkerboard patterns within its design. The code uses D3 v7 APIs including `select`, `range`, `symbol`, and `symbols` to generate the SVG elements, with mask composition controling which portions of the line grid remain visible.

AAngie Va. Moreno
94% match
Loading thumbnail…

Full Fork of Fork of Sol LeWitt Reproduction with D3

A grid of horizontal and vertical striped rectangles is revealed through two overlapping masks, creating a dynamic composition where the stripes intersect and fade. The visualization uses D3 v7's `select`, `range`, and `join` to generate 100 rows and columns of semi-transparent rectangles. Two SVG masks, each containing a large circle symbol from `d3.symbol`, invert their fill to selectively hide and show portions of the stripe layers, producing a lens-like effect. The rendering is entirely SVG-based, with masks applied via `.attr('mask', ...)`.

Ppawelsapiecha
93% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of horizontal and vertical rectangles that intersect through SVG masks. The code creates 100 evenly spaced lines in each direction, then applies two complementary masks—one normal and one inverted—to reveal or hide the grid patterns. Using D3 selections, `range`, and symbol generators, the masks incorporate circular, triangular, and other symbolic shapes. The artwork is dynamically sized to the viewport and rendered as an SVG, demonstrating how D3’s data-join and mask primitives can build layered generative art.

XXuân Vinh
93% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

A grid of horizontal and vertical black lines forms a full Sol LeWitt–style drawing, masked by overlapping diamond shapes to reveal alternating line orientations. Using D3 v7, the code creates 100 horizontal and 100 vertical rectangles on an SVG canvas, each masked via `d3.mask` with a large `symbol` path. The `renderMask` function appends SVG `<mask>` elements, using `select.append` and `attr` to set fill colors and transforms, producing the final geometric pattern.

Nnim@brejnholt.dk
93% match
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
92% match