Skip to main content
SimilarExport ZIP
100%

500 glowing dots

✓ Published1🌍 Public
PPatrick Wojda
Last edited Oct 28, 2016
Created on Oct 28, 2016

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

500 glowing dots

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.

CCurran Kelleher
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
80% 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
78% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
78% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
78% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
78% match
Loading thumbnail…

Creative Circles by Charan

Four hundred twenty rainbow-colored circles spiral outward from the center of an SVG canvas, positioned using the golden angle and square-root scaling to form a galaxy-like pattern. Each circle expands from a radius of zero in a staggered transition, then gently pulses in size through a recursive `pulse()` function using `d3.easeSinInOut`. The visualization uses D3 v7’s selection, data join, and transition APIs, with colors generated via `d3.interpolateRainbow` on a light green background.

Ccsabavath@wpi.edu
78% match
Loading thumbnail…

Creative Circles by Charan

Four hundred twenty rainbow-colored circles spiral outward from the center of an SVG canvas, positioned using the golden angle and square-root scaling to form a galaxy-like pattern. Each circle expands from a radius of zero in a staggered transition, then gently pulses in size through a recursive `pulse()` function using `d3.easeSinInOut`. The visualization uses D3 v7’s selection, data join, and transition APIs, with colors generated via `d3.interpolateRainbow` on a light green background.

Ccsabavath@wpi.edu
78% match