Fork of Sol LeWitt in vanilla js vertical

100%

Fork of Sol LeWitt in vanilla js vertical

✓ Published1🌍 Public

Last edited Apr 19, 2023

Created on Apr 19, 2023

Forked from Fork of Sol LeWitt in vanilla js

This visualization displays a series of horizontal stripes that are only visible within a circular region centered on the screen. The piece uses a mask to reveal the stripes, which are rectangles with a fixed height of 10 pixels, spaced 30 pixels apart and spanning the full width of the viewport. The implementation relies on vanilla JavaScript and the SVG API, creating elements like `svg`, `mask`, `circle`, and `rect` dynamically. The mask uses a black circle to hide the outer stripes, while white fills the rest of the mask to show the bars inside.

AI-generated description

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

Similar vizzes

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

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

89% match

Loading thumbnail…

Fork of SVG Sol LeWitt

This example reimagines Sol LeWitt’s geometric wall drawings as an interactive web visualization, generating layered horizontal and vertical stripes that intersect within two circular masks. The code builds SVG elements entirely via the DOM API (`document.createElementNS`), setting attributes directly on each rectangle without a data-binding library. A white-filled mask reveals alternating 10-pixel-wide horizontal bars, while a second inverted mask displays vertical bars of the same thickness, creating a crosshatch pattern framed by the centered circle. The sketch responds to the browser window size by setting the SVG width and height from `window.innerWidth` and `window.innerHeight`.

Mmax-31

89% match

Loading thumbnail…

Fork of Fork of Fork of Sol Lewitt Reproduction Vertical 4

This example creates a generative geometric composition inspired by Sol LeWitt, displayed as horizontal and vertical stripes across the screen. Two SVG masks—one with a white circle on black, another with a black circle on white—reveal alternating sets of striped rectangles, producing a crosshatch pattern where the stripes overlap. The visualization uses vanilla JavaScript with the DOM API to construct SVG elements dynamically, setting the width and height based on the browser window. It shows how masking and nested loops can generate a structured, Op-Art-like visual effect without external libraries.

Eelgato_1994

89% match

Loading thumbnail…

Fork of Fork of Sol Lewitt Reproduction Vertical 3

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas. A circular mask, created with SVG mask elements, reveals a portion of the horizontal stripes while the vertical bars remain fully visible. The piece uses the Document Object Model (DOM) API to create and append SVG elements, with dimensions based on the browser window size. The composition is a generative reproduction inspired by Sol LeWitt’s wall drawings.

Eelgato_1994

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces Sol LeWitt’s geometric art by layering 100 horizontal and 100 vertical stripes across the full screen. A circular mask in the center reveals only the horizontal stripes inside the circle, while an inverted mask outside the circle shows the vertical stripes. Using the SVG API, the code creates mask elements, rectangles, and circles programmatically, with each stripe set to a fixed width or height of 10 pixels. The rendering is entirely vector-based, driven by raw JavaScript and DOM manipulation without external libraries.

Jjustinhersom@gmail.com

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using raw SVG and JavaScript, creating a geometric composition of overlapping horizontal and vertical bands. The artwork shows a grid of alternating colored stripes confined to a circular mask, with a second inverted mask revealing a contrasting ring pattern. The code builds SVG elements dynamically, using two SVG masks—one with a white circle on black and another with a black circle on white—to control which stripes appear in the center and edges. It relies on standard DOM APIs like `createElementNS` and `setAttribute` to generate 100 rectangles in each orientation, without any external libraries.

WWRCIECH

88% match