Fork of Fork of Sol Lewwit 3

100%

Fork of Fork of Sol Lewwit 3

✓ Published1🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

This interactive SVG artwork creates a grid of vertical and horizontal lines, with a circular void in the center formed by masking. The visualization uses SVG masks (`circle-mask` and `circle-mask2`) to show vertical lines inside a white circle and horizontal lines outside it, resulting in a dynamic, layered composition. Built with vanilla JavaScript using `document.createElementNS`, it generates 100 rectangles per axis, with the central circle positioned at the viewport center. The design adapts to the browser window size, demonstrating a creative use of SVG masking for generative art.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Sol Lewwit 2

This interactive visualization renders a grid of horizontal rectangles, masked by a central circle, creating a striking geometric pattern. The SVG elements are dynamically generated using the Document Object Model (DOM) API, with a mask defined by a `<circle>` element. The visualization adapts to the browser window size by using `window.innerWidth` and `window.innerHeight`. One hundred rectangles, each 10 pixels high, are drawn sequentially down the screen, with the circle mask revealing a circular region of the striped pattern against a plain background.

PPeiyang Li

91% 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 Lewwit D3

This visualization reinterprets Sol LeWitt’s geometric wall drawings using a grid of horizontal and vertical stripes. It renders 100 SVG rectangles in each direction across the full browser window, with the intersecting lines partially masked by a central circle. Built with React and D3 v7, it uses `select`, `range`, and `.join()` to generate the marks, while two SVG masks create the contrasting circular reveal. The code dynamically sizes the artwork to the viewport using `window.innerWidth` and `window.innerHeight`.

PPeiyang Li

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

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

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

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

88% match

Loading thumbnail…

Fork of Fork of Sol Lewwit D3 1

This visualization uses D3 version 7.8.4 with level selection and join operations to generate a grid of horizontal and vertical rectangles. The SVG canvas spans the browser window, and two masks create overlapping circular regions. In the first mask, a white circle over a black rectangle reveals horizontal bars, while the second mask uses inverted colors to expose vertical bars. The resulting composition shows intersecting striped patterns emerging from the circular cutouts.

PPeiyang Li

88% match