Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt con D3

✓ Published2🌍 Public
SSergio
Last edited Sep 5, 2025
Created on Sep 3, 2025

This example renders a grid of horizontal and vertical rectangles using D3’s `select`, `range`, and `join`. Two SVG masks, created via `append('mask')` and `attr('id')`, cut a diamond-shaped hole in the grid, with one mask inverted to show contrasting fill. The code uses `symbol` and `symbols[3]` to draw the diamond path, and `svg.call` to apply masks. It runs at full browser size with no external data, relying on D3 v6.6.1 and SVG rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt with D3

A grid of alternating horizontal and vertical rectangles creates a full-screen Sol LeWitt–style composition, masked by two large diamond shapes. The D3 code uses `select` and `range` to generate 100 rectangles in each orientation, applying SVG `mask` elements to reveal or hide strokes. It leverages D3’s `symbol` and `symbols` APIs to draw the diamond masks, with `translate` positioning them at the center. The rendering is SVG-based, sized to the window with `innerWidth` and `innerHeight`.

Aainhoadieruiz@gmail.com
92% match
Loading thumbnail…

Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 v7, rendering a grid of intersecting rectangles with SVG masks. It shows alternating striped patterns: one set of horizontal and vertical bands is masked by a black diamond symbol, while the other is masked by an inverted version. The code uses `selection.join`, `range`, and `symbol` with `symbols[1]` to generate paths, applying masks via `svg.append('mask')` and `attr('mask', ...)`. The visualization is data-free, instead deriving geometry from the browser’s window dimensions, and outputs pure vector shapes.

DDilara Bozkurt
91% match
Loading thumbnail…

Full D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 and SVG rendering. It shows a grid of thin vertical and horizontal rectangles spanning the full viewport, with each set masked to reveal a central diamond shape through alternating positive and negative space. The code builds the masks by appending `mask` elements with contrasting fill colors, then draws the diamond using a D3 path generator with the `symbol` API and a large size value. The layout relies on `d3.range` to generate 100 equally spaced rectangles along each axis.

AArturo Guevara
91% match
Loading thumbnail…

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

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

Full Sol LeWitt Reproduction with D3.js

This example reproduces a Sol LeWitt art piece using D3.js and SVG. It generates a grid of horizontal and vertical rectangles, then applies two masks that shape the visible pattern. The masks are created with D3’s `symbol` and `symbols` APIs, placing geometric symbols in alternating black-and-white fills to selectively hide or reveal parts of the grid. The code uses `select`, `range`, and `.join()` to efficiently render the elements, with the rendering confined to the full browser viewport.

MMarcus Vinicius da Silveira Richa
90% match
Loading thumbnail…

Full Sol LeWitt reproductions with d3

This example reproduces a Sol LeWitt piece using D3.js by generating a grid of horizontal and vertical lines. Two SVG masks, defined as "inner-mask" and "outer-mask", are applied to these lines to reveal or hide portions of the grid, creating a complex geometric pattern. The masks are constructed using D3's `symbol` and `symbols` APIs to draw paths that form the mask shapes. The code uses D3's `select`, `append`, `attr`, and `join` methods to build the SVG structure and apply data-driven attributes. The rendering is done entirely in SVG, scaling to the browser window size.

AAngela Kochoska
90% 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
90% match
Loading thumbnail…

Sol LeWitt con D3 multiples símbolos

This example generates a grid of horizontal and vertical rectangles using D3.js and applies two SVG masks to create a Sol LeWitt-inspired pattern. The masks are built with the `symbol` and `symbols` APIs, rendering each of D3’s predefined symbol shapes (like circles, crosses, and diamonds) at a large size. One mask uses inverted colors to alternate the visible pattern, while the other uses standard masking. The code leverages `select`, `range`, and `join` to efficiently create the 100 rectangles per direction, all rendered as SVG on a full-window canvas.

SSergio
89% match