love sosa

100%

✓ Published0🌍 Public

Last edited Feb 9, 2018

Created on Feb 9, 2018

A canvas animation cycles through the lyrics of Chief Keef’s “Love Sosa,” one word at a time. Each word is rendered as a thick, growing outline that alternates between black and white, with the outline’s width expanding frame by frame via a `d3.timer` loop. The text is drawn using the Canvas 2D API’s `fillText` and `strokeText`, with two layered canvases—one for the current stroke and one for the accumulating composite image. The source data is the song’s lyrics, split into an array of words.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/TylerVaughan/'>TylerVaughan</a>'s block: <a href='http://bl.ocks.org/TylerVaughan/06250ec74ff2b6890f0ca16a6849d3a1'>love sosa</a>

mit Licensed

Similar vizzes

Loading thumbnail…

love sosa

The visualization cycles through the words of a Chief Keef monologue, displaying each word in large Helvetica type at the center of a canvas. As each word appears, an animated outline stroke draws over the text, alternating between white and black line widths to create a flickering, hand-drawn effect. The animation uses d3.timer to drive the stroke progression, with two canvas layers—one for the static fill and one for the dynamic outline—composited via `drawImage`. The source text is split from a hardcoded string in the code.

TTylerVaughan

94% match

Loading thumbnail…

chief keef

The visualization cycles through the lyrics of Chief Keef’s monologue, displaying each word in large 300px Helvetica Neue type on a canvas. A d3-timer drives the animation, alternating white and black outline strokes that thicken and overlay in a flickering, glitch-like effect. The code uses two canvas layers—one for the base filled text and another for the stroked outlines—combined via `drawImage` to create the shifting stroke pattern. It renders each word sequentially, clearing and redrawing as the timer progresses through the text.

TTylerVaughan

77% match

Loading thumbnail…

chief keef

The animation displays the lyrics of a Chief Keef monologue, cycling word by word in a large centered typeface. Each word is rendered first as a solid fill, then repeatedly redrawn with an expanding outline that alternates between white and black, creating a flickering, hand-drawn effect as the stroke width grows. The code uses two stacked HTML5 Canvas elements and the d3-timer library to drive the frame-by-frame stroke animation, with the text sourced directly from a hardcoded string split into individual words.

TTylerVaughan

76% match

Loading thumbnail…

Hello

This example animates the lyrics of Adele’s “Hello” as a sequence of individual words. Each word is briefly rendered as a large, thick outline that rapidly flickers between black and white while alternating line widths, creating a shimmering, glitch-like effect before the next word appears. The visualization runs on a canvas and uses a double-buffering technique with two canvases: the first renders the text outline, and the second composites the stroked text and previously drawn frames. The animation is driven by a d3-timer callback that steps through each character, using Canvas strokeText and drawImage to build the layered, pulsing appearance. The word list is derived by splitting the song’s lyrics on whitespace.

Mmbostock

68% match

Loading thumbnail…

fresh block

The animation displays the lyrics of Adele’s “Hello” as large words that are sequentially drawn and then stroked with expanding, alternating black-and-white outlines. Each word is rendered on a canvas, then copied to a second canvas where the outline effect is applied before being drawn back, creating a flickering, ghostly transition. The code uses d3-timer for the animation loop and the Canvas 2D API’s `fillText`, `strokeText`, and `drawImage` methods. The text is sourced from the song’s lyrics split into individual words.

TTylerVaughan

66% match

Loading thumbnail…

Hello

This animation cycles through a LinkedIn connection request phrase, displaying each word briefly before moving on. A word renders in large black text on a canvas, then a second hidden canvas progressively draws a white outline with a thick, alternating white-and-black stroke, creating a glitch-like contour effect. The result is composited back to the main canvas, producing a decaying visual echo. It uses the d3-timer library to drive frame updates and the Canvas 2D API’s `fillText`, `strokeText`, `drawImage`, and `clearRect` methods.

SStephen

66% match

Loading thumbnail…

words

A short text passage cycles through individual words, rendering each word in large Helvetica Neue type that is repeatedly redrawn with an expanding, alternating purple and gold outline. The animation uses the Canvas API with `fillText` and `strokeText`, layered across two canvas elements via `drawImage`, while a `d3.timer` loop drives the stroke width and color changes. The word list comes from a hardcoded string in the source, split on whitespace.

TTylerVaughan

65% match

Loading thumbnail…

Jagged Hello

This example displays the lyrics to “Hello” by Adele as a sequence of words, each briefly flashing in large type before dissolving into jagged, outlined strokes. The animation cycles through every word of the song, using a canvas-based drawing loop and the d3-timer library to control timing. Each word is first rendered as filled text, then repeatedly redrawn with alternating black and white outlines of increasing width, creating a shimmering, glitch-like effect on a single HTML5 canvas.

CCurran Kelleher

63% match