Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

sol vanilla JS

Public visualization

sol vanilla JS

0 stars1🌍 Public
KKerim
Last edited Aug 24, 2022
Created on Aug 21, 2022
Forked from HTML Starter

This example uses SVG and JavaScript to create a circular viewport that reveals a grid of horizontal and vertical lines. The visualization dynamically builds SVG elements, using masks to carve a circular hole in the background and to clip the vertical stripes inside the circle. The code creates a mask for the horizontal lines, which span the entire window width, and a second mask for the vertical lines, which fill the circle’s height. The result is an optical illusion of intersecting lines, produced entirely with procedural DOM manipulation and CSS styling.

AI-generated description

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

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed