Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Overlapping lines

Public visualization

Viewing a saved revision (read-only)

7b2db92edd8d4beea28bfe635ac7709c

Overlapping lines

0 stars1🌍 Public
CCora
Last edited Mar 30, 2025
Created on Mar 30, 2025
Forked from Sol LeWitt 2

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