animate-svg | make procedurally generated animations using svg | Animation library

I made a svg and animated it to write out my text. I want it to have thick brushstrokes and look similar to this website(http://weaintplastic.com), writing out letters one by one. At the moment it just traces the letters at the same time making it hard to read the word and the lines are very thin. I would like to make the brushstrokes thicker and to animate each letter to write out one at a time with html and css.

I created my svg on this website(https://vectr.com/) by using their text function and then sketched the path of each individual letter with the trace tracing each individual letter with the pen tool. I used this link to open the svg https://jakearchibald.github.io/svgomg/ and copied the svg as text. Then I followed the instructions on this website to animate it https://dev.to/oppnheimer/you-too-can-animate-svg-line-animation-jgm.

Here's the link to my code https://codepen.io/anon/pen/JgEadZ#anon-signup

html with svg path

I am following the tutorial at https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/ and I'm trying to put everything inside an svg but the js part uses Snap and doesn't work.

I tried

NOTE: I have a feeling that the answers to this question will rely on the dashed stroke trick often used to answer questions about animating svg path ( e.g. Animate svg path, and the countless other similar questions). If possible, I am looking for an answer that does not rely on dashed lines.

Suppose you have an SVG with a path between some number of objects. You know where the objects are centered and their width. In principal you could calculate a path that only goes from the the edges of each object. However, this can be tedious. So how can you specify a path form object 1 to object 2, but offset the drawn part so it is only shown from the edges?

In the code below, the first path between two points uses their center. This is how I want to specify my path. The second path is how I would like the path to be rendered. e.g. I am looking for some attribute like offset-from-start=10 and offset-from-end=10 to do this. If the path is compound or if the object has an irregular shape, calculating the angle of the shorter path is tedious (but straightforward). In addition, using a shorter path, changes curves, where hopefully this offset does not.

I want to change the size of Rocket in below source code:
https://jsfiddle.net/umaar/4FMyA/
I have been trying many ways, but still has no effect.
Actually, I want to make the Rocket a bit smaller.

Thanks