Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Circles Effect at the junctions

Public visualization

Circles Effect at the junctions

0 stars1🌍 Public
NNita
Last edited Mar 6, 2020
Created on Mar 6, 2020

A grid of grey squares with random opacity creates a subtle, shifting visual effect at the intersections where square borders meet. Using React and SVG, the code renders a 10-by-10 array of rectangles with `stroke-width` outlines, forming a larger outlined square boundary. Each rectangle’s `opacity` is set to a random value via `Math.random()` during the React component’s render, producing a stippled, textured look. The example relies on React’s `ReactDOM` to mount the SVG into the DOM, with dimensions fixed at 960 by 500 pixels.

AI-generated description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed