Looper

100%

✓ Published0🌍 Public

Last edited Sep 18, 2018

Created on Sep 18, 2018

Looper is an animated canvas visualization that cycles a single white dot along a circular path over time. It can record a 50-frame GIF animation by accumulating multiple motion-blurred samples per frame, blending them with canvas `getImageData` and `putImageData`. The animation runs continuously, but pressing a mouse button adjusts the phase based on cursor position. It uses the gif.js library to encode frames into an exported GIF file, with a configurable shutter angle and samples-per-frame for motion blur.

AI-generated description

Similar vizzes

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

66% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated visualization displays a grid of 30 by 30 circles that orbit and pulse in a rhythmic, colorful pattern, creating a hypnotic screensaver effect. Circles move along circular paths with varying radii and speeds, while their size and color shift over time based on sine functions tied to the animation clock. The canvas API handles all rendering, with requestAnimationFrame driving the continuous loop and a semi-transparent fillRect creating motion trails. The code uses no external libraries, drawing directly as a fork of the original mathematical patterns tutorial.

Ggrateful4music@hotmail.com

63% match

Loading thumbnail…

morie-sheet

An animated canvas drawing renders a moiré sheet of 300 horizontal lines whose tilts shift over time, creating a shimmering, organic field. Each line’s angle is gradually averaged with its neighbor, while the top line receives a constant rotational nudge, propagating subtle wave-like motion through the structure. The visualization uses a Canvas 2D context with d3.timer for the animation loop and d3.range to generate the line data.

11wheel

63% match

Loading thumbnail…

OMG Particles SB

A looping animation of expanding, colored circles draws a glowing, shifting line that follows the mouse. The code uses D3.js v3 with a Canvas context set to "lighter" composite mode for additive blending. A timer triggers HSL color cycles and a `transition.tween` updates the arc radius over 10 seconds, while a mouse move event updates the target coordinates, creating a trailing, painterly effect.

SSebastian Barrett

62% match

Loading thumbnail…

Motion Design Demo

This example demonstrates motion design principles through an animated visualization of rotating vertical lines. The piece shows parallel lines distributed across the canvas, each rotating independently around its center with a phase shift based on horizontal position, creating an organic wave-like effect with endpoint circles marking each rotation axis. Built with p5.js, the animation uses the Canvas API with a semi-transparent rectangle overlay to create a fading trail effect that emphasizes movement over time. The rotation speed is tied to `frameCount`, and the layout responds dynamically to window resizing.

CCurran Kelleher

62% match

Loading thumbnail…

Wave Motion

A grid of faint circular outlines fills the background, representing water parcels in a calm state. Overlaid on this, bright dots travel along the perimeters of each ring, rotating in coordinated, wave-like patterns that ripple across the canvas. The animation uses a d3-timer to update the rotation angle for each dot, with position and rotation calculated from the grid index and elapsed time. Two layered Canvas 2D contexts render the static rings and the moving dots, with devicePixelRatio scaling for sharp display on high-DPI screens.

Mmbostock

62% match

Loading thumbnail…

OMG Particles II

A glowing circle travels smoothly toward the mouse cursor while continuously emitting expanding rings, each drawn as an arc with fading opacity against a dark background. The color of the rings cycles through the HSL spectrum. Built with D3 v3, the animation uses a `d3.timer` loop and `transition.tween` to interpolate ring radius over two seconds, while Canvas 2D rendering with `globalCompositeOperation` set to `lighter` creates additive blending. Mouse movement updates a target position, which is smoothed toward via exponential interpolation.

Mmbostock

62% match

Loading thumbnail…

slinky

A single white line repeatedly traces the outline of a circle, but its shape is continuously warped by a sinusoidal modulation that scales and rotates each point’s radial position. The animation cycles through several periods of this distortion, making the circle appear to coil and uncoil like a slinky. The code uses D3’s `d3.timer` to update a `path` element, computing new coordinates for 1,000 sample points via a transformation that multiplies the base circle’s x- and y-coordinates by cosine and sine of the angle multiplied by a time-varying factor. The rendering relies on an SVG `path` with a thick white stroke over a dark background, leveraging the lodash and d3-jetpack helper libraries for utilities and concise syntax.

11wheel

62% match