Fork of JS Example 2-Horizontal

100%

Fork of JS Example 2-Horizontal

✓ Published0🌍 Public

Last edited Aug 10, 2023

Created on Aug 9, 2023

A full-screen SVG is constructed entirely with native DOM methods via `document.createElementNS`, without any external libraries. It draws 100 horizontal blue rectangles, each 10 pixels tall, stacked vertically across the viewport. A circular mask with a 200-pixel radius, centered on the screen, restricts visibility to a round window showing a portion of the stripes. The mask uses a white-filled circle, and every rectangle references this mask through its `mask` attribute, creating a simple geometric pattern reminiscent of a flag.

AI-generated description

Indian Flag

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Fundamentals Horizontal

This example demonstrates SVG masking by confining a pattern of horizontal and vertical lines to a circular region at the center of the screen. The code generates 100 horizontal strips and 100 vertical strips using the `document.createElementNS` API, while a mask containing a white circle over a black rectangle restricts visibility of the horizontal lines. The result is a grid where only the intersection inside the circle remains visible, created entirely with vanilla JavaScript and no external libraries.

SSidney Oluoch

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

84% match

Loading thumbnail…

Fork of Fork of SVG Fundamentals Horizontal Vertical

This example demonstrates how SVG mask elements create intersecting visual patterns from horizontal and vertical stripes. The code uses raw SVG APIs—`document.createElementNS`—to build a full-window canvas with 100 horizontal rectangles masked by a white circle and 100 vertical rectangles masked by a complementary mask. Each mask combines a solid fill with a central circle, revealing or hiding stripes to form a cross-shaped overlap at the center. The result layers two sets of lines that visually blend through the transparent mask regions.

SSidney Oluoch

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

83% match

Loading thumbnail…

JS Example

A JavaScript-generated SVG visualization displays a series of vertical blue rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full window height. A circular mask, centered on the screen with a radius of 200 pixels, reveals only the bars within its boundary, creating a striking circular cutout effect against the otherwise full-height stripes. The code builds the SVG dynamically using the DOM API, creating elements via `createElementNS` and appending them to the body with attributes set programmatically.

Nnubhatia

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

82% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a full-screen display of 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the entire height of the browser window. The SVG is created entirely through JavaScript using the `document.createElementNS` method with the SVG namespace, appending each rectangle directly to an `<svg>` element sized to match the window's inner width and height. No data source is used; the visualization is purely algorithmic, showing how to generate SVG shapes programmatically without any external libraries.

Ssharmamilan632.m@gmail.com

81% match

Loading thumbnail…

Fork of Sol horizontal

A horizontal sequence of semi-transparent rectangles forms a striped pattern across the screen, with a circular mask revealing only the central region. The visualization uses raw SVG DOM manipulation via `document.createElementNS` and `setAttribute`, creating 100 rectangles positioned at increasing y-coordinates. A white circle and rectangular mask define the visible area, while the remaining stripes fade into the background. No external libraries are used; the code relies solely on native browser APIs for rendering.

Iionakeeley

81% match