Sol LeWitt vertical

100%

Sol LeWitt vertical

✓ Published2🌍 Public

Last edited Jul 16, 2023

Created on Jul 16, 2023

A vertical grid of fine alternating strokes fills the screen, with a circular region in the center where the pattern's orientation flips from horizontal to vertical. The effect uses two SVG masks with reversed black-and-white circles to hide or reveal layers of rectangles. Written with D3 v7, it generates 100 horizontal and 100 vertical rect elements, each 10 pixels thick, and applies the masks via the `attr('mask', ...)` API. The full-viewport SVG is sized to the window, and no external data is used.

AI-generated description

A demo of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Repro Vertical

This example reproduces a Sol LeWitt drawing using the SVG API. It displays a grid of horizontal and vertical black bars on a white background, creating an intersecting pattern. A circular mask reveals only the horizontal lines within its radius, while a second, inverted mask reveals only the vertical lines outside that same circle. The code constructs the masks and bars dynamically with `createElementNS` and `setAttribute`, using the document’s width and height for full-screen coverage.

SSam Hege

88% match

Loading thumbnail…

Sol LeWitt art reproduction - vertical variant

This example reproduces a Sol LeWitt art piece in a vertical variant, displaying a grid of thin vertical rectangles overlaid on a full-screen SVG. The code creates a single visual pattern using two circular masks centered on the viewport, each defined with a white rectangle and black circle via the SVG `mask` element. One hundred narrow rectangles are then rendered across the screen using `document.createElementNS`, with the masks selectively revealing portions of the grid. The artwork uses no external libraries, relying solely on native SVG DOM manipulation within a script.

Ddsims2157

88% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style geometric composition as a vertical grid of alternating vertical and horizontal stripes. It shows a structured visual pattern where two circular masks define regions of overlap, creating a cross-shaped interplay of lines. The rendering uses plain SVG elements—`rect` and `circle`—with two custom masks (`circle-mask` and `circle-mask-2`) to control which stripes appear in each area. The code dynamically generates 100 vertical and 100 horizontal rectangles, each styled with a distinct mask, to achieve the final layered effect. No external libraries are used; the visualization relies solely on native SVG and JavaScript.

Mmaciekawsq@gmail.com

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

87% match

Loading thumbnail…

Sol Lewitt (D3)

Two overlapping grids of thin horizontal and vertical rectangles render on an SVG canvas, creating a crosshatched composition. Masking reveals the pattern only within two circular regions: one section shows horizontal lines, while the other displays vertical lines. Built with vanilla JavaScript and D3 v6, the code uses `select`, `range`, and `join` to generate 100 rectangles per axis, with SVG `mask` elements defining the circular cutouts.

WWaseem Medhat

87% match

Loading thumbnail…

Sol Lewitt vertical

The visualization displays a grid of horizontal and vertical striped bars, layered to form a woven pattern that is revealed only within a central circular window against a dark background. Using D3.js selections and joins, it generates 100 horizontal rectangles and 100 vertical rectangles, each with a distinct mask. The first mask exposes the vertical stripes inside a white circle, while the second mask hides the horizontal stripes in the same area, creating a contrast between the masked and unmasked regions. The SVG rendering is fully responsive to the browser window size.

BBaptPoi

87% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s geometric wall drawing style by generating a grid of horizontal and vertical black stripes on a white background. A circular mask in the center of the SVG reveals only the stripes inside the circle, while a second inverted mask applies to the vertical lines, creating a layered crosshatch effect. The code uses raw SVG elements created via the DOM API (`document.createElementNS`), with two mask definitions (`<mask>` and `<mask2>`) to control visibility. The rendering is entirely procedural, with 100 rectangles in each direction, and no external data source or library beyond vanilla JavaScript and SVG.

Aalexscott-untitled

87% match

Loading thumbnail…

Sol LeWitt Reproduction-Vertical

This example reproduces a Sol LeWitt vertical-striped artwork as an interactive SVG visualization. It shows a grid of thin, alternating horizontal and vertical white lines confined within a circular mask at the center of the screen. The code uses the SVG API to create 100 horizontal and 100 vertical rectangles, with a mask element and circle defining the circular crop. No external libraries are used; the rendering relies entirely on native Document Object Model (DOM) methods like `createElementNS` and `setAttribute`.

XXuân Vinh

87% match