Viewing a saved revision (read-only)
5d57ec2931af4a6086153e6cebf5dc38
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.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.