Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt vertical again

✓ Published1🌍 Public
EEd Smale
Last edited Jul 16, 2023
Created on Jul 16, 2023

This example generates a grid of horizontal and vertical bars overlaid with two circular masks, creating a circular portal where the bars are visible and a contrasting ring where the orientation flips. Built with D3.js, it uses `select` and `range` to create 35 rectangles for each axis, positioning them with `attr` calls. The SVG rendering applies `mask` elements with `rect` and `circle` shapes to control visibility. The artwork reinterprets Sol LeWitt’s vertical line concept, using the browser’s `innerWidth` and `innerHeight` for a full-screen composition.

AI-generated description

A demo of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt-inspired geometric composition using two overlapping grids of vertical and horizontal bars. The bars are partially revealed through circular masks, creating a cross-shaped aperture effect at the center of the canvas. The code uses D3 v7’s `select`, `range`, and `join` methods to generate SVG rectangles, with two `mask` elements defining the visible circular regions. The artwork spans the full browser window and renders entirely as SVG, with all positioning computed dynamically from `window.innerWidth` and `window.innerHeight`.

Lliu yang
90% match
Loading thumbnail…

Fork of Sol LeWitt-d3-2

This visualization generates a grid of horizontal and vertical bars across the full browser window, then applies circular SVG masks to reveal a bold geometric composition. Using d3 selections and `range()`, it appends 100 rectangles in each orientation, with a black-and-white mask pair creating a contrasting ring pattern at the center. The code uses D3 v6 with `select`, `range`, and `join`, rendering to SVG while dynamically sizing to the viewport. This mirrors Sol LeWitt’s minimalist wall drawings through a React-compatible, single-file example.

Bbillzhou2005
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction D3

This example reproduces Sol LeWitt’s geometric art using a grid of alternating horizontal and vertical bars. Two circular masks reveal and invert the pattern at the center, creating a cross-shaped visual contrast. The visualization is built with D3 v7, using `select`, `range`, and SVG `rect` elements. Each bar is assigned a mask ID via `attr('mask', ...)`, while the masks themselves are constructed with appended SVG `rect` and `circle` shapes.

Aalexscott-untitled
90% match
Loading thumbnail…

Fork of Sol LeWitt with d3js

This visualization generates a grid of horizontal and vertical SVG rectangles that collectively form a geometric pattern inspired by Sol LeWitt’s minimal art. The code uses d3’s `select` and `range` to create 100 lines in each direction, then applies two circular masks to reveal or hide portions of the grid, producing a layered, cross-shaped effect. The rendering relies on SVG masks and fills, with the viewport sized to the full window.

Iinnocent thomas
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece using D3, generating a series of horizontal bars that are clipped by a circular mask. The visualization fills the entire browser window with alternating offset rectangles, creating a geometric pattern. The code uses D3's `select` and `range` functions to build SVG elements, though the mask and circle logic is present but commented out. The rendered output shows a grid of colored bands restricted to a central circular area.

Bbtlhgboy@icloud.com
90% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt-style geometric composition, showing a grid of horizontal and vertical bars that intersect within a central circular boundary. The piece uses D3 v7 APIs including `select`, `range`, and `join` to generate 100 thin rectangles in each direction, sized to the full viewport. SVG masks (`circle-mask` and `rectangle-mask`) selectively reveal the horizontal lines within a 200-pixel-radius circle, while the vertical lines are inverted so only the outer area appears. The result highlights the interplay between line density and circular cropping, rendered entirely as static SVG elements.

MMofizur Rahman
89% match
Loading thumbnail…

Fork of Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 and SVG. It shows a grid of alternating horizontal and vertical rectangles, with two circular masks creating a central lens effect where the orientation appears to flip. The code uses d3.select, d3.range, and SVG mask elements to overlay black-and-white rects and circles. The artwork fills the entire browser window, with the masks positioned at the center.

ZzolboBatsaikhan
89% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Final with D3

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js and SVG rendering. It displays a grid of horizontal and vertical black bars that are partially revealed through two circular mask effects, creating intersecting line patterns across the full viewport. The visualization uses d3.select and data joins to generate 100 rectangle elements for each orientation, while SVG mask elements with circle shapes control which portions of the lines remain visible. The bars are positioned mathematically based on array indices, with the masks centered in the window to produce the layered optical effect.

Kkwambokar
89% match