Skip to main content
SimilarExport ZIP
100%

SVG text experiment - Choreography of elements

✓ Published2🌍 Public
LLaurens
Last edited Mar 7, 2023
Created on Jul 13, 2020

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.

AI-generated description

Choregraphing elements SVG elements created by d3 and animated using GreenSock

I've created this fork so I can do fancy animations here and let the other viz remain stable.

Steps

  • Some refactoring: Artist can now edit settings in the settings file.
MIT Licensed

Similar vizzes

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
89% 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
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
85% 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…

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

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees
73% 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
73% match
Loading thumbnail…

Gist 7330771

This example demonstrates how D3 transitions make data joins easier to follow by animating the entry, update, and exit states of SVG text elements. It shows a sequence of randomly selected alphabet letters that change every 1.5 seconds, with entering letters sliding down from above, exiting letters dropping below, and updated letters gliding horizontally to their new positions. The code uses D3’s selection joins with key functions, `transition.attr` and `transition.style` to animate positions and opacity, and relies on SVG text elements rendered in a single group. The data is a shuffled subset of the alphabet, sorted and re-joined with each interval.

11wheel
73% match