Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 7, 2023

Created on Oct 7, 2023

This example creates an animated SVG grid of horizontal and vertical rectangles, revealing a circular aperture at the center through the use of D3.js masks. The code uses `d3.select`, `d3.range`, and `d3.join` to generate 100 rects in each direction, with two distinct mask groups to alternate light and dark circle patterns. A repeated `window.setInterval` triggers an alert dialog, interrupting the visual. The composition relies on SVG `<mask>` elements to blend the overlapping lines.

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

92% match

Loading thumbnail…

Fork of HTML Starter

This example uses raw JavaScript and the SVG API to dynamically construct a full-window visualization. It creates two distinct masks on an SVG canvas: a white circle on a transparent background and a white rectangle with a black circular hole at the center. The code then generates 100 horizontal and 100 vertical thin rectangles, applying these masks to reveal a grid-like pattern of intersecting lines against a plain background. The result is a geometric composition built entirely through procedural DOM manipulation without any external libraries.

SSGPPellow

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

88% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example uses an SVG mask to reveal a series of horizontal lines through a circular hole. It creates a white mask rectangle covering the entire viewport, with a black circle in the center. One hundred semi-transparent vertical strips are then drawn over the full SVG width, each clipped by the mask. The code manually builds the SVG elements using the DOM API and the `d3` library’s `selection` object, setting the mask’s dimensions to match the window size.

HHieuVu179

87% match

Loading thumbnail…

Fork of HTML Starter

This example creates an SVG mask that reveals horizontal stripes through a circular window. The code generates 100 horizontal rectangles, each masked by a circle centered on the screen, while 100 vertical rectangles overlay the full canvas without masking. All shapes are built dynamically using the SVG namespace with `document.createElementNS`, and the mask is defined with a black background rect and white circle to control visibility. The result is a simple geometric pattern combining masked and unmasked grid-like elements.

EErik L

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

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

86% match