Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Dec 11, 2024

Created on Dec 11, 2024

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.

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

94% match

Loading thumbnail…

Fork of D3 Starter

This example generates a grid of horizontal and vertical stripes that intersect to create a geometric pattern. It uses SVG masks with circles to reveal or hide different sections of the stripes, producing a composition reminiscent of Sol LeWitt’s wall drawings. The code leverages D3 v7 selection methods, including `select`, `append`, and `join`, along with `range` to create 100 rectangles for each direction. The visualization is fully responsive, sized to the browser window, and includes hover effects that change the fill color to magenta.

YYiorgos Bagakis

90% match

Loading thumbnail…

Full Fork of D3 Starter

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.

Llt_vandegrift@live.com

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

90% match

Loading thumbnail…

Fork of D3 Starter

This example shows a grid of horizontal and vertical stripes across the full viewport, with a circular region at the center appearing brighter against the surrounding dark mask. The code uses D3 v7 selections to append two groups of rectangles, each generated from a `range(100)` data array, and assigns SVG masks to each group. The first mask contains a black rect with a white circle, while the second uses inverse colors, creating the overlapping visual effect.

HHaritscode

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

89% match

Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

SSidney Oluoch

89% match

Loading thumbnail…

Fork of Fork of React Starter

This example uses React and D3 to create a full-window SVG grid of horizontal and vertical stripes. A pair of circular SVG masks selectively reveals the underlying patterns: one circle is punched out of a white rectangle to show the vertical stripes, while a second white circle exposes the horizontal stripes. The code builds the masks and rectangles imperatively via D3's `select` and `join`, with `range` generating the stripe positions. The result is a simple, mask-driven optical illusion where the two stripe directions appear only within their respective circular regions.

EEnoch Ssentumbwe

89% match