Sol LeWitt con D3 multiples símbolos

100%

Sol LeWitt con D3 multiples símbolos

✓ Published0🌍 Public

Last edited Sep 4, 2025

Created on Sep 4, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt con D3 - Symbols

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`.

SSergio

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

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

88% match

Loading thumbnail…

Sol LeWitt exercise

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, creating a woven pattern inspired by Sol LeWitt’s geometric art. Two masks, each containing a large D3 symbol shape, invert the fill of the intersecting lines to reveal the glyphs as negative space. The code uses D3 selections and data joins to render 100 rows and columns, with mask IDs applied via the `attr` method and custom mask rendering logic. The result is a dynamic interplay of line and form, driven entirely by D3’s `range`, `symbol`, and `symbols` APIs.

CC-Marfil

88% match

Loading thumbnail…

Sol LeWitt-d3-shape

This example generates an abstract grid of horizontal and vertical stripes that are selectively masked by two inverted symbol shapes, using D3 v6. It renders SVG rectangles across the full viewport, with 100 horizontal bars and 100 vertical bars, each assigned a mask. The `d3.mask` API combines a white or black background rect with a large `d3.symbol` path (symbols[4], a cross) translated to the center. Two masks, one inverted, create a dynamic interplay between the geometric grid and the central symbol.

Bbillzhou2005

88% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 - Multiple Shapes

Two overlapping grids of horizontal and vertical rectangles form a Sol LeWitt-inspired composition, with each grid masked by a separate pattern of D3 symbols. The code uses d3.select, range, symbols, and symbol to generate SVG rectangles and mask shapes, defining two masks via svg.call and renderMask. One mask is inverted, creating intersecting geometric layering across the full browser viewport.

Kkathrynrbernard

88% match

Loading thumbnail…

Full Sol Lewit reproduction using D3

This example reproduces a Sol LeWitt-style geometric drawing using D3.js, combining SVG rectangles and mask elements to create layered visual patterns. It generates 100 horizontal and vertical striped rectangles, each masked by one of two masks that reveal D3’s built-in symbol shapes—including circles, crosses, diamonds, squares, stars, triangles, and wye—positioned across the canvas. The code uses `d3.range` and `d3.symbol` with `d3.symbols` to render the symbol paths, while `d3.select` handles SVG manipulation and the `mask` attribute applies the clipping patterns. The rendering is fully SVG-based within a full-viewport layout.

AAshwani Sajwan

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

88% match