SVG Fundamentals
This example demonstrates SVG fundamentals by drawing two sets of perpendicular parallel lines—horizontal bars from top to bottom and vertical bars from left to right—that intersect to form a grid. Two circular masks are applied to reveal or hide overlapping regions, creating a crossfade effect between the two line groups. The visualization uses D3’s `select`, `range`, and data join methods to generate the SVG elements, and defines two `<mask>` elements with black and white rectangles and circles to control visibility. The rendering relies entirely on SVG attributes like `width`, `height`, and `mask`, with no animation or interaction.