Full Fork of D3 Starter

100%

Full Fork of D3 Starter

✓ Published1🌍 Public

Last edited May 1, 2024

Created on May 1, 2024

This example demonstrates how D3 SVG masks can create overlapping geometric patterns. It generates 100 horizontal and 100 vertical rectangles, then applies two distinct masks with inverted fill rules to reveal or hide different regions. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to draw predefined symbol shapes within each mask. The visualization fills the browser window, with symbol paths placed at regular intervals across the width, producing a dynamic interplay between the grid lines and masked shapes.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Full Fork of D3 Starter

This example demonstrates a generative pattern of horizontal and vertical bars overlaid with SVG masks that reveal circular shapes derived from D3 symbols. The visualization renders 100 thin rectangular strips in each direction, sized to the viewport, and applies a mask containing a symbol path. Using D3 v6 with the `select`, `range`, `symbols`, and `symbol` APIs, the code constructs SVG elements dynamically, with the mask’s fill toggled by an `inverted` boolean to alternate visible regions. It functions as a starter template emphasizing minimal layout and mask-based clipping.

Llt_vandegrift@live.com

92% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a generative grid of horizontal and vertical striped bars rendered as an SVG, overlaid with circular mask effects that reveal or conceal portions of the pattern. The code uses D3 v3’s selection, selection, range, symbols, and symbol APIs, appending rectangles to an SVG canvas sized to the window. Two masks are created via the renderMask function, each with a path drawn from the symbol API’s circle shape, applying inverted fill logic to produce contrasting visibility. The visualization is purely procedural, with no external data source.

EErika Tomakic

90% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how D3 v7 masks can create striking geometric patterns from overlapping shapes. It uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to render seven distinct SVG symbols (like crosses and diamonds) into two complementary masks, one inverted. Over these masks, it places grids of black horizontal and vertical rectangles via SVG `rect` elements, with `d3.join` managing data-bound elements. The resulting composition shows the symbols as cutouts or solid forms depending on mask polarity, producing a dynamic interplay of positive and negative space across the full browser window.

Eelisabet@pitch.io

90% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a geometric masking effect by layering vertical and horizontal rectangles on an SVG canvas. Using D3 v7, it creates 100 vertical bars and 100 horizontal bars across the viewport, applying two SVG masks to reveal intersecting shapes. The first mask uses a white background with a black circle, while the second inverts the pattern, producing a cross-shaped visual interaction. The code relies on D3 selections, the `range()` generator, and SVG `mask` elements to achieve the composition.

HHaritscode

89% match

Loading thumbnail…

Function Fork of SVG Fundamentals - D3 (group)

This example demonstrates how SVG masks can create intricate grid patterns from overlapping horizontal and vertical rectangles. Using D3.js version 7, the code generates 100 rect elements in each direction, applying two distinct masks that feature D3's built-in symbol shapes. The `renderMask` function constructs each mask with a path for every symbol from the `d3.symbols` array, positioned horizontally across the canvas. A boolean parameter controls whether the mask is inverted, switching between black and white fills to produce contrasting effects on the final visualization.

SSidney Oluoch

89% match

Loading thumbnail…

Fork of HTML Starter

This example uses D3 selections and D3 range to render two sets of 100 striped rectangles on an SVG canvas. One group of horizontal bars is masked by a circular cutout, while a second group of vertical bars uses a complementary mask, creating an intersecting cross pattern. The masks are constructed with SVG `mask` elements containing rectangles and circles. The visualization fills the browser window, with both mask circles centered and sized at 200 pixels radius, producing a circular overlap effect.

Ccoderhh

87% match

Loading thumbnail…

Fork of D3 Starter

This example shows how D3 version 7 can create layered geometric patterns by combining SVG masks with repeated rectangles. The visualization produces four distinct regions: a striped horizontal pattern with a cut-out square, a vertical stripe pattern, and two sections where horizontal or vertical bars are masked by a circle and square. The code constructs SVG elements directly using the DOM API, building masks (mask1 through mask4) that define which parts of the rectangles are visible. The approach relies on creating rectangles of varying widths and heights, applying masks that contain contrasting black and white shapes, and iterating 30 or 60 times to generate the repeating bar patterns across the screen.

HHaritscode

87% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a striped mask effect by layering two sets of rectangles with intersecting patterns. The SVG output shows vertical black bars overlaid with horizontal black bars, where both layers use SVG masks to reveal or hide portions of the rectangles. The code uses D3 v7’s `select`, `range`, and `data` joins to generate 100 rectangles per axis across the full viewport. The first mask exposes a rectangular region while the second mask inverts it, creating a dynamic checkerboard-like visual from the overlapping shapes.

HHaritscode

87% match