Fork of Sol LeWitt Reproduction

100%

Fork of Sol LeWitt Reproduction

✓ Published0🌍 Public

Last edited Feb 1, 2025

Created on Feb 1, 2025

This example reproduces a Sol LeWitt-style geometric composition using raw SVG and JavaScript, rendering a canvas-sized circular mask layered over intersecting horizontal and vertical bands. The page builds an SVG scene with two circle masks: one reveals a grid of horizontal rectangles, while an inverse mask exposes vertical rectangles, creating a Moiré-like pattern. The code constructs elements via the DOM API (`document.createElementNS`, `setAttribute`) and appends them to the SVG root, with masks defined as `<mask>` elements containing `<rect>` and `<circle>` shapes. No external libraries are used; all rendering relies on native SVG primitives and inline styling.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing using raw SVG elements and mask manipulation. The visualization renders a series of overlapping horizontal and vertical stripes by creating rectangles and applying circular SVG masks to confine their visibility, producing a geometric composition. The code uses DOM manipulation via `createElementNS` and `setAttribute` to construct the SVG, with two distinct masks (`circle-mask` and `circle-mask-2`) controlling different stripe patterns. The result is a monochromatic, grid-based artwork where varying rectangle heights and widths generate a rhythmic, minimalist pattern across the full viewport.

NNeel Mehta

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

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric drawing using raw SVG elements created via the JavaScript DOM API. It shows a grid of blue horizontal bands and red vertical bands, with a white circular mask that reveals both sets of stripes within its radius against a black background. The code constructs an SVG mask and applies it to rectangles tiled across the viewport, using mask elements and fixed pixel offsets to generate the layered pattern. No external libraries are used; the rendering relies entirely on native browser SVG and DOM manipulation.

Ccrees00

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript. It shows a grid of overlapping horizontal and vertical bands, where a circular area in the center is masked to reveal only the vertical lines, while the outer region displays only the horizontal ones. The code builds the SVG via `document.createElementNS`, creates two SVG `<mask>` elements with circle and rect primitives to control visibility, and renders 100 rectangles per axis. No external libraries are used; the rendering entirely relies on native browser SVG APIs.

PPurshotam Bohra

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This page reproduces a Sol LeWitt drawing using an SVG mask to create a circular viewport. The code generates 100 horizontal and 100 vertical stripes, masking each set so that the horizontal lines appear within a central circle, while the vertical lines are visible outside it, producing a clean geometric contrast. It uses the SVG DOM API directly, creating elements via `document.createElementNS` and applying masks with `url(#circle-mask)` and `url(#circle-mask-2)`. The composition adapts to the browser window’s current dimensions with no data source beyond the generated shapes.

JJane

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

JJane

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using only SVG and JavaScript, creating a grid of alternating horizontal and vertical bands. Two circular masks reveal the layered strokes: the first mask exposes vertical strips within a centered circle, while the second inverts that region to show horizontal strips outside it. The code generates 100 rectangles per direction, each 10 pixels thick, using the `document.createElementNS` API and SVG `mask` elements to compose the visual interplay. The result is a clean, geometric abstraction that mimics the artist’s instructional art style.

Mmavercikalvin

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric composition entirely through SVG elements. It shows a grid of horizontal and vertical bands that intersect within a centered circular boundary, creating a patterned interplay of lines and negative space. The code constructs the visualization using raw JavaScript and the SVG DOM API, creating two masks—one with a black background and white circle, the other with the inverse—to alternately reveal horizontal stripes inside the circle and vertical stripes outside it. One hundred rectangles are generated for each orientation, each masked to produce the final layered effect.

AAWLGAWLG

92% match