This was one of the first things I animated. The idea was simple, can our logo become animated. This was more of a training exercise than anything.

Given that the logo is essentially just a cursive N inside of a circle, maybe there can be a handwritten effect to create the N as if it was being hand drawn. Easy right?

Well yes it is. Animating a drawn letter is pretty easy, you’ll get a lot of tutorials if you just look it up on YouTube.

But with animation I’ve come to learn that the small details make things way more complex.

So the way to do this is:

1. Make a mask over the N using a line
2. Reveal the mask over time, revealing the N

There are a few parts that make this difficult.

Thin Line

Thick Line

Thick Line

Problems:

The N is not an equal size. If you use a brush too thin, it won’t reveal the entire N

If you make the brush too thick, it will reveal the cross section of N

<aside> 📖 When learning animation you quickly realise tutorials makes a lot of assumptions about the simplicity of the use cases. Cursive fonts overlap a lot and therefore single path lines struggle to create the effect needed without some adjustments.

</aside>

The way I chose to tackle this issue was to split the stroke into 2 parts. Part 1, the first thin line and part 2, a thicker line for the rest of N after the intersection was crossed