100%

SVG text experiment - Interactive tool

✓ Published0🌍 Public

Last edited Oct 30, 2020

Created on Sep 26, 2020

Forked from SVG text experiment - Choreography of elements

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.

AI-generated description

Developing the work into a creative tool used for brainstorming and discussion

Live demo

Latest version can be seen here

Purpose

The artist has pivoted the purpose from 'invitation' to 'interactive tool'. The idea is that this tool could be used while working with other artists, allowing them to play around with different roles, materials, subjects. In this matter it can be used for brainstorming and discussion. The goal is to come up with new rituals.

The initial plan was for the artist to change some settings and then send people a link which shows them a choreography of moving elements with specific text content. Now, the content(which categories are active, what pattern should determine the suggestive text in the middle) and format(how many cards should be shown, what should be their orientation etc.) should be changeable at run time, allowing for a more interactive 'tool' experience.

Features

In Progress

Create an admin panel with the following settings
- Turn on/off categories which will be used for content creation
- Number of cards
- Theme Pattern
- Reload button which generates new content
- Pattern for center text
- Card width and height
- Circle radius
Remove all choreography and animation
Allow all text to be changed when clicking on it (in a separate text box)

Done

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

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

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

81% match

Loading thumbnail…

SVG text experiment - Generative poetry

This interactive tool generates poetic sentences based on a taxonomy of word meanings across dimensions like time, body, emotion, and communication. Users select a sequence of dimensions via dropdown menus, set sentence length, and adjust an accepted meaning level. The interface uses d3.csv to load the data, and d3 selections to bind options, handle change events, and append generated sentences as paragraph elements.

LLaurens

79% match

Loading thumbnail…

SVG text experiment - Generative poetry restructured

This visualization presents a generative poetry interface where users construct sentences by selecting sequential textual dimensions from dropdown menus. The system loads word categories from a CSV file via `d3.csv` and dynamically creates dropdown menus using D3’s selection and data-binding methods. Each sentence selects random words from the chosen categories, with a length adjustable through an input field. The interface renders twenty generated sentence variations in HTML paragraphs, producing associative, often thought-provoking lines from the taxonomic word data.

LLaurens

79% match

Loading thumbnail…

SVG text experiment - Generative poetry -3

This interactive text generator lets users compose poetic sentences by selecting consecutive semantic dimensions from dropdown menus. The interface displays twenty generated word sequences, each built by randomly picking words from a taxonomy CSV file that match the chosen dimensions. The example uses d3.csv to load the data and d3.select with method chaining to dynamically populate select elements and render output paragraphs. Words are filtered through JavaScript array methods like filter and includes based on their assigned dimension categories.

LLaurens

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

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

76% match