Pseudo Visualization with DOM

100%

Pseudo Visualization with DOM

✓ Published1🌍 Public

Jjeevanprasad.shivarathri@zemosolabs.com

Last edited May 8, 2026

Created on May 7, 2026

This example demonstrates a striped optical illusion using pure SVG and the DOM API. It draws vertical black stripes across the entire canvas, then uses a mask with a black circle to hide those stripes inside the central circle. Inside that circle, a clipPath restricts horizontal black stripes, creating a contrasting orientation shift. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically without any external libraries.

AI-generated description

MIT Licensed

Similar vizzes

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

78% match

Loading thumbnail…

svg mask

This example demonstrates the visual effect of SVG masks by layering horizontal and vertical stripes over a full-viewport canvas. It creates two circular masks, one with a white circle on a black background and the other with a black circle on a white background, then applies them to alternating sets of 50 thin rectangles. The code builds the entire scene programmatically using the Document Object Model (DOM) methods such as `createElementNS` and `setAttribute`, without any external libraries, and renders everything directly in SVG.

Sserebryanaya.n@gmail.com

78% match

Loading thumbnail…

SVG and Javascript

This example demonstrates how SVG masks can dynamically composite shapes to create an intricate visual pattern. Two circular masks—one black and one white—are layered with alternating sets of thin rectangular stripes, generating a crosshatched grid that reveals or hides sections of the canvas. The code uses raw JavaScript DOM manipulation with `document.createElementNS` to build SVG elements dynamically, computing positions based on `window.innerWidth` and `window.innerHeight`. No external libraries are employed; the rendering relies entirely on native SVG mask and rectangle elements.

GGiacomo Rossoni

78% match

Loading thumbnail…

Dom Manipulate

This example demonstrates how SVG masks can create geometric patterns by layering horizontal and vertical stripes over a circular cutout. The code manually constructs SVG elements using the DOM API, creating a full-screen SVG with two masks: one revealing a circle of horizontal stripes and another revealing the inverse. One hundred turquoise rectangles are generated for each orientation, with the masks controlling visibility through white and black fill values. The visualization highlights fundamental SVG manipulation techniques without relying on a visualization library, though D3 is listed as a dependency.

Mmfgok

77% match

Loading thumbnail…

beginner svg

This example demonstrates a simple masking effect in SVG, where a set of horizontal stripes is revealed only through a circular window at the center of the viewport. The visualization uses plain SVG elements created dynamically via the `document.createElementNS` method. A white rectangle serves as the mask base, while a black circle defines the transparent region, and the stripes are drawn as individual `rect` elements with the mask applied. The code runs without any external libraries, relying purely on native browser APIs and JavaScript.

TTehran Mammadov

77% match

Loading thumbnail…

mask experiments

This example demonstrates the interplay of two complementary SVG masks. It first shows a set of horizontal stripes visible only within a circular window, then displays vertical stripes that are hidden inside the circle while remaining visible outside it. The piece creates a stark geometric contrast between the two masked regions. The visualization is generated entirely with the SVG `mask` element and basic `rect` and `circle` primitives, using white and black fills to define luminosity. The code dynamically constructs one hundred stripes for each orientation, with the masks applied via URL references to `#circle-mask` and `#circle-mask-2`.

Sscheenmi@gmail.com

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create a circular window onto layered geometric patterns. Using the native SVG DOM API, the code constructs fifty horizontal and fifty vertical rectangles, each with vibrant default colors, and applies two different masks to control their visibility. The first mask, built from a black rectangle and white circle, reveals only the horizontal bars inside the circle, while the second mask, with inverted colors, shows the vertical bars outside the circle’s edge. The result is a clean, mask-driven interplay of striped shapes across the full browser viewport.

Aalexis.delacotte@gmail.com

76% match

Loading thumbnail…

DOM Manipulation

This example demonstrates how to dynamically create an SVG scene using only native JavaScript DOM manipulation methods, without any external libraries. It generates a grid of red and black rectangles, then applies a circular mask to reveal a striking circular composition at the center of the viewport. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements, including a mask, circle, and rects, with dimensions determined by the window size. The result is a minimalist, geometric pattern that highlights the power of direct SVG element creation and styling.

Cclara7227

76% match