Fork of Dom Manipulate With D3

100%

Fork of Dom Manipulate With D3

✓ Published0🌍 Public

Last edited Sep 25, 2022

Created on Sep 20, 2022

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.

AI-generated description

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

Similar vizzes

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

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

88% match

Loading thumbnail…

Fork of SVG

This example demonstrates a geometric pattern of intersecting horizontal and vertical striped bars, with two circular masks creating a striking contrast. The visualization uses D3.js v7 to generate 100 rectangles for each axis and applies SVG mask elements with circular cutouts. The first mask reveals a white circle within black bars, while the second mask inverts the effect, creating a negative-space circle against the striped background.

Kkyoub1996@gmail.com

88% match

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates an abstract pattern of horizontal and vertical bars layered over each other. It uses the D3.js library’s `select`, `range`, and `join` API to generate 100 rectangles in each direction across the full canvas. Two SVG masks with circular cutouts reveal and hide portions of the bar grids, producing a dynamic interplay of light and dark stripes. The visualization is rendered in a React environment and uses an SVG viewport that fills the browser window.

Tthymdi

87% match

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

87% match

Loading thumbnail…

Dom Manipulate

This example demonstrates how SVG masks can create geometric patterns by layering horizontal and vertical stripes over a circular cutout. The code manually constructs SVG elements using the DOM API, creating a full-screen SVG with two masks: one revealing a circle of horizontal stripes and another revealing the inverse. One hundred turquoise rectangles are generated for each orientation, with the masks controlling visibility through white and black fill values. The visualization highlights fundamental SVG manipulation techniques without relying on a visualization library, though D3 is listed as a dependency.

Mmfgok

87% match