Jagged Hello

100%

✓ Published0🌍 Public

Last edited Mar 27, 2017

Created on Mar 25, 2017

This example displays the lyrics to “Hello” by Adele as a sequence of words, each briefly flashing in large type before dissolving into jagged, outlined strokes. The animation cycles through every word of the song, using a canvas-based drawing loop and the d3-timer library to control timing. Each word is first rendered as filled text, then repeatedly redrawn with alternating black and white outlines of increasing width, creating a shimmering, glitch-like effect on a single HTML5 canvas.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/34a4e0330eb374b4e24e19cfe58a8669'>Hello</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Hello

This example animates the lyrics of Adele’s “Hello” as a sequence of individual words. Each word is briefly rendered as a large, thick outline that rapidly flickers between black and white while alternating line widths, creating a shimmering, glitch-like effect before the next word appears. The visualization runs on a canvas and uses a double-buffering technique with two canvases: the first renders the text outline, and the second composites the stroked text and previously drawn frames. The animation is driven by a d3-timer callback that steps through each character, using Canvas strokeText and drawImage to build the layered, pulsing appearance. The word list is derived by splitting the song’s lyrics on whitespace.

Mmbostock

90% match

Loading thumbnail…

Hello world!

A working black-and-white canvas displays a row of five circles that repeatedly adjusts its scale via a D3 transition, while two HTML overlay labels read “Hello world” and “a random walk?...”. The circles’ radii and fill color update on a random interval, switching between blue and gray based on a random threshold. Built with D3 v7, the example demonstrates SVG rendering and animation through D3’s `join` method and `transition` style, with a simple `setInterval` driving the stochastic size and color changes.

Bblockmarket

67% match

Loading thumbnail…

stars

This example animates a multi-line text introduction by first drawing the words along SVG `<textPath>` elements, then replacing the text with thousands of small, glowing star-shaped particles. The visualization uses D3 v5 to lay out the text on curved and straight paths, computes path endpoints and text lengths to align the words, and then spawns a canvas-based particle system with custom star sprites and additive blending. Each word is revealed by a burst of stars that traces along its path, while gradient fills and blur/contrast filters create a luminous, space-like effect. The animation cycles through the phrases, with mouse interaction disabled to keep the focus on the choreographed particle motion.

EEE2dev

67% match

Loading thumbnail…

stars

This example creates an animated typography intro where text lines ("Javascript", "meets", "deep learning", "with", "TensorFlow.js") are revealed sequentially. Each line is rendered as an `<h1>` element, while the final line is split into individually colored spans. The animation uses an SVG `<textPath>` to define a path for each header, and a starfield particle system (rendered on canvas with blur and contrast filters) bursts along these paths as the text fades in. The text transitions are staggered, with each line's star trail animating along its path in sequence, and the final line triggers a longer particle effect. The design uses the Google Font "Indie Flower" and a dark background, with each letter of the last line assigned a different color.

EEE2dev

67% match

Loading thumbnail…

Untitled

This example demonstrates a looping text transition in which a div element toggles between the words "before" and "after" with a two-second delay and three-second duration. The code uses D3.js v7's selection methods, including `.text()`, `.style()`, and `.transition()`, within a `while(true)` loop to create continuous animation. The rendering approach is a minimal HTML page with no external data source, relying solely on D3 transitions to animate the text content and font size on an unstyled body.

Ssukumardunn

67% match

Loading thumbnail…

Gist 7330771

This example demonstrates how D3 transitions make data joins easier to follow by animating the entry, update, and exit states of SVG text elements. It shows a sequence of randomly selected alphabet letters that change every 1.5 seconds, with entering letters sliding down from above, exiting letters dropping below, and updated letters gliding horizontally to their new positions. The code uses D3’s selection joins with key functions, `transition.attr` and `transition.style` to animate positions and opacity, and relies on SVG text elements rendered in a single group. The data is a shuffled subset of the alphabet, sorted and re-joined with each interval.

11wheel

66% match

Loading thumbnail…

My first working animation

Words fall like rain across an SVG canvas, each word shrinking from oversized, transparent text into its final position with rainbow colors. Words are randomly selected from a repeated dataset and appended every 100 milliseconds for 20 seconds. The animation uses D3 v5's `selectAll`, `data`, `enter`, `transition`, and `duration` methods, with `scaleSequential` and `interpolateRainbow` for coloring. A custom `playAnimation` function drives `setInterval` and `setTimeout`.

RRussell Watson

66% match

Loading thumbnail…

yes

This example displays a single word, "before," in large text that transitions to "after" over a 2.5-second fade, then immediately repeats by appending a new element. The animation loops indefinitely using an infinite `while(true)` loop. It leverages D3 v7’s `d3.select` to target the body and `.transition()` with delay and duration settings to toggle text content. The page is a bare HTML document with embedded JavaScript, demonstrating a minimal CSS-free animation cycle driven by D3’s DOM manipulation and transition API.

Ssukumardunn

65% match