Sol LeWitt with D3

100%

Sol LeWitt with D3

✓ Published0🌍 Public

Last edited May 31, 2022

Created on May 31, 2022

This example generates a grid of 100 horizontal and vertical bars in SVG using D3’s `select`, `range`, and `join` methods. Two circular masks reveal overlapping patterns: the first shows horizontal bars inside a white circle, while the second inverts the effect for vertical bars. The rendering uses D3 selections to append rectangles and mask elements to the page, creating a Sol LeWitt-inspired geometric composition.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

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

93% match

Loading thumbnail…

SOl Le witt with D3

This example recreates a Sol LeWitt-inspired drawing using D3.js, showing a grid of horizontal and vertical bars that intersect within two circular masks. The SVG rendering uses D3 selections and data joins to generate 100 horizontal rectangles and 100 vertical rectangles, each constrained by a separate mask. The first mask reveals horizontal bars through a white circle on black, while the second uses the inverse, creating a contrasting circular crosshatch pattern. The code leverages D3’s `select`, `append`, and `range` APIs to build the scene dynamically.

Ddexuzi

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

92% match

Loading thumbnail…

Sol LeWitt with D3 episode 4

This example visualizes a generative geometric composition inspired by Sol LeWitt, using overlapping grids of horizontal and vertical rectangles that intersect within circular masks. It shows two sets of thin, evenly spaced bars—one horizontal and one vertical—drawn across the full screen, with the visible area confined to two offset circular regions defined by SVG masks. Built with D3.js’s `select`, `append`, `join`, and `range` functions, the code renders SVG `rect` elements using a React-free approach, combining black and white mask layers to reveal the intersection pattern in a minimalist, screen-filling design.

LLewis Ward

92% match

Loading thumbnail…

Sol LeWitt with d3

This example uses React and d3 to render a grid of horizontal and vertical rectangles, creating a pattern inspired by Sol LeWitt. The code uses `d3.select` and `d3.range` to generate 48 rectangles per axis, each masked by a circular shape. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to the respective sets, producing a cross-hatching effect inside the circle and a contrasting negative space outside. The rendering targets a full-window SVG.

Mmax-31

92% match

Loading thumbnail…

Sol LeWitt SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi

92% match

Loading thumbnail…

Sol LeWitt with D3

This example renders a minimalist, generative composition inspired by Sol LeWitt using D3.js. It draws one hundred horizontal rectangles stacked vertically, each with a fixed height and dynamic width, all clipped by a circular mask. The SVG output uses a black background rectangle inside the mask to reveal the bars only within the circle’s bounds. The code relies on D3’s `select`, `range`, and `join` methods to create the rectangles, demonstrating a simple data-driven approach to geometric art.

Llok noe

92% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using SVG and D3. It displays a grid of 100 horizontal and vertical bars, each 10 pixels thick, layered over one another. A circular mask isolates a portion of the grid, creating an interplay between the two orientations. The code uses `d3.select` and `d3.range` to generate the rectangle elements, with two masks (`circle-mask` and `circle-mask-2`) defining the visible region. The rendering approach relies on SVG attributes for positioning and masks, with the canvas size set to the full window dimensions.

IIgorGorin00

92% match