Skip to main content
SimilarExport ZIP
100%

[D3] Le Witt - Collection

✓ Published0🌍 Public
WWRCIECH
Last edited Dec 25, 2022
Created on Dec 24, 2022

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.

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

Full Sol LeWitt Reproduction With D3 with multi symbols

A generative artwork reproduces Sol LeWitt's geometric style using D3.js and React. The SVG canvas displays interlocking horizontal and vertical lines, masked by D3 symbols (circles, crosses, diamonds, squares, stars, triangles, and wye shapes) positioned across the middle. Two masks invert the symbol fills to selectively reveal the line grid, creating layered visual intersections. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to render 100 rows and columns with 10-pixel line weights.

Wwgloss
87% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example shows a large grid of horizontal and vertical stripes that appears to be interwoven, with geometric symbols such as circles, diamonds, and triangles emerging from the pattern. It generates 100 striped bands in each direction and uses two SVG masks to selectively hide portions of the grid, creating the illusion of layered shapes. Built with D3 v7 and React, the code uses `select`, `range`, `symbols`, and `symbol` to draw the mask paths, with `renderMask` applying the inverted fill logic. The rendering approach is purely SVG-based, sized to the full browser window.

Ccharlieronchetti@gmail.com
87% match
Loading thumbnail…

[D3] 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.

WWRCIECH
87% match
Loading thumbnail…

Full Sol LeWitt D3

This example creates a grid of horizontal and vertical stripes whose visibility is selectively revealed through two SVG masks, positioned over symbol-shaped cutouts. The mask pattern is generated using D3’s `range` and `symbol` APIs, alternating between normal and inverted masks to produce a complementary crossover effect. The visualization renders entirely with SVG, using dynamic `mask` URLs applied to each rectangle. The code leverages D3 v7 selections, joins, and the `symbol` generator to construct geometric shapes across the full viewport.

JJamie
87% match
Loading thumbnail…

LeWitt D3 Symbols

A generative geometric composition inspired by Sol LeWitt uses D3 v7 to render black bars across the full window. The SVG defines two masks—a circle and a star—and applies them to alternating horizontal and vertical bar groups, creating intersecting line patterns. `d3.range` and `d3.symbol` generate the shapes, while `select` and `join` manage the 100 rects per axis. The result is a minimal, modular artwork built entirely with scalable vector graphics.

MMarvin Frede
86% match