Skip to main content
SimilarExport ZIP
100%

Multiple Symbol Rendering

✓ Published1🌍 Public
Ssharmamilan632.m@gmail.com
Last edited Jun 17, 2024
Created on Jun 17, 2024

This example generates a 100-by-100 square grid of overlaid horizontal and vertical stripes on an SVG canvas. Using D3.js, it defines two masks with large circular path shapes, then applies them to the stripes to create intersecting ring-like visual effects. The code relies on D3’s `range`, `symbols`, and `symbol` APIs, alongside SVG mask and path elements, to render the geometric pattern across the full viewport dimensions.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple Symbol Rendering

This visualization demonstrates how multiple symbol shapes can be rendered and layered using SVG masks, creating an intricate pattern of intersecting geometric forms. The code generates 100 horizontal and vertical rectangles that are clipped by two distinct masks, each revealing different symbols from the d3.symbols array. Using d3's `select`, `range`, and `symbol` functions, the visualization positions each shape and applies SVG mask attributes to control visibility, resulting in a dynamic interplay between the rectangular grid and the underlying symbol paths.

Ssharmamilan632.m@gmail.com
90% match
Loading thumbnail…

d3 simbols

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.

Sserebryanaya.n@gmail.com
85% 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
84% 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
83% match
Loading thumbnail…

JavaScript arrays

A grid of thin horizontal and vertical stripes is overlaid with a mask containing five distinct geometric symbols—such as circles and crosses—rendered using D3’s `symbol` generator. The masks, created with `d3.select` and `append`, alternate between inverting the stripes’ visibility, revealing the symbol shapes as cutouts. Horizontal stripes use one mask, vertical stripes another, producing intersecting patterns across the full window. The example uses D3 v6.6.1, SVG rendering, and 100 iterations each of `range(n)` to generate the stripe data.

AAlp
83% match
Loading thumbnail…

Sol Lewitt Reproduction with D3 multiple symbols

This example reproduces a Sol LeWitt-style drawing using D3’s `symbol` and `symbols` API to generate five geometric shapes (circle, cross, diamond, square, and star) that act as masks. Two sets of horizontal and vertical striped rectangles are drawn, each masked by a different pattern of symbols; the first mask uses black-filled symbols on white, the second inverts this. The `renderMask` function appends SVG `mask` elements, mapping each symbol to a `path` via `symbol(d, 8000)()` at evenly spaced translations. The code relies on `select`, `range`, and `join` for data-driven rendering.

GGullyPlook
82% match
Loading thumbnail…

More complex SVG + D3

This example demonstrates SVG masking with D3, where 100 horizontal and 100 vertical rectangles render as a grid and are selectively revealed through two masks. The masks contain symbol paths from `d3.symbol` and `d3.symbols`, with one mask inverted to create contrasting visibility. Using `d3.select`, `d3.range`, and `selection.join`, the code appends rectangles and paths directly to the SVG, positioning symbols at evenly spaced intervals. The `renderMask` function accepts an inverted flag to alternate fill colors between black and white, showcasing how D3 v7 enables dynamic mask construction.

MMarta
82% match
Loading thumbnail…

Casting Multiple

This example generates a grid of horizontal and vertical stripes using 100 rectangles each, layered to create a woven pattern. Two SVG masks, one inverted, apply symbol shapes derived from D3's `symbol` API, casting the stripe pattern through alternating star-like forms. The code uses `d3.select`, `d3.range`, and `d3.join` to declaratively build the SVG elements within a React-free, vanilla JavaScript environment, with dimensions spanning the full window.

Rrespingu
82% match