Full Sol Lewitt whit D3

100%

Full Sol Lewitt whit D3

✓ Published1🌍 Public

Last edited Jun 7, 2023

Created on Jun 7, 2023

This example reproduces a Sol LeWitt wall drawing using D3.js. It shows a grid of horizontal and vertical bars intersecting to form a circular emblem at the center, created by masking the bars with a geometric symbol path. The SVG rendering uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and mask the rectangular bar elements. Two separate mask groups define the circular shape, with one mask inverting the fill to combine the bars into a single composed form.

AI-generated description

A reproduction of Sol LeWitt art pieceSol Witt art piece. Using library D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt whit D3

This example generates a geometric composition inspired by Sol LeWitt using D3.js. It shows a grid of intersecting horizontal and vertical bars that are visible only within two overlapping circular regions. The artwork uses SVG masks to reveal the bar patterns, with one mask showing the horizontal bars in a circle and the other showing the vertical bars in an inverse circle. The code creates 100 bars in each direction and applies the masks via `svg.append('mask')` and the `attr('mask', ...)` method.

FFrancisco Ibelles

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…

D3 Sol LeWitt pt2

This example reproduces a Sol LeWitt wall drawing using D3.js and SVG rendering. It displays a grid of horizontal and vertical bars that intersect, with circular masks applied to create a rounded viewing window in the center of the canvas. The code uses D3’s `select`, `range`, and `join` APIs to generate the rect elements, and constructs two SVG masks—one with a white circle on black and another with a black circle on white—to reveal and conceal portions of the bars. The visualization fills the entire browser window, with the bars spaced at 20-pixel intervals.

AArturo Guevara

90% match

Loading thumbnail…

Full Sol Le Witt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 and SVG masks. It displays a grid of horizontal and vertical bars, with a central circular region where the two sets of bars visually intersect and invert their colors. The code uses D3 selections with `range` and `join` to generate 100 rectangles in each orientation, and defines two SVG masks with `circle` elements to control which bars are visible. The final image resembles a minimalist bar chart filtered through a circular aperture.

AAmauri Ribeiro

90% match

Loading thumbnail…

Sol Lewitt D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render SVG rectangles in a browser. It shows a grid of alternating vertical and horizontal bars that are masked to create a circular focal point, with bars inside the circle appearing inverted relative to those outside. The code uses D3’s `select` and `range` APIs to generate and join the rectangles, while custom SVG masks (`circle-mask` and `circle-cutout-mask`) control visibility. The visualization resizes to the full window and uses only the built-in D3 library (v6.6.1).

Ppirani.sabah@gmail.com

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

89% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, generating a grid of horizontal and vertical bars that intersect to create a dynamic pattern. The visualization uses two SVG masks—a front mask with a circular cutout and a back mask with an inverted circle—to create a lens effect where the bars appear to change orientation. The code constructs SVG elements programmatically, leveraging D3's `select`, `append`, `attr`, and `range` functions to efficiently build and style the 100 horizontal and vertical rectangles. The rendering is fully vector-based, scaling to the browser window dimensions.

Xxinyuwangxyw

89% match

Loading thumbnail…

Full Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing as a full-screen SVG. It uses D3's `select`, `range`, and `join` APIs to generate a grid of alternating horizontal and vertical stripes. Two masks, created with `symbol` and `symbols` from D3, overlay the grid: one applies a white-on-black path pattern, the other inverts it, producing a layered geometric composition. The drawing adapts to the browser window's dimensions, with the mask symbols centered and scaled to a fixed size.

VVincent Leduc

89% match