Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Aug 24, 2024

Created on Aug 23, 2024

An SVG mask with a black circle on a white rectangle reveals a grid of vertical and horizontal strips that fill the viewport. The plain HTML and JavaScript create 100 rect elements along each axis, applying the circular mask via the `mask` attribute. This simple code demonstrates SVG mask manipulation without external libraries, rendering a clean circular window into a striped pattern across the full browser window.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example creates an SVG mask that reveals horizontal stripes through a circular window. The code generates 100 horizontal rectangles, each masked by a circle centered on the screen, while 100 vertical rectangles overlay the full canvas without masking. All shapes are built dynamically using the SVG namespace with `document.createElementNS`, and the mask is defined with a black background rect and white circle to control visibility. The result is a simple geometric pattern combining masked and unmasked grid-like elements.

EErik L

87% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a generative visual pattern using SVG masking: a set of horizontal and vertical striped rectangles is clipped by two circular masks, producing a crosshatched effect with overlapping rings. The page window dimensions determine the SVG size, and all elements are created dynamically via the native DOM API (`document.createElementNS`). Two masks—one with a white circle on black, the other with a black circle on white—alternately reveal and hide the stripes, creating contrasting circular regions in the center of the viewport. This is a minimal, dependency-free HTML/CSS/JavaScript visualization that highlights basic SVG compositing techniques.

Llukasilg.sol@gmail.com

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

This example creates an SVG visualization that displays a series of horizontal stripes, with a circular mask revealing the central portion of the pattern. The visualization uses the HTML5 Canvas API indirectly through SVG elements, specifically manipulating SVG `rect` elements and a `mask` definition. The code generates 100 rectangles, each 10 pixels tall and spaced 20 pixels apart, all constrained by a `circle-mask` that creates a circular viewport. The mask itself contains a white background `rect` and a black `circle` positioned at the center of the viewport, effectively cropping the striped pattern into a circular shape.

HHieuVu179

84% match

Loading thumbnail…

Fork of Fork of SVG fundamentals

This example demonstrates how SVG masks can create two distinct circular cutout effects on a grid of overlapping rectangles. One mask, defined with a black background and white circle, reveals only the vertical stripes; the other, with a white background and black circle, controls visibility of horizontal stripes. The code builds the full-screen SVG and all elements programmatically using `document.createElementNS` and `setAttribute` in vanilla JavaScript, without any external libraries. The result is a visual interplay of lines that form a transparent circular window at the center of the viewport.

JJetlinZ

84% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how SVG masks can create complex visual effects by combining shapes. A white rectangle covering half the canvas contains a black circle and a smaller white circle, which together punch holes in the mask. The page renders 100 horizontal strips, each with a mask applied, creating an alternating pattern of visible and hidden regions. The code uses raw JavaScript to manipulate SVG elements directly, setting attributes like width, height, and fill on rectangles and circles within a masked group.

Ppedrogius

84% match

Loading thumbnail…

Fork of HTML Starter

This example shows an SVG mask revealing a pattern of 100 horizontal stripes inside an ellipse. The code creates the mask with an ellipse element, then appends rectangles with a `mask` attribute referencing that ellipse. It uses vanilla JavaScript DOM manipulation, `document.createElementNS` for SVG namespacing, and `window.innerWidth/innerHeight` to size the scene.

Mmatrice-one

84% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example uses an SVG mask to reveal a series of horizontal lines through a circular hole. It creates a white mask rectangle covering the entire viewport, with a black circle in the center. One hundred semi-transparent vertical strips are then drawn over the full SVG width, each clipped by the mask. The code manually builds the SVG elements using the DOM API and the `d3` library’s `selection` object, setting the mask’s dimensions to match the window size.

HHieuVu179

84% match