Fork of Sol Lewit Repro1

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

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

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

Fork of Sol LeWitt Reproduction Mask

This example uses SVG masking to reproduce a Sol LeWitt-inspired geometric composition. It draws 100 horizontal rectangles across the full viewport width, each masked by a single black circle centered on the screen. The mask, defined with the SVG `mask` element and a `rect` plus `circle`, reveals the stripes only within the circular area, creating a clean cutout effect. The code builds the visualization imperatively via `document.createElementNS`, with no external libraries, and responds to the window’s dimensions for full-screen display.

MMinchan Jun

Fork of Sol LeWitt in vanilla js vertical

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.

Rrwata97

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

Fork of Fork of Sol Lewwit 3

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.

PPeiyang Li

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