Overlapping lines

100%

Overlapping lines

✓ Published1🌍 Public

Last edited Mar 30, 2025

Created on Mar 30, 2025

Overlapping lines demonstrates a masking effect in SVG by layering horizontal and vertical bands. Horizontal rectangles are clipped using a circular SVG mask, creating a clean round boundary, while vertical rectangles extend full-height without masking, producing a checkered overlap. The code uses the SVG `mask` element, `circle`, and `rect` primitives, all generated programmatically with the Document Object Model (DOM) API. The scene fills the browser window via `createElementNS`, with static dimensions of 960 by viewport height, showing how simple shapes combine for visual contrast.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

svg mask

This example demonstrates the visual effect of SVG masks by layering horizontal and vertical stripes over a full-viewport canvas. It creates two circular masks, one with a white circle on a black background and the other with a black circle on a white background, then applies them to alternating sets of 50 thin rectangles. The code builds the entire scene programmatically using the Document Object Model (DOM) methods such as `createElementNS` and `setAttribute`, without any external libraries, and renders everything directly in SVG.

Sserebryanaya.n@gmail.com

80% match

Loading thumbnail…

new Shapes SVG Fundamentals

This example demonstrates how SVG masks can selectively reveal or hide overlapping grid lines. It renders horizontal and vertical stripes as SVG `rect` elements, each assigned a mask containing a black background and a white circle to create a transparent window. A second mask with inverted colors overlays the vertical stripes, producing a crosshatched pattern visible only within the circular region. The visualization is built using the raw `document.createElementNS` API to construct SVG elements dynamically in a loop, with the window size set to the full browser viewport.

Ssubratanp

79% 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

78% 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

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create a circular window onto layered geometric patterns. Using the native SVG DOM API, the code constructs fifty horizontal and fifty vertical rectangles, each with vibrant default colors, and applies two different masks to control their visibility. The first mask, built from a black rectangle and white circle, reveals only the horizontal bars inside the circle, while the second mask, with inverted colors, shows the vertical bars outside the circle’s edge. The result is a clean, mask-driven interplay of striped shapes across the full browser viewport.

Aalexis.delacotte@gmail.com

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to create geometric patterns using SVG masks and rectangles. The code generates full-screen vertical and horizontal rectangle grids, with a circular mask that reveals only the overlapping central region. It uses the SVG namespace API (`document.createElementNS`) to construct elements dynamically in vanilla JavaScript, with a mask containing a white circle to define the visible area. The rendering adapts to the browser window dimensions, setting the SVG width and height to match the viewport size.

Ppirani.sabah@gmail.com

77% match

Loading thumbnail…

Full MaskTest 1

This example demonstrates a mask-based visual effect that combines two sets of overlapping SVG rectangles, creating a crosshatch pattern of thin horizontal and vertical lines. The full viewport is covered by 100 horizontal and 100 vertical strips, each partially revealed through circular mask regions defined using D3’s `symbol` API. Two masks are layered: the first shows a white circle against a black background, while the second inverts the circle’s role, allowing the rectangles to appear only outside the central circular area. The rendering uses D3 version 6.6.1 with SVG output.

Zzhansihua

77% 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

76% match