Skip to main content
SimilarExport ZIP
100%

SVG text experiment - Animating texts using d3+Greensock

✓ Published1🌍 Public
LLaurens
Last edited Jul 15, 2020
Created on Jul 8, 2020

Eight cards containing associative words and short texts orbit a central call to action on a dark background. The words “Body,” “Audience,” and “Precarity” repeat with varying prose, each card’s text tracing a rectangular path via SVG `<textPath>` elements. Using d3.v5 for dynamic SVG creation and Greensock (GSAP) for animation, the text strokes sequentially into view from a hidden start offset, with `gsap.from` controlling the `startOffset` attribute per card. The final invitation fades in after all cards finish animating.

AI-generated description

Animating text along a path using d3+greensock

Steps taken

  • Start from an old greensock example, here
  • Move all svg code to js so elements can be created and manipulated dynamically
  • Clean up this project so it can be used as an examle or template
MIT Licensed

Similar vizzes

Loading thumbnail…

SVG text experiment - Choreography of elements

A circular arrangement of text cards, each containing a category label and a body of related words, rotates continuously around a central statement. The central text repeatedly fades out and rewrites itself with a new sentence composed of words from the taxonomy dataset. D3.js (v5) constructs the SVG elements and performs the text transitions, while the GreenSock (GSAP) library animates the cards' rotation and the progress of text along SVG paths.

LLaurens
86% match
Loading thumbnail…

SVG text experiment - Choreography of elements

A text choreography experiment arranges four cards of poetic and reflective prose around a central, pre-defined circular path on a dark SVG canvas. Each card's text is bound to a hidden rectangular path using `textPath`, with D3.js v5 handling the initial positioning and rotation of the elements around the circle's center. The GreenSock Animation Platform (GSAP) timeline then animates each text's `startOffset` from `-100%` to `100%`, sequentially drawing the words along their paths. Finally, a centered invitation text fades in via `gsap.to`, completing the staged performance.

TThijs-hub
86% match
Loading thumbnail…

SVG text experiment - Interactive tool

This interactive tool arranges text cards around a central, dynamically generated phrase, drawing words from a CSV taxonomy of themes like body, material, and action. Users can adjust settings such as card count, theme, and pattern to remix content in real time. The visualization uses D3.js to load data, render SVG, and transition text, while GSAP’s TimelineMax and TextPlugin handle card rotation and path-based text animation. Center text updates recursively via D3 transitions, creating a generative brainstorming interface.

LLaurens
84% match
Loading thumbnail…

SVG text experiment - Text along multiple paths using GreenSock

A short, looping animation moves the word "served" along a rectangular path rendered in an SVG. The path is drawn using `d3.path().rect()` and attached to the text element via an `href` reference, while GreenSock's `gsap.from` with an `attr` tween animates the `startOffset` attribute of the `textPath` from 100% to 0%. The example demonstrates combining d3 for path construction and SVG creation with GreenSock for attribute-based animation, all within a fixed 1000x500 viewBox.

LLaurens
81% match
Loading thumbnail…

SVG text experiment - Text along a complex path

SVG text experiments place a poem along an irregular, hand-drawn path using the svg.js library. The custom path, defined with string commands, guides the red text, which users can edit via an input field, triggering a keyup event to update the tspan elements. The piece explores text orientation along complex geometric shapes and animation possibilities within an art project context.

LLaurens
74% match
Loading thumbnail…

SVG text experiment - Text along multiple paths

An interactive SVG experiment renders user-supplied text along a closed rectangular path, using the @svgdotjs/svg.js library to construct the drawing. Typing in the input field updates the text via a keyup listener that calls customTextPath.tspan(). The display shows a static pink text block, while commented-out code hints at attempted animation of text along Bézier curves but remains inactive. The visualization explores the limits of automated text placement on multiple geometric paths.

LLaurens
74% 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
72% match
Loading thumbnail…

Fun with &lt;text&gt;

This demo shows three different SVG techniques for giving `<text>` elements a white outline so they remain readable on varied backgrounds: two stacked text elements with a thick stroke, one text element using the `paint-order` attribute, and a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge` effects. A dark green backdrop provides contrast. The D3 v4 code includes zooming and panning via `d3.zoom`, and interactive controls adjust font size, stroke width, rotation, and other text properties. Users can set initial camera position and parameters through URL search parameters.

HHerst
72% match