Skip to main content
SimilarExport ZIP
100%

Reorient Exercise of Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Ccardoza-IPH
Last edited Sep 22, 2022
Created on Sep 22, 2022

D3 v6 draws a grid of vertical and horizontal stripes in seven SVG panels, each with a different mask revealing a circular hole or overlapping shapes. The code uses `select`, `append`, `range`, and `symbol` to build alternating inverted masks, rendering black and white line patterns that reorient a Sol LeWitt reproduction across a full-viewport canvas.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js. It renders a grid of horizontal and vertical stripes that are visible only within two circular masks, creating an interlocking pattern. The code uses D3’s `select`, `append`, and `join` APIs to construct SVG elements, and `range` to generate the stripe positions based on the window size. The visualization dynamically adapts to the browser viewport dimensions.

Ccardoza-IPH
89% match
Loading thumbnail…

Full Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3 to generate SVG shapes. Alternating vertical and horizontal striped rectangles are layered beneath two masks, creating a geometric composition where the pattern changes across the canvas. Each mask contains alternating black and white regions with D3 symbol paths—including circles, crosses, and diamonds—positioned at intervals. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to build the visualization, with the masks inverted relative to each other for a contrasting effect.

MMatthew Bruffey
89% match
Loading thumbnail…

Sol LeWitt Reproduction in d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical black-and-white stripes on an SVG canvas. The SVG is populated with 100 rectangles in each orientation, using D3’s selection and `join` API to bind data to elements. Two circular masks, defined in D3’s `append` and `attr` calls, clip the stripes so that only a central circular region is visible, creating a geometric optical effect against the full-screen canvas.

Uulrichzhan
88% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt drawing as a full-screen SVG composition of horizontal and vertical striped rectangles. Two circular masks reveal the overlapping line grids, creating a dynamic intersection pattern. The visualization uses D3 v6 with `select`, `range`, and data joins to generate the rect elements, while SVG `mask` elements define the circular cutouts. The rendering is built with React and SVG, adapting to the window dimensions.

MMark Christian
88% match
Loading thumbnail…

full Sol LeWitt-d3

This example displays a full-screen grid of horizontal and vertical stripes within two circular masks, creating an overlapping pattern of lines at the center of the viewport. The visualization generates 100 rectangles for each orientation using `d3.range`, appending them to SVG groups via `d3.select` and the `join` operation. Two SVG masks, one with a black background and white circle and the other inverted, control visibility of the stripes, producing a dynamic interplay of crisp bands within the circular boundaries. The rendering is built with React, uses the d3 library version 6.6.1, and outputs to SVG.

Bbillzhou2005
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical lines. Ninety-nine horizontal rectangles and ninety-nine vertical rectangles are drawn across the full browser window, with two circular masks applied to reveal the lines only within intersecting circular regions, creating an overlapping geometric pattern. The code uses D3’s `select`, `range`, and `join` methods with the SVG renderer, and relies on the `mask` attribute to define the circular cutouts.

WWolfgang
88% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3 - exercises

This example reproduces a Sol LeWitt artwork using D3.js, rendering an SVG canvas that fills the browser window. It shows a grid of alternating horizontal and vertical stripes, with the stripes revealed through two distinct mask layers. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to draw the geometric patterns and mask paths. The masks, created via the `renderMask` function, use inverted black-and-white fills and paths from `symbols` to selectively hide or show the stripes, producing the final composition.

IIan Mac Moore
87% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical striped rectangles across the full viewport. Two SVG masks, each combining a full-screen rectangle with a centered circle, restrict which stripes are visible. The first mask (circle-mask) reveals horizontal lines through a white circular opening on a black background, while the second (circle-mask-2) inverts the pattern for vertical lines. Using d3.select, range, and data joins, the code generates 100 rect elements per orientation, with masks applied via the mask attribute.

PPareel Amre
87% match