Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
SSidney Oluoch
Last edited Aug 18, 2022
Created on Aug 18, 2022

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.

AI-generated description

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

See also React Starter.

MIT Licensed

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
96% 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
90% match
Loading thumbnail…

Fork of Epis 4

This example creates a full-screen interactive grid of horizontal and vertical bars overlaid with circular masks. The visualization uses D3’s `select` and `range` to generate 100 thin rectangles along each axis, producing a crosshatch pattern. Two SVG masks hide all but a central circular area, revealing the intersecting lines within the circle against a blank background. The code relies on D3’s data join (`join('rect')`) to bind array values to SVG elements, demonstrating a declarative approach to building static geometric compositions.

SSGPPellow
89% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates masking in SVG by creating a grid of horizontal and vertical rectangles, each with a mask applied. Two masks are rendered using D3's `symbol` API, placing geometric shapes like circles and crosses across the canvas. One mask is inverted by using black as the background and white for the shapes, while the other uses the opposite color scheme, causing the grid lines to appear only within the symbol outlines. The visualization shows how D3 selections, joins, and the `attr` method dynamically set mask references and symbol paths.

AAitorGD
89% match
Loading thumbnail…

Fork of with D3 and group elements

This example generates an SVG grid of horizontal and vertical rectangles, precisely 960 by 500 pixels, using the D3.js library. The grid is composed of two groups of rectangles, each with a stroke width of 8 pixels, and is overlaid with circular masks to create a focal point in the center. The code leverages D3's `select`, `append`, `attr`, and `range` methods to build the structure, along with custom `setAttributes` and `join` helpers for efficient element creation. The visualization demonstrates how to combine SVG masks with D3's data-driven rect generation to produce a geometric pattern with a central spotlight effect.

Pparag776
89% match
Loading thumbnail…

Full Fork of SVG Fundamentals - D3 (group)

This example demonstrates a full-screen, web-based visualization that combines two sets of parallel stripes—one horizontal and one vertical—overlaid on a blank canvas. The stripes are constructed using D3’s `select`, `range`, and `join` methods to generate SVG rectangles. Two SVG masks (`circle-mask` and `circle-mask-2`) shape the stripes: the horizontal set becomes visible through a diamond symbol (`d3.symbol`), while the vertical set is masked by a circle, with the mask colors inverted to create a contrasting cutout effect.

SSidney Oluoch
89% match
Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi
89% match
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
88% match