Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
Ffsenchyna@gmail.com
Last edited Mar 19, 2024
Created on Mar 19, 2024
Forked from HTML Starter

This example demonstrates a Sol LeWitt-inspired geometric composition rendered entirely in SVG. It shows a circular mask revealing a series of horizontal stripes across the full viewport. The code creates the mask using a white rectangle and a black circle, then draws 100 rectangles, each 20 pixels apart, applying the mask via the `url(#circle-mask)` reference. The implementation uses vanilla JavaScript DOM manipulation with `createElementNS` and `setAttribute`, avoiding any external libraries. The visualization is static, with the masked stripes forming the central visual effect against a clean, margin-free background.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Reproduction SVG

This example reproduces a Sol LeWitt-style geometric drawing using SVG, showing a grid of horizontal and vertical stripes that are masked to reveal a central circle. The visualization dynamically fills the browser window by setting the SVG width and height to the viewport dimensions. It constructs two SVG masks with white and black circles and rectangles, then renders 100 horizontal and 100 vertical stripe rectangles, each referencing a mask to clip the pattern. The code uses the DOM API `document.createElementNS` to build SVG elements programmatically with JavaScript.

Mmaximus2581
89% match
Loading thumbnail…

Sol LeWitt

This example generates an abstract geometric composition inspired by Sol LeWitt, where horizontal and vertical striped bands form a cross-like pattern across the full screen. Two SVG `<mask>` elements define circular cutouts—one with a black background and white circle, the other inverted—so that the stripes alternate visibility through the center. The code builds 100 horizontal and 100 vertical rectangles via plain JavaScript DOM manipulation, setting each rectangle’s `mask` attribute to either `url(#circle-mask)` or `url(#circle-mask2)`. No external libraries are used; the rendering relies entirely on native SVG and CSS, with dynamic window dimensions set through `window.innerWidth` and `window.innerHeight`.

Llukasreber
89% match
Loading thumbnail…

SVG Sol LeWitt vertical

This example generates an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It shows a grid of alternating horizontal and vertical black stripes that are visible only within a circular mask centered on the screen. The code uses the Document Object Model’s `createElementNS` method to construct SVG elements, including a mask containing a circle, and appends 48 horizontal and 48 vertical rectangles. The rectangles are clipped by the mask via the `url(#circle-mask)` reference, producing a circular cutout effect against a full-window backdrop.

Mmax-31
89% match
Loading thumbnail…

Sol LeWitt

This example renders a generative composition inspired by Sol LeWitt using raw SVG creation via JavaScript. It constructs a full-screen SVG and uses two masks to create a circular cutout: one mask reveals vertical stripes outside the circle, while another reveals horizontal stripes inside it. The code manually creates SVG elements using the `document.createElementNS` API and sets attributes directly, without using any external libraries. The result is a static, geometric pattern of 100 vertical and 100 horizontal rectangular stripes that alternate based on their position relative to the central circle.

JJamie
87% match
Loading thumbnail…

Sol LeWitt

This visualization reproduces Sol LeWitt’s geometric style using overlapping horizontal and vertical stripe patterns. It shows a large circular mask that reveals alternating bands of stripes against a contrasting background. The code uses raw SVG elements via `document.createElementNS` to construct rectangles, masks, and circles. A single white circle and black circle are combined with two masks to clip the stripe layers, creating an interplay of positive and negative space. The rendering relies on SVG’s mask attribute and fills the full viewport with 100 stripes in each direction.

Ddalia.miliauskaite@me.com
87% match
Loading thumbnail…

Sol LeWitt Reproduction HTML + SVG

This example reproduces a Sol LeWitt-style geometric composition using HTML and SVG, showing a grid of horizontal and vertical lines that intersect within circular masks to create a layered visual effect. Two SVG masks define the visibility regions: one reveals a circle of horizontal stripes, while the other selectively hides vertical stripes within a matching circle. The code programmatically builds the SVG structure using the `createElementNS` API, generating 100 horizontal and 100 vertical rectangles with alternating mask references. No external libraries are used; the rendering relies entirely on native SVG elements and attributes.

OOleg Zhernovoy
87% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT drawing using raw SVG and JavaScript, without any external libraries. It renders 100 horizontal and 100 vertical striped rectangles that intersect to create a geometric grid, with two circular masks applied to reveal different portions of the stripes. The `mask` element and `circle` primitives define a central circular boundary, while the second mask inverts its effect. The visualization spans the full browser window by reading `window.innerWidth` and `window.innerHeight`. The code constructs SVG elements programmatically via `document.createElementNS` and sets attributes directly, demonstrating a minimal approach to generative art.

TTheo-0201
87% match
Loading thumbnail…

Sol Lewitt

This example creates a generative black-and-white pattern inspired by Sol LeWitt’s geometric art. It uses raw SVG elements created via the W3C DOM API, including a circular mask and 100 horizontal rectangles, to show alternating stripes visible only within a central circle. The code dynamically sets the SVG dimensions to match the browser window and positions the circle at the viewport center. No external libraries are used; everything is built with plain JavaScript and SVG’s `mask` and `rect` elements.

Vvikrantbhurke
86% match