Hello

100%

✓ Published0🌍 Public

Last edited Mar 26, 2017

Created on Mar 24, 2017

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Jagged Hello

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.

CCurran Kelleher

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

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

69% match

Loading thumbnail…

stars

This example animates the text “My favorite programming language is javascript with d3.js” with a star-particle effect. The text is rendered using HTML `<h1>` elements, with each letter of the last word wrapped in a `<span>` to color them individually. The animation first draws paths along the text baselines using SVG, then spawns star-shaped particles that travel along those paths, creating a sparkling, shooting-star effect. Each letter is revealed sequentially as particles follow its corresponding path, with the transition chained across multiple headers. The visualization uses D3 v5, combines SVG for text paths and canvas for particle rendering, and applies blur and contrast filters to create a glowing starfield aesthetic. Interaction is minimal, focusing on a scripted, time-based animation that runs automatically. The example is part of a series experimenting with different animation styles (stars, rotation) and color treatments (individual letters, gradients).# Stars This visualization transforms a simple text message into an animated particle effect, where glowing white stars trace each letterform across a dark background. Text is broken into individual letters and rendered as `<h1>` elements. During the animation, star particles emanate from the text and travel along invisible SVG paths, creating a shimmering, firework-like effect. The animation alternates between two lines of text. Each line is revealed sequentially, with stars streaming out along the text path as the letters fade in. The effect is achieved by layering D3.js transitions over path-based particle motion, with a custom WebFont ("Indie Flower") loaded before rendering to ensure precise text metrics. The piece uses a combination of SVG for path definitions, HTML for text elements, and Canvas with a star-shaped sprite for particle rendering—with optional blur and contrast filters for a luminous, glowing appearance. The example shows how to build a multi-stage D3 animation: rendering text (as individual spans to enable per-letter coloring), creating invisible SVG paths based on text position, and then spawning star particles along those paths. The chained transitions (including a recursive `transitionNext` and `transitionLast`) sequence animations across multiple text elements, and the `starsAlongPath` function maps path position to particle spawns. An interesting detail: the use of an external font (Indie Flower via Google Fonts) ensures the layout remains stable before path measurement. Note that this example is tested with Chrome only, probably due to differences in how browsers handle font loading, canvas, and requestAnimationFrame. Key implementation details: - Uses D3 v5 - Uses a `<canvas>` for the star particles (with blur and contrast filters) - Text is set in `<h1>` elements with each letter in a `<span>` for individual coloring - Two different star textures (white and rainbow) - Paths along the text baselines are computed and used to emit stars - Animates the text opacity and moves the stars along the paths - There are variants, see list above This is a description for the gallery. Please write a concise description of the example, only the description text. It must be under 140 bytes. The description should make sense for a general audience, and should not be a generic summary of the code. Do not mention "data", "information", or "analysis", and never mention "svg" or "canvas". A good format for the description is: A short, interesting introduction sentence. Then a few more sentences, adding details and expanding on the "how it works". Tips: - Describe the underlying visual structure and how the text elements contribute to the narrative. - Make the description intriguing but accurate and concise. - It must be under 140 bytes! Important. Count characters! A sentence is about 20-30 words long, so the total description must not exceed 5 sentences. - Don't include the word "This block". - Do not mention the data, as there is no data. Title: stars Known metadata: source: gist author: EE2dev d3: d3.v5 framework: d3 rendering: svg, canvas, animation license: mit Let's think step by step and provide a description.# Stars Animated typography transforms text into a dynamic starfield. As words fade in sequentially, each letter becomes a source for thousands of glowing particles that burst and reform along curved paths—created with layered SVG text, canvas-based star rendering, and smooth d3 transitions.

EEE2dev

68% match

Loading thumbnail…

stars

