Skip to main content
SimilarExport ZIP
100%

Fork of Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Zzhuomo-maker
Last edited Jun 13, 2023
Created on Jun 13, 2023

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.

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

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines as SVG rectangles. Two masks overlay the composition, with one inverted, creating a contrasting pattern where the line grid is partially revealed or hidden. The code builds 100 spaced rectangles in each direction, then applies masks generated from D3’s `symbol` paths, which are transformed and positioned across the canvas. The rendering uses D3’s selection and join APIs to construct the SVG dynamically, with dimensions matching the browser window.

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

Fork of Sol LeWitt Reproduction with D3

This work reproduces a Sol LeWitt piece by generating a grid of black-and-white symbols, with each column alternating between a geometric icon and a plain block. The code uses D3's `select`, `range`, `symbol`, `symbols`, `scaleBand`, and `selectAll` with a `.join` pattern to create two overlapping masked groups of horizontal and vertical rectangles. It defines two SVG masks, `mask1` and `mask2`, which inversely filter the stroke and fill of the symbols and bars, producing a layered, interlocking composition. The visualization is rendered as an SVG that fills the browser window.

Zzhuomo-maker
93% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v7 and SVG. It generates two sets of striped rectangles—horizontal and vertical—layered over each other. The code applies two complementary SVG masks, each containing a row of D3 symbol shapes, to selectively reveal or hide parts of the grid. The masks are created programmatically with the `renderMask` function, which uses `d3.range`, `d3.symbol`, and `d3.symbols` to position the mask shapes across the canvas. The final result creates an intricate, textured interplay between the geometric lines and the symbol cutouts.

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

Fork of Full Sol LeWitt Reproduction with D3

This example generates a full-screen grid of thin horizontal and vertical stripes, using SVG masks to create a circular cutout at the center revealing a solid white disk. The stripes are rendered as individual SVG `rect` elements within two groups, with each group masked by a radial shape. The code uses the D3.js library’s `select`, `range`, and `symbol` functions, along with symbol paths to produce the mask geometry. The layout is derived from the browser’s viewport dimensions, making the visualization responsive to the window size.

Lliu yang
92% 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
92% match