Sol LeWitt con D3 - Symbols

100%

Sol LeWitt con D3 - Symbols

✓ Published0🌍 Public

Last edited Sep 6, 2025

Created on Sep 5, 2025

This example recreates Sol LeWitt-style geometric art using D3 v6, generating a grid of horizontal and vertical rectangles in SVG. Two masks, each containing a large D3 symbol path, cut circular holes through the intersecting lines, creating overlapping negative space. The visualization uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct the shapes programmatically, with masks applied via D3's selection and call methods. A third triangle symbol appears on the left, rendered with `d3.symbolTriangle`.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Sol Lewitt - D3 multi shapes

This example recreates Sol Lewitt-inspired geometric art using D3.js, rendering a grid of horizontal and vertical rectangles that are selectively masked by overlapping symbols. The visualization displays five distinct shapes—including circles, crosses, and diamonds—positioned at the center of the canvas. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to generate SVG paths, while SVG masks with inverted black-and-white fills determine which grid lines remain visible. The final pattern emerges from alternating mask states applied to the two perpendicular line sets.

Hhquazza@gmail.com

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

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

90% match

Loading thumbnail…

Using Symbols/Symbol - D3 Version Sol LeWitt Reproduction

This D3.js reproduction of a Sol LeWitt artwork generates an intricate grid of overlapping horizontal and vertical lines. The piece creates a dynamic visual interplay where lines are selectively revealed through two inverted SVG masks, each containing a large circular symbol. The code uses `d3.select`, `d3.append`, `d3.range`, and `d3.symbol` from D3 v6.6.1 to construct the SVG output. It renders 100 rectangles in each direction, with widths and heights calculated from the window dimensions, positioning the circular mask symbols at the canvas center.

EEdgar Cortez

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…

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

89% match

Loading thumbnail…

Full Sol LeWitt con D3

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.

SSergio

89% match