Skip to main content
SimilarExport ZIP
100%

Vertical Fork of Fork of SVG Fundamentals - Sol LeWitt repro follow-along

✓ Published0🌍 Public
MMichael Gomersall
Last edited Jun 9, 2023
Created on Jun 9, 2023

This example reproduces a Sol LeWitt art piece using dynamically generated SVG. The visualization displays a grid of horizontal and vertical lines, with a central circular region where the lines are masked and inverted. The code creates an SVG canvas and uses two masks—a circle mask and an inverse mask—to selectively reveal the line patterns. Horizontal rectangles are drawn with a circle mask applied, while vertical rectangles use the inverse mask, creating an alternating visual effect. The rendering is purely code-driven, with no external data source, and relies on the Document Object Model (DOM) API for SVG element creation.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing using only raw SVG and JavaScript, with no external libraries. It displays a grid of alternating horizontal and vertical lines that remain visible only within two intersecting circular masks, creating a dynamic visual interplay between the line directions. The code builds the SVG dynamically by appending a set of horizontal rectangles masked by a black/white circle, and vertical rectangles masked by an inverse circle, both centered on the screen. The rendering relies on native SVG mask elements and DOM manipulation in plain JavaScript.

MMaras13
88% match
Loading thumbnail…

Fork of Sol Lewitt Vertical

This example reproduces Sol LeWitt’s *Vertical* art piece using two SVG masks to interleave horizontal and vertical black bars. A circular mask reveals the horizontal bars inside the circle while hiding them outside, and a complementary mask reveals the vertical bars only outside the circle. The code builds the SVG directly with the Document Object Model (DOM) API, creating 100 rectangles at 20-pixel intervals across a 600×500 canvas. The result is a clean, geometric pattern that contrasts dense line grids with an empty circular void.

FFrancisco Ibelles
88% match
Loading thumbnail…

Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG rectangles. The code creates 100 vertical black bars, each 10 pixels wide, evenly spaced across the full window height, filling the browser viewport. It uses the Document API (`createElementNS`) to build SVG elements from scratch within JavaScript rather than a dedicated visualization library. The rendering approach directly mirrors LeWitt’s geometric, minimalist style by iterating through a fixed count of shapes.

MMichael Gomersall
88% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction Vertical Inverst

This example generates an abstract geometric composition by layering horizontal and vertical bars over a full-screen SVG canvas. A circular mask and its inverse are created using the SVG `mask` element, with the first mask revealing horizontal strips in the central circle and the second exposing vertical strips outside it. The code uses the DOM API `createElementNS` to construct SVG elements dynamically, setting attributes like `width`, `height`, and `mask` via `setAttribute`. No external libraries are used; all shapes are drawn procedurally in a loop with 100 iterations per orientation.

WWasanta Pruttisarikorn
87% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using an SVG rendering approach. It displays a grid of horizontal and vertical lines that intersect within two circular masks, creating a nested geometric pattern centered on the screen. The code constructs SVG elements dynamically via the Document API, using `createElementNS` to build rectangles and circles. Two masks (`circle-mask` and `circle-mask-2`) control visibility: the first reveals horizontal stripes inside a 200-pixel-radius circle, while the second exposes vertical stripes in the surrounding area, producing a layered, minimalist composition.

NNeel Mehta
87% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example recreates a Sol LeWitt–inspired geometric composition using only SVG primitives and masking, showing a grid of thin vertical and horizontal bars that intersect to form a central circular void. The work emphasizes the contrast between ordered line work and negative space, creating a pseudo-visualization that mimics algorithmic drawing without encoding external data. The code relies on the raw DOM APIs `document.createElementNS` and `setAttribute` to construct the SVG elements, while two `<mask>` definitions with inverted fills (white background with black circle, black background with white circle) selectively reveal the vertical strokes inside the circle and the horizontal strokes outside it. No external libraries are used; the font is loaded via Google Fonts’ “Share Tech” for the text styling.

Ccome.grant@gmail.com
87% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using only JavaScript and the SVG API. A central circular mask reveals a grid of horizontal black lines in the center of the viewport, while a second inverted mask allows vertical black lines to appear only outside the same circle, creating a striking contrast. The code dynamically creates all SVG elements—including masks, rectangles, and circles—based on the browser window dimensions, generating 100 horizontal and 100 vertical stripes that intersect in a pattern defined by the two masks.

Mmagswo
87% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt geometric art piece using a dynamic SVG composition of horizontal and vertical bands. It displays a grid of thin colored rectangles that form a distinct circular pattern through the use of two SVG masks, creating a visual interplay between the line orientation and the masked circle. The code builds the entire scene programmatically with the raw SVG API, generating 100 horizontal stripes and 100 vertical stripes in a loop. A circular mask reveals the horizontal lines against a fully visible background, while a second, inverse mask isolates the vertical lines within the same circle, producing the artwork’s layered effect.

Aadriana-ss
86% match