Just a silly little program to animate drawing characters.

Input

Text text to be animated. Supports latin letters, japanese kanji and kana, and some punctuation. Unsupported characters will be skipped.

Timing

Per Stroke fixed time, in ms, to animate each stroke.

Per Stroke Length variable time, in ms per stroke length, to animate each stroke.

Between Strokes fixed time, in ms, to start the next stroke starting from a percent completion of the previous stroke.

Between Characters fixed time, in ms, to start the next character starting from a percent completion of the previous character.

Animation

Preset select a sample animation.

Draw read the current selections and play the animation.

Pause pause or resume the current animation.

Reset reset all selections.

Demo play all sample animations.

You can also click on the progress bar at the bottom to jump to a particular point of the animation.

Drawing

Animation determine how the characters will be animated.

Strokes

Animate the drawing of each stroke.

• Incremental draw the stroke over the duration.
• Lead-in draw the stroke over the duration and extrapolate from the starting point to the ednge of the screen.
• Complete draw the full stroke at once.

Warp

Animate each point of the stroke out from the center and stretching it back toward the center.

Scan

Pass a line across the character adding a stroke during each pass.

Point Filter

Apply a filter to the points that make up each stroke.

• Sine Add a sine wave of the given period and amplitude to the points of the stroke.
• Spiral Move the stroke in a circle and out from the center over the duration of the stroke.
• Drip Points fall from the top of the screen. Each point falls over the specified percent of the total stroke time.

Pen

Determine how the stroke is drawn.

Style

• Round draw the stroke with circular points with the specified radius.
• Angled-Fixed draw the stroke with a line at the specified angle and length.
• Fade-In draw the stroke with circular points with the specified radius that start transparent and fade in over the duration.

Acknowledgements

Stroke information is extracted from KanjiVG by Ulrich Apel, available under the Creative Commons Attribution-Share Alike 3.0 licence. See kanji.js in the source, the STROKES map contains the original path and a list of absolute SVG path commands.