Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published0🌍 Public
AAditya Joshi
Last edited Jun 14, 2022
Created on Jun 14, 2022
Forked from HTML Starter

This example demonstrates SVG masking with intersecting grid lines. Horizontal and vertical rectangles form a crosshatch pattern across a 960×500 canvas. Two circular masks reveal different portions: the first shows the grid inside a centered circle, while the second displays the grid outside it, creating complementary visual regions. The code uses D3 v6 selection methods like `select`, `append`, `selectAll`, and `join` to generate 100 rects in each direction. React handles page setup, while SVG `mask` elements with black and white fill shapes define the visibility areas.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by layering horizontal and vertical striped rectangles that intersect to create a grid, with two masks applied to each set of stripes. D3’s `select`, `range`, `symbol`, and `symbols` APIs generate the stripes and position symbol paths within the masks. The `mask1` and `mask2` masks, filled with black and white respectively, reveal or hide portions of the grid based on the symbol shapes, producing a dynamic interplay of light and dark geometric patterns across the full canvas.

SSubhendu Karmakar
90% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by layering horizontal and vertical striped rectangles that intersect to create a grid, with two masks applied to each set of stripes. D3’s `select`, `range`, `symbol`, and `symbols` APIs generate the stripes and position symbol paths within the masks. The `mask1` and `mask2` masks, filled with black and white respectively, reveal or hide portions of the grid based on the symbol shapes, producing a dynamic interplay of light and dark geometric patterns across the full canvas.

SSubhendu Karmakar
90% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create striking visual effects, showing a series of horizontal rectangles that are visible only through a circular cutout in the center of the screen. The code uses d3.select to append an SVG element sized to the window, then binds an array of data points to create the rectangles with varying vertical positions. A dedicated mask element, constructed from a black background rect and a white circle, controls the visibility of these rectangles, revealing them only within the circular region. The rendering approach relies entirely on SVG primitives and the D3 join pattern.

PPrasad Sudrik
89% 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
Loading thumbnail…

SVG Fundamentals

An SVG-based visualization demonstrates how masking layers create intersecting geometric patterns. The code renders 100 horizontal and vertical rectangles using D3's `select` and `range`, each masked by a circular region. Two SVG masks invert their black-and-white fills, producing a visible cross-shaped overlap at the center where the circles align. The grid lines only appear within the masked circular areas, creating a dynamic interplay of light and dark stripes against a blank canvas.

GGeorgi Dimitrov
89% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the visual impact of SVG masks, using them to selectively reveal or hide overlapping shapes. It creates a full-screen canvas filled with horizontal and vertical stripes by generating one hundred thin rectangles for each direction. A circular mask isolates a central area where the stripes remain visible, while a second, inverted mask produces a contrasting ring effect by revealing the vertical stripes outside the circle. The code builds the SVG document dynamically through the Document Object Model, creating elements like rectangles and masks using `createElementNS` and `setAttribute` within JavaScript.

MMichael Bell
88% 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
87% match
Loading thumbnail…

Fork of Fork of SVG Fundamentals Horizontal Vertical

This example demonstrates how SVG mask elements create intersecting visual patterns from horizontal and vertical stripes. The code uses raw SVG APIs—`document.createElementNS`—to build a full-window canvas with 100 horizontal rectangles masked by a white circle and 100 vertical rectangles masked by a complementary mask. Each mask combines a solid fill with a central circle, revealing or hiding stripes to form a cross-shaped overlap at the center. The result layers two sets of lines that visually blend through the transparent mask regions.

SSidney Oluoch
87% match