js-visualization

100%

js-visualization

✓ Published0🌍 Public

Last edited Dec 18, 2023

Created on Dec 18, 2023

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.

AI-generated description

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

Similar vizzes

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

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

83% match

Loading thumbnail…

Untitled

This example renders horizontal and vertical alternating stripes masked by two circles in the center of an SVG canvas. The code uses raw SVG manipulation via `document.createElementNS` to construct masks, rectangles, and elements, with `d3` available as a dependency but not actively used. The first mask reveals horizontal stripes, while the second mask inverts the circle to show vertical stripes outside it, creating a crosshatched visual pattern that fills the viewport. The visualization demonstrates layered SVG masking techniques without data input.

DDuckGorilla

83% match

Loading thumbnail…

Fork of SAP_SVG_JS_FUNDAMENTALS

This example demonstrates a geometric pattern created entirely with SVG masks, rendering a circular window surrounded by a grid of horizontal and vertical stripes. The visualization uses two custom mask definitions—one with a white circle on a black background and another with a black circle on white—to selectively reveal and hide alternating sets of rectangles drawn across the full viewport. Built with vanilla JavaScript and the SVG DOM API, it dynamically sizes the canvas to the browser window and constructs 100 lines in each direction using `createElementNS` and `setAttribute`, producing a layered, intersecting lattice effect without external libraries.

Ssapan3004

81% match

Loading thumbnail…

Svg Fun

This example generates an abstract animation using SVG masks and morphing symbols. It displays a grid of rectangular bars that appears to slice through the canvas, with the pattern dynamically changing as the mask content transitions between geometric shapes. The visualization employs d3 selections and transitions to animate the masks sliding in and out over a nine-second duration, while the underlying data cycles through d3 symbols. React manages the rendering, and the SVG elements use inline animation and CSS styling to create the visual effect.

Ddanperkins

81% match

Loading thumbnail…

Reproduction

This visualization reproduces a geometric pattern using two overlapping circular masks to control the visibility of horizontal and vertical strips. The rendering relies on core SVG APIs, including `document.createElementNS` for constructing elements and `mask` definitions that hide or reveal rectangular bands across the canvas. One mask exposes a central circular region for the horizontal bars, while the inverse mask reveals vertical bars outside that circle. The result is a clean, intersecting grid pattern, implemented purely with JavaScript and SVG without external libraries.

Aahora

81% match

Loading thumbnail…

sol vanilla JS

This example uses SVG and JavaScript to create a circular viewport that reveals a grid of horizontal and vertical lines. The visualization dynamically builds SVG elements, using masks to carve a circular hole in the background and to clip the vertical stripes inside the circle. The code creates a mask for the horizontal lines, which span the entire window width, and a second mask for the vertical lines, which fill the circle’s height. The result is an optical illusion of intersecting lines, produced entirely with procedural DOM manipulation and CSS styling.

KKerim

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

80% match