Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG + JS

Public visualization

Viewing a saved revision (read-only)

7f63c5b4060342dbb6f5122874aab51f

SVG + JS

0 stars1🌍 Public
MMarta
Last edited Sep 26, 2024
Created on Sep 26, 2024
Forked from SVG Fundamentals

This example uses JavaScript and the SVG API to construct a full-screen pattern of thin vertical and horizontal rectangles. It defines two SVG groups, each masked by a circle: one group displays vertical lines, the other horizontal lines, with the masks being inverses of each other. The resulting visualization shows a grid of perpendicular lines, with a circular region in the center showing only vertical lines, while the surrounding area displays only horizontal lines. The code programmatically creates SVG elements, including masks and groups, without using any external visualization libraries.

AI-generated description

Trying to learn how this thing works.