Skip to main content
SimilarExport ZIP
100%

Circles Effect at the junctions

✓ Published1🌍 Public
NNita
Last edited Mar 6, 2020
Created on Mar 6, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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
95% match
Loading thumbnail…

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.

NNita
93% 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
90% 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
85% 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
83% match
Loading thumbnail…

Circles Pack

This example displays a tightly packed grid of red, empty circles arranged in a square formation across an SVG canvas. The visualization generates 10 rows and 10 columns of circles, each with a fixed radius, positioned at regular intervals. React components produce the circles, while the code manually constructs arrays for positioning and radius calculations without using external data libraries. The circles use SVG properties such as opacity, stroke color, and fill to render the final pattern.

NNita
83% match
Loading thumbnail…

Compact circles within the Bigger Circle

A circular field of small, semi-transparent circles fills a larger containing circle, with each smaller circle randomly offset from its original grid position and stroked and filled with varying RGB colors. The visualization uses React and SVG, mapping a 50-point grid across a range from -500 to 500 in both X and Y coordinates, rendering each point that falls inside the parent circle’s radius. The code applies `Math.random()` to jitter positions and color values, creating a compact, varied composition within the fixed bounds.

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
82% match