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

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.

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
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
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…

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

Circles Pack

This visualization shows a large grid of concentric circles arranged in a repeating pattern across an SVG canvas. The circles are drawn with green outlines, a stroke width of 8, and 0.8 opacity, creating a dense, mosaic-like texture. The code uses React to render the SVG elements, with a custom `Circles` component that wraps the native SVG `<circle>` element. It generates 20 distinct radii and maps them over a 5×5 grid of positions, scaling the entire group by 0.4. ReactDOM mounts the tree to the DOM, and the page uses the UMD production builds of React 16.10.0.

NNita
84% match