Skip to main content
SimilarExport ZIP
100%

JS Example

✓ Published1🌍 Public
Nnubhatia
Last edited Aug 10, 2023
Created on Aug 2, 2023

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.

AI-generated description

Indian Flag

MIT Licensed

Similar vizzes

Loading thumbnail…

js-visualization

This example renders two sets of overlapping SVG rectangles—horizontal red stripes and alternating green vertical stripes—that are masked by circular cutouts to create a dynamic patterned display. The entire visualization rotates continuously via CSS animation. The code builds the SVG scene imperatively using the DOM API, creating masks, rectangles, and circles with `document.createElementNS`, while styling spins through keyframes defined in CSS.

GGusnaRWX
83% match
Loading thumbnail…

Fork of JS Example 2-Horizontal

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.

Nnubhatia
82% match
Loading thumbnail…

Create SVG Use JavaScript

This example shows a simple JavaScript approach to generating SVG graphics without any external libraries. The code creates a full-window SVG element and populates it with 100 horizontal rectangle bars, each 10 pixels tall and spaced 20 pixels apart, using the W3C SVG namespace via `document.createElementNS`. The rectangles fill the entire width of the browser window, producing a basic striped pattern that demonstrates programmatic vector graphics creation and DOM manipulation through native browser APIs.

Yyl.wang
80% match
Loading thumbnail…

javascript svg

This example generates a full-screen SVG visualization using the browser’s native Document Object Model (DOM) APIs. It creates 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the window. The rectangles are appended to an SVG element created via `document.createElementNS`, with dimensions set from `window.innerWidth` and `window.innerHeight`. The code runs directly in an HTML page with no external libraries, demonstrating a simple programmatic approach to SVG rendering in a React-hosted environment.

CCosmosDude1
80% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the creation of a dynamic SVG visualization that adapts to the browser window’s dimensions. It generates 100 vertical rectangles, each 10 pixels wide, positioned incrementally along the x-axis using a JavaScript loop. The code uses the raw SVG DOM API via `document.createElementNS` to construct and style the rectangles with a skyblue fill, and it logs the computed viewport size to the console. The visualization showcases fundamental SVG shape rendering with programmable layout logic.

SShashi Kumar
80% match
Loading thumbnail…

Lecture 3

This example demonstrates a full-screen SVG visualization of 100 vertical rectangles, each with a fixed width of 10 pixels and spacing of 20 pixels, filling the entire viewport height. It uses the Document Object Model API’s `createElementNS` method to construct SVG elements—specifically the `<svg>` and `<rect>` tags—within the `http://www.w3.org/2000/svg` namespace. The rectangles are generated in a JavaScript loop, with their `x` positions advancing by 20 pixels per iteration, creating a striped pattern across the window. The code sets the SVG’s width and height to the browser’s inner dimensions, ensuring the visualization scales responsively.

Jjajinkyaa
80% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG masks and animation by creating a dynamic geometric composition. The code generates 50 horizontal black rectangles with a circular mask, layered over 50 vertical color-scaled rectangles with a second mask, producing an intersecting grid pattern. A JavaScript `animate` element continuously adjusts the height of the colored rectangles from half the screen height to full height over a 2-second cycle. The visualization uses raw SVG element creation via `document.createElementNS` and a hardcoded 10-color palette, with masks defined as circle and rect shapes.

JJignesh Mistry
79% match
Loading thumbnail…

JS practice

This example demonstrates how SVG masks can combine two complementary cutout patterns. It renders a full-screen SVG canvas where a grid of vertical and horizontal rectangles is layered, with each set masked by a distinct circular hole centered in the viewport. The code uses the raw SVG DOM API via `document.createElementNS` to build masks, rectangles, and the masking circles, setting attributes like `mask` and `fill` directly. No JavaScript libraries are used; the result is a visible intersection of the two mask shapes across the rectangle layers.

CCameron Wehr
79% match