Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Apr 30, 2024

Created on Apr 30, 2024

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.

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

91% match

Loading thumbnail…

Fork of HTML Starter

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.

JJuan Sebastian Manitta

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

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

89% match

Loading thumbnail…

Fork of HTML Starter

This example displays a pattern of black vertical and horizontal stripes through a circular aperture. The SVG uses dynamically created `<rect>` elements to construct the stripe grids. A white circular overlay, styled with CSS, masks a second SVG containing perpendicular lines, creating an optical moiré effect as the two grids intersect. The page is built with plain HTML, CSS, and JavaScript, using the SVG namespace and DOM manipulation via `createElementNS`.

Ggyan9427

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