Skip to main content
SimilarExport ZIP
100%

[D3] Le Witt - Masks

✓ Published1🌍 Public
WWRCIECH
Last edited Dec 23, 2022
Created on Dec 23, 2022
Forked from Le Witt - Masks

This example creates a geometric composition of thin vertical and horizontal stripes that cross to form a mask-like circular pattern. Two SVG masks—one revealing a filled circle and another showing a circle cut out of a full rectangle—control the visibility of the stripes, which are generated as rectangles using D3's `range` and `join`. The visualization uses `d3.select`, `.append`, and `.attr` within a React framework, rendering entirely as SVG with D3 v6.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

[D3] Le Witt - Masks with Symbols

This example generates a dynamic geometric composition inspired by Sol LeWitt, where alternating vertical and horizontal stripes are clipped by two overlapping circular masks. Using D3.js version 6 in a React-free SVG environment, the code defines two masks with inverted fills, then applies them to striped rectangles created via `d3.range` and `d3.join`. The result is a clean, monochrome interplay of lines and shapes, rendered purely with SVG elements on a full-window canvas.

WWRCIECH
94% match
Loading thumbnail…

Sol LeWitt with D3-v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 in a React-free HTML page, rendering with SVG. It shows overlapping horizontal and vertical striped rectangles that create a crosshatch pattern, with circular masks revealing a central circular region where the lines intersect. The visualization uses `d3.select`, `d3.range`, and data joins to generate 100 horizontal and 100 vertical `<rect>` elements, each masked by a dedicated `<mask>` with a circle. The first mask exposes a white circle over black background, while the second inverts the effect, producing contrasting visible and hidden areas. The code demonstrates D3’s data-binding and SVG mask primitives without external data sources, relying entirely on procedural generation.

Ddalia.miliauskaite@me.com
88% match
Loading thumbnail…

D3-Sol-LeWitt

This example pays homage to Sol LeWitt by using D3.js to generate a grid of horizontal and vertical rectangles, which are only visible within the intersection of two circular masks. The visualization renders 100 stripes in each direction, with the SVG `mask` elements defining a central circle that reveals the grid against a contrasting background. The code uses D3’s `select` and `range` to create the rectangles and applies the masks for a layered, geometric effect.

AAbdulafeez-okewunmi
87% match
Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com
87% match
Loading thumbnail…

[D3] Le Witt - Collection

This example renders a grid of vertical and horizontal stripes whose visibility is selectively masked by two overlapping D3 symbol arrays. Using the D3 `symbol` and `symbols` APIs, it generates circle, cross, diamond, square, star, triangle, and wye glyphs as SVG paths, which define alternating black-and-white masks via `scaleBand` and `mask` elements. The result is a layered, generative composition inspired by Sol LeWitt’s wall drawings, with React managing the SVG canvas and D3 v6 handling data binding and coordinate transforms.

WWRCIECH
87% match
Loading thumbnail…

LeWitt with D3

Inspired by Sol LeWitt’s geometric wall drawings, this SVG visualization uses D3 to layer horizontal and vertical striped rectangles over each other. Two masks—one inverted—reveal and hide sections of the grid using D3’s `symbol` shapes (such as circles and crosses) as cutouts. Built with React and D3 v6, the code generates 200 stripes per direction and positions symbols across the canvas to create intersecting patterns.

Ggrassfluffy02
87% match
Loading thumbnail…

D3-Sol-LeWitt--1

This example generates an abstract geometric composition inspired by Sol LeWitt, rendered as SVG. It creates a grid of horizontal and vertical stripes across the full window, then applies two circular masks with a star-shaped symbol from the d3 library. The masks use boolean-like inversion, alternating black and white fills to create contrast between the masked regions. The code uses d3’s `select`, `range`, `symbol`, and `symbols` APIs, and builds the visualization procedurally with no external data source.

AAbdulafeez-okewunmi
85% match
Loading thumbnail…

Sol Lewwit D3

This example recreates Sol LeWitt’s wall drawing aesthetic using D3.js and SVG. Two sets of 100 horizontal and vertical stripes are rendered across the full viewport, each configured with a mask that reveals a circular region in the center. The circle masks create an interplay between the two orientations, highlighting where horizontal lines show through one mask and vertical lines through the other. The code uses `select`, `range`, and data joins from D3 v7, with SVG masks and rectangles composing the visual.

PPeiyang Li
85% match