LeWitt Reproduction vertical

100%

LeWitt Reproduction vertical

✓ Published4🌍 Public

Last edited Nov 5, 2023

Created on Nov 5, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

95% match

Loading thumbnail…

LeWitt Reproduction vertical

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.

Bbindas1

92% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT drawing using raw SVG and JavaScript, without any external libraries. It renders 100 horizontal and 100 vertical striped rectangles that intersect to create a geometric grid, with two circular masks applied to reveal different portions of the stripes. The `mask` element and `circle` primitives define a central circular boundary, while the second mask inverts its effect. The visualization spans the full browser window by reading `window.innerWidth` and `window.innerHeight`. The code constructs SVG elements programmatically via `document.createElementNS` and sets attributes directly, demonstrating a minimal approach to generative art.

TTheo-0201

90% match

Loading thumbnail…

Sol Lewitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing as a vertical sequence of horizontal stripes, clipped by a circular mask centered on the screen. It shows how generative geometry can create a minimalist composition directly in the browser. The code uses raw SVG APIs via `document.createElementNS` and `setAttribute` to construct 100 rectangles, each 10 pixels tall, spanning the full viewport width. A `mask` element with a white circle limits visibility, while the page fills the entire window with no margins or scrolling. The rendering approach is entirely procedural, using only vanilla JavaScript and SVG without external libraries.

Eelgato_1994

90% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG primitives and CSS masking, with no external data. It displays a grid of alternating horizontal and vertical stripes over the full viewport, clipped to reveal two overlapping circular forms at the center. The code builds SVG elements directly via the DOM API, creating 100 horizontal and 100 vertical rectangles. Two SVG masks—one inverting the other—combine to produce the layered visual effect, while d3 is listed as a dependency but not used in the logic.

NNikki Masroor

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using pure browser APIs, with no external libraries. It renders 100 horizontal and 100 vertical rectangles in SVG, layered so that a circular mask reveals the grid pattern at the center while masking the opposite orientation at the edges. The code constructs the SVG, masks, and shapes programmatically via `document.createElementNS`, setting attributes like `fill`, `r`, and `mask` on each element. The layout adapts to the full viewport size using `window.innerWidth` and `window.innerHeight`.

Nnpinta

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using generative SVG. It shows a grid of alternating horizontal and vertical stripes, with two circular masks revealing different portions of the pattern: one mask displays the horizontal bands, the other the vertical bands. The code creates the visualization by appending rectangle elements to an SVG canvas and applying SVG `mask` definitions that use `circle` and `rect` shapes. The stripes are drawn with a loop, and the entire composition scales to the browser window’s dimensions.

CCereces

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing by assembling a grid of horizontal and vertical stripes that intersect to form a circular void at the center. The piece renders 100 horizontal rectangles masked by a black circle, while a second set of 100 vertical rectangles uses an inverted mask with a white circle, creating a complementary pattern of visible lines. Built with the HTML DOM and SVG APIs, the visualization constructs elements directly via JavaScript, using `createElementNS`, `setAttribute`, and SVG mask definitions to achieve the geometric composition. The result is a computational homage to LeWitt's conceptual art, where simple algorithmic rules generate complex visual interplay.

Ccharlieronchetti@gmail.com

89% match