SVG Animation

• 

  Animation of my name

Inspiration

I was planning on building a personal website at this hackathon when I started playing around with SVG animations. An svg is a vector format image that does not lose resolution as its size is increased. In addition, the file is saved as xml text, so the data can be directly copied into an html file, and it will render perfectly. This also means that SVG images can be controlled by CSS styling and Javascript, leading to some really cool possibilities.

What it does

This is a small javascript program that can write out svg text, mimicking human brush strokes. It is mostly an appealing animation, with some complex logic for creating the brush strokes in the correct order and direction.

Challenges I ran into

Since English has no defined rules for brush stroke order when drawing characters, it was very difficult to create a logical rule that could be applied to any letter. Almost everything I came up with had some exceptions. In addition, SVG animations with the Snap SVG library are asynchronous, and run completion handlers when they finish. I attempted to loop through each letter and place the code to animate the second stroke in the completion handler of the first. However, by the time that code ran, the loop had completed and all of the variables I passed in were out of scope. To combat this, I had each animation recursively call the next, creating a responsive and properly timed animation.

Built With

• adobe-illustrator
• javascript
• snapsvg