Sol Lewitt whit D3

100%

Sol Lewitt whit D3

✓ Published1🌍 Public

Last edited Jun 7, 2023

Created on Jun 6, 2023

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt with D3

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.

JJetlinZ

93% match

Loading thumbnail…

Sol Lewitt Variant with D3 with Groups

This interactive SVG artwork reproduces a Sol LeWitt-inspired geometric composition using D3.js. Two perpendicular sets of thin rectangular bars—one horizontal, one vertical—overlap across the full canvas, their visibility controlled by two circular masks in the center. The first mask isolates a white circle, revealing only the horizontal bars within it, while the second mask uses inverse logic to show vertical bars outside the circle. The code employs D3's `select` and `range` utilities to generate the bar arrays and `join('rect')` to efficiently create the SVG elements, with masks constructed directly via the DOM API.

Iibaird6@gatech.edu

91% match

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt–inspired geometric composition using D3 v7. It renders a grid of horizontal and vertical bars, each clipped by a circular mask to create a bold, minimalist pattern. The code uses `d3.select`, `d3.range`, and `join` to generate SVG `<rect>` elements, while two overlapping masks (`circle-mask` and `circle-mask-2`) selectively reveal or hide bars within and outside the central circle. The result is an interplay of lines and negative space, driven entirely by SVG primitives and data-driven iterations.

FFrancisco Ibelles

91% match

Loading thumbnail…

Full Sol Lewitt whit D3

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.

FFrancisco Ibelles

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

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

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

90% match

Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 to generate a grid of horizontal and vertical rectangles. It shows two sets of 100 thin bars, one stacked vertically and one horizontally, which intersect to form a fine lattice across the full browser window. The code uses SVG masks with `d3.select` and `range` to reveal a central 200-pixel-radius circle where one set of bars appears white on black, while the other appears black on white, creating a contrast inversion. The visualization is rendered with SVG elements created via `append` and `join` within the D3 v7 library.

GGullyPlook

90% match