Skip to main content
SimilarExport ZIP
100%

d3

✓ Published0🌍 Public
Eelgato_1994
Last edited Apr 20, 2023
Created on Apr 18, 2023

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3-get-it-right-04

This example uses React with D3 v6 to generate an SVG visualization of intersecting horizontal and vertical stripes. The code creates 100 rectangular bands in each direction, then applies two SVG masks: a diamond-shaped mask formed with a `d3.symbol` path, and a circular mask created with a basic SVG circle. The masks reveal the underlying stripes in geometric patterns, demonstrating how D3's `select`, `range`, and `join` methods can construct layered SVG elements with custom clipping. The visualization dynamically fills the browser window using `window.innerWidth` and `window.innerHeight`.

Tthymdi
88% match
Loading thumbnail…

d3d3d3 3

This example generates a grid of 100 horizontal and vertical stripes, each using a mask to reveal differently-shaped symbol outlines at the center of the screen. The horizontal bars are masked by shapes like circles and crosses, while the vertical bars are masked by their inverses, creating a striking geometric interplay between foreground and background. Built with React and D3, the code uses `d3.range`, `d3.symbol`, and `d3.symbols` to construct paths, with masks defined via SVG and applied using the `mask` attribute. The visualization renders entirely through SVG, with a flickering effect caused by the contrasting masked regions.

GGusnaRWX
88% match
Loading thumbnail…

D3 Implementation

This example demonstrates how D3’s selection and data-join methods can create intersecting horizontal and vertical stripes across the full viewport. Two groups of rectangles, each bound to an array of 100 values via `d3.range`, are drawn with alternating orientations—one set spanning the width, the other the height. Using SVG `mask` elements, two circular masks are applied: one reveals the horizontal stripes inside a white circle on a black background, while the other does the reverse for vertical stripes. The result is a cross-hatched pattern visible only within the defined circular regions.

SSubhamChhetri
88% match
Loading thumbnail…

Starting with D3

This example creates a full-screen SVG pattern of horizontal and vertical stripes using D3’s `select`, `range`, and `join` methods. Two sets of 100 rectangles are generated, each masked to reveal or hide a circular region at the center. The code uses SVG `mask` elements with black-and-white circles to produce a cross-shaped visual intersection. The data is synthetic, generated via `range(n)`, and rendered entirely with D3 v6 and SVG attributes.

Pphilmae
87% 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
87% match
Loading thumbnail…

D3_Sol

This example overlays two sets of alternating horizontal and vertical stripes, each masked by a pattern of D3 symbols (such as circles, crosses, and diamonds) centered on the canvas. The first mask uses solid shapes on a white background, while the second inverts the fill, creating a contrasting lattice. Built with React and D3 v7, it uses `select`, `range`, `symbols`, and `symbol` to generate SVG elements, with `mask` applied to each stripe group to reveal the symbol shapes through the grid.

PPolydexter
87% match
Loading thumbnail…

d3d3d3

This example shows a full-screen pattern of intersecting horizontal and vertical bars, each rendered as a set of thin SVG rectangles. The bars are generated using `d3.range` and joined to `rect` elements, but only the central circular area is visible due to two SVG masks. The first mask reveals the horizontal bars through a white circle on a black background, while the second mask hides the vertical bars in the same region using a black circle on white. The result is a cross-hatched grid with a circular cutout, built with React and D3 v7.

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