Adding symbols D3 Sol LeWitt

100%

Adding symbols D3 Sol LeWitt

✓ Published0🌍 Public

Last edited Sep 8, 2023

Created on Sep 8, 2023

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored D3 Sol LeWitt

This example reproduces a Sol LeWitt wall drawing using D3 to generate a grid of horizontal and vertical stripes. It demonstrates how the `symbols` API creates a circular mask over two layered sets of rectangles, producing an interplay of striped patterns. The SVG is rendered full-window, and the code uses D3's `select`, `range`, `join`, and `attr` methods to construct the visualization. Two mask definitions alternate their inverted states to show how the same symbol can create positive and negative space.

CCameron Wehr

91% match

Loading thumbnail…

Sol LeWitt Reprod D3 symbols AG

This example recreates a Sol LeWitt-inspired geometric composition using D3.js. It shows a grid of thin horizontal and vertical rectangles layered to create a woven texture, with two central plus-shaped masks cutting away portions of the pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG elements, applying `mask` attributes to hide or reveal the intersecting lines. Two mask layers, one inverted, define the contrasting positive and negative spaces at the center of the piece.

Gguththered

88% match

Loading thumbnail…

Sol Lewitt Reproduction with D3 multiple symbols

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.

GGullyPlook

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

88% match

Loading thumbnail…

Sol Lewitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using the D3 library. It generates a grid of horizontal and vertical rectangles overlaid with SVG masks containing geometric symbols. The masks, populated with shapes from D3's `symbols` and `symbol` functions, create the intersecting patterns. The code uses D3's `select`, `range`, and `join` APIs to build the SVG structure and apply the masks.

Nnicolekevans

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

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

87% match

Loading thumbnail…

Full Sol LeWitt Reproduction D3

This example reproduces a Sol LeWitt wall drawing using D3 to render a dense grid of horizontal and vertical stripes as SVG rectangles. Two SVG masks, each containing a large circular symbol from `d3.symbol`, cut the stripes to create a bold interlocking pattern across the full browser window. The code relies on D3 selections, `range` for generating stripe positions, and the `symbol` API, with the visualization sized to the viewport dimensions.

Ttverdone

87% match