Skip to main content
SimilarExport ZIP
100%

SVG text experiment - Text along multiple paths

✓ Published1🌍 Public
LLaurens
Last edited May 29, 2020
Created on May 29, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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
90% 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
79% 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
78% 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
75% match
Loading thumbnail…

Animated textPath

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.

Mmbostock
75% match
Loading thumbnail…

SVG text experiment - Animating texts using d3+Greensock

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.

LLaurens
74% 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
74% 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
74% match