Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of SVG Fundamentals - D3

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

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.

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

Fork of D3 Implementation

This example shows a grid of horizontal and vertical bars covering the full screen, with two circular masks revealing the intersection of the bars. Each bar is a separate SVG `<rect>` element, generated using `d3.range` and `selectAll().join()`. The first mask uses a black background with a white circle to show the horizontal bars, while the second inverts the colors to show the vertical bars. The code relies on D3 v7’s `select` and `range` functions to construct the elements and masks dynamically.

VVikil Lakkavatri
90% 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…

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

SVG Fundamentals

This example demonstrates SVG fundamentals by rendering a grid of horizontal and vertical bars across the full viewport, with circular masks that reveal or hide portions of the pattern. The visualization uses D3’s `select` and `range` functions to generate 100 rectangles in each direction, applying masks defined via SVG `<mask>` elements with white and black circles. The code constructs the SVG scene programmatically, showing how React-based projects can manipulate vector graphics through D3’s data-join syntax and attribute setters.

EEzhil-Kalai
89% match