Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited May 9, 2024

Created on Apr 7, 2024

This example demonstrates how to create a masked SVG visualization using vanilla JavaScript and React. It renders an SVG canvas with a circular mask centered on the screen, then draws a series of vertical rectangles that are clipped by the mask. The code uses the `createElementNS` API to build SVG elements dynamically, along with the `mask` and `rect` elements to achieve the visual effect, with React serving as the framework for the page structure.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

86% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple face-like graphic composed of three SVG circles: one large yellow circle with a black stroke for the head, and two smaller unfilled circles for the eyes. It demonstrates the most basic structure of an SVG visualization within an HTML page, using React from the UMD build loaded via a script tag. The code renders the SVG directly in the body without any React components or JavaScript execution beyond a console log of the imported React object. The rendering approach is static SVG, with no data binding or interaction.

MMeghana Bangari

85% match

Loading thumbnail…

Fork of Hello HTML

A static SVG face rendered with React and raw SVG elements. The code uses React to manage the SVG structure, drawing a yellow circle for the face, black strokes for borders, and two smaller circles for eyes. The example demonstrates basic SVG shapes and React integration, with the SVG output displayed directly in the HTML page. It uses React 16.9.0 from a CDN and relies on native SVG attributes like `cx`, `cy`, `r`, and `fill`.

11G4S

84% match