Fork of Starter

100%

Fork of Starter

✓ Published1🌍 Public

Last edited Nov 7, 2024

Created on Nov 6, 2024

This example reproduces a Sol LeWitt drawing as an interactive full-window SVG. It shows a grid of vertical and horizontal black bars with a central circular region where the bars are masked away, creating a white circle against a striped background. The code uses raw DOM APIs like `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, and SVG `<mask>` elements to selectively hide bars within the circle. The dimensions of the composition are computed from `window.innerHeight` and `window.innerWidth`, adapting the artwork to any viewport size.

AI-generated description

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

Similar vizzes

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

86% match

Loading thumbnail…

Fork of HTML Starter

This example uses raw JavaScript and the SVG API to dynamically construct a full-window visualization. It creates two distinct masks on an SVG canvas: a white circle on a transparent background and a white rectangle with a black circular hole at the center. The code then generates 100 horizontal and 100 vertical thin rectangles, applying these masks to reveal a grid-like pattern of intersecting lines against a plain background. The result is a geometric composition built entirely through procedural DOM manipulation without any external libraries.

SSGPPellow

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

84% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces Sol LeWitt’s minimalist wall drawing as an interactive SVG composition. It generates a grid of alternating horizontal and vertical rectangles, with a circular mask revealing only the central region of the layered shapes. The code uses the DOM API’s `createElementNS` to construct SVG elements directly, setting attributes like `width`, `height`, and `mask` programmatically. No external libraries are required, and the rendering adapts to the full browser viewport, creating a stark black-and-white geometric pattern inspired by the artist’s systematic approach.

WWasanta Pruttisarikorn

84% match

Loading thumbnail…

Fork of HTML Starter

This example creates a full-window SVG scene using native JavaScript and the DOM API, without any external libraries. It draws 100 horizontal and 100 vertical rectangles to form a grid, with horizontal bars partially obscured by an SVG mask that reveals a central circle. The mask combines a black background rect with a white 200-radius circle at the center, so only the bars inside that circle are visible. The rendering approach relies on `document.createElementNS` to build SVG elements and `setAttribute` for dynamic sizing based on `window.innerWidth` and `window.innerHeight`.

Llt_vandegrift@live.com

84% match

Loading thumbnail…

Fork of sol l. reprod. v.

This example recreates Sol LeWitt’s generative art using raw SVG elements created through the DOM API. The piece displays a grid of horizontal and vertical bars whose placement and thickness are computed from the viewport dimensions. A circular mask, defined as a separate SVG mask, applies a hole to the vertical bars, while a second mask with a white circle reveals the horizontal bars. The result is a dynamic, mask-based interplay of intersecting lines that echoes LeWitt’s systematic, rule-driven aesthetic. The code generates rectangles and circle masks entirely via JavaScript’s `document.createElementNS`, with no external libraries.

Kkhaledakanan@gmail.com

83% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example generates a full-screen generative artwork with a grid of alternating vertical and horizontal bar stripes, separated by a circular mask. Built with React and rendered as SVG, it uses D3’s `select` and `range` to append 100 rectangles in each direction, then applies two mask definitions (`circle-mask` and `circle-mask-2`) to invert the pattern inside and outside the circle. The result is a modern, interactive take on a Sol LeWitt drawing, where the composition depends on the browser window’s dimensions.

Aa0x0

83% match

Loading thumbnail…

Fork of Fork of SVG Fundamentals

This example reproduces a Sol LeWitt–style drawing by generating vertical black bars across the full browser viewport. The code creates an SVG element sized to the window’s inner dimensions and appends a series of `<rect>` elements spaced 20 pixels apart, each 10 pixels wide and as tall as the window. It uses the JavaScript DOM API (`createElementNS`, `setAttribute`, `appendChild`) to build the SVG programmatically. The resulting composition is a minimalist grid of alternating stripes, driven entirely by the current window size.

SSimon Krukowski

83% match