Animated textPath

100%

Animated textPath

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 20, 2012

This example animates a blue arc expanding while the text “Hello, curved textPath!” follows its path. The code uses d3.svg.arc with interpolated angles and a transition.attrTween on the path’s “d” attribute. Two WebKit workarounds are shown: selecting textPath by class and repeatedly resetting its xlink:href attribute to force redraw. The SVG includes a path and textPath element, with the text appearing scrunched at the start due to the technique’s limitations.

AI-generated description

This example demonstrates how to animate a path and a textPath at the same time. I wouldn’t use this technique—the text is scrunched up at the beginning of the arc at the beginning of the animation. Instead, I would use the arc to clip the text, so that the text is revealed as the arc expands.

This example also demonstrates two unfortunate bugs in WebKit browsers:

You can’t select textPath elements because of a bug in how WebKit handles case-sensitive element names. See bug 83438. WebKit shows no sign of fixing this bug, unfortunately.
Updating a path element by itself does not trigger redraw on dependent elements that reference this path. So, even though we update the path, the referencing textPath element will not be redrawn. To workaround this update bug, we create a custom transition that repeatedly sets the textPath’s xlink:href attribute to “#path”.

See related Stack Overflow question.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Animated Clipped textPath

This example animates an SVG path while simultaneously clipping curved text against it, so the text appears to draw itself along the arc. A blue arc path transitions over five seconds using `transition.attrTween` with a `d3.svg.arc` generator, while a `<textPath>` references a static hidden path and a `clipPath` uses the animated path via a `<use>` element. The code relies on D3 v3, SVG, and a 960×500 viewport, with the text “Hello, curved textPath!” clipped to the moving path’s shape.

Mmbostock

90% match

Loading thumbnail…

Text Path example d3 v4

This example demonstrates interactive text along a draggable path using D3 v4 and SVG. It shows how text can follow a curved path defined by a `d3.line` with a `d3.curveBasis` curve, while the path itself is editable through drag events. The initial path is a circular arc, and users can modify the text via an input field. The code uses D3’s `drag` behavior, `path.attr("d")`, and `textPath` to update both the curve and the text position dynamically.

CChandrakantThakkarDigiCorp

79% match

Loading thumbnail…

text path example

This example demonstrates how to render text along curved SVG paths using D3 v4. Two dashed, tomato-colored paths are drawn on a light gray canvas, and each path serves as the baseline for a line of text. The text elements are anchored at the midpoint of their respective paths using `text-anchor: middle` and `startOffset: 50%`, with steel-blue fill from the CSS. The visualization shows how D3’s `d3.line()` with `curveBasis` can generate smooth, arbitrary paths, and how SVG's `<textPath>` reuses those paths to align text along the curves, illustrating a simple technique for creating curved typography.

EEE2dev

79% match

Loading thumbnail…

Text Along a Path

This example shows how to place text along a curved path using SVG’s `textPath` element. A visible gray curve is defined in the SVG `<defs>` section, and the sentence "We go up, then we go down, then up again." follows that path via an `xlink:href` reference. The code uses D3 v3 to build the SVG structure, appending a `<path>`, a `<text>` with a `<textPath>`, and a `<use>` element to display the curve.

Mmbostock

79% 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

76% match

Loading thumbnail…

animated arc

This example animates a set of orange arc segments that expand and fade out over time, creating a wave-like effect. The visualization uses SVG paths generated by the `d3.arc` generator, with a `clipPath` (a 200×200 rectangle) to constrain the arcs' visibility. A single transition, invoked via `transition.attrTween`, interpolates each arc's inner and outer radii from 0 to 300, while `style("opacity", 0)` fades them out. The animation runs over 4 seconds with staggered delays of 200 milliseconds per arc, using `d3.easeLinear`. Ten arcs are created from an array of empty objects, and the code relies on D3 v4.

EEE2dev

76% 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

75% match

Loading thumbnail…

CDF test!

This example demonstrates an interactive text slide animation on an SVG canvas. It shows a message that shrinks and is replaced by an arrow symbol when clicked. The code uses d3.js to append a text element and a path, then links the text to the path via a `textPath` with a `startOffset` attribute. A click event triggers a transition that animates the `startOffset` to slide the text out of view, then swaps the text content after the animation ends. The rendering uses SVG and d3 transitions with a duration of 750 milliseconds.

CCBasis

74% match