D3 JS SHAPES

100%

✓ Published1🌍 Public

Last edited Jun 15, 2022

Created on Jun 15, 2022

Forked from D3 JS

This example displays an interactive grid of horizontal and vertical stripes that intersect to create a dynamic pattern. The visualization uses D3.js to generate 100 rectangles along both the x and y axes on an SVG canvas, with each line masked by custom patterns containing all D3 symbols. Two masks are created—one inverted and one not—to alternate which lines remain visible as the symbols overlap. The code leverages `d3.range`, `d3.symbols`, and `d3.symbol` to populate the mask shapes, with each symbol scaled to 8000 units for visibility. The result is a geometric composition where the stripe intersections reveal distinct symbol shapes across the full viewport.

AI-generated description

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

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 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…

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

84% match

Loading thumbnail…

D3 all symbols

This example displays a grid of horizontal and vertical stripes overlaid with all D3 symbols. The code generates two sets of 100 rectangles each, using D3’s `range` and `selectAll` with `join` to create the stripes, and applies two SVG masks to reveal the symbols through the grid. Each mask is built by iterating over D3’s `symbols` array and rendering each symbol using the `symbol()` API, with the second mask inverted to create a contrasting overlay effect.

Jjony6290

83% match

Loading thumbnail…

D3 Shapes SVG Fundamentals

This example demonstrates how D3 SVG masks can create geometric patterns from overlapping rectangular bands. Two sets of perpendicular stripes, each consisting of 100 horizontal and vertical rects, are filtered through circular mask shapes generated with the `symbol` API. The first mask uses a filled star symbol to hide the horizontal lines, while the second, inverted mask reveals the vertical lines through the same symbol shape. The code uses `d3.select`, `d3.range`, and `d3.symbols` with the `join` pattern to render the full-screen SVG grid.

Ssubratanp

83% match

Loading thumbnail…

JavaScript arrays

A grid of thin horizontal and vertical stripes is overlaid with a mask containing five distinct geometric symbols—such as circles and crosses—rendered using D3’s `symbol` generator. The masks, created with `d3.select` and `append`, alternate between inverting the stripes’ visibility, revealing the symbol shapes as cutouts. Horizontal stripes use one mask, vertical stripes another, producing intersecting patterns across the full window. The example uses D3 v6.6.1, SVG rendering, and 100 iterations each of `range(n)` to generate the stripe data.

AAlp

83% match

Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko

83% match