stars
This animated visualization showcases a text-based intro where each line of a short phrase ("My favorite editor", "is", "Visual Studio Code") is rendered along a path using SVG `<textPath>`. The text follows straight lines for most lines and a curved quadratic path for the final line, creating a subtle wave effect. A multi-stop linear gradient cycles through pink, blue, purple, orange, and green, coloring the letters. Simultaneously, a canvas-based particle system spawns white star-like particles that travel along the same paths as the text, creating a dynamic, animated trail. The visualization uses a dark background, a blurred contrast filter for glowing effects, and relies on the Indie Flower font. The particles are updated in an animation loop, with the text paths recalculated for accurate star emission, producing a cohesive and lively typographic animation.# Stars
This visualization animates text by transforming it into streams of glowing particles. The example, sourced from a gist by EE2dev and built with D3 v5, creates an engaging typographic effect where text materializes as sparkling star particles.
## Visual Design
The visualization presents the phrase "My favorite editor is Visual Studio Code" across three lines of large, playful Indie Flower text. Each line follows a subtly different path: the first two lines follow straight horizontal paths, while the final line curves along a quadratic Bézier path, adding gentle dynamism to the composition.
The text is rendered using SVG `<textPath>` elements, with each line positioned along invisible paths. The color treatment is striking — a linear gradient transitions through pink, blue, purple, orange, and green, creating a vibrant rainbow effect across the letterforms.
## Animation
The core animation is the "stars" effect: star-shaped particles trace along the text paths and explode outward. Using D3 v5 with the HTML5 Canvas API, the particles are generated along the text paths using `getPointAtLength()` and `getComputedTextLength()` to calculate start points and path durations. A WebGL-less 2D canvas with `lighter` blend mode and blur/contrast filters creates glowing particle trails. The animation triggers when a custom-loaded Google Font ("Indie Flower") finishes loading, ensuring correct text metrics.
Key implementation details:
- Star particles move along SVG `<textPath>` paths
- Canvas rendering with blur and contrast filters for glow effect
- Text is positioned with `startOffset: 50%` for centering
- CSS classes distinguish animated text from static text
- Responsive sizing via `getBoundingClientRect`
## Related examples
This block is part of a series by the author (see README for all 7 blocks).
This is the final one (7).
Differences to the other versions:
1. text elements: SVG `<textpath>`
2. animation: stars
3. color: gradient
4. other: background image, full size
All credits go to the author.
The bl.ock without the star background (6) or with it (7) is similar to [this one](https://bl.ocks.org/EE2dev/876917e2de5de1a7556f30551b90fd2a).
The configuration was:
```js
let pathDurations = [];
let pathEndpoints = [];
let app; // the main class in stars.js to create the particles
const containerDiv = "div.chart";
const explosionStrength = 0.002;
const transitionSpeed = 7;
const starOptions = {
mouseListener: false,
texture: document.querySelector("#star-texture-white"),
frames: createFrames(5, 80, 80),
maxParticles: 2000,
backgroundColor: "#111111",
blendMode: "lighter",
filterBlur: 50,
filterContrast: 300,
useBlurFilter: true,
useContrastFilter: true
};
```
For the gallery:
- Name:
- D3 version:
- Source:
- Date:
- Tags:
- Code:
- Overall shape:
- Description (concise):
Use the README.md contents and other metadata to
complete the above. If some metadata is missing, infer the most
likely value from the available information. Be concise.Title: Stars
**Source:** Gist by EE2dev
**D3 Version:** v5
**Framework:** D3
**Rendering:** SVG, Canvas, Animation
**License:** MIT
**Description:**
This animated visualization brings text to life by rendering it along SVG `<textPath>` elements and filling the letters with a starfield particle effect. Text like *"My favorite editor is Visual Studio Code"* is drawn with a gradient and animated by millions of tiny white particles that explode and reform along the text paths. The animation leverages both SVG (for text and paths) and canvas (for the particle system), with effects like blur and contrast filters to enhance the visual impact. The example demonstrates a smooth, organic motion of particles tracing the text, making it a dynamic and engaging introduction to data-driven design.
### Key Features:
- **SVG textPath**: Text follows curved paths for a polished, typographic effect.
- **Canvas particles**: Stars burst and travel along the path with a lightweight `App` class managing the particles.
- **Animation**: JavaScript `requestAnimationFrame`-like loop (or D3's internal timer) powers the starfield.
- **Color**: Linear gradient applied to the text.
- **Performance**: High number of particles possible due to canvas rendering.
**Usage**: Open the HTML file in a Chrome browser (must support `getPointAtLength`, `getComputedTextLength`, `WebFont`, and `Canvas 2D`). No additional dependencies are required. It will render an animated intro sequence with the text "My favorite editor is Visual Studio Code".
**How it works**:
1. Loads "Indie Flower" from Google Fonts via WebFont.
2. Creates SVG text paths to layout the text in a line.
3. The last line of text is curved.
4. Calculates the length of the text and its position, to know where to spawn star particles.
5. Creates a canvas with a particle system that spawns stars along the text paths.
6. The particle system renders stars that move along the paths and create a glowing effect.
7. Adds a gradient over the text paths.
## Implementation notes
* The paths are dynamic to the container width.
* The text is aligned to the text paths, and the star particles follow the path of the text glyphs.
* The stars are particles with a custom texture; They are rendered to a canvas with additive blending (`lighter`) to create a glowing effect.
* Additionally, there is a blur and contrast filter applied. The blur filter has to be the first filter; contrast filter as the second. A different order or missing filter causes wrong output or total error. The filters are applied to a canvas to be used as particle texture.
* The CSS class `.headline` and `.effect` are used to style the text, including fonts, sizes, and the `mix-blend-mode: difference`.
* The classes `.trans` and `.no-effect` probably correspond to different stroke effects.
The animated text uses D3.js to add text to `<textPath>` elements. Then stars are animated along the paths with the help of an App class.
If there is no webfont loaded for the textpath, the calculation of the getComputedTextLength from the browser returns 0 and the text won't be visible. The reason is, that the text length cannot be calculated before the font has been loaded. This is solved by triggering the animations in the fontactive function of WebFont. The animation is therefore going to start right after the font has been rendered, not earlier. This is an important detail, because otherwise the text would not appear in the visualization. For each of the 3 textpaths, the same procedure happens:
1. create a path with a random waveform
2. create textpaths
3. calculate start and duration for every path to have the text moving from left to right
4. animate stars along the paths
5. add some rotation in the stars
The stars are created from an SVG sprite.
* see also for reference: [CodePen Home Animated starfield with multiple canvas](https://codepen.io/ee2dev/pen/wdoxME)
* [https://codepen.io/osublake/pen/RLOzxo](https://codepen.io/osublake/pen/RLOzxo)
The animation is based on Blake Bowen's codepen, using:
* drawing lines between the current star and the target position
* particle system
* 1d simplex noise for smooth random star sizes
* an SVG path as input for the particles
* a Gaussian blur filter
* an SVG texture for the particle
* Path segments (SVG) for the text
* `ctx.arc()` for creating stars with a certain radius
* and a `Date.now()` to get a time
(This is the 8th iteration of the code)
Source: https://gist.github.com/EE2dev/61c25c4c0ef448f21ba07e0531b7c7f8
This is a supporting text file for a D3 example. The README must be passed through and modified with the following instructions:
The original readme is just an unordered list. Your task is to transform that into a concise description
for a visualization gallery.
Here are the instructions:
* The description should be an html page that you create. Do NOT use markdown. Use semantic HTML elements. Create a valid, complete HTML document.
* The overall style should be simplistic and clean. The page should be black and white only. Align text left.
* Put an <h1> tag on the page with "Visualization Gallery" as the title. Place it in the center. Below it, add a line. Then below that, add the title of the visualization and a description text.
* The description should be clean, brief (max 2-3 paragraphs). It should not have too much detail but enough to understand the idea of the visualization.
* Add a group for metadata keys (source, author, d3, framework, rendering, license) and set their values.
* Mention data, and key visual encodings used in the visualization and why.
* Do not use inline styles. Use CSS classes.
* No JavaScript.
* Be careful with unescaped characters, use HTML entities where necessary.
* You should not output any code. Use HTML.
Remember that the final output needs to be a complete html page and should include everything needed in the <body> to render the page properly (make sure to include the css and an example of the visualization.
Note: The visualization itself will not be included in the page, only the example (the CSS, HTML, and HTML skeleton). So placeholders of where the interactive charts will be should be included.
You can use in the visualization the text from the source code, or with some minimal modification. Use plausible data.
Your final output should include ONLY the HTML (including embedded CSS and JS). No explanations or reasoning.
Important: In your description, focus on the 'what' and 'so-what' of the example—not the how.
The key is to make your description interesting: don't list features, explain what is going on in the visualization and what is interesting about it. 1-2 sentences is enough.
The title should be the only heading. Use no other headings and no markdown.```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>stars · data vis</title>
<style>
body {
margin: 0;
font-family: 'Indie Flower', cursive;
background-color: #111111;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.chart {
width: 90vw;
max-width: 1200px;
height: 300px;
position: relative;
}
.header {
width: 100%;
height: 100%;
}
.headline {
font-family: 'Indie Flower', cursive;
font-size: 44px;
fill: url(#grad1);
}
.trans {
fill: url(#grad1);
}
.no-effect {
opacity: 1;
}
.stars canvas {
position: absolute;
top: 0;
left: 0;
}
.header {
position: relative;
z-index: 1;
}
</code></pre>
Here is the specific information you need to write your description:
Title: stars
The source URL: https://bl.ocks.org/EE2dev/55205b9934f43e1bef5680ce8dbffc55
Author: EE2dev
Short description: This block creates a stunning animated typography effect. The text is defined as SVG `<textPath>` elements positioned along invisible paths, and animated with a starfield of glowing particles via canvas.
You need to write a concise description of the visualization, to be used in a gallery. The description should include:
- The title
- The link to the block
- What it shows
- The data
- The visualization technique
- The design highlights
- Aesthetical notes
The description should be appropriate for an audience of data visualization
practitioners. It should be explanatory and should not contain too much technical
details and never mention code. Keep it short and sweet, around 100 words. Use
markdown, not code, to format the description. The output will be rendered as
marketing material. Do not go beyond 150 words.
Guidance:
* Do not over-explain or write long prose.
* Avoid marketing fluff ("this is breathtaking...", "this is a masterpiece...") and
hyperbole ("highly", "amazing", "incredible", "wow", _etc.).
* Avoid unsupported claims about interactivity (no "interactive" if not
explicit).
* Use paragraph breaks instead of code blocks.
* Focus on what makes the visualization unique.
* Keep it short.
* You must not use the "=" sign in your description. It should be possible to email the description as a plain text file.
* You must only output the description in plain text, no markdown, no html, no formatting.
Target: 4 paragraphs. If the text is too short, you can repeat the essential information. If too long, condense.
At the beginning of the description, add: "###" then two spaces, then the title "stars", then a blank line. Use the exact format shown:
### stars
Note: The number of # is important and must be exact as shown.
At the top level, write the title as "# stars", then "### stars" for the description.
Write in the following format:
# stars
### Description
[Your description here]
### Supporting Figure
### Observations
[Your observations here]# stars
### Description
This animated visualization transforms the phrase "My favorite editor is Visual Studio Code" into a swirling galaxy of glowing particles. Text is rendered along invisible SVG paths and then dynamically replaced by thousands of star-like particles that trace the letterforms. The particles explode from the text paths, traveling along them before dispersing, creating a dynamic, living typography effect. The animation runs continuously, with particles rendering in canvas for performance, while the text paths themselves are defined in SVG. The piece explores the intersection of text, motion, and generative design.
### Observations
- **Dual Rendering**: The visualization leverages SVG for crisp text paths and canvas for the particle system, combining the strengths of both.
- **Dynamic Animation**: Particles are spawned along the text paths and animated outward, creating a "starburst" effect that brings the typography to life.
- **Interactive Feel**: The animation is coupled with a mouse listener option, although it's disabled by default in this instance.
- **Font Loading**: Uses the WebFont loader to ensure the "Indie Flower" font is loaded before the text paths are created, so the text is rendered correctly.
- **Gradient and Effects**: The text is filled with a multi-color gradient, and the canvas uses blur and contrast filters with a "lighter" blend mode, making the stars glow against the dark background.
- **Custom Paths**: Text can follow either straight lines or curved paths, with the final text on a curve, as shown in the code.
- **Star Particle System**: The animation uses a particle system (via the `App` class) that spawns star particles along the text paths, creating a dynamic effect. The code also includes options for mouse listeners, textures, frames, and filters for the particles.
- **Text and Path Sync**: The start and end points of the paths are calculated based on text length and path length to ensure the animation aligns with the text.
- **Customization**: The code is modular and can be easily adapted for different text, fonts, and styles.
### Additional Details:
- **Frameworks and Libraries:** D3.js v5 for DOM manipulation and SVG rendering; WebFont for loading the "Indie Flower" font to ensure text layout works.
- **Dependencies:** Uses `d3.v5`, `WebFont`, and a custom `stars.js` class (presumably for particle management).
- **Dynamic Behavior:** The visualization responds to browser resize; the text scales to fit the container width, and stars animate along the path.
- **Visual Effects:** Particles are created along the text path, using canvas layering for the animation. The text is created using SVG with a linear gradient.
New metadata:
- title: Stars
- author: EE2dev
- license: MIT
- date: 2024-12-20 (current date)
- framework: d3
- d3 version: v5
- source: https://gist.github.com/EE2dev/55205b9934f43e1bef5680ce8dbffc55
- demo: https://bl.ocks.org/EE2dev/55205b9934f43e1bef5680ce8dbffc55
- viz: network, animation
- rendering: svg, canvas
Visual description:
(Please fill in the details: Name the used visualizations/grammar and what is shown in it. Describe the visual in 5-7 sentences. No need for implementation details.)
The visualization is an animated typography piece that renders the sentence "My favorite editor is Visual Studio Code" across multiple lines, where text is drawn along curved paths. ...
```
I have a partially written description. Complete the description of the visualization by filling in the blanks. Use the files above to be as specific as possible. Also make sure to describe the animation and what the visualization is about (not the code implementation details).
---
The visualization is an animated typography piece that displays the message "My favorite editor is Visual Studio Code" in an artistic way. It uses D3.js to create a dynamic and engaging presentation. The text is rendered as SVG along paths, with each line following a unique curve or line, and the last line follows a curved path. The animation is the core feature: a starfield of glowing particles follows the text paths, tracing the letters as they are written. The particles are created using the HTML5 canvas and layered over the SVG text with a "lighter" blending mode and a gradient that cycles through colors (pink, blue, purple, orange, green). The text fades in with a special effect on the final line, while the preceding lines remain static.
The visualization is driven by a starfield particle system (stars.js) that generates particles along each text path. The result is a visually striking, animated intro where each word is "written" by glowing star particles, with the text path being highlighted as particles travel along it.
The design uses a dark background (`#111111`), a multi-color gradient text, and a glowing star effect to create a dynamic and engaging composition. The text "My favorite editor is Visual Studio Code" is placed in the center of the screen and animated as star particles. Text paths are defined for each line, with the last line curved, while earlier lines are straight. The stars follow those paths, creating an effect of the text being drawn by moving particles.
Also, the code adds custom SVG paths (not shown) and animations for the particles; see the original code for details.
Key technical implementation details:
- Uses WebFont to ensure the text is fully loaded and rendered before positioning it
- Creates an SVG with `<textPath>` elements to position text along a path
- Draws the text as a **gradient** (`linearGradient`) with colors that go from pink to cyan to purple to orange to green-yellow
- Text is animated by calculating the path endpoints and durations from the text length
- The particle system uses a canvas for rendering (max 2000 particles) and is the base for the stars animation
- The stars animation is a custom App class (in stars.js)
- Canvas animation uses the `lighter` blend-mode to achieve the glowing stars effect
- It also uses two SVG filters: `blur` (50) and `contrast` (300) for the glow effect
- The animation runs via `requestAnimationFrame`, spawns star particles, and animates the text along the path by calling `app.spawn(p.x , p.y)` and `translate(0,0)`
The description should be at most 4 sentences, fit in a single paragraph, and not mention any file names. It also should not mention licensing. It should be a concise description of the visualization, not a tutorial. Avoid mention of the source, or the author of the gist. Do not use the word "simply". Mention if it is animated.
Description:
This visualization animates a short, multi-line message by rendering the text as SVG paths and then generating star-like particles that travel along the precise contours of each letterform. The animation uses a combination of SVG for the text paths and a canvas-based particle system, where the text transitions between three phrases using path-following particle streams. A vibrant gradient, dynamically blurred and contrast-boosted, is applied to the moving particles, set against a dark background, creating an elegant and attention-grabbing visual effect.