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.