← back to the archives 🥬

Real kinetic type with JavaScript

Oliver Norred, 24 December 2020

I can wiggle around these SVG points with JavaScript. The opentype.js library helped convert the text from a font file to SVG.

It gets every point’s y-coordinate from a constantly translating1 sine function of its x-coordinate.

That means the glyphs themselves wobble, not just the words.

Cool right?

  1. The function : y += 10 * Math.sin(x + g) , where *g* increases by 0.1, 60 times per second. Units are SVG “points” or whatever. I’ll never understand those.