Fork of Sol LeWitt Reproduction Mask

100%

Fork of Sol LeWitt Reproduction Mask

✓ Published1🌍 Public

Last edited Jun 12, 2022

Created on Jun 12, 2022

This example uses SVG masking to reproduce a Sol LeWitt-inspired geometric composition. It draws 100 horizontal rectangles across the full viewport width, each masked by a single black circle centered on the screen. The mask, defined with the SVG `mask` element and a `rect` plus `circle`, reveals the stripes only within the circular area, creating a clean cutout effect. The code builds the visualization imperatively via `document.createElementNS`, with no external libraries, and responds to the window’s dimensions for full-screen display.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Sol Lewitt Reproduction mask

This example reproduces a Sol LeWitt-inspired geometric composition by drawing 100 horizontal stripes across the full browser window. A circular SVG mask, defined with a black circle over a white rectangle, reveals only the central region of the stripes, creating a circular vignette effect. The code constructs all elements dynamically using the raw Document Object Model (DOM) API, including `document.createElementNS` and `setAttribute`, without relying on external libraries. The mask and rectangles are appended directly to an SVG element sized to match the viewport dimensions.

Kkwambokar

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Mask

A fork of Sol LeWitt’s geometric art, this visualization renders a series of horizontal black stripes across the full browser window, with a circular region in the center masked out to reveal the white background. The composition uses an SVG `mask` element to create the circle, while JavaScript dynamically generates 100 rectangles, each 10 pixels tall, and applies the mask to them. The code relies on native SVG APIs, including `createElementNS` and `setAttribute`, without any external libraries.

CCurran Kelleher

91% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction

This example reproduces Sol LeWitt’s geometric wall drawing using SVG masks and repeated rectangles to create intersecting striped patterns. A circular mask reveals portions of horizontal and vertical bars, while the second mask inverts the visibility to produce a checkerboard-like overlap. The page uses raw JavaScript with `document.createElementNS` to build the SVG dynamically, sizing elements to the full browser window. No external libraries are required, and the work is a direct homage to the artist’s instructional art.

Ssavalifestus75@gmail.com

91% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction Vertical 2

This visualization reproduces a Sol LeWitt-inspired drawing using vertical black bars, with a circular mask that creates a clear central window against a white background. The code generates 100 evenly spaced rectangles, each 10 pixels tall, and applies a mask containing a 200-pixel-radius circle. The piece uses raw SVG elements created via the Document Object Model API, setting the mask’s rect to white and circle to black to control visibility. It dynamically sizes to the browser window, adapting the composition to the full viewport.

Eelgato_1994

90% match

Loading thumbnail…

Fork of Sol Lewit Repro1

This visualization uses 100 horizontal and 100 vertical rectangular strips, each 10 pixels thick, arranged in a grid across the full screen. A central circular mask reveals the intersection of these strips, creating a crosshatch pattern within a 200-pixel radius circle. Built with vanilla JavaScript and the SVG DOM API, it dynamically creates SVG elements like `<rect>`, `<mask>`, and `<circle>` to apply the masking effects. The code demonstrates careful manipulation of SVG masks, where the first mask uses a black background with a white circle and the second inverts this logic, producing alternating visibility in the overlapping regions.

HHayden-V

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping circular masks to shape a grid of horizontal and vertical bands. The visualization renders 100 horizontal rectangles and 100 vertical rectangles as SVG elements, with the first circle mask revealing the horizontal lines and the second mask inverting the effect for the vertical lines. The code builds the SVG document dynamically with the native `document.createElementNS` API, defining masks via SVG `mask` and `rect` elements. The resulting pattern creates a clean, minimalist interplay of lines and circular negative space across the full browser viewport.

NNavsea

90% match

Loading thumbnail…

Fork of Sol LeWitt reproduction Mask

This example reproduces a Sol LeWitt art piece as an interactive SVG visualization. It shows a field of vertical rectangular stripes that are fully visible outside a central circular area, where they are masked out to reveal a blank region. The code uses raw JavaScript and DOM manipulation to construct an SVG `mask` element containing a white background rectangle and a black circle, then applies that mask to 100 overlapping vertical rectangles via the `url(#circle-mask)` reference. The rendering approach is purely procedural, generating shapes directly with `document.createElementNS` without any external data or libraries.

ZzolboBatsaikhan

90% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript without any external libraries. It renders two sets of overlapping rectangles: 100 horizontal stripes and 100 vertical stripes, both evenly spaced across the full window size. A circular mask, defined via the SVG `mask` element, restricts visibility of the horizontal stripes to a centered circle, creating a layered geometric effect. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the page, with all dimensions derived from `window.innerWidth` and `window.innerHeight`.

HHéloïse Feldmann

90% match