LeWitt Reproduction vertical

100%

LeWitt Reproduction vertical

✓ Published0🌍 Public

Last edited Nov 26, 2023

Created on Nov 26, 2023

This example recreates a Sol LeWitt-inspired drawing using only SVG elements, producing a grid of alternating horizontal and vertical lines that intersect within two circular masks. The code generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, and uses two SVG masks—one with a white circle on black and another with a black circle on white—to reveal different line orientations in concentric regions. The visualization is built entirely with native DOM methods like `createElementNS` and `setAttribute`, without relying on D3.js, despite the accompanying `index.js` file importing `select` from D3.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing by generating a grid of horizontal and vertical stripes that intersect across the full browser window. Two SVG masks create a central circular aperture: the first mask reveals the horizontal stripes inside the circle, while the second reveals vertical stripes outside it, producing a clean compositional contrast. The page builds the SVG programmatically using vanilla JavaScript and the DOM API, with no external libraries. The code sets element dimensions from `window.innerWidth` and `window.innerHeight`, ensuring the artwork adapts to the viewport.

Ggrassfluffy02

92% match

Loading thumbnail…

LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing as a vertical field of narrow, evenly spaced rectangles rendered in SVG. The visualization fills the entire browser window, with each rectangle positioned incrementally along the horizontal axis using a loop that creates 100 elements. The code uses native DOM manipulation via `document.createElementNS` and `svg.setAttribute` to construct the scene, without relying on external libraries. The page dynamically sizes the artwork to the viewport through `window.innerWidth` and `window.innerHeight`, and includes commented-out mask and circle code that is not active in the final render.

Ggrassfluffy02

92% match

Loading thumbnail…

Sol LeWitt Reproduction Verticle

This example reproduces a Sol LeWitt-inspired drawing using only SVG elements. It shows a grid of horizontal and vertical lines confined to a circular mask, creating a clean, geometric composition. The visualization is generated procedurally with JavaScript, using the Document Object Model (DOM) APIs to create SVG nodes. A white circle on a black mask defines the visible area, while 100 horizontal rectangles and 100 vertical rectangles are drawn across the full canvas, with the horizontal set clipped by the mask. The code relies on native browser APIs such as `document.createElementNS` and `setAttribute`, with no external libraries.

PPrince Kumar

91% match

Loading thumbnail…

Sol LeWitt Reproduction - vertical

This piece recreates Sol LeWitt’s vertical line drawing by rendering 100 horizontal and 100 vertical SVG rectangles across the full viewport. A circular mask, defined with two SVG `<mask>` elements, restricts each set of lines to a central ring: white lines appear inside the circle, while black lines fill the area outside it. The code builds all elements imperatively using `document.createElementNS` and `setAttribute`, with no D3 methods applied despite the library being imported. The result is a crisp, geometric interplay of line orientation and masked contrast.

MMatheesha Yapa

90% match

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript, displaying a grid of narrow horizontal rectangles that become visible only within a central circular mask. The code creates an SVG canvas via `document.createElementNS`, defines a mask with a single circle, and generates 100 stacked `<rect>` elements, each 10 pixels tall, that intersect the mask to form the final composition. The result is a precise, minimal geometric pattern whose vertical bands are revealed through the circular aperture, mimicking the clean, systematic aesthetic of LeWitt's wall drawings without any external libraries.

AAndre J Denais

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

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

89% match

Loading thumbnail…

Sol LeWitt Reproduction AG

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles. The code creates two circular masks, one with a black background and white circle, the other inverted, then applies them to 100 horizontal and 100 vertical bars. The result is a grid of intersecting lines visible only within the circular regions, mimicking the geometric precision of LeWitt’s conceptual art. It uses raw SVG DOM manipulation via `document.createElementNS` and mask attributes, with no external libraries.

Gguththered

89% match