Circles Effect at the junctions

100%

Circles Effect at the junctions

✓ Published1🌍 Public

Last edited Mar 6, 2020

Created on Mar 6, 2020

Forked from Circles Effect at the junctions

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles Effect at the junctions

This example shows a grid of 100 small squares arranged in a 10 by 10 layout, with each square filled by a semi-random RGB color that varies based on its position and a random factor. The visualization renders the grid using React and SVG, creating each rectangle through nested `Array.map` calls that generate the x and y coordinates. The outer border of the entire grid is drawn as a larger square, and the code applies a stroke width of 5 pixels to both the individual rects and the outer boundary. The color fill uses the `rgb()` function with a fixed red value, a random green component, and a blue value derived from the square’s position.

NNita

93% match

Loading thumbnail…

Circles Effect at the junctions

A grid-based visualization renders 960 small square cells across an SVG canvas, each colored with a random red-blue value to create a scattered circle-like effect at the junctions where cells meet. The code uses React 16.10 to generate the layout, mapping over arrays of coordinates to place every rectangle individually. The SVG elements are drawn with the `rect` API, and the fill color is computed dynamically using `rgb()` with a random multiplier. A larger square border outlines the overall composition, while the grid cells themselves use no stroke, producing a seamless visual pattern.

NNita

92% match

Loading thumbnail…

Circles Effect at the junctions

A grid of black-outlined squares creates an optical illusion where overlapping stroke widths produce dense circular patterns at each junction. The visualization is built with React and renders an SVG, mapping a 10x10 array of rectangles with thick 25-pixel strokes. The code computes positions using a fixed square size of 100 pixels and draws both inner rectangles and a surrounding boundary. All shapes have no fill, relying solely on the stroke styling to generate the visual effect.

NNita

91% match

Loading thumbnail…

Compact Squares with random Opacity

This visualization displays a 48×48 grid of compact squares, each filled with a semi-transparent grey tone that varies unpredictably. The squares are arranged in a dense block, with a single black outline enclosing the entire grid. Using React and ReactDOM, the code generates the grid by mapping over arrays of coordinates, assigning each rectangle a random opacity value and a reddish fill color computed from the square’s position. The SVG rendering uses the `<rect>` element with attributes for width, height, and stroke, while the `Math.random()` function controls both the opacity and the red channel variation.

NNita

82% match

Loading thumbnail…

Circles with random color picker

This example renders a grid of circles on an SVG canvas using React. The visualization generates 201 circles positioned along the x-axis at regular increments, with random y-coordinates between 0 and 400. Each circle’s fill color is determined by its index position, producing an RGB value that shifts across the spectrum. The code uses React’s `ReactDOM.render` to mount the component and maps over an array to create the SVG circle elements. A fixed viewport of 960 by 500 pixels contains the randomly scattered circles against a light green background.

NNita

82% match

Loading thumbnail…

Compact circles

A grid of small translucent circles is scattered inside a large bounding circle, creating a roughly uniform field of overlapping dots. The visualization uses React to render SVG elements, with nested `Array.map` calls generating the circles. Each circle’s position is determined by multiplying array values with `Math.random()`, producing a semi-random distribution within the 960×500 viewport. The code defines constants for the outer radius (400) and inner radius (40), and uses ReactDOM to mount the component, with no external data or interaction.

NNita

81% match

Loading thumbnail…

Compact Squares with random Opacity

A grid of compact squares forms a large square, each cell filled with a radial gradient that creates a Saturn-like color blend. The visualization is generated entirely in React, rendering SVG rectangles in a nested loop with no spacing between them, and applies a drop-shadow filter for subtle depth. The opacity is noted in the code but remains commented out, so all squares render at full opacity. The layout is computed from fixed dimensions, with a 960-pixel side and 30-pixel cells, producing a 32-by-32 matrix.

NNita

81% match

Loading thumbnail…

Compact circles

A grid of small translucent circles is scattered within a larger bounding circle, creating a compact cluster effect. The visualization uses React to render SVG circles, with each circle’s position derived from nested loops over coordinate arrays, then filtered by a radial distance check. Random offsets are applied to each circle’s x and y coordinates, producing a dispersed pattern inside the main circular boundary. The example demonstrates a simple generative layout using React’s `map` method and SVG `<circle>` elements.

NNita

81% match