Draw circles on canvas

100%

Draw circles on canvas

✓ Published0🌍 Public

Last edited Nov 14, 2014

Created on Jul 22, 2014

This canvas animation depicts a field of 2,500 circles, each randomly positioned and colored red or blue, drawn initially to a background canvas. Every 1.5 seconds, a new large circle (radius 80) is added to the foreground and progressively shrinks over time. While shrinking, circles are rendered as thick-outlined strokes; once they reach the minimum radius of 4, they are filled solid and permanently drawn to the background canvas, where they join the original static circles. The foreground canvas is cleared and redrawn every 20 milliseconds, creating a smooth pulsing effect as the shrinking circles fade into the static backdrop. The visualization uses the canvas API and requestAnimationFrame via a custom requestInterval helper for animation.

AI-generated description

Similar vizzes

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

81% match

Loading thumbnail…

30.000 círculos

A canvas displays 30,000 randomly placed circles, each with a random position, radius up to 10 pixels, and a semi-transparent random color. The example uses the HTML5 Canvas API, specifically `getContext("2d")`, `beginPath`, `arc`, and `fill`, to draw every circle individually in a single loop. Each circle’s fill style is set to an `rgba()` string with random red, green, and blue values from a custom `rc()` function and a fixed alpha of 0.5. The data is generated procedurally with `Math.random()`, producing an overlapping, colorful field with no external dataset.

Aaaizemberg

77% match

Loading thumbnail…

Changing Colors with Waves

A grid of colored circles animates in a wave-like pattern, shifting between red and blue based on their size. The canvas rendering shows 40 by 30 circles, where each circle’s horizontal position and radius oscillate with sine and cosine functions over time. The code uses the Canvas API’s `getContext('2d')`, `beginPath`, `arc`, and `fill` methods, with `requestAnimationFrame` driving the continuous animation. Colors change dynamically: circles larger than a threshold appear blue, while smaller ones turn red, creating a pulsing, color-shifting visual effect.

CCurran Kelleher

76% 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

76% match

Loading thumbnail…

Canvas Animation

This canvas animation draws a rotating, flower-like pattern of curved lines radiating from a central point, with small solid circles placed at each outer endpoint. The design morphs continuously as the entire shape rotates and dashed lines shift in a repeating loop. Built with raw JavaScript and the Canvas API, the code uses a quadratic curve for each spoke, along with rotation transforms, dashed strokes, and a semi-transparent overlay to create the illusion of motion. The animation is driven by `requestAnimationFrame`, updating the line dash offset and rotation angle over time.

11Cr18Ni9

76% match

Loading thumbnail…

Wiggling Circles

Four hundred colored circles wander randomly across a canvas, each assigned one of five warm hues by a D3 ordinal color scale. The animation runs on a `d3.timer`, updating each circle’s position by small random steps and redrawing them with Canvas 2D `arc` calls. The `globalCompositeOperation` set to `hard-light` blends overlapping shapes, creating shimmering color interactions. The data is procedurally generated in-browser, with random x/y coordinates, radii, and group assignments, and the rendering clears the canvas each frame before repainting.

Aangusgrant

75% match

Loading thumbnail…

regl-circles

Twenty thousand colored circles fall from the top of the viewport, then settle into horizontal bands based on each circle's speed and size. Two quantized scales map circle index to a target row, and a WebGL shader renders each point with a soft-edged stroke and rounded fill. The animation cycles continuously via a REGL frame loop, with position and color computed per frame in the vertex and fragment shaders using D3 scales and lodash for data shuffling.

11wheel

75% match

Loading thumbnail…

Changing Colors with Waves

Rows of circles ripple horizontally across a 960 by 500 pixel canvas, their horizontal positions perturbed by a sine wave and their sizes pulsing with time. Each circle is drawn using the Canvas `arc` and `fill` methods, with its color switching between red and blue depending on whether its current size exceeds a threshold. The animation runs via `requestAnimationFrame`, advancing a time variable `t` in increments of 0.1 to drive the motion.

Aaishwarya8615

75% match