d3 simbols

100%

✓ Published1🌍 Public

Last edited Feb 15, 2023

Created on Feb 13, 2023

Forked from d3

A grid of horizontal and vertical stripes alternates through two SVG masks to reveal a large star-shaped symbol at the center. The example demonstrates D3’s `symbol` and `symbols` API to generate the star path, combined with `mask` elements to create intersecting stripe patterns. Fifty rectangles are drawn in each direction using `d3.range` and `join`, with the horizontal set masked by an inverted white-on-black layer and the vertical set by its opposite. The result shows how layered masks can produce dynamic visual interferences.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3, Mask code with star shape

This example shows a grid of horizontal and vertical stripes overlaid on a full-screen SVG, with two complementary star-shaped masks cutting through the pattern. The first mask reveals the horizontal stripes through a white star on black, while the second mask applies the inverse effect to the vertical stripes. The visualization uses D3 v7’s `range`, `selectAll`, and `symbol` API to generate 100 rect elements per orientation and construct the star paths via `symbol(symbols[4], 100000)`. Masks are defined with custom `mask` elements and applied via the `mask` attribute, producing a layered, intersecting star composition.

JJetlinZ

90% match

Loading thumbnail…

d3 multiple simbols

This example demonstrates a grid of intersecting horizontal and vertical bars, overlaid with multiple distinct SVG symbols. The visual effect is achieved by using SVG masks to selectively reveal the grid lines through the shapes of the symbols. The code uses the d3 library's `select`, `range`, `symbols`, and `symbol` functions to generate the paths, and renders the final result as an SVG element. Two masks, one inverted and one not, are applied to the bars to create the layered, symbolic pattern.

Sserebryanaya.n@gmail.com

88% match

Loading thumbnail…

D3 all symbols

This example displays a grid of horizontal and vertical stripes overlaid with all D3 symbols. The code generates two sets of 100 rectangles each, using D3’s `range` and `selectAll` with `join` to create the stripes, and applies two SVG masks to reveal the symbols through the grid. Each mask is built by iterating over D3’s `symbols` array and rendering each symbol using the `symbol()` API, with the second mask inverted to create a contrasting overlay effect.

Jjony6290

87% match

Loading thumbnail…

d3d3d3 3

This example generates a grid of 100 horizontal and vertical stripes, each using a mask to reveal differently-shaped symbol outlines at the center of the screen. The horizontal bars are masked by shapes like circles and crosses, while the vertical bars are masked by their inverses, creating a striking geometric interplay between foreground and background. Built with React and D3, the code uses `d3.range`, `d3.symbol`, and `d3.symbols` to construct paths, with masks defined via SVG and applied using the `mask` attribute. The visualization renders entirely through SVG, with a flickering effect caused by the contrasting masked regions.

GGusnaRWX

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

This example creates a striped grid of horizontal and vertical rectangles, each masked so that the overlap reveals alternating symbol shapes. The visualization uses D3 v6’s `symbol` API to draw seven distinct shapes—circle, cross, diamond, square, star, triangle, and wye—as SVG paths inside two mask definitions. The masks are applied via the `mask` attribute to the rects, which are generated with `d3.range` and `join`. The page captures the full window dimensions, scaling the SVG and grid accordingly, and demonstrates a minimal React-free setup with D3 selections.

VVedran Škarica

86% match

Loading thumbnail…

Symbol Fork of SVG Fundamentals - D3 (group)

This example shows a grid of horizontal and vertical bars overlaid on an SVG canvas, with a circular symbol-shaped mask revealing a cross-hatched pattern at the center. The visualization uses D3 v7 to generate 100 rectangles in each direction, positioning them by index and sizing them to cover the full viewport width and height. Two masks, created with `d3.symbol` and a star symbol type, are applied to the rectangles to alternate black and white fills, producing the contrasting central motif.

SSidney Oluoch

86% match

Loading thumbnail…

D3_Sol

This example overlays two sets of alternating horizontal and vertical stripes, each masked by a pattern of D3 symbols (such as circles, crosses, and diamonds) centered on the canvas. The first mask uses solid shapes on a white background, while the second inverts the fill, creating a contrasting lattice. Built with React and D3 v7, it uses `select`, `range`, `symbols`, and `symbol` to generate SVG elements, with `mask` applied to each stripe group to reveal the symbol shapes through the grid.

PPolydexter

85% match