svg circle

100%

✓ Published1🌍 Public

Last edited Jun 14, 2022

Created on Jun 14, 2022

This example renders 100 horizontal rectangles on an SVG canvas, with a circular mask applied so only the area inside a 200-pixel-radius circle centered on the screen is visible. The rectangles are spaced every 20 pixels vertically, each 10 pixels tall and spanning the full window width. The code creates the SVG elements using the native `document.createElementNS` API, building a mask containing a white circle and attaching it to each rectangle via the `mask` attribute. The visualization demonstrates basic SVG masking and procedural element creation in a browser environment.

AI-generated description

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

Similar vizzes

Loading thumbnail…

create mask

This example uses an SVG mask to create a circular window over a series of alternating horizontal rectangles. The mask, defined with an SVG `<mask>` element containing a white circle, is applied to each of the 100 rectangles via the `mask` attribute. The visualization demonstrates how SVG masks work in a bare-bones HTML page using vanilla JavaScript, dynamically creating the SVG elements and filling the viewport.

AAkshay

87% match

Loading thumbnail…

circle mask

A full-screen SVG displays 100 horizontal stripes alternating in height across the viewport, with a circular mask revealing only the central region. The mask is defined as an SVG `<mask>` containing a white rectangle and a black circle, applied to each stripe via the `mask` attribute. The visualization uses raw DOM manipulation with `document.createElementNS` and `setAttribute` to construct the SVG elements dynamically in JavaScript, without any external libraries.

AAkshay

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

85% match

Loading thumbnail…

Learning svg with javascript

This example renders 100 horizontal rectangles that span the full window width, each stacked at 20-pixel intervals. The rectangles are drawn as SVG elements using D3’s `select`, `join`, and attribute setters, with a `mask` attribute referencing a `circle-mask` defined elsewhere. Data is generated programmatically via `Array.from`, mapping index values to `y` positions and fixed widths and heights. The code demonstrates a minimal React-free workflow, appending an SVG to the body and sizing it to `window.innerWidth` and `window.innerHeight`.

GGabriel Dantas

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

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

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…

SVG Foundamentals

This example demonstrates how SVG masks and primitive shapes combine to create a striking visual effect. It displays 100 horizontal rectangles filling the viewport, with a circular mask revealing only the area inside a 200-pixel-radius circle centered on the screen. Using D3.js version 7.6.1, the code binds data via `d3.range` and `selectAll` to generate the rectangles, then appends a `mask` element containing a black background rectangle and a white circle to control visibility. The rendering approach relies entirely on SVG elements and DOM manipulation through `d3.select`.

SSteven Hua

82% match