Skip to main content
SimilarExport ZIP
100%

Sol Lewitt Reproduction with D3 multiple symbols

✓ Published0🌍 Public
GGullyPlook
Last edited Sep 14, 2023
Created on Sep 14, 2023

This example reproduces a Sol LeWitt-style drawing using D3’s `symbol` and `symbols` API to generate five geometric shapes (circle, cross, diamond, square, and star) that act as masks. Two sets of horizontal and vertical striped rectangles are drawn, each masked by a different pattern of symbols; the first mask uses black-filled symbols on white, the second inverts this. The `renderMask` function appends SVG `mask` elements, mapping each symbol to a `path` via `symbol(d, 8000)()` at evenly spaced translations. The code relies on `select`, `range`, and `join` for data-driven rendering.

AI-generated description

[Sol Lewitt] Reproduction with D3 (https://en.wikipedia.org/wiki/Sol_LeWitt)

MIT Licensed

Similar vizzes

Loading thumbnail…

Reproduction Sol Lewitt D3

This example reproduces Sol LeWitt-style geometric art using D3 version 7. It renders two perpendicular sets of horizontal and vertical striped rectangles, each masked by one of two complementary masks containing a large D3 symbol (circle, cross, diamond, square, and star) centered in the viewport. The code uses `d3.select`, `range`, `symbols`, and `symbol` within a custom mask-rendering function, then applies the masks to SVG `<rect>` sequences to create intersecting pattern effects. The visualization is generated programmatically with a blank SVG canvas sized to the window.

KKhanAzmat
90% match
Loading thumbnail…

Sol LeWitt representation using multiple symbols in D3

This example visualizes a Sol LeWitt-inspired geometric composition using an array of 120 unique symbols. It renders 120 horizontal and vertical rectangular strips that use two different masks to reveal or hide portions of the symbol paths, creating an intricate crosshatch pattern. Built with D3 v7, the code leverages `d3.select`, `d3.range`, and `d3.symbol` APIs to generate and position paths. The SVG output uses mask elements with inverted black-and-white fills to control layer visibility across the full-window canvas.

PPetrescu Alexandru
89% match
Loading thumbnail…

Full D3 Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric drawing using D3 v7 in an SVG. It shows a grid of alternating vertical and horizontal rectangles overlaid with two circular masks, creating a crosshatched pattern with a central starburst-like cutout. The code uses D3 selections, `range`, `join`, and `symbol` with `symbols[1]` to generate shapes, while `select` appends the SVG to the body. Masks are built via a custom `renderMask` function that toggles fill colors based on an `inverted` parameter. Data is generated procedurally with `range(n)` for 100 iterations.

Mmegan-grannan
89% match
Loading thumbnail…

sol lewitt2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 selections and SVG masks. It draws two intersecting sets of thin horizontal and vertical rectangles, each masked by a large circular symbol defined via `d3.symbol` and `d3.symbols`. The first mask uses a light-on-dark pattern, the second an inverted dark-on-light pattern, creating layered contrast across the full window. The code relies on `d3.select`, `range`, `symbol`, and SVG `mask` elements to generate the visual, with a hardcoded `n` of 100 for the line spacing.

Nneojournalist
89% match
Loading thumbnail…

Adding symbols D3 Sol LeWitt

This example reproduces a Sol LeWitt wall drawing using D3.js (v7.8.5) and SVG rendering. It creates a grid of horizontal and vertical stripes, overlaid with two masks that cut out large geometric symbols from D3's built-in `symbols` gallery. The code uses D3's `select`, `range`, `symbols`, `symbol`, and `join` APIs to build the composition procedurally. The alternating black-and-white masks generate the negative and positive shapes, visually echoing LeWitt's instructional art.

CCameron Wehr
88% match
Loading thumbnail…

Sol LeWitt reproduction with d3 (symbols)

This example recreates a Sol LeWitt-inspired drawing using D3.js by layering two perpendicular sets of striped rectangles. Horizontal bars appear only within a circular region defined by an SVG mask, while vertical bars are masked to the inverse shape, creating a clean intersection of stripes inside the circle. The code uses `d3.range`, `d3.select`, SVG `rect` elements, and `symbol` with `symbols[2]` to generate the circle mask paths. The visualization is rendered entirely in the browser with D3 v7, filling the viewport dynamically.

FFrancisco Ibelles
88% match
Loading thumbnail…

Sol LeWitt Reproduction in d3 - multi pane01

This example reproduces a Sol LeWitt wall drawing using overlapping black stripes and masked geometric symbols. Two sets of thin rectangles are drawn, one horizontal and one vertical, with each set clipped by a distinct SVG mask. The masks are built from large star-shaped paths generated with the d3 `symbol` API, and the entire composition is rendered as SVG. The code uses d3’s `select`, `range`, and `join` methods to construct the elements and applies the masks via `attr('mask', ...)`.

Gg1g10
88% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 and SVG. It renders two sets of alternating horizontal and vertical rectangles that cover the full viewport, with each set clipped by a mask. The masks combine a white or black background with a large diamond-shaped symbol path, creating a starburst effect where the grid lines are selectively revealed. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs, with SVG `<g>` groups and `mask` elements. The drawing is generated dynamically to match the browser window’s dimensions.

Ccardoza-IPH
88% match