Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

vertical and horizontal

Public visualization

Viewing a saved revision (read-only)

be149cec8f964883bcb6c8ab6d17fbc0

vertical and horizontal

0 stars0🌍 Public
Cclara7227
Last edited Nov 9, 2022
Created on Nov 9, 2022
Forked from Geometry

This example generates a full-screen grid of red vertical and horizontal bars, but uses an SVG `<mask>` to reveal only a circular region at the center of the canvas. A white rectangle inside the mask covers the entire viewport, while a black circle cuts out the visible area, clipping the bars to that shape. The code builds the SVG elements directly with `document.createElementNS` and uses the Google Fonts "Archivo" and "IBM Plex Sans" for styling. The result is a crisp, geometric pattern with a circular window.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.