Dom Manipulate

100%

Dom Manipulate

✓ Published1🌍 Public

Last edited Sep 20, 2022

Created on Sep 20, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Dom Manipulate With D3

This example demonstrates how to create a striped visual effect using SVG rectangles masked by a circular window. It uses D3’s `select`, `range`, and data joins to generate 100 horizontal bars, each with a height of 10 pixels and a vertical offset of 20 pixels, filling the full viewport width. The bars are rendered with a `mask` attribute referencing a circular mask, so only the area inside the circle is visible. The code exercises D3’s declarative data binding and the SVG mask API to achieve the clipped pattern.

Mmfgok

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

85% match

Loading thumbnail…

D3

This example demonstrates layered masking in SVG to create a grid of horizontal and vertical lines that intersect around a central circular opening. It uses D3’s `select` API alongside raw DOM manipulation to append two complementary masks, each defining a circular region of white or black fill. The code renders 100 horizontal and 100 vertical rectangles, applying one mask to each set so that lines are hidden or revealed in alternating patterns around the circle. The result is a moiré-like visual effect built purely from basic SVG shapes and mask definitions.

MMuhammad Dawood Rafique

83% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG masking by layering a grid of horizontal and vertical rectangles over a circular cutout. The rectangles are created dynamically using the DOM API `document.createElementNS` with the SVG namespace. Two complementary masks, `circle-mask` and `circle-mask-2`, alternate between white and black fills to control visibility, producing a striped pattern inside the circle while keeping the surrounding area solid. The code relies on raw SVG manipulation rather than a visualization library, with only the `d3-selection` API imported but not actively used.

AAitorGD

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the visual impact of SVG masks, using them to selectively reveal or hide overlapping shapes. It creates a full-screen canvas filled with horizontal and vertical stripes by generating one hundred thin rectangles for each direction. A circular mask isolates a central area where the stripes remain visible, while a second, inverted mask produces a contrasting ring effect by revealing the vertical stripes outside the circle. The code builds the SVG document dynamically through the Document Object Model, creating elements like rectangles and masks using `createElementNS` and `setAttribute` within JavaScript.

MMichael Bell

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

82% match

Loading thumbnail…

Learn D3

This example demonstrates how SVG masks can create a striking visual composition using only rectangles and circles. It renders 100 horizontal and 100 vertical thin rect elements across the full viewport, with each set masked by a circular aperture defined via native SVG `mask` elements. The first mask uses a white circle on a black background, while the second inverts the colors to alternate visibility between the two rectangle sets. No D3 library calls appear in the code; instead, it relies on `document.createElementNS` and `setAttribute` for all SVG construction, making it a pure vanilla JavaScript and SVG demonstration.

MMark Christian

82% match

Loading thumbnail…

D3.js Practice Session 2 - Masks Circle and rectange

This example demonstrates the use of an SVG mask to selectively reveal horizontal stripes while concealing vertical ones. The visualization renders 100 horizontal and 100 vertical rectangle elements, each with distinct dimensions, onto an 800x600 canvas. The mask, defined with the ID `circle-mask`, consists of a full-size black rectangle and a central white circle with a radius of 200. Only the horizontal rectangles apply the mask, resulting in a visible circular pattern where they intersect, while the vertical rectangles remain unaffected. The code leverages raw SVG manipulation through `createElementNS` and attribute setters, without high-level D3.js abstractions, relying instead on direct DOM construction.

KKoneti Hemanth Raju

82% match