Skip to content
A tool for selectively replacing pieces of text in a web page with "spiffed-up" text in either SVG or CANVAS elements.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
readme-graphics
LICENSE.OneWindyNight.md
OneWindyNight.js
README.md

README.md

OneWindyNight

OneWindyNight (OWN) is a tool for selectively replacing pieces of text in a web page with "spiffed-up" text in either SVG or CANVAS elements.

The OneWindyNight home page is chock full of demos!

Features

Implementing animated drop caps and pull quotes was the original use case. Right now, one animated-text handler, which manipulates an SVG representation of the target text via CSS animation, is built in. Here's what it looks like:

Animated GIF showing the OneWindyNight-ified first word of a paragraph

How to use OWN now

  1. Get opentype.js or opentype.min.js file from the opentype.js project's master.zip file.
  2. Select a TrueType and OpenType font with a friendly license. I've used Claus Eggers Sørensen's lovely PlayfairDisplay-Bold.ttf for the OWN demo page.
  3. Get OneWindyNight.js from the OWN master.zip file.
  4. View-source of the OWN demo page to see how it's used.

Roadmap

  1. Add more animated-text handlers.
  2. Make adding new animated-text handlers more straightforward.

Thanks!

I'm grateful to everyone whose hard work made writing OneWindyNight feasible, particularly to the authors of the awesome opentype.js project and to typeface creators like Claus Eggers Sørensen who have made their work available for creative reuse!

Thanks also go out to Cockos Incorporated, the creators of LICEcap, the free and excellent tool which I used to record the animation sample shown above.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.