100%

500 glowing dots

✓ Published0🌍 Public

Last edited Oct 10, 2026

Created on Oct 10, 2026

Five hundred glowing dots scatter across a dark, square SVG canvas. Each dot consists of a larger outer circle filled with a cyan radial gradient and a smaller, brighter white inner circle created using SVG `radialGradient` definitions. A plain `for` loop generates the dots at random positions within a fixed boundary, using D3 v4 to append `circle` elements and apply CSS classes for styling. The result is a dense, luminous field of varied-sized orbs against a near-black background.

3D Glowing Dots

A ThreeJS port of a 2D SVG glowing-dot field into an interactive 3D point cloud.

Running

Open index.html in a browser (requires internet access for the ThreeJS CDN).

References

mit Licensed

Similar vizzes

Loading thumbnail…

500 glowing dots

PPatrick Wojda

98% match

Loading thumbnail…

100,000 dots

This visualization displays 100,000 randomly positioned dots, each with a unique color, opacity, and size, rendered as a single dense field. The dots are generated with D3's `scaleSequential` and `interpolateWarm` for the color palette, `randomExponential` for radius distribution, and uniform random functions for coordinates and opacities. The scene is drawn using the Regl library on a WebGL canvas, with a custom fragment shader applying antialiasing and per-dot blending for a smooth, overlapping presentation.

NNita

77% match

Loading thumbnail…

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel

76% match

Loading thumbnail…

Dots

A force-directed simulation scatters and repels 300 small circles within a square field, with each new dot entering at the center and easing outward through an animated radius transition. The code uses the `d3.layout.force` API for physics, appends `circle` elements to an SVG canvas, and triggers a `transition` with a `Math.sqrt` easing function. Data points are generated procedurally with random offsets, and the simulation stops once the node count exceeds 300.

Mmbostock

75% match

Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock

75% match

Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com

75% match

Loading thumbnail…

181202_05_Nested circles

A grid of nested circles and rectangles animates into place on an SVG canvas. The visualization builds a parametric layout of 91 cells, each containing concentric circles with decreasing radii and a grey rectangle that expands during the transition. The code uses D3 v5 selection and range modules to generate and position elements, with the `transition().duration()` API animating the circles from the center outward and rectangles from zero size. Hover effects change fill colors to black.

LLudovicGouverneur

74% match

Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil

74% match