Skip to main content
SimilarExport ZIP
100%

SVG text experiment - Text along a complex path

✓ Published2🌍 Public
LLaurens
Last edited May 22, 2020
Created on May 20, 2020
Forked from Js template

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.

AI-generated description

Exploring SVG text projections

In this experiment I'll explore how text can be oriented alongside geometric shapes. This is related to an art project I'm cooperating in :)

Experiments

Align text along a path

Using the svgjs lib I've been able to align text to a path quite easily. There are some downsides though:

  • Drawing SVG paths is a bit annoying. I;ve been using this online tool but it's quite tedious for more complex shapes.
  • It's hard to orient the text per line segment in the current setup. Ideally, you would create a segment, write text to fit it and then move on to the next segment. Each segment should be draggable.
  • Any symbol made out of several paths instead of one continuation of line segments will be hard to map text to.

Animation

I've played around a bit with svgjs' animation options. They work really well for text. Something I still want to try is moving the text along a shape. This should be doable for a simple triangle but will prob be nearly impossible for any shape made out of several paths.

Text dump

Don't like it? Join.

Start thinking about the ritual as a game

A game in which the rules are not clear

take a step, jump.

Build a tent. With rope and bed sheets and everything you can find

Scream: THIS IS AN INVITATION

Start sleeping under art in public spaces.

Stare at the moon all night long

Sit on a chair and face the highway whilst the city wakes up

Give rooms arms, legs and eyes

Give 10 children, 10 crayons. One crayon each. Exhibit their findings

Politicise the jigsaw puzzle,

enter the livingroom.

create integrated environments

consisting of ritual objects, spatial adaptations

and LIVING PEOPLE

waar zit het rituele potentieel in ons dagelijks bestaan?

A ritual space

In which objects and people are in constant communications

invite people to PROTEST

find 50 words for silence

think of 1 symbol for loneliness

move, paint, sit, sing, scream, write

Talk to the DEAD and the LIVING

call on the collective

Call for collaboration

to wait, to be bored, to play,

give a voice to the voiceless

speak without a tongue

uuuuuuuuuhhhhhhhhhhhhhhhhh

Don't like it? Join!

Every aspect of your being.

Your body, Your mind, Your habitat, your time

is being mined, excavated and sold

plaats jezelf in een onconfortabele positie

durf te provoceren

afkeer, woede, twijfel op te roepen

write a manifest

loop door zuid-wtc en kijk naar de gezichten

Assemble a lot of chairs

give a lecture about the history of chairs

organize a workshop about sitting

start sitting in public spaces

Perform an artist, exhibit the methods, showcase the process.

mediate creativity.

become one with creative energy

Talk to objects.

Converse with stone and sand, with eart and salt.

Place candles in a circle

stand in the middle and whisper...I AM NOT A MINE

THIS IS AN INVITATION

dont like it? Join

MIT Licensed

Similar vizzes

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
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
77% 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
76% 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
76% match
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
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 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
72% 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
72% match