canvas-erase

100%

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Oct 20, 2015

Four synthetic line charts repeatedly replace each other on a canvas overlay, with a black-and-white XOR transition that erases and redraws the previous chart. The visualization uses D3.js for chart generation and the Canvas API for animation, driven by `transition.attrTween` and `setInterval`. Random rectangles paint over the canvas to fade between states, while the `ctx.globalCompositeOperation` toggles between `'source-over'` and `'xor'` to create the erase effect.

AI-generated description

Similar vizzes

Loading thumbnail…

static-transition

A set of four parallel line charts displaying randomly generated data, with each chart independently redrawn every five seconds. The charts are rendered in SVG using D3's line generator and axes. Superimposed on top is a translucent canvas layer that constantly draws random black and white rectangles, creating a static-like visual noise effect. During each transition, the canvas alternately switches between drawing only black squares with a larger size and then both colors with a smaller size, while the underlying SVG charts update.

11wheel

74% match

Loading thumbnail…

blur-transition

Four wavy line charts fade in and out against alternating black and white backgrounds, with each transition blending the strokes into a cohesive, gooey mass before snapping back into crisp lines. The animation cycles repeatedly, morphing between the two color schemes while new random line data replaces the old. It uses D3.js to generate the SVG paths and axes, applying SVG filters—`feGaussianBlur` and `feColorMatrix`—to create the blur-and-chrome effect, with `transition` calls animating the filter attributes and background color changes.

11wheel

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

70% match

Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

70% match

Loading thumbnail…

random-walk-merge

Hundreds of colored squares perform a synchronized random walk across a canvas, leaving fading trails as they drift. A mouse position controls the minimum square size and the step change magnitude, making the motion more chaotic near the bottom and right edges. The visualization uses `d3.interval` for timed updates and the Canvas 2D API with a semi-transparent white overlay to create a persistent, ghosting effect. Squares periodically merge when they land in the same horizontal position, incrementing a counter that determines their color via `d3.scaleOrdinal`.

11wheel

68% match

Loading thumbnail…

Document

A real-time waveform plot on a canvas scrolls horizontally as new random data points arrive, creating a dynamic line graph. The animation updates every 100 milliseconds, shifting the drawing origin leftward and clearing the canvas to simulate an endless stream. Built with the HTML5 Canvas API, it uses `setInterval`, `clearRect`, and `translate` to manage the redraw cycle. The line is drawn in red, showing a continuous trace of fluctuating y-values around a baseline.

KKelvinZCH

67% match

Loading thumbnail…

Random Fun Stuff

A canvas animation draws a continuously evolving radial burst of lines from the center of the screen. Using the HTML5 Canvas API's `getContext('2d')`, the code repeatedly strokes line segments from the center to coordinates computed from sine and cosine functions of the current time and angle. Each frame, a semi-transparent white rectangle gradually fades previous strokes, creating a fading trail effect. The animation runs via `requestAnimationFrame`, recalculating angles and positions with the `Date.now()` timestamp to produce a dynamic, rotating pattern.

CCurran Kelleher

66% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. Each frame, the code computes positions and radii using trigonometric functions of time and grid coordinates, creating swirling, morphing shapes with shifting colors. The animation runs continuously via `requestAnimationFrame`, with a semi-transparent black overlay (Canvas `fillRect`) producing trailing motion blur effects. The canvas resizes dynamically to fit the window, and all rendering uses the native Canvas 2D API, including `arc` and `fill` for circle drawing. No external libraries are used; the math-driven design follows the original MIT tutorial’s approach.

CConvert-Jade

66% match