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.