100%

SVG text experiment - Generative poetry

✓ Published2🌍 Public

Last edited Jun 24, 2020

Created on Jun 18, 2020

Forked from SVG text experiment - Text along a complex path

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.

AI-generated description

Generative Text

Plan

Have artist create a taxonomy of meaning for the words used in his texts
Structure data to allow for easy manipulation and selection
Create an interface that allows artist to play around with generative features

interface

Host a simple js+html+css interface (on vizhub?)
X-number of dropdown menus for each textual dimension
Y-number of generated texts in simple html
Additional features like randomization, length settings (total length but also lenght of sentences)

Changelog

Added a sentence length input field
Added an accepted meaning level input field (changing it from 1 to 2 means words with a secondary dimension will also be mapped to that dimension)

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

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

65% match