Different Shapes Using D3

100%

Different Shapes Using D3

✓ Published1🌍 Public

Last edited Jun 17, 2024

Created on Jun 14, 2024

This example demonstrates how SVG masks can create visual variety from simple repeated shapes. Two sets of horizontal and vertical rectangles, each positioned across the full canvas, use complementary circular masks to reveal their pattern. The first mask shows the horizontal bars through a white circle on a black background, while the second inverts this to display vertical bars through a black circle on white. Built with D3 v3 and the `select`, `append`, and `join` APIs, the code generates 100 rectangles per direction, producing a crosshatch effect that is dynamically clipped to form circular windows.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Next Different Shapes Using D3

This example uses D3 to draw overlaid horizontal and vertical stripes that form a dynamic visual composition. The code generates 100 rectangles in each direction, spacing them 20 pixels apart, and applies two different SVG masks to create intersecting shapes. A diamond symbol, created using `d3.symbol` and `d3.symbols[1]`, is rendered at the center of each mask with contrasting fills, producing a layered effect where the stripes appear to cut through the diamond form. The visualization responds to the browser window size through `window.innerWidth` and `window.innerHeight`.

Ssharmamilan632.m@gmail.com

87% match

Loading thumbnail…

Different Shape Reproduction with D3

Different Shape Reproduction with D3 demonstrates how SVG masks can be combined to create complex visual compositions. The visualization layers horizontal and vertical striped rectangles, each masked by a distinct pattern of D3 symbols. Using d3.select, d3.range, d3.symbol, and d3.symbols, the code generates 100 repeating bars in both directions, with a mask revealing symbol shapes in inverted and non-inverted forms. The React-framework example renders entirely in SVG, with masks applied via the renderMask function to produce the final overlapping effect.

Aahora

87% match

Loading thumbnail…

another Shapes SVG Fundamentals

This example uses SVG masks to create a circular reveal over a grid of horizontal and vertical filled rectangles. The visualization demonstrates how two complementary masks—one with a white circle on a black background and the other with a black circle on a white background—selectively show or hide the underlying stripes. Built with the D3.js library (v6), the code generates 100 horizontal bars and 100 vertical bars, then applies these masks to create an intersecting pattern of lines visible only within the defined circular regions. The data is procedurally generated in JavaScript using `range()` and a `for` loop, with rendering handled entirely through SVG elements.

Ssubratanp

86% match

Loading thumbnail…

D3 Shapes SVG Fundamentals

This example demonstrates how D3 SVG masks can create geometric patterns from overlapping rectangular bands. Two sets of perpendicular stripes, each consisting of 100 horizontal and vertical rects, are filtered through circular mask shapes generated with the `symbol` API. The first mask uses a filled star symbol to hide the horizontal lines, while the second, inverted mask reveals the vertical lines through the same symbol shape. The code uses `d3.select`, `d3.range`, and `d3.symbols` with the `join` pattern to render the full-screen SVG grid.

Ssubratanp

86% match

Loading thumbnail…

D3 mask all shapes

This example demonstrates how D3.js mask elements can selectively hide or reveal overlapping shapes, creating a geometric grid pattern of 100 horizontal and vertical rectangles. The visualization uses two SVG masks with inverted color schemes—one black with white symbols and one white with black symbols—to control visibility across the layers. It employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and position the mask paths, while SVG rects and mask attributes handle the rendering. The code adapts automatically to the browser viewport dimensions.

JJetlinZ

85% match

Loading thumbnail…

d3

A grid of alternating horizontal and vertical SVG rectangles is masked to reveal a circular window at the center of the viewport. The example demonstrates how to construct and apply multiple SVG masks using D3’s selection and data-join methods, specifically `selectAll` with `range` and `join('rect')`. Two masks (`circle-mask` and `circle-mask-2`) use black-and-white rectangles and circles to control visibility of the 50 strips in each direction.

Sserebryanaya.n@gmail.com

84% match

Loading thumbnail…

D3.js fundamental

This example demonstrates how SVG masks can be used to create geometric cutouts in layered grid patterns. It renders 100 horizontal and vertical rectangles across the full viewport, each masked by a circle that reveals or hides portions of the grid. The code uses D3.js v7 with the `select`, `selectAll`, and `range` APIs to generate the shapes, while two separate `<mask>` elements with contrasting fill colors control visibility. A white-filled mask with a black circle creates the first cutout, and an inverted mask creates the second, producing two distinct circular viewing windows.

Ddeebanks77

84% match

Loading thumbnail…

D3

This example demonstrates layered masking in SVG to create a grid of horizontal and vertical lines that intersect around a central circular opening. It uses D3’s `select` API alongside raw DOM manipulation to append two complementary masks, each defining a circular region of white or black fill. The code renders 100 horizontal and 100 vertical rectangles, applying one mask to each set so that lines are hidden or revealed in alternating patterns around the circle. The result is a moiré-like visual effect built purely from basic SVG shapes and mask definitions.

MMuhammad Dawood Rafique

84% match