Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction

✓ Published0🌍 Public
AAdekola Aliu
Last edited Aug 21, 2024
Created on Aug 21, 2024

This example reproduces a Sol LeWitt art piece using an SVG rendering approach. The visualization displays a grid of horizontal and vertical lines that are masked to create concentric circular patterns at the center of the viewport. The code dynamically generates 100 rectangular strips for each orientation, using inline SVG mask elements to clip the lines into the circular shapes. The piece runs entirely with native JavaScript DOM manipulation, creating the `svg`, `rect`, `mask`, and `circle` elements without external libraries.

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 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
94% 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
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt artwork using procedural SVG rendering. It displays a grid of horizontal and vertical stripes that intersect within two circular masks, creating a geometric pattern where lines are visible only inside the circles. The code generates 100 rectangles in each direction, using SVG `mask` elements with `circle` shapes to constrain the drawn areas. A full-screen SVG canvas is built dynamically with `createElementNS`, and the composition is generated entirely through JavaScript without external libraries.

Eeverybitmihaly
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by rendering intersecting horizontal and vertical lines on an SVG canvas. A central circle is isolated through two SVG masks, creating a geometric interplay where line patterns alternate between appearing within and outside the circular boundary. The code uses vanilla JavaScript with the SVG DOM API, generating 100 rectangle elements per axis and applying masks (`circle-mask` and `circle-mask-2`) to control visibility. The result mirrors LeWitt’s systematic, rule-based aesthetic without external libraries.

Llukasilg.sol@gmail.com
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by rendering intersecting horizontal and vertical lines on an SVG canvas. A central circle is isolated through two SVG masks, creating a geometric interplay where line patterns alternate between appearing within and outside the circular boundary. The code uses vanilla JavaScript with the SVG DOM API, generating 100 rectangle elements per axis and applying masks (`circle-mask` and `circle-mask-2`) to control visibility. The result mirrors LeWitt’s systematic, rule-based aesthetic without external libraries.

Llukasilg.sol@gmail.com
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by rendering intersecting horizontal and vertical lines on an SVG canvas. A central circle is isolated through two SVG masks, creating a geometric interplay where line patterns alternate between appearing within and outside the circular boundary. The code uses vanilla JavaScript with the SVG DOM API, generating 100 rectangle elements per axis and applying masks (`circle-mask` and `circle-mask-2`) to control visibility. The result mirrors LeWitt’s systematic, rule-based aesthetic without external libraries.

Llukasilg.sol@gmail.com
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using raw SVG. A circular mask reveals a set of horizontal, evenly spaced rectangles that span the full width of the viewport, creating a striped pattern confined to a central circle. The code constructs the SVG dynamically via the `document.createElementNS` API, setting the mask’s circle radius to 200 pixels and drawing 100 rectangles at 20-pixel intervals with 10-pixel heights. No external libraries are used; the rendering relies entirely on native browser SVG elements and attributes.

Mmatrice-one
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using raw JavaScript and the SVG API. It generates a grid of horizontal and vertical stripes, masked by two inverse circular masks to create a composition of intersecting lines. The code directly creates SVG elements via `document.createElementNS`, setting attributes for rectangles and masks to control the visible pattern. The rendering is dynamic, adapting to the browser window's full width and height.

DDilara Bozkurt
94% match