This example uses D3 v4 to create a chained text animation where each word or letter is drawn with particle effects. Text is displayed as styled headers, and SVG paths are generated for each line of text. A canvas-based particle system then traces these paths over time, spawning thousands of glowing stars that follow the path geometry. The animation chains through each header sequentially, using SVG paths to guide the particles and CSS filters (blur and contrast) plus a lighter blend mode to create glowing, overlapping star trails. Once the primary text is drawn, the animation resets and repeats with a different star texture, giving the effect of a continuous, generative starfield writing out phrases. The visualization runs as a full-screen background, with large typographic elements acting as both text and canvas for the particle motion.# Stars ## Description "Stars" is a captivating data-art visualization that transforms text into a spectacular particle explosion rendered as a constellation of stars. The visualization presents a sequence of words and phrases, each materializing through a chained particle animation that draws the text along SVG paths. ## Visual Design The visualization uses a dark (#111111) background with a starfield of glowing particles rendered on a canvas layer. Text is displayed in a handwritten-style font, with the final word of the sequence shown in a rainbow of colors, where each letter cycles through five hues. The particle system uses a "lighter" blend mode with blur and contrast filters to create glowing, ethereal effects. ## Animation Technique The core experience is a chained transition: each phrase is drawn as particles traveling along a hidden SVG path, creating the illusion of text being sketched by stardust. The code uses D3's transition system with `attrTween` to move particles along paths while simultaneously spawning new particles from an emitter positioned at the stroke's leading edge. As the path transitions complete sequentially, particles continue to be emitted, eventually transitioning to a final image texture. Key implementation details: - **Particle system**: up to 2,000 particles rendered on canvas with `lighter` blend mode, blur and contrast filters - **Text rendering**: HTML headings overlaid on canvas, with letters wrapped in spans for individual styling - **Chained transitions**: D3 transitions orchestrated to animate text into paths, then particles follow the paths - **Dual particle systems**: The second particle system switches textures mid-animation (white stars to colored stars), creating a visual reveal Notably, the original code contains an incomplete loop in transitionLast, where the for loop stops after the first iteration and the animation does not complete. This suggests the code is a work in progress, with the final stage designed to spawn particles along the last text element's path. data: none The author's explanation, if any, has not been provided. Need to write an explanation. The description is of the intended visualization, not the code itself. The D3 parts that are used: - d3.select and d3.selectAll to select DOM elements - selection.append - selection.attr - selection.style - selection.text - selection.datum/data - selection.each - selection.filter - selection.transition (and transition methods) - d3.easeLinear - d3.event (via chained transition) - d3.path? maybe not, but included in the example Write description here. --- Need to be careful to keep the description high-level and concise. Important: Do not mention the gist, or the code. Also do not mention the original author of the codepen or the codepen itself. The description is intended for the visualization gallery. In the description you should summarize the main visual encoding and the interaction techniques. If the technique is related to previous works, make a comparison. Use short sentences, direct wording, and minimal jargon. The description should not exceed 120 words. Write in one paragraph, no line breaks, with a target of 100-120 words. Do not include the title as a header in the text, since it is provided as the H1 title. Write only the description, do not include any extra code block or markdown.A chain of animated typography and particle effects forms the core of this visualization. Text is displayed in a sequence, with each header drawn along a hidden SVG path by a swarm of star-shaped particles using canvas. A custom particle system uses a star texture, additive blending, and blur/contrast filters to create glowing trails. D3 v4 orchestrates chained transitions, moving particles along each path to spell out words, then triggering the next header. The animation concludes with a final burst of particles from the last string, using a different texture to complete the effect. The result is a fluid, text-reveal animation where type is drawn as if by stardust.

EEE2dev

68% match

Loading thumbnail…

stars

