Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Horizontal Shapes D3

✓ Published0🌍 Public
Eeric.r.thornhill@gmail.com
Last edited May 14, 2025
Created on May 14, 2025

A generative grid of horizontal and vertical bars intersects through two circular masks, creating a play of striped rectangles against a contrasting background. Built with D3 v7, the visualization uses `select`, `range`, and data joins to render 100 line segments in each orientation. SVG masks define the overlapping circles: one reveals vertical stripes inside a white circle, while another reveals horizontal stripes outside it, producing an interlocking geometric composition.

AI-generated description
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
90% match
Loading thumbnail…

Sol LeWitt Horizontal Circle D3

This example recreates a Sol LeWitt-inspired drawing using D3.js. It displays a grid of horizontal and vertical bars clipped to reveal a circle in the center. The visualization uses SVG masks to show the horizontal bars inside the circle and the vertical bars outside it. The code uses `d3.select` and `d3.range` to generate 100 rectangles in each direction, with the masks defining the visible regions.

Eeric.r.thornhill@gmail.com
90% match
Loading thumbnail…

Sol LeWitt Reproduction by D3

This example reproduces a Sol LeWitt–style drawing by layering horizontal and vertical striped rectangles in two circular masks to create an overlapping grid pattern. The visualization uses D3 selections to bind data from `d3.range` to SVG `rect` elements, with `<mask>` elements defining the visible circular regions. Rendered as an SVG, the code generates 100 horizontal and vertical bars at 20-pixel intervals, producing a minimal, geometric composition that changes with the browser window size.

Aaaron.00366@gmail.com
89% match
Loading thumbnail…

Sol Lewitt D3 v2

A grid of vertical and horizontal striped rectangles, generated with D3 v6, covers the screen. The full-width and full-height strips use `select` and `range` to map data to `rect` elements. Two SVG masks reveal overlapping circular regions: a white-filled circle on a black background shows the horizontal lines, while an inverted cutout mask displays the vertical lines, creating a cross-shaped intersection at the center. Rendering is via SVG with D3's `join` method.

Ppirani.sabah@gmail.com
89% 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
89% match
Loading thumbnail…

Full Sol LeWitt reproduction with D3_2

This visualization reproduces a Sol LeWitt drawing using overlapping vertical and horizontal bars. The bars are drawn as SVG rectangles, with alternating masks creating a visual interplay between the two orientations. The code uses D3.js’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric grid and mask patterns. It relies on D3’s SVG rendering with dynamic mask definitions to achieve the layered, cross-hatched effect. The data is procedurally generated rather than sourced from an external dataset.

DDilara Bozkurt
88% match
Loading thumbnail…

Sol LeWitt Reproduction more shapes with D3

This visualization reproduces a Sol LeWitt-style geometric composition using overlapping striped rectangles and mask-based shapes. A grid of horizontal and vertical bars is drawn with D3’s `select` and `range` methods, while two SVG masks create contrasting circular cutouts—one inverted—by combining black and white fills with a `symbol` path from the `symbols` array. The masks alternate the visibility of the stripes, producing an optical interaction of positive and negative space. The piece uses fixed window dimensions and renders entirely with SVG, mirroring the minimal aesthetic of the original artwork.

YYingkai Song
88% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 using group elements

This example recreates a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal and vertical bars that intersect to form a pattern. The visualization uses two groups of rectangles, one arranged horizontally and one vertically, each masked to reveal a circular area in the center of the screen. SVG masks defined with `mask` and `circle` elements control the visibility, creating a layered effect where the bars appear only within the circular regions. The code leverages D3 selections and data joins with `select` and `range` to generate the rectangles dynamically.

Ttriciascully
88% match