Learn D3

100%

✓ Published1🌍 Public

Last edited Jun 6, 2022

Created on Jun 6, 2022

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.

AI-generated description

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

Similar vizzes

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

89% match

Loading thumbnail…

D3.js fundamental

This example demonstrates how SVG masks can be used to create geometric cutouts in layered grid patterns. It renders 100 horizontal and vertical rectangles across the full viewport, each masked by a circle that reveals or hides portions of the grid. The code uses D3.js v7 with the `select`, `selectAll`, and `range` APIs to generate the shapes, while two separate `<mask>` elements with contrasting fill colors control visibility. A white-filled mask with a black circle creates the first cutout, and an inverted mask creates the second, producing two distinct circular viewing windows.

Ddeebanks77

87% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create striking visual effects, showing a series of horizontal rectangles that are visible only through a circular cutout in the center of the screen. The code uses d3.select to append an SVG element sized to the window, then binds an array of data points to create the rectangles with varying vertical positions. A dedicated mask element, constructed from a black background rect and a white circle, controls the visibility of these rectangles, revealing them only within the circular region. The rendering approach relies entirely on SVG primitives and the D3 join pattern.

PPrasad Sudrik

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

86% match

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

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

85% match

Loading thumbnail…

D3 mask all shapes

This example demonstrates how D3.js mask elements can selectively hide or reveal overlapping shapes, creating a geometric grid pattern of 100 horizontal and vertical rectangles. The visualization uses two SVG masks with inverted color schemes—one black with white symbols and one white with black symbols—to control visibility across the layers. It employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and position the mask paths, while SVG rects and mask attributes handle the rendering. The code adapts automatically to the browser viewport dimensions.

JJetlinZ

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

85% match