Full Sol LeWitt in d3 v2

100%

Full Sol LeWitt in d3 v2

✓ Published1🌍 Public

Last edited Nov 7, 2023

Created on Nov 6, 2023

This example recreates a Sol LeWitt drawing as a grid of thin horizontal and vertical lines, with two circular masks revealing different layered compositions. The code builds an SVG scene using D3 v5’s `select`, `range`, and `join` to generate the lines, and `symbol` with `symbols[5]` to create the triangle-shaped masks. It demonstrates importing from D3 via UNPKG and local ES6 modules, rendering entirely through SVG attributes and mask definitions.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

Test Heading

test

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Full Sol LeWitt in d3 v3

This example renders a generative geometric composition using D3 v5, creating a grid of horizontal and vertical rectangles that are masked to reveal two contrasting overlays. The code builds an SVG canvas sized to the browser window, uses `d3.range` to generate 100 rectangles in each direction, and applies `d3.symbol` paths (including a triangle) as masks to selectively show or hide the grid lines. It demonstrates the use of `d3.select` for DOM manipulation and local module imports to organize code.

TTobi Olabode

92% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js. It shows a grid of horizontal and vertical lines rendered as SVG rectangles, with the pattern dynamically clipped by two circular masks to create a complex, layered composition. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the shapes and paths. SVG masks are defined and applied to the line groups, with one mask inverted to produce the final visual effect. The rendering adapts to the browser window’s dimensions.

Aajoua

90% 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

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully

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 D3

Sol LeWitt’s geometric drawing system is recreated as a generative SVG composition using D3. Horizontal and vertical grid lines are drawn across the viewport, each filtered through one of two masks that reveal alternating symbol shapes from `d3.symbol` at fixed intervals. The masks are constructed with `d3.select` and `append`, using `d3.range` to place five distinct symbols, while the grid relies on `selectAll` and `join` with `rect` elements. This implementation adapts the artist’s rule-based aesthetics to a full-screen, code-driven format.

PParker-D5

90% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

A full-screen SVG reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical lines, each line of constant width and separated by a fixed interval. D3’s `select`, `range`, `symbols`, and `symbol` APIs generate the line structure, while mask elements, created via the `renderMask` function, define cutout shapes—a circle and other geometric symbols—through which the lines are visible. The masks use fill colors to either hide or reveal lines, producing an inverted visual effect across the composition.

MMofizur Rahman

89% match