Skip to main content
SimilarExport ZIP
100%

Fork of epi 4 full sol_lewit_repro with D3

✓ Published1🌍 Public
Ppoppy
Last edited May 18, 2023
Created on May 17, 2023

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render intersecting horizontal and vertical black stripes across the full viewport. The stripes are masked by two overlapping patterns of D3’s built-in symbol shapes, created with the `symbol` and `symbols` APIs inside SVG masks. The first mask uses an inverted fill to carve out stripes, while the second applies a non-inverted mask, producing layered geometric contrast. The code builds an SVG via `select`, `append`, and `join` from D3 v6.6.1.

AI-generated description

sol lewitt

link to sol lewitt

this uses d3 and is forked from the soll lewit repro

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of sol lewit reproduction assignment

This example reproduces a Sol LeWitt-inspired drawing using D3 v7 selections and SVG masks. Three alternating vertical and horizontal stripe patterns are overlaid on the page, each masked by a large circle that reveals or hides the lines through contrasting black and white mask fills. The code builds the SVG structure with `d3.select`, generates stripe counts via `d3.range`, and applies masks through D3’s `attr` method, rendering the final output as SVG.

KKerim
91% 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
90% 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
90% 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
89% 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
89% 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
89% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

A fork of the Sol LeWitt wall drawing reproduction renders a grid of horizontal and vertical stripes, each masked by a circular form, on an SVG canvas that fills the browser window. The piece uses the D3.js API, specifically `select`, `range`, and the `join` method, to generate the stripes, while masks are created with `symbol` and `symbols` to imprint the circle. The result is a geometric interplay of lines and negative space, driven entirely by D3's declarative data-binding and SVG rendering.

Lliu yang
89% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3 v7, generating a grid of horizontal and vertical stripes overlaid with a circular mask. The SVG rendering shows a black-and-white composition where two perpendicular striped layers intersect, with a central circle revealing horizontal bands while the outer area displays both orientations. The code uses `d3.select`, `d3.range`, and `join` to create rectangles, and applies SVG `<mask>` elements with circles to control which stripes appear in each region, with the circle radius derived from a fixed pixel step.

VVincent Leduc
89% match