Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited May 1, 2024

Created on May 1, 2024

This example creates a full-window SVG scene using native JavaScript and the DOM API, without any external libraries. It draws 100 horizontal and 100 vertical rectangles to form a grid, with horizontal bars partially obscured by an SVG mask that reveals a central circle. The mask combines a black background rect with a white 200-radius circle at the center, so only the bars inside that circle are visible. The rendering approach relies on `document.createElementNS` to build SVG elements and `setAttribute` for dynamic sizing based on `window.innerWidth` and `window.innerHeight`.

AI-generated description

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

Similar vizzes

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 shows a full-screen SVG canvas generated entirely with vanilla JavaScript, without any external libraries. It creates 100 vertical rectangles, each 10 pixels wide, positioned at 20-pixel intervals across the viewport width. The code uses the Document Object Model (DOM) API methods `createElementNS`, `setAttribute`, and `appendChild` to build the SVG elements dynamically. The rectangles stretch to the full height of the window, producing a simple striped pattern that reacts to the browser’s current dimensions at load time.

SShannon Teoh

90% match

Loading thumbnail…

Fork of HTML Starter

This example renders a full-screen SVG canvas using raw JavaScript and the SVG DOM API, drawing a series of 100 vertical rectangles. Each rectangle is placed at increasing x-coordinates, with a fixed width and a height set to the window’s inner width, creating a striped pattern across the viewport. The code programmatically creates SVG elements via `document.createElementNS` and appends them to the document, demonstrating a minimal HTML/CSS/JavaScript setup without external libraries.

CChirag

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

88% match

Loading thumbnail…

Fork of HTML Starter

This example generates a grid of 100 thin vertical rectangles on an SVG canvas using JavaScript’s `document.createElementNS` API. Each rectangle is positioned at increasing x-coordinates with a fixed width and full height, creating a striped pattern across the 960-by-500 pixel viewport. The code uses native Document Object Model (DOM) methods to build the SVG element and its children, with no external libraries or data sources. It demonstrates fundamental SVG creation and attribute manipulation in a bare HTML page.

Sscxingji

88% match

Loading thumbnail…

Fork of HTML Starter

This example shows a blank browser window with a single small black square rendered in the upper-left corner of an SVG canvas. The code creates an SVG element with a width of 950 pixels and a height of 500 pixels using the native Document Object Model API `document.createElementNS`, then appends a rectangle with both width and height set to 100 pixels. No data source is involved; the visualization is purely a static demonstration of programmatic SVG construction using vanilla JavaScript without any external libraries. The render approach relies directly on browser-native SVG namespace methods.

OOmid Golshan

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

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