Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Jan 17, 2024

Created on Jan 17, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example uses SVG masks to create an intersecting grid of horizontal and vertical lines, revealing a circular window at the center. The code employs `d3.select` and `d3.range` to generate two sets of 100 rectangles, one for each orientation, and applies a mask with a white circle over a black background to the horizontal lines, and a mask with a black circle over a white background to the vertical lines. The result is a cross-hatched pattern that becomes visible only inside the central circle.

AAnna Xu

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

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…

Fork of HTML Starter Follow Along

This visualization displays a grid of thin horizontal and vertical rectangles, with a circular region in the center revealed by two mask layers. The first set of horizontal strips and vertical strips are generated using `d3.select`, `d3.range`, and the `.join` method to create SVG `rect` elements. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to create the central circular aperture, resulting in an intersecting crosshatch pattern.

CCharlie Smith

89% match

Loading thumbnail…

Fork of HTML Starter

This example showcases a geometric pattern created by layering two sets of parallel stripes overlaid with circular masks. It uses the D3.js library to build SVG elements and generate the mask paths, drawing on the `range`, `select`, `append`, `attr`, and `symbol` APIs from D3. The code creates a 100×100 grid pattern where overlapping translucent stripes form a subtle checkerboard effect within a central circle, demonstrating the use of reusable SVG masks and declarative data-driven rendering.

Bbhattrahul007

89% match

Loading thumbnail…

Fork of Dom Manipulate With D3

This example demonstrates how to create a striped visual effect using SVG rectangles masked by a circular window. It uses D3’s `select`, `range`, and data joins to generate 100 horizontal bars, each with a height of 10 pixels and a vertical offset of 20 pixels, filling the full viewport width. The bars are rendered with a `mask` attribute referencing a circular mask, so only the area inside the circle is visible. The code exercises D3’s declarative data binding and the SVG mask API to achieve the clipped pattern.

Mmfgok

88% match

Loading thumbnail…

Fork of Fork of Fork of Fork of SVG Fundamentals - D3 (group)

This example demonstrates a grid-based pattern created by overlaying horizontal and vertical rectangles, each clipped by a circular mask to reveal a central window. The visualization uses D3’s `select`, `range`, `append`, and `join` APIs to generate 100 vertical and 100 horizontal bars, which are grouped in separate `<g>` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) apply inverse coloring to the bars, producing a crosshatched effect that is visible only within the circular region. The code runs in React and renders fully with SVG, drawing on D3 version 7.6.1.

SSidney Oluoch

88% match

Loading thumbnail…

Fork of Fork of HTML Starter

A geometric pattern of horizontal and vertical lines intersects within a circular window, creating a crosshatched grid centered on the screen. The visualization uses two SVG masks to reveal alternating line orientations: one mask shows horizontal stripes through a white circle, while the other displays vertical stripes around it. Built with React and D3, the code generates 100 rect elements in each direction, then applies mask circles of 200-pixel radius to control visibility.

Ccoderhh

88% match