Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 27, 2023

Created on Mar 27, 2023

This example creates an interactive SVG visualization by generating a series of horizontal stripes across the full canvas, with a circular mask applied to reveal only the central region. The code uses the raw SVG DOM API (`document.createElementNS`) to construct a mask element containing a white circle over a black rectangle, then appends 100 overlapping rectangular bands that reference this mask via `url(#circle-mask)`. The visualization employs React as the framework but relies on vanilla JavaScript for rendering, with the page adaptively sized to `innerWidth` and `innerHeight`. The result is a simple pattern of layered color bands emerging through a circular window.

AI-generated description

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

Similar vizzes

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

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

92% match

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

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

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

88% match

Loading thumbnail…

Fork of HTML Starter

This example showcases a geometric pattern created by layering two sets of parallel stripes overlaid with circular masks. It uses the D3.js library to build SVG elements and generate the mask paths, drawing on the `range`, `select`, `append`, `attr`, and `symbol` APIs from D3. The code creates a 100×100 grid pattern where overlapping translucent stripes form a subtle checkerboard effect within a central circle, demonstrating the use of reusable SVG masks and declarative data-driven rendering.

Bbhattrahul007

88% match

Loading thumbnail…

Fork of HTML Starter

This example uses SVG masks to create an intersecting grid of horizontal and vertical lines, revealing a circular window at the center. The code employs `d3.select` and `d3.range` to generate two sets of 100 rectangles, one for each orientation, and applies a mask with a white circle over a black background to the horizontal lines, and a mask with a black circle over a white background to the vertical lines. The result is a cross-hatched pattern that becomes visible only inside the central circle.

AAnna Xu

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

88% match