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.