Skip to main content
SimilarExport ZIP
100%

d3d3d3 2

✓ Published0🌍 Public
GGusnaRWX
Last edited Dec 28, 2023
Created on Dec 28, 2023
Forked from HTML Starter

Two layered grids of thin rectangles sweep across the full screen, one horizontal and one vertical, creating a moiré-like interference pattern. Each grid is partially hidden by an SVG mask that reveals the shape of a large symbol—a star from the d3 symbol set—at the center. The code builds the visualization with D3 selections, joining data arrays to create 100 rects per grid, and defines reusable mask-rendering functions via `svg.call`. Rendering uses SVG elements within a React framework, with masks composed of a full-screen rect and a symbol path.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
90% 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 JS

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

TTehran Mammadov
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
85% match
Loading thumbnail…

D3, Mask code with star shape

This example shows a grid of horizontal and vertical stripes overlaid on a full-screen SVG, with two complementary star-shaped masks cutting through the pattern. The first mask reveals the horizontal stripes through a white star on black, while the second mask applies the inverse effect to the vertical stripes. The visualization uses D3 v7’s `range`, `selectAll`, and `symbol` API to generate 100 rect elements per orientation and construct the star paths via `symbol(symbols[4], 100000)`. Masks are defined with custom `mask` elements and applied via the `mask` attribute, producing a layered, intersecting star composition.

JJetlinZ
85% match
Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi
85% match
Loading thumbnail…

d3 start

This example creates a striped grid of horizontal and vertical rectangles, each masked so that the overlap reveals alternating symbol shapes. The visualization uses D3 v6’s `symbol` API to draw seven distinct shapes—circle, cross, diamond, square, star, triangle, and wye—as SVG paths inside two mask definitions. The masks are applied via the `mask` attribute to the rects, which are generated with `d3.range` and `join`. The page captures the full window dimensions, scaling the SVG and grid accordingly, and demonstrates a minimal React-free setup with D3 selections.

VVedran Škarica
84% match
Loading thumbnail…

d3

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.

Eelgato_1994
84% match