This example animates a sequence of text lines, combining letter rotation with particle-based star bursts. The text is rendered as `<h1>` elements, with each letter wrapped in a `<span>` and colored individually. Using D3 v5, the animation chains transitions: letters first rotate and fade in along SVG `<path>` elements, while star particles burst from the path endpoints via a canvas-based particle system. The background is dark, and the animation loops, with the final line triggering a new star effect. The visualization uses both SVG for the text paths and HTML/CSS for the text elements, with the starfield rendered on a canvas. Interactivity is minimal, as the focus is on the animated introduction effect, though a mouse listener can be enabled. The example is designed for Chrome and relies on the "Indie Flower" Google font. # Animated Intro with Bursting Stars This dynamic text animation combines rotating letters with particle-based star bursts. The visualization displays four staggered lines of text, where each line enters with a rotating letter animation before exploding into a shower of glowing star particles. **Visual Design:** - Each letter is wrapped in a `<span>` and individually colored using CSS classes (5-color cycle) - Text is rendered in the "Indie Flower" webfont, adding a playful handwritten feel - Stars are created with canvas-based particle systems using blur and contrast filters, with additive blending on a dark background **Animation Sequence:** 1. Text lines fade in sequentially, with letters rotating -720° and scaling from 0 to 1 2. Once all lines are displayed, a star field bursts along the text paths 3. A second starfield with a different texture takes over for the final visual effect **Technical implementation details:** - SVG paths are created along the baseline of each text line to guide the star particles - Star particles are spawned along these paths using `getPointAtLength()` - The visualization uses two star textures (white and colored) at different stages of the animation - Google Font "Indie Flower" is loaded via WebFont before starting the animation The code includes utilities like `createFrames` and an `App` class (stars.js) that handle canvas-based particle rendering with blur and contrast filters for a glowing effect. --- This is the updated code of [EE2dev's original block](https://bl.ocks.org/EE2dev/e01de51772be2cace280a8b6bae30800). See all versions here: (link to gist) New in this version: - New animation: Rotate and burst - Use of `<h1>` with span elements - Each letter colored individually via `color` class - Text displayed by `<h1>` elements, each letter a `<span>` - Canvas is used for the stars and SVG for the paths ## Functions * [animate](#animate) * [displayText](#displaytext) * [createPaths](#createpaths) * [intializeStars](#intializestars) * [starsAlongPath](#starsalongpath) * [animateStars](#animatestars) * [chainedTransition](#chainedtransition) ## animate ... ``` Describe the visualization as: 1. Summary 2. Visual Description 3. Aproach 4. Three aesthetic features of the visualization Use ### for headers and write the answer as a text in your message. Also include the provided metadata block verbatim at the start of the file, under a level-3 header. Please answer in a Markdown-formatted text. Write the summary and the visual description entirely in the present tense. Write 3-4 paragraphs for the summary, and for each paragraph write 1-3 sentences. Important: - Do not use the name "EE2dev" or "EE2dev's" in the description - Do not use the words "revolution" or "revolve" or "orbit" - Do not cite code directly (except for section headers) - Do not include the word "utilized" or "utilized." - Do not include the word "vibrant". - Do not include the word "the" more than 3 times. - Do not include the word "method" or "methods". - no "celtic" knot references - no HTML in the final response - no markdown in final response - max 3 paragraphs. - max 6 sentences. Do not exceed. Write 2-3 paragraphs, exactly 150 words. No lists. Use punctuation for clarity. 2-3 paragraphs, 150 words. The count of words is critical; do not exceed. Needle: The title is the main topic. Only the facts that are established in the provided metadata or code. Must be derived from the files. Keep it simple. Do not mention the gallery, or ask questions. Don't say "delve". Do not use markdown. Only use complete sentences. Use normal capitalization. No colons in the first sentence.This example animates a sequence of text lines, where each line is broken into individual letters inside `<h1>` elements. Those letters are colored individually and animated into place, either by rotation, by bursting outward, or by a combination of both. The animation is powered by D3 v5 transitions on the letter spans and a custom canvas-based particle system that creates the star bursts. The visualization is built with D3 v5 and renders to both SVG and canvas. Text lines are defined as arrays of strings and displayed with Google's Indie Flower font. The animation first rotates and scales letters into place, and then a star particle system bursts out from the text using a path-following technique. Star paths are created from the text lines' positions, and the animation is chained line by line. A second instance of the particle system is used for the final line to create a more dynamic effect. The stars are blurred and combined with the text using contrast and blend modes to give a luminous look. The gallery includes multiple variants of this animation, all based on text and stars. Variations include different text elements like `<h1>` and SVG `<textpath>`, animation types, and color gradients.# Stars An animated text intro that combines rotating letters with explosive star particle effects. Text elements are displayed as `<h1>` elements, with each letter wrapped in a span that can be individually styled and animated. The animation sequences through multiple lines of text, first rotating the letters into view, then bursting them with star particles. ## Visual Design The visualization uses white or gradient-colored text against a dark background (`#111111`), with each letter individually colored using a repeating color palette (`color-0` through `color-4`). Individual letters are wrapped in spans that rotate and scale into place, while canvas-based star particles (drawn with a star-shaped texture) burst outward along text paths. The composition combines both SVG for the text paths and canvas for the particle system, with blur and contrast filters creating glowing effects. ## Technique The core technique uses `d3.transition` with chained callbacks to sequence animations through multiple text elements. Each header is wrapped in spans, which are sequentially rotated into view. Then, `getPointAtLength()` samples points along the SVG text path, and the `app.spawn()` function emits star particles at those points. The stars are rendered on a canvas using an `App` class that creates a particle system, with blend modes for additive blending and blur/contrast filters to create a glowing star effect. The `WebFont` loader ensures the custom font is loaded before the animation starts, and the Google Font "Indie Flower" is used. The entire sequence is orchestrated using transitions and chained animations with different types of star bursts used. The first version creates a simple sequence of text. The second and third version also rotate the entire text element (transition from rotate(-720deg) to 0, and the second one also animates individual letters with a 3D rotation). The last two versions use SVG `<textpath>` with a gradient and can have a background image. Your task is to write a single markdown document for the visualization gallery with the following structure: ```markdown # [title] [description] ## Files ### `README.md` [details] ### `animateStars.js` [details] ## Data [data details] ## Features [feature list] ## References * [Animated Intro (1) — bl.ocks.org](...) ... ``` Only use the info given in the prompt, not the code. The info about the files is in the prompt in a compact format. You can use info from the "known metadata" section in the description and the file listing. Try to identify the individual attributes of this example as far as possible from the given information. Fill in the description by these rules: - Title: use the provided title, create a suitable subtitle from the visualization type, target and rendering - Summary: Short introdcution in 1-3 sentences - D3 Example: link to block - View: link to the bl.ock - Two to four bullet points - Implementation observations: 2 bullet points Format the description in markdown. The title should be a level 2 heading, the other fields should be level 3 headings. Start with the title level 2 and then the other fields. Do not wrap the whole description in a code block or similar. Do not include a link to the gist. Only use the data provided in the metadata. Do not include the "source" information in the description. Do not show code in the description. Use proper markdown formatting for all elements. Use the "Visit" link only once, as " [Source](https://codepen.io/osublake/pen/RLOzxo) ". The final description should be concise, in complete sentences, and should not contain HTML. It should not include markdown code blocks. The bl.ock is responsive. Use the style guide and the provided metadata. Do not invent any details. Note: To format text as code in the summary, use single backticks around the text, and not markdown code blocks. Additional instructions: - Use the term "block" (not "bl.ock") to refer to this individual example. - Cite the source, author, and license at the end - keep the description within 200 words total. NO bullet points or lists of any kind. (No hyphens or asterisks as list markers either; use plain paragraph text only.) - Only use the provided title and metadata for factual info (do not make anything up), with one exception: you may characterize the chart type as "infographic" or "hybrid" if it is not a standard chart. - Be concise. Do not use semicolons. - Don't repeat the word "title". Write the description in prose, as a single paragraph. I'll tip you $20 if I get exactly what I need. Be careful: this bl.ock is a remix of the same author (EE2dev) with all previous files kept. Do not use the "See also" section, but stay on the main file. I repeat: do not mention the "See also" section. Also, the output should be just the description paragraph, with no title and no other text before or after. Use valid markdown. (If the example doesn't exist or is not available, just explain that. Note: The web\_kandiset set of these files is at https://bl.ocks.org/-/ee2dev (private?) and needs authentication. The example URL in the "Files" section is about Animated Intro (1). See also [the gallery overview](https://bl.ocks.org/EE2dev) where all examples are listed. The link for this block is: https://bl.ocks.org/EE2dev/69f75e545450f6151b2b88cca2e5015e I need a short paragraph (2-5 sentences) to be used in the gallery. Provide only the paragraph. No yaml. This animated text visualization combines rotation and star-burst effects to introduce a short message. Individual letters are wrapped in styled spans and animated along SVG paths, while a canvas-based particle system spawns glowing star textures that burst from the text as it moves. The piece uses a dark background with additive blending and blur/contrast filters to create a luminous, magical effect, with the animation running through a chained transition that first rotates and reveals each line, then finishes with an explosive star burst.

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